Four Design Tips to Make Your Mobile Website Awesome

By Meg Hughes

It’s inevitable that all small businesses need a mobile website. It’s also likely that you might already have one. Last year mobile data traffic nearly tripled from the year before and is expected to greatly increase by the end of 2011. Considering the boom of the mobile revolution, going mobile is definitely a step in the right direction.

Though all mobile websites are unique, one aspect which remains consistant across the entire mobile web is the importance of proper mobile web design. In a recent study conducted by Google, 61% of users are unlikely to return to a mobile site that they had trouble accessing from their phone. A poorly designed mobile website could be detrimental to click through and conversion rates.

Fortunately, you don’t have to be well versed in the latest CSS and HTML to give your mobile website the sleek and professional design that it needs. Take a look at these four handy design tips that anyone can easily apply to their mobile website.

1. Customize the Content for Mobile

A mobile website is a condensed, tiny, one column version of a desktop site. Tailoring your content to the needs of the mobile user could greatly benefit the user experience and lead to a higher conversion rate through your site. the typical mobile user is on the go and in search for the information they need, fast. Eliminating some of the content that’s on your mobile site, which may only be viewed by a desktop user, could prevent customer confusion.

If you’re not quite ready to nix entire pages, then change the page order on your navigation menu. Put the links and pages a mobile user will likely use the most towards to top of the home page. Rearranging the page order of your mobile site will help your users find the information they are looking for, while also preserving the likeness of both sites.

2. Reduce Multimedia

We know how much you like the embedded YouTube videos and photo albums on your website. We like them too. Unfortunately, when designing a mobile website, large amounts of multimedia should be significantly scaled down or completely eliminated. Mobile users have limited bandwidth and a slower connection to the internet than desktop users, however when browsing the internet on their smart phones, they still expect sites to load at a quick rate. High volumes of photos and videos can slow down the load time of your site which will turn users away. One to two images per page and one video is enough multimedia for your mobile website.

3. Negative Space is Good Space

Negative space, also known as white space, is a key to mobile website design. Incorporating negative space in your mobile site will give it a clean look and make it easier for the user to navigate through.

Some simple things you can do to add negative space are:

  • Increase padding around important links and buttons.
  • Remove multimedia elements like excessive amounts of photos and video to eliminate clutter.
  • Add line breaks between large bodies of text.

Enhance the appearance of a mobile site’s negative space by keeping the background color of your site a light color and the text, a contrasting dark color.

4. Add Thumb-Friendly Elements

When designing your mobile site, consider following the general rule of thumb. Typically, mobile site browsers use four fingers to hold their phone while leaving their thumb free to scroll up and down on the screen. Turn important links on your mobile site into buttons to make it easer for site visitors to select them. For example, a phone number can be replaced with a click-to-call button and a link that returns the user to the home page can be replaced with a back home button.

Mobile Website Design Done Right

Take a look at these four examples of mobile websites which display excellent mobile website design.

Put Your Mobile Website Design Skills to the Test!

If you think your skills in designing and developing mobile websites are better than our examples, apply to join the DudaMobile Developer Network! Join now and be featured on, receive leads, and let us promote you to businesses who are in need of your services. Sign up through our website to be considered.

Email me if you have any questions at theresa(at)dudamobile(dot)com.

, ,

About Meg Hughes

Megan Hughes is a Project Associate at Duda in the Palo Alto office. She spends the majority of her time reminding the marketing team what assets they owe to the partner sales team, and vice versa, bringing order and productivity to the Dudaverse. If she doesn't show up to the office for a few days, she is generally assumed to be volunteering somewhere in Africa.
Blog Comment Policy