What Size is Your Screen? Best Practices for Mobile Design

Technology moves rapidly and web designers have to stay up
to date in a continuously changing field. One of the fastest growing segments
of web design is for mobile devices – thank you Apple! We are talking about
making your website compatible for mobile devices and not designing a mobile
version of your website. There is a difference! So we thought it a good time to
catch up on a few best practices for mobile design.

First, remember that you are designing for a smaller screen.
Not only do mobile devices have smaller screens than laptops and desktops but
they also vary in size from device to device. Manufacturers of smartphones have
all decided that their size screen is the best and better than the competitor
and these sizes are all different. Even genius Steve Jobs is constantly arguing
that the iPad needs all the screen real estate it can get. So what might look
good on an iPhone may look awful on a Blackberry. Please always keep screen
size in mind.

Second, mobile designs require white space and easy
navigation! If the mobile user hits your site and it’s cluttered and difficult
to navigate, that will be an immediate negative and you may kiss that user
goodbye forever. It’s likely you do not need to offer the mobile user all of the
navigation of a full website – it’s a discussion to have with your client. But
always remember to keep it simple and clean.

Third, dump most of the images. Not only do they eat up
bandwidth but they are also slow to load and cumbersome to navigate around.
Yes, web designs for desktops scream for images but mobile designs do not. Also
see above about white space and screen size.

Fourth, test your mobile design and test it again! Remember,
you will quickly (and forever) lose the mobile user if your site is slow to
load, cluttered and difficult to navigate, and impossible to view on a small
screen. Did we mention test and test it again? A quick hint – use the Opera
browser to test. Its small screen function will help you see what your intended
mobile user will see. Put yourself in the user’s seat.

Finally, this is not over. Sure, these are some of the best
practices for mobile web design but there are so many more. What say you
readers? We want to know what your best practices for mobile web design are and
what you’ve learned from actually designing them. Here are some good examples
of mobile websites.
Share with us your favorites.