Responsive web design, the future of device agnostic websites.
Good bye fixed width layouts! The 960px wide grid has served us well, but it is now time to embrace the ever changing dimensions of the world wide web. The 960 grid was born in a world of fixed-width layouts, that holy number has served us perfectly well, dividing easily into multiple columns but things have changed now. People browse differently, they are using multiple devices with multiple resolutions, we cannot get away with serving one default layout for everybody anymore.
WELCOME TO THE WORLD WIDE WEB, AN INTERACTIVE MEDIUM IN WHICH SCREEN RESOLUTION STATISTICS ARE TRIVIAL, BROWSER VIEWPORTS ARE VARIABLE, AND SCROLLING BEHAVIOUR IS A STANDARD. http://www.thereisnopagefold.com/
What is Responsive Web Design?
This website is responsive. If you are reading this on your desktop, go ahead and resize your browser window and see what happens. You’ll notice that images and words stretch or shrink to a point, before jumping to a new layout at certain thresholds. These layouts are optimised for standard sized devices – from smartphone up to widescreen desktop.
Computers arent the only things browsing the web anymore, mobile browsing is expected to outpace desktop-based access within 3-5 years. Video game consoles have web browsers. We’re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces. In short, we’re faced with a greater number of devices, input modes, and browsers than ever before.
This changing landscape of web browsers means that our user’s expectations are also changing, people expect to be able to browse the web on their phones just as easily as on their desktop computers. Technology moves fast, not long after the phone market had been revolutionized other form factors began to pop up. In addition to phones and computers, devices like touchscreen tablets and small notebook computers started appearing everywhere.
To sum things up, the varying spectrum of screen sizes and resolutions is growing every day, creating a different version of a website to serve and target each device is not a practical way forward. Responsive web design addresses this problem head on.
Responsive web design
“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” – Jeffrey Veen
How does it work?
Fluid Layouts
The first part of responsive web design has been around for a long time now, fluid grids. They lost a lot of interest inside the web design community with the arrival of widescreen displays, but these fluid or liquid layouts are a back to fill a keypart in responsive web design.
But the new fluid grids go beyond working with just arbitrary percentage values, it is now more designed in terms of proportions. Everything needs to resize in relation to one another.
Media Queries
Media Queries are awesome, they basically allow you to gather data about a site visitor and use it to conditionaly apply css. In our case, we are bassically concerned with the min-width property, wich bassically allows us to apply a different css, if the width of the browser window goes below a certan point.
Let’s say we wanted to add some specific css style to mobile phones, our media query would look something like this:
@media screen and (min-width: 480px) {
.content {
float: left;
}
.social_icons {
display: none
}
// and so on...
}