What is responsive design
It is not just desktop computers that have a web browser anymore. The iPhone was one of the first mobile phones to feature a great web browser, and it really hit home that the experience of the mobile web should be improved. This led the way for other devices to utilise the success of the iPhone, changing the face of the mobile web.
As the landscape of web browsers changed, so did the expectations of users. People demand to be able to browse the web on their phones just as easily as they browse the web on a desktop computer. With this came the creation of mobile version websites to compliment the desktop experience. At the time, every website would have their normal ‘desktop’ version of their site, and as a bonus, a ‘mobile’ version. This seemed like the ideal solution at the time but then came along other mobile devices.
Technology is continually evolving, so not long after the mobile phone hardware market had fundamentally changed, other form factors took a boost in popularity. On top of mobile phones and personal computers, devices like touchscreen tablets and small notebook computers popped up.
Having many different types of devices that people can browse the web on means a diverse range of screen sizes to cater for. Creating a different version of a website that targets each individual device and screen size is not a practical way forward. Cue responsive web design!
How it’s achieved:
Responsive design uses a combination of grid systems and CSS3 media queries.
CSS3 media queries allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify.
If we wanted to apply some styling to mobile phones, our media query might look something like the following.
@media screen and (min-width: 480px) { .content { float: left; } .social_icons { display: none } // and so on... }
Using a series of media queries like this, we can work our way up towards larger resolutions. The set of pixel widths I recommend targeting are as follows:
* 320px * 480px * 600px * 768px * 900px * 1200px
Ideally, you would adjust your layout to perfectly match every device width, but often it is more practical to pick and choose where you spend your efforts as time and budget restraints will influence how many resolutions can be targeted. When deciding what resolutions to target, you should use your judgement. Targeting more resolutions is going to take more time, and that effort should be spent carefully. Find out how your target market is browsing the web, which devices they use.
Responsive web design isn’t just another fad. It is rapidly entering the realm of standard practice. If you would like to find out more about what this mobile friendly solution means for your business email enquiries@the-radiator.com
There are currently no comments on this post - be the first to comment using the form below.