RESPONSIVE DESIGN - DESIGN FOR SMARTPHONE, TABLET & DESKTOP
Not everyone visiting your website will be using a traditional desktop or laptop computer.
In fact all evidence shows that these desktop/laptop users will soon be in the minority. More and more people are now accessing the web using touch-based mobile devices such as smartphones and tablets. Moreover, research from Google (25th Jan 2012) shows the biggest recent increase in those using these mobile devices occurred in the UK.
Making your website work better for mobile visitors
It's important then, especially if your site's target audience fits closely to mobile user groups, that you have a website that is easy and enjoyable to use for your mobile visitors, as well as those on desktop computers.
Unfortunately, most websites designed for desktop don't work very well on mobile devices. This is particularly true for smaller devices such as smartphones (small screened, touch based, web enabled mobile phones).
Our Solution: Responsive Design - A Single Website For All Devices
Responsive Design is a web development/coding approach that allows a website to 'serve' the same data (aka - info, texts, images, etc) to all visitors, but presents that data differently, dependent upon what device each visitor is using. A website that automatically 'responds' to the visitor.
We use Responsive Design because it's the most efficient and cost effective solution. Unlike other solutions (separate desktop and mobile versions of a site), we only need to develop a single website that works for all your visitors. And you have a single website that's easy to update and maintain.
Design for Mobile: A Quick Example
We recently designed and developed a site for Assumption Volunteers. The services they provide are primarily aimed at men and women in their 20s. This was why we suggested they have their site developed using Responsive Design.
Below is how the site's homepage looks on a normal desktop monitor:
This design has a fixed maximum width of 960 pixels, so will look fine on any monitor with a resolution of 1024 pixels or higher. This fixed-width for large monitors is designed to ensure the 'line-length' of all texts remain readable to the eye (the eye's ability to easily scan the next line of text is limited by the text's line-length).
This is also how the site will appear on larger tablet devices too, at least when set in landscape orientation.
For smaller devices, such as 7 to 9 inch tablets for example, the layout (shown below) will scale down:
The images have become smaller and the columns have narrowed, but the text has 'wrapped', not got smaller. This means the site remains easy to read, and doesn't require the user to be constantly zooming in and out (often the default behaviour on tablets and phones, when a site is designed for desktop only).
Lastly, a look at the mobile/smartphone layout (right).
You'll notice, the way the site's information is presented has changed quite dramatically? This however is the same webpage as shown in previous screen-shots. Only the presentation has changed to better suit the small screened mobile device.
Helpfully, a telephone number is now instantly available at the top of the layout, and when 'touched' the phone will dial the number.
The main navigation bar has been removed, so the site's content is more readily available. Touching the large, finger-sized 'MENU' button will instead take the visitor to all the website's finger-friendly navigation options.
If you need help in developing your website to work across all the latest web enabled devices, then please drop us a line - email: email@example.com