Thursday, September 20, 2012

Mobile-friendly websites

Many people these days rely more on their mobile devices - phones, tablets etc - to access the Internet than on desktop / laptop computers. As such, it is a common requirement in many websites today that we design / test / tune the usability not just for different computer browsers but also for mobile devices.

While not every website has to cater to mobile devices this article gives some ideas on how you can make new and existing websites more mobile-friendly without requiring lots of coding or duplication.

If you are building a new website from scratch there are few tools that can help kick-start your own project such as:

These tools are project skeletons you can use to start your own projects. They already integrate / implement several best practices, proven technologies and tricks that can save you a lot of time.

If you already have a website and you can't rewrite / refactor it on top of one of the projects above then you have few options:

You can write a completely separate mobile site - some sites take this route since this allows full separation between the "PC version" and the mobile version of their sites. The obvious drawback is that now you have 2 sites to maintain.

Another option is to pick few tweaks from the projects above and add it in your existing site. For example, many times we can make existing websites more mobile-friendly with few simple changes:

Automatically adjust page layout and font sizes

Just include this single line in the head element of all your HTML pages:


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">


This is how looks like in the iPhone without and with this single-line code:

Eventfy without viewport tweak
Eventfy with viewport tweak 
 It may not look like a lot but with this minor tweak users don't need to constantly zoom in and scroll horizontally in every page. Also, it does not break usability in PC browsers.

Use responsive layouts

If you use fixed layouts where we position DIVs regardless of the client's resolution users will likely have to scroll horizontally. You can improve things considerably if you use percentages to set the widths of your DIVs. This will avoid the scroll bars but may result in tiny columns for users with smaller screens.

A better approach would be to setup the layout so that it properly adapts to the client's resolution / screen width. Check out Bootstrap's live grid example here. Note that when you open it with your PC browser maximized the 9 columns (those marked with '1') are listed horizontally. When you resize the browser reducing the window width the layout will automatically change so that all '1' columns are stacked on top of each other.

It sure helps if you can use something like Twitter Bootstrap, but if not you can still achieve similar results with custom CSS code. More specifically, you can use the @media tag to query information about your client and tweak your CSS classes. For example:

@media all {
    // add common CSS here

/*--- iPad ---*/
/*--- full screen mode ---*/
@media (device-width: 768px) and (orientation: portrait) {
    .panel {
        height                       : 934px; /*1004-80*/
/*--- browser mode ---*/
@media (device-width: 768px) and (orientation: landscape) {
    .panel {
        height                       : 668px; /*748-80*/

/*--- iPhone / small screens ---*/
/*--- full screen mode ---*/
@media (max-width: 480px) and (orientation: portrait) {
    .panel {
        height                       : 380px; /*460-80*/

With the code above the "panel" class will be tweaked based on the client's resolution.

You can find a better example of what you can do with CSS and media queries in the website. In common PC resolutions Eventfy's top menu bar lists all items horizontally. In smaller screens it consolidate items in a drop-down list to save space. This is what it looks like:

Eventfy's top menu bar - full monitor resolution

Eventfy's top menu bar - browser window resized at 360px width

Eventfy's top menu bar, expanded menu - browser window resized at 360px width 

Another thing I did to make better use of small mobile screens is to hide some unimportant content. For example, the long marketing message below the Eventfy title only shows up in big browser windows, and is hidden in smaller devices.

Setting this up was simple, I created a CSS class "details", and in the @media with "max-width: 480px" sections I override it with a "display: none;". This way all the extra content that fits nicely in the big PC browser window but doesn't in smaller devices gets hidden.


  • If you are building a new website, consider making it compatible with mobile devices from the start. It isn't extra work if you are doing it from the beginning.
  • If you already have existing websites, determine if it makes sense to make them mobile-friendly. Not every website would benefit with support for mobile devices.
  • Test your sites with mobile devices. Pick someone to test it and give you feedback, or pretend you are one of your users. Identify main usability items that can be improved (e.g. reduce zooming / scrolling, adjust layout, hide extra content etc).
  • Try tools to help improve layout in different devices / browsers without increasing maintenance. These can save you a lot of time coding / tweaking things by hand.
  • Implement tweaks to improve usability.

And that's it for now, happy coding folks!


  1. Great insights. I'd also want to add something for the benefit of your readers. When converting your a site to a more mobile friendly one remember to always think of your users. Pay attention to how they can access and interact on your site. See to it that the text is clearly displayed and buttons to click are big enough. If you can, ask them for suggestions, recommendations, or feedback to be able to make your mobile website more effective.