Responsive Web Design For Mobiles

Responsive website design for all shapes and sizes

Website visitors now use multiple screens almost daily – mobile phones, tablets, laptops, desktops, we all need endless amounts of information to complete projects at a speedy pace.  Or even if we are at home watching TV, playing a game on the phone, reading the paper on a tablet, there are multiple reasons why website design needs to respond to the 3 sizes of screen.

Since early 2014 reports have started to emerge that more people are using mobile phones and tablet devices to surf the net than are using PCs.  PC sales have also seen a slump while expenditure on mobile devices and apps have sky rocketed.

Most statistics software will tell you what percentage of visitors to your site are on mobile devices (if you have Google Analytics installed, this divides visitors into “Desktop”, “Mobile” and “Tablet”).  If you have a business to business website, you may find that around 1 in 3 visitors are on a mobile device, rather than 1 in 2, but regardless, it’s likely to be a substantial percentage, in which case you may be considering how to convert your website to make it more mobile friendly.

How to make your website mobile friendly

Simplicity and cleanliness are now at the forefront when considering design ideas for your website, this leads to less confusion and an easier, clearer and more enjoyable navigation.

What can we do in order to make the user more at ease with websites on smaller screens and improve the user-experience (UX) design?

  • The ideal is to use a responsive theme or template, where the size and order of different elements change depending on the device used - see the section on the right for more information on responsive themes.
  • Smaller screens means more scrolling, people don’t want to be trying to focus on tapping tiny icons on a screen, it’s much easier and quicker to scroll.
  • Make the most of each page, particularly the home page.  This will give the user a more streamlined experience.  Lightboxes, overlays and expanding / repositioning blocks can all reduce the amount of clicks.
  • Consider using drop-down menus or sub-menus that only appear on relevant internal pages.
  • Consider adding a dynamic background into your website design to provide a richer content experience and use a combination of text, images, videos and interactive functionality.
  • If you use an attention grabbing image, instead of specifying a fixed width for it (e.g. 800px), if it’s the width of your page, simply specify that it should be 100% wide or give it a max-width.  This will allow it to shrink on mobile devices.  Remember to keep text sufficiently large that it will still be readable on a mobile device when the image will be shrunk.
  • Simplify your colour schemes to one or two complimentary colours, perhaps in different shades.  Excessive colours just reduces the message on a smaller screen.
  • If your site is image rich, consider forgoing colour altogether in the template design so that your images stand out. White, black, and everything in between are popular colour schemes now, and adding just a hint of another colour, adds drama and impact – all things that garnish attention when used in the right way.
  • Convert any Flash slideshows or menus to JavaScript and if you use Flash animations, choose an image to show instead for visitors who don’t have a Flash compatible phone.  Most Apple phones won’t show Flash animations on them.
  • Use the same template across the whole website.  Having a standard template and menus helps users find their way around your site when they can only view a small part of it in one go.
Responsive web design and development

Responsive Website Development

To make a website 100% mobile friendly, there are two options:

  • Create 2 separate themes / templates - one for a PC and one for mobile devices.
    This method has several innate problems.  One is that there are multiple device sizes, whether you're on a Samsung, a Kindle, a PC or an iMac, your screen will be a different resolution and two themes / templates might not be enough.  Another is that it requires creating two (or more) of every single page and this causes SEO problems with duplicate content.
  • Use a responsive theme
    This is the recommended choice and is how most web development companies create mobile friendly themes / templates.

A responsive theme is one that adapts itself depending on the resolution of the screen being used.  One example of a site we've designed is shown above and below.  The image above is how the site looks on a PC.  The image below is how the site looks on a typical mobile device.

As you can see, a responsive theme has the following features:

  • Columns resize themselves to fit the width of the screen (usually with a maximum width).
  • Headers and logos are typically designed to automatically resize.
  • Blocks appear in a different order depending on the resolution of the device used, so when a PC or laptop is used, menus and sidebars appear where you'd expect, but on a mobile, they're more likely to appear after the main body of text, so visitors can access information immediately.

If you'd like a quote to convert your website to a responsive theme, or to design a new mobile friendly website, let us know.

 

Mobile friendly website design