Are you building a mobile website? Have you already built a responsive site and need advice on optimisation and usability?

If so here we have written a list of essential tips for web designers and developers to help give some insight into some of the core things that that will help users navigate, understand and engage much more easily with your mobile design.

Less Content

When designing for mobile websites its often not suitable to have the same amount of content that would be displayed on a desktop version. Often trying to keep all information across different platforms leaves for poor user experience and crowded content. Mobile design should be more focused on key content for users to navigate more easily. It is often the case that sidebars will be completely removed but important links can and should be moved and restructured to be incorporated into the new mobile layout. If you are struggling with a large page with lots of content that is essential you can use drop down menus and popups so that user will not initially see the content but it is easily accessible, while doing this case make sure to use a good sized button or call to action for your hidden content.

responsive design content responsive design content responsive design content

Navigation options

Good navigation is key to a successful mobile website design. Often stacking your navigation list on top of one another to make for more readable links is a good way to make your navigation more prominent, often though, if a menu list is too long it will fill or overflow down the screen and push important above the fold information out of view, the solution to this is to hide your navigation menu initially and have an icon that will bring the mobile navigation into view.

Another problem is often that because navigation typically sits at the top of a page, this makes menus quite inaccessible, the solution to this is more often to create a sticky navigation placed either at the top or bottom of the screen so that it is always visible and easy to navigate between pages.

responsive design navigation responsive design navigationt responsive design navigation

Tiny forms

Forms on a website are usually very thin and not at the ideal size for a mobile view. When switching to mobile devices you should fatten up your inputs and text sizes to create more usable forms and entry type submissions.

responsive design forms responsive design forms responsive design forms

Load Time

Web pages can sometime take much longer to load on a mobile device due to lack of wifi accessibility or a poor signal. The best way to combat this is to minimise the amount of assets and files loaded onto the website when on mobile devices.You can do this in several different ways:

  • by removing large images or videos with big file sizes, if videos are essential swap them for a link to a source away from the page or event use jquery to load the video on click.
  • Have separate style sheets for mobile devices to avoid loading irrelevant styles
  • disable any javascript/jquery or code that is load heavy that is not essential to the user experience
  • Use caching to store essential images and styles like logos and navigation/header images.
  • Use font based icons or svg’s to speed up load time

Fonts and sizes

Stick to a few limited number of font sizes when on mobile devices, on such a small screen you don’t need a mash of fonts confusing your layout structure and content hierarchy. Upscale your general reading font for easy viewing but scale down some of your larger headers so that they don’t dominate the occupy the entire screen. Use maybe two or three font sizes that are clean and easily readable.

Testing

Mobile phone vary so much these days it has become absolutely essential for designers and developers to have an excellent testing lab for research into what works on what device and browser. Test on as many physical devices as you can get your hands on. You can also use online tools to test on many devices at once. Some we recommend are:

BrowserStack

browserstakh

Browserling

browserstack

BROWSERSHOTS

browsershots

References

mobile website reference mobile website reference mobile website reference

Share post

Copyright Digimad Media 2012 -
+

For websites:

Paste this code onto your website to accredit Digimad Media:
<a href="https://www.digimadmedia.com">
Vector designed by Digimad Media
</a>

For printing:

Paste this text on the final work so the authorship is known.
'Design Name' designed by digimadmedia.com

For more information see our licence