“You still have a flip phone?!?!?”
This question, and the shock it causes following the answer of “yes,” is the reason as a web developer you better know a thing or two about mobile web development. In March 2012,smartphone ownership officially eclipsed feature phone (flip phone) ownership in the U.S. Mobile web traffic growth will continue to rise at a staggering pace.
If that’s not enough, maybe an infographic will paint a clearer picture…
Things to keep in mind when developing for mobile
If you are not already familiar with developing a website for mobile devices, it’s never too late to get started, and it’s as good a time as ever to get your feet wet. While the techniques for mobile website development are still very immature, there is a solid foundation of ideas in place to guide development strategy.
In our Mobile Web Development Primer, we’re going to introduce you to what may be somewhat obvious, yet are very important considerations that define the techniques used in mobile website development. These considerations should be “omnipresent” when developing any mobile website or web application.
1) Screen sizes are smaller, and there are two orientations
This one is REALLY obvious, but it must be stated. Mobile devices have much smaller screen sizes than their desktop counterparts and in most cases, they offer two different screen orientations. For web designers, this concept is of utmost importance. For web developers, this is important because it sets the stage for how your HTML and CSS is written.
So what is the minimum screen resolution?
For the purposes of prototyping, typically, the 3rd generation iPhone resolution of 320×480 (portrait) and 480×320 (landscape) is used as a baseline resolution. With that said, mobile websites should always be developed to feature anadaptive / responsive layout. With this type of layout paradigm in place, your website should conform to the size of the screen and adjust based on predefined minimum and maximum pixel dimensions. Responsive layouts take developing for specific screen resolutions out of the design/development equation and resolutions become more of a tool than a limitation.
2) Processing power and speed
Although mobile CPUs and GPUs are making impressive strides toward catching up to their PC/MAC brethren, chances are mobile devices will always have significantly less data and graphics processing power than their desktop/laptop counterparts. This is due in large part to the fact that there are many more limitations on power consumption in mobile processors. With these limitations, the power-hogging features that are found in PC CPUs and GPUs cannot be used on mobile devices. Since phones are run on batteries and long battery life is essential to the usability of a mobile phone, power consumption needs to be kept to a minimum at all times.
The relative lack of processor power is the primary reason many phones cannot handle true multitasking very well and have a more sluggish performance on the web. With this in mind, it’s important to make sure that 3rd party plugins like Flash are not used, web video is optimized properly and heavy graphical manipulation is kept to a minimum so that your website can be displayed without using up too much processing power.
3) Speed of connection
While 4G is giving broadband a run for its money in speed tests, you would be hard-pressed to find a phone that can consistently connect at optimal 4G speeds anywhere in the US. The vast majority of smartphones in 2012 are connected to 3G, which provides speeds significantly slower than 4G and broadband connections. In addition, the quality of the cellular signal also needs to be considered with both 3G and 4G. There are more variations in speeds on a mobile phone than there are on a broadband connection due to signal strength. Limiting the number of front end resources and making less HTTP requests on your website go a long way in keeping your website loading quickly even with slow connection speeds.
Here is a summary of typical mobile download speeds:
3G: Up to 2mbps
4G: Up to 8mbps
Broadband: Up to 50mbps (Lower level services off about 5-10mbps download)
4) Taps and touches need to be responded to
Have you ever tapped a person on the shoulder to get his or her attention and you get no response? It’s a little bit awkward. You’re left feeling unsure about what to do next. Debating whether another tap is necessary, if you should seek other means of getting the person’s attention, or if you should just leave the person alone and get somebody else’s attention… This experience is similar to how it feels when you tap a mobile device and nothing happens. If there is not some indication that a tap on a mobile device has been received, it is an awkward experience for the user.
While it’s simple in concept, in practice, providing users immediate feedback is oftentimes ignored. Interaction with a mobile device demands immediate response. Due to the inaccuracy of the input device (fingers) and the lack of physical reassurance from the mobile device itself that an action was received, it’s very important that every applicable tap on mobile device screen is met with an immediate response from the website or application. This means that things like active states in CSS are extremely important so that users are made aware that their tap successfully triggered a response before loading begins. This is a crucial element to developing a user friendly mobile website.
Also, (let’s get this out of the way) there is no such thing as hover on mobile devices. Some browsers have utilized the “quick tap” as the equivalent to hover for the sake of making full websites as usable as possible, but it’s not very user friendly and should be considered a workaround rather than a legit interaction.
5) The attention span and patience of mobile users is low
Possibly the most important thing to consider when developing a website for mobile is that when people are browsing the web on a mobile device, it should always be assumed that the person is on-the-go. Mobile web users do not have the time or patience to wait for content to load, or navigate through a confusing interface.
Keeping this in mind should result in an interface with optimized resources and speedy performance to complement a very simple, streamlined interface. Simple, right? Hopefully it is!
Conclusion
Taking all of these things into consideration before developing a mobile website will ensure that your mindset is out of the desktop and into the fast-paced work of mobile with slow connections. There are fundamental differences between developing a website for a desktop browser vs. a mobile browser, and these differences revolve primarily around optimizing for speed and small screen sizes.
