Mobile redesign quick tips

So you’ve decided to redesign and optimise your desktop website for mobile? That’s great! You’ve taken the first step in the right direction.

Literally every minute of the day you will see people viewing digital content on the go whether it be on the way to work, at home, at the gym or even in the bath (I know my girlfriend does!). We are ditching our desktop computers for mobile devices which are more accessible and screen ready for us.

It’s important that you future proof your website now so that you have the best chance of engaging customers with your products and services. If user’s come to your website on devices other than their desktop computers you will need to provide them with a mobile optimised experience rather than one that involves pinching, zooming and scrolling. Respect users to your website their time is precious. Do not expect them to stay on your website if they cannot digest the information on your website quickly and easily. Here are my top tips for your mobile redesign:

My mobile redesign quicktips

  1. KISS (Keep it simple, stupid) Make sure the information is easy to read and navigation easy to use.
  2. Optimise images and scripts Don’t expect users to download large images. For one this will take forever on a slow connection and will eat into their monthly download quota. Provide mobile friendly images both compressed and optimised. Limit the amount of javascript on the page and only call scripts when they are needed.
  3. Limit the length of pages User’s will have a more enjoyable experience if scrolling is limited to a maximum of two pages. Although this may be difficult to implement just be aware that if a page is too long the page will take longer to load and is more difficult to navigate around. If your page has a large number of comments or posts use conditional loading to display additional content rather than displaying them all at once.
  4. Typography Large headlines look great on large screens but can consume too much of the screen realestate on smaller screens. For this reason resize your headlines for mobile users. You may also like to swap your desktop webfonts for fonts native to your user’s mobile device like Arial or Helvetica. This will improve download times rather than hinder them. Please see my tips on Web Typography for mobile.
  5. Remove any fancy animations Do you really need to demonstrate your skills in animation to mobile users? My advice is leave that for desktop and concentrate on what is most important to the user experience and on mobile that is easily digestible content. Get your message across don’t interrupt the flow of information with pointless animations unless they add to the experience.
  6. Cross browser testing Make sure you test your website on a number of different devices and browsers. Do not leave testing until the end of the project either. Test during development and often.

Got something to say?

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

Some html is okay