As the number of devices and browsers increases so does the need for your website to be easily accessible and usable on all devices.
From large computer screens right down to the newest version of smartphones your website should be easy to view and even more so easy to use on each device.
Some time ago mobile sites were the thing to have running alongside your main website. Now there is a new breed of web design called “Responsive Design”, this is the new way to make sure that your website works on all devices.
The basics of a responsive website is:
- HTML 5 & CSS3
- Media queries
- Flexible images and media, through auto resizing or CSS
- A flexible grid-based layout that uses relative sizing CSS
The grid layout becomes the web design bible when using a flexible layout. The CSS relative system looks to resize the grid based on the screen size. Most people use the 960 grid layout so that the site continues to look and feel like a normal website but down scales and re-stacks itself as the screen reduces in size.
Navigation is a very important factor in responsive websites. How many sites do you look at on your smartphone where you can’t even make out a single word in the navigation? The chances of clicking on them and landing the right page is about 100:1. Well with responsive design the navigation plays a big part in the play. Some very clever boffins have allowed us to use dynamic re-sizable navigation that also re stacks itself for use on smartphones. The navigation doesn’t get smaller, it actually becomes more visible. Users can actually click on things they want to see!
Images also play a very big part in responsive design. The need for visually stunning websites is more important than ever these days. Well with responsive layouts it is still possible to use images, image sliders, galleries, image carousels, light boxes and blog imagery in a responsive way. Images resize and re-stack themselves making the viewing experience just as enjoyable as on a monitor.
There are several well known responsive frameworks such as Twitter Bootsrap, and Foundation are my favourites. They are easy to use, well laid out and there are tons of resources and tutorials out there to help with them.
The way to learn is to download a framework such as one of the examples above and have a go at building a site from the ground up. Once you start you will wonder how you ever managed without the responsiveness.