SO what is responsive design? Put simply it is designing your website so that the user experience is enjoyable whichever device is used to view it. It is a development of the ‘Mobile’ approach but instead of designing multiple different sites to be viewed on each different device Responsive Design adapts the website to fit within the different devices being used.
Of course that makes it sound very simple, but in reality responsive design (also known as mobile website design ) requires discipline and a clear understanding of the needs of your site’s visitors. There is no point in making key information easy to access ‘near the top’ of a mobile page if that information is not what your visitors are looking for. The key point is making your site and the information it presents easy to use whether it is viewed on a cinema screen display or a mobile screen after all who wants to spend time zooming in and out of a page on a SmartPhone when automatically scaling the site to fit makes it so much easier to use.
Of course the first step is finding out what device is visiting your site and therefore what screen size, resolution and orientation options need to be allowed for. Fortunately most modern devices support media queries and provide at least some detail about the constraints of the device being used.
FLEXIBLE GRID LAYOUT
One of the main tools in responsive web design is a flexible grid layout. This allows information to be grouped into relevant ‘chunks’ and then allows these chunks to be re-ordered and resized to fit the requirements of the different devices visiting the site, using relative resizing and flexible images. This uses Cascading Style Sheets 3 (CSS 3) and enables layout information relevant to each device to be delivered along with the pages.
You’ll need to give some thought to interactions as well – have you ever tried ‘hovering’ over a menu item on iPhone? Touching or clicking to access the content is more typical these days due to the number of touchscreen devices.
GROUP THE INFORMATION
Group the information in order of priority – this requires a good understanding of who is using your site and what they want from it, but by making it easy and quick to find the information your site visitor is looking for, you will make their experience of your site much more satisfying.
RESPONSIVE WEB DESIGN
Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different approach to the information presented on your site and to the design. Improvements in technology shouldn’t stifle designers, however they do need to strike a balance between the aesthetic look and feel of your site across different devices and how the sites will be used to access information so make sure your design team employs adaptable wireframes that help to adapt to different devices and layouts.