Archive for July, 2012

Mobile Friendly Design

To make a successful website, user experience is vital, otherwise users feel alienated. By offering what users need, without getting in their way, they’ll be much more likely to return – a key metric in determining website usability. As technology advances at an ever increasing rate, the internet must adapt to that technology (and visa versa). Depending on what type of website you are working on, you should expect anywhere between 5 and 25 percent of your traffic to access it on a mobile platform. It is important to keep in mind what “mobile” is typically used to describe. Tablets are lumped into the mobile category, which I personally think is a mistake. Tablets have one thing in common with phones – they use touch. However, the more important factor in my opinion is screen size. The difficulty that arises in using a fully functional, non-mobile website on a small screen is accuracy. It is difficult to accurately enter fields (like email addresses or passwords) and just as hard to click on incredibly small links. For this reason, it is vital to put effort into a mobile friendly website (mostly for phones, but a little for tablets).

There are some easy steps you can use to do this, and here are a few to put you on track:

1. Add in the appropriate meta tag. It is helpful to tell devices how to render your website. Start with a viewport tag to tell a mobile device how to orient a page when it’s loaded. It also determines if a page can be scaled larger or smaller and if it should rotate as the user rotates their mobile device.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

2. Make bookmark branding work to your advantage. If you want users to be able to add bookmarks to your website on their iOS device homescreens, you need to make yet another favicon. Remember the favicon? The favicon handles what browsers show in their address bar and bookmarks folder. Then, there is the alternative webclip icon, which Apple uses when someone bookmarks a website on their homescreen. The default if you don’t define the image is a screenshot, which is never a good idea. The solution? Make a 129×129 pixel image that you want to represent your website. Think of it as a larger favicon. You can tell iOS devices to use your webclip icon in two ways. One, name your image apple-touch-icon.png (exactly) and put it in your root folder. Or two, tell the devices where to find the image if you aren’t going to put it in your root with the following two link tags:

<link rel="apple-touch-icon" href="FILE LOCATION" />
<link rel="apple-touch-icon-precomposed" href="FILE LOCATION" />

3. Think about file sizes. When using mobile devices, often times people are mobile, making their internet connections slower and potentially spotty. Don’t make it hard for them to load your site with excessive HTML, Javascript, and CSS. But even more importantly, do whatever you can to shrink any images you want to load, and use them sparingly when you can. Code your site intelligently with multiple classes to keep your CSS and HTML clean. Compress your images before you upload them using one of many online or downloadable tools. Don’t include Javascript just for the hell of it, only include it if it will significantly improve your user experience.

4. Consider the difference between hover and click. This is an important one. A lot of usability principles hinge on the feedback you provide to users for their actions. One of the most common feedback techniques used is the hover effect. However, the hover effect doesn’t exist on touch devices (almost all mobile devices nowadays). So, you need to compensate in your design. Where previously, a link may have been fine without an underline because it had a hover effect indicating it was a link, you may want to employ underlines in an effort to be a little clearer for mobile devices.

5. Most importantly, decide between a completely separate mobile website and different style rules. This is the biggest decision you’ll have to make. You have two choices, make a totally separate website (m.example.com versus example.com), or apply a different set of style rules when accessing the website on a mobile device. For large websites that have a lot of functionality, I’d suggest the separate website because most likely they’ll have to cut out certain functionality that is more difficult to use on a small screen. However, for smaller and more simple websites, you should strongly consider just applying simpler styling rules. This option is the one I’ll talk a little bit more about for now.

Start by coding your website intelligently (as I mentioned in point 3). Think about how your want your page layout to be for both desktop viewing and small screen viewing. Using that knowledge, write your HTML so that your CSS can switch the design easily between each version. I assure you, this is a much easier task than it might sound if you know your HTML and CSS well. Take the CSS Zen Garden as proof of that concept. If you write your HTML well, then CSS can make completely different websites come to life. Then, apply the appropriate rules to your mobile version versus your standard version using one of two tactics. You can set the media parameter in your link tag in the head of your document like so:

<link rel="stylesheet" href="FILE LOCATION" type="text/css" media="only screen and (max-width: 480px)" />

Or, if you prefer only one CSS document, you can include all of your mobile only rules inside of the following HTML:

@media only screen and (max-width: 480px) { ALL CSS RULES GO IN HERE }


Either of these two options will trigger the CSS you add when the screen width gets below 480 pixels. If you are curious about how the iPhone 4 handles screen resolution in comparison to the older models, check out this interesting article which points out some more detailed icon information. This 480 pixel requirement could easily change when the iPhone 5 is released, and it certainly isn’t a catch all for all Android phones (such as the Galaxy Note), but it does a pretty good job. If you are curious, you can trigger the mobile version of my website by shrinking the width of your browser screen down to 480 pixels.

Hopefully, this information should set you up to make a relatively friendly mobile website. Of course, it isn’t full proof, so you should always test on as many devices as possible… but it is a start! Good luck.