The number of people browsing the Web from a mobile device has
more than tripled since 2009, and it is sure to continue growing, with browser platforms such as iOS and Android offering mobile browser support that is almost identical to what we have come to expect from a desktop experience. As the mobile consumer market continues to grow, so will the aspirations of individuals and companies who look to embrace what the mobile Web has to offer.
With this in mind, many website owners have begun to develop a strategy for providing information and services to their mobile visitors. However, mobile strategies can vary massively from website to website, depending on what the company wants to offer visitors. For example, eBay’s strategy will be very different from an individual’s strategy for a portfolio website, which might simply be to improve readability for those viewing on a mobile device.
Increasing mobile support could lead to a better experience, but at what cost?
So, as website owners define the level of support they aim to provide, a scale of support for mobile devices emerges. Picking where on the scale your website should sit can be quite tricky; each level of support is not without its pros and cons. Let’s take a look at some of the more common approaches:
Approach A: Tweak What You Have
The most basic and, thus, quickest option is to do only what is required to get the website to work on mobile devices. I use the word “work” loosely here because it can be very subjective, but the main goal is to ensure that the website displays and functions properly on mobile devices and perhaps similarly to the desktop experience.
Sure, delivering a desktop experience on a mobile device is not ideal by any stretch of the imagination, but this option simply offers the
minimum required to get the website to function and display
OK. With modern mobile devices offering good CSS support and zooming functionality, visitors should at least be able to access the information they need.
How to Implement This Approach?
Simple tweaks could include adjusting the viewport and text size, which will affect the way the website displays on a mobile device. The default viewport dimensions should work well for most layouts, but we can make adjustments using the
meta element:
1 | <meta name="viewport" content="width=device-width" /> |
Text size can also be adjusted for some mobile devices using the CSS
text-size-adjust property which specifies a size adjustment for displaying text content:
2 | -webkit-text-size-adjust: auto; |
3 | -ms-text-size-adjust: auto; } |
Different text-size-adjust values demonstrated on the iPhone.
More information on the
text-size-adjust property is available in the
Safari Developer Library. With a small number of tweaks, you should be able to optimize your website to appear as usable as the desktop experience.
Be careful when making any adjustments to the CSS for mobile visitors: you do not want desktop users ending up with a 200% font size by default! If you think this might happen or you want to further improve the experience, consider putting the CSS in a separate file:
1 | <link rel="stylesheet" href="…" media="handheld, only screen and (max-device width: 480px)" /> |
- Quick to implement;
- Minimal work required to replicate the desktop design;
- Strong brand identification with basic consideration for mobile visitors.
Cons:
- Mobile users could suffer from a poor experience;
- Slow due to users downloading styles and large assets;
- Content and navigation path are not optimized for mobile visitors.
No comments:
Post a Comment