5 Things To Remember When Designing A Mobile Website

Different Screen Sizes

This is also a problem for classic web designers: there’s a lot of variety in screen sizes. Over the years, screen sizes have become bigger and bigger. Smartphone screens have also increased in size. This trend was fueled by the popularity of the iPhone (with a screen size of  480×320 pixels). You could use these measures as a minimum resolution.

Make sure you only offer scrolling in one direction (vertical/horizontal). Multidimensional scrolling is difficult on smartphones so try to keep it as simple as possible.

Different browsers

There are a lot of different mobile phone brands: Apple, Nokia, HTC, Blackberry, Samsung,.. Not all of them use the same mobile browser. According to StatCounter, Opera is still the most used mobile browser, followed by iPhone and Nokia. This information can be useful when designing a mobile website. According to characteristics of your target group, you may want to optimize your mobile website for a certain browser. For example: if the target group of your mobile website is business people, you should optimize your website for Blackberry or Windows Mobile.

Whitespace

In mobile design, whitespace gets a whole new meaning. Whitespace can make or break a website, but in mobile design it can also make or break the usability of the website. There’s nothing more frustrating than pressing the wrong link or button on a mobile website due to insufficient whitespace. That’s why it’s important to use plenty of whitespace. It not only looks better, but it’s also easier to use.

Flash And Javascript

Not every smartphone can handle flash and/or javascript. I’m sure that future smartphones will be able to cope with these scripting languages, but for now it’s best to be careful of their implementation. Use (X)HTML or CSS for your mobile website’s most important functions, just to make sure.

The Social Visitor

Mobile phone users are (and always have been) social creatures. After all: mobile phones are primarily used for their social features: calling and texting. The introduction of smartphones and mobile internet have made the users even more social. Some facts: more than 200 million people are visiting Facebook from a mobile device (12 months before, this was only 65 million people). And in 2011, 50% of the tweets will come from mobile devices.

So don’t forget the social character of your visitors. Make sure you enable them to share your articles with their friends via social media. This is also a great way to attract new visitors to your website.

Your thoughts?

What do you think is essential when designing a mobile website? Post a comment and share your thoughts!

7 thoughts on “5 Things To Remember When Designing A Mobile Website

  1. Great suggestions! I’ve been designing the mobile version of my online art gallery and it’s good to have some ideas on where to go with it. :)

  2. When it comes to designing/developing a website, I find that JQuery is compatible with a majority of mobile browsers but to be on the safe side, I always make a fallback so there isn’t a giant void if for some reason the slideshow/animation doesn’t want to load.

    Another tip is when it comes to designing/developing to view on the i-pad, look at building your site within a 950px wide container as anything over this seems to have rendering issues including adding a horizontal scroll which nobody really wants.

    Rollovers can also be an issue aesthetically due to no mouse being available to roll over the links. It may be worth looking to code an onClick rather than a hover function but isn’t necessary.

    Thanks for the post. I look forward to more.

  3. Man, Kvn, this is brilliant stuff! Your entire website, I mean…
    Kinda wanna keep all these insights to myself, and sound super pro, the next time I hang with my designer friends…. Keep it up!

  4. Great guide! I am only getting started with mobile sites, and I find it really confusing. But this helps a lot, so thanks a lot! :)