If you've been keeping up with our blog, you know that we've got some serious beef with how some folks do mobile. But rather than leaving you hanging without a solution, we've outlined some tactics on how to make a good mobile site using the Rise philosophy.
A little History
So why do you need a mobile site to begin with? Well, most websites are designed to work on displays which are around 960 pixels wide–any bigger and the page contents just float in the middle, any smaller and you get scroll bars. Sites are made this way because it's faster to make complex layouts at one fixed size. In the past, this solution usually worked pretty well because people accessed webpages from computers with similar-sized screens.
That's not so true anymore! With the introduction of smartphones, tablets, netbooks and other devices with web browsers, the landscape has shifted and almost everything that web designers counted on in the past has been shaken up. Screen sizes, access to Flash, internet speeds and even the ability to hover with a mouse cursor are all taken for granted on our desktops, but on many mobile devices these things have taken a step back 10 years or more.
With mobile usage increasing dramatically, it's mission critical to have a website that performs at least as well on mobile platforms as it does a desktop computer.
How to make a good mobile website
Now that you know what we don't like from our last blog post (How to not do Mobile) and why mobile is important, let's talk about what does work.
Making a good mobile-friendly website is all about detecting the limitations and features of a user's device, then adapting the website to work around limitations and leverage capabilities. Sounds simple enough, right?
Here are a few of the core things we work around (or with) when making a site mobile-friendly.
Problem: Resolution
One of the biggest differences between mobile devices and modern computers is the screen resolution. For better or worse, it's one of the most time consuming considerations in a mobile redesign. With resolutions ranging from 480x320 or lower (early smartphones) to 2560x1600 (27" desktop displays) there's a wide range of screen dimensions to account for.
Solution: Responsive designs
Instead of defining things with fixed sizes, embrace flexibility. Use percentages to define relative sizes of the elements on the page, and set the page to fill most or all of the browser. As the browser gets bigger or smaller, so will the page contents, resulting in a consistent appearance.
It's a little more complex than that, though. For the sake of readability, at certain resolution ranges you will probably need to set style rules to change the page structure. For example, a two-column layout which works well on a desktop might result in short lines of text and tiny pictures on a mobile device. Altering the page structure to be a single column will make for more readable text, understandable images, and satisfied visitors.
Although a flexible layout is the most time-consuming step in making a site mobile-friendly, it’s a huge step in making the site feel at home at any size, on any device.
Problem: Pixel density
Pixel density is the number of pixels in a given amount of physical screen, and it is another important consideration for mobile-friendly sites. Since the 1990s, computer displays have mostly maintained similar pixel densities, from around 70 to 100 pixels per inch (4900 to 10,000 in a square inch). Laptops have ushered in higher pixel densities, generally from 100 to 200 pixels per inch (10,000 to 40,000 in a square inch).
Mobile phones blow most devices out of the water with densities as high as 340 pixels per inch (115,600 in a square inch). For your website, this means that text which was a readable 1/8th inch tall on a computer screen might be an eye-straining 1/32nd inch tall on a smartphone.
Solution: Text in relative sizes
In the same way that site structure dimensions can be expressed in relative terms, text sizes can be relative too. By setting a default size for the site’s body (100% or 1em works well) and specifying all other font sizes as a percentage or fraction of that (for example, making a headline 160% the size of normal text), text will be appropriately sized and readable on all devices. How? Browsers have default text sizes–larger on smartphones with tiny pixels, and smaller on desktops–and by tapping into those you can ensure that your site is comfortably readable across all devices.
Problem: Alternate input
On traditional computers, input is very easy to count on–you have a keyboard and mouse. On mobile devices, this is rarely the case. Things that people used to count on, like drop-down menus which are only revealed when you hover over them, often translate poorly to mobile devices. Additionally, although a mouse cursor gives you pinpoint accuracy for selecting, fingers are nowhere near as precise. Few things are as frustrating as clicking onto the wrong page because links and buttons were too small and too close together…and then having to wait for the page to load only to have to click away from it to get to the page you actually wanted.
Solution: Big targets, no hovering
To help users with big fingertips and small screens, don't skimp on the size of buttons, interactive controls and links. Reasonably large controls are also more readable, noticeable, and can help older visitors who may have trouble clicking or tapping accurately.
You'll want to keep an eye on how your site looks and feels on different devices to make sure you're providing adequate padding and reasonable sizes. Main site navigation is low-hanging fruit for cutting down on mis-clicks. This is especially important when users are entering input on a page. After all, what's more frustrating than clicking onto the wrong page? Accidentally pressing a "Delete" button which was unfortunately positioned a millimeter away from the "Save" button.
Also try to avoid relying on hovering. Links which don't look like links until you hover over them, or drop-downs which are only exposed when you pause over a main menu item for a second, have poor usability to begin with–mobile devices only make matters worse. Assume that a user can't hover and design around that. If you absolutely must use a drop-down, consider using visual cues to show that there's a drop-down, and having an area which will open the drop-down when clicked.
Problem: Flash and Javascript
Apple created quite a stir when they established their standpoint as anti-Flash, and for better or worse, you can't count on a user having Flash installed. You also can't rely on other proprietary plug-ins–Windows Media Player, RealPlayer, QuickTime, Java or Silverlight to name a few. Even standard browser features like JavaScript can't be counted on, as some users disable JavaScript for reasons of performance or security.
Solution: HTML5 and graceful fallbacks
Don't use proprietary plug-ins whenever you can avoid it. If you have audio or video clips in proprietary formats, re-encode them into files which can be included in the site with HTML5 audio and video tags. You can always add in Flash-based fallbacks or alternatives for older browsers which don't support HTML5.
Graceful fallbacks are a good idea in general, especially so for JavaScript. If users doesn't have JavaScript, make sure they can still do what they need to, even if the process is less responsive and engaging. For example, don't rely on JavaScript for form validation. You can use it to save time for people with JavaScript enabled, but for those who don't, make sure the page reloads with their input still intact and error messages telling them what they need to add or change. If you have entire features which are dependent on JavaScript, use JavaScript to load those them after the page loads so you don't present confusing, broken features to users without JavaScript. In general, whenever you use JavaScript, consider the experience for a user who has disabled it.
Problem: Connection speed
Users on mobile devices are often on cellular connections which make home internet connections from 10 years ago look positively zippy in comparison. Although users on mobile devices have a little more tolerance for sites which load slowly, they won't wait around forever. Mobile users generally also have limited data plans and they treasure every megabyte they get.
Solution: Lightweight graphics and clean code
Optimize your graphics, clean up your styling rules, and remove unneeded code. Although it's a good idea for websites in general, a light site is especially handy for mobile devices and can result in lower bounce rates, happier users, and lower operating costs. Get to know your file types and resolutions. For example, don't use a 2 MB image straight from your camera, resized to be a thumbnail. There is no reason to have a file that big for an image that small.
On the note of images, try to use as few of them as possible and leverage CSS whenever you can. Although you might get a slightly cooler-looking button using a fancy graphic, you can still get rounded corners, shadows, background colors and gradients, borders, eye-catching fonts, and engraved or raised lettering without using a single graphic. Buttons made with styling rules also look more crisp and are easier to update. Many of the buttons and tabs we make at Rise today use just a single gradient but still provide the rich designs people expect from modern sites. That having been said, try to avoid unneeded markup and style rules. Pages load faster, and perform smoother, when you do.
The Big Picture
When Rise implements our preferred mobile strategy, the result far exceeds a typical mobile site, stripped-down and devoid of content and features. We build a comprehensive solution which provides a unified, full-width site which is a pleasure to browse and use at any size, on any device. Why? We believe in providing the best experience possible to your users. They'll thank you for it with warm words, longer interaction, and probably help your bottom line.
