Site   Web

March 2, 2011

Web Design for Mobile Devices

mobileapps2

More and more, people are accessing the internet on their iPhones, Blackberries and Androids. And now, even regular cell phones are coming with wi-fi and internet functionality. The web has truly gone handheld…but is your website keeping up? No matter how great your web design is, if it doesn’t display properly on mobile devices then you could be losing valuable traffic and customers. Read on to discover best practices in web design for mobile devices.

HTML
Some mobiles, like the iPhone, are very good at translating web pages into a smaller size without losing layout and function. But many are not, and non-smartphone mobiles usually only support a very limited version of HTML 3.2. It is best to use basic formatting and layout tags. Tables are not supported on all phones, so it is best to not use them.

Content
Content is key, especially when it comes to mobile devices. It has to be engaging and interesting, but it also has to be easy to read and to navigate through. Text should be in small chunks, with lots of white space. If you can lay your text out in one long column, it will be easier to scroll through and read on a tiny screen. Also, use a basic font…many fancier fonts are not available on cell phones.

Images
Keep graphics to a minimum, and make sure they download quickly and can be resized according to the monitor they are being displayed on. Remember, mobile screens are tiny! The smaller the dimensions and the quicker the download time, the better. For sizing, relative sizes work better than absolute sizes.

Navigation
Web design for mobile devices must take into account ease of navigation, and placing it at the top of the screen makes for a frustrating experience on a cell phone. Have the content show up first, and keep links at the bottom. For touch screen devices like the iPhone, long link text is easier to tap on than short links, so use more than three words for your text links.

If your website is more complicated, consider creating a version of a webpage specifically for mobile users. Place a link at the top of your home page so it is the first thing mobile users see. You can make the link invisible to regular users if you like, so only people on cell phones will see it.

These are just some basic tips on web design for mobile devices. The best way to see if your site is keeping up with your visitors is to view it on several different devices, and see how easy it is to view, read and navigate. If you find yourself getting frustrated, then it’s time to make your site mobile friendly!


Bird and Co Creative provides innovative graphic design and web design in Birmingham. To find out how we can get your business noticed, visit our website at www.birdandcocreative.co.uk.

3 Responses to “Web Design for Mobile Devices

    avatar Biko says:

    Good article. I’m currently designing a mobile version of my website but instead of a link, i want mobile phones to auto-redirect to the mobile site. How do i get to achieve this? Also i intend to create different style sheets for the different screen width. Problem is i can’t get about to be able to detect the screen width. An assistance on there two issues will be appreciated.

    avatar Renold Scott says:

    Great article about web design for mobile devices. Thanks a lot for share such interesting Post.

    responsive web design is best way to drive hugh traffic on your site.

Submit a Comment

Your email address will not be published. Required fields are marked *






You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Please leave these two fields as-is:

Protected by Invisible Defender. Showed 403 to 3,858,848 bad guys.

css.php