With the rise in the use of mobiles for internet access, technology has moved quickly from the first major shift to mobile around 2007. First we saw mobile versions using the m. prefix with browsers detecting the technology and redirecting to the mobile version. Then we saw adaptive website design, with websites available in three core size versions (mobile, tablet and full size) and then around 2011 we started to build the first fully responsive websites that flow according to the browser window size.
The challenge with responsive website design has always been in the delivery of optimum usability and performance, regardless of the viewing device. Early responsive websites were built by starting with the full size version and gradually reducing and hiding code as the size reduced down to mobile – this meant that mobile versions were often cumbersome, suffering in performance because of unneeded code loading in the background an offering sacrificing usability as the mobile versions were trying to do too much. More recently websites are built ‘mobile first’; this means that the front-end development work starts at the smallest size and features are added as the view gets larger and larger. The impact of this is that only the required code is loaded at the smallest version and features are added as the size increases and usability allows.
With all website design usability is key and this has never been more important than for mobile use. With a small touch screen it is vital that users can easily navigate without getting lost within the website. We don’t have very long to grab a user’s attention and keep them engaged so focussing on key features will help your mobile website to perform for your users.
1. Responsive Images
Make sure that your images and graphics are fully responsive, use .svg images that are retina HD ready which means they can be resized in both directions, without losing definition.
2. Use Push Menus or overlays
Push menus sit to the side and overlays slide above the main website and both can be available wherever the user is, this helps users to always find their way to another area of the site and encourage further engagement.
3. Provide clear navigation
As well as and often to trigger the push menus we recommend using a fixed thumb menu on mobile. This enables users to always access key features from the bottom of the screen and significantly increases usability.
4. Make sliders obvious
As mobile usage has grown certain features have become commonplace and left and right sliders are now very common. It is important to make these features obvious so show part of the left and right visual to make it clear what you would like users to do.
5. Touch optimisation
New responsive websites are touch optimised, this means that dropdown menus are being replaced with radio style options, switches and buttons. Dropdowns can be frustrating on mobile because if the site is running slow you can easily double tap and cause the dropdown to open and close quickly.
Great responsive design focusses on usability at all levels, but with mobile website access already outstripping desktop, arguably the mobile version of your website should be the optimum version.
If you have any further questions about responsive design contact us today.