Nowadays on average out of ten projects we are asked to bid one six or seven require us to implement responsive web design techniques. People give you PSDs made by their graphics designers and ask you to convert them into responsive websites.
But what is responsive web design and what are some of its characteristics?
Responsive web design is the web design that delivers easy to use, minimal navigation, input and scrolling websites. These websites have to be clear and easy to use across all the major front end platforms including desktops, laptops, smart phones and tablets.
 |
| Example of responsive web design site of UC San Diego |
Here are a few technical elements developers have to take into consideration when writing responsive code:
- to implement responsive web design you have to implement a set of flexible layouts, images and an intelligent use of CSS media queries (@media)
- these media queries make the page use different CSS style rules based on the specs of the device the site is displayed on
- flexible images are sized in relative units (rather than absolute units) to prevent them from displaying wrong on devices with different screen sizes / resolutions
- the server side components (such as server side javascript code, php or ruby code) produce faster-loading speeds to optimize user's experience over potential slowliness caused by the cell data network
 |
| Sample of responsive web design by Boston Globe Magazine |
An important aspect of implementing responsive websites is defining a so called "fluid grid". A fluid grid, instead of designing a layout based on absolute numbers of pixels, is designed in terms of proportions. That allows the layout to re-size itself when pulled up on a smart phone screen or tablet and when these devices are used in either portrait or landscape. In fact with a fluid grid all the elements of the layout will re-size their widths and heights in relation to one other.
Responsive web design is the web design of the future.
Make it a great day!
Adrian Corbuleanu
Miami Beach, FL
Documentation sources and bibliography
1. Wikipedia
2. Smash Magazine
3. http://blog.teamtreehouse.com/
