Web Design For A Mobile Version Of A Site

Over the past few years, smart phones have become extremely popular as more and more people are able to afford them. Google CEO Larry Page recently made a statement at a conference saying “For most people in the world, it’s going to be their first computer.” As a result of this trend, many people are browsing the internet through their phones, which has prompted businesses to develop mobile versions of their websites to make them optimized for smartphone users.

There are many differences between designing a site for desktops and designing a site for smartphones that web designers should keep in mind when creating the mobile version of a website. The most notable difference is the much smaller screen size. Because of the smaller screen, the mobile version of the site should be as minimal as possible and straight to the point. There should be no clutter on the page such as unnecessary scripts, images, or anything else that makes the site slower.

Also, avoid using Javascript or Flash because many mobile devices can not interpret them. You should also avoid displaying any advertisements since they will be very obtrusive to the user, especially on a small mobile screen. Remember, you don’t have a lot of space to work with so only include the items that are absolutely necessary for the site.

If you simply can not fit all the necessary things on your site’s mobile design, consider using collapsible elements. By utilizing collapsible elements, visitors can hide widgets they aren’t using and expand the ones they are using.

If you’re not sure how to start, there are many WordPress plugins out there (both free and paid) that can greatly assist designers in creating the mobile version of a website (i.e. WP-Tap, WPTouch, MobilePress, etc).

Use Only One Column

Since space is very limited, having just one column is the best way to go. Having multiple columns will make the site look unorganized and messy. Having only one column also lowers the chances of the user having to scroll horizontally to find content, which provides a better overall end user experience, which should be the goal of every webmaster.

Making Buttons User-Friendly

Another very important thing to keep in mind is that buttons for the mobile version of any site should be designed so that they are easy to tap through a touch screen. If the buttons are really small, it will be frustrating for some users because their fingers might not be small enough to press the buttons. Also, make sure that when a button is tapped, there is some visual indication to let the user know that the button has been pressed. I know this is obvious for desktop browsers, but that is not always the case with smartphone browsers.

Avoid Horizontal Scrolling

Sites are much more user-friendly when they don’t have horizontal scrolling. This is true for both desktop and mobile versions of a site. That’s because text is read horizontally and it can get really irritating for users if they have to keep scrolling back and forth while reading. Vertical scrolling is a lot more convenient for users, but do your best to keep any kind of scrolling to a minimum, especially on the mobile version of a site.