In the past 2 years Responsive Web Design (RDW) has gotten a lot of attention. A lot of this can be attributed to the launch of the iPad in 2010 and the adoption of tablet devices and smartphones increasing exponentially. More and more its become important to make sure that your audience has a great experience of your site and your brand no matter what device or platform they are on. RDW is geared toward handling that task as painlessly as possible.

From Wikipedia, the free encyclopedia

Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule^[1], with fluid proportion-based grids (which use percentages and EMs instead of pixels)^[2], to adapt the layout to the viewing environment, and probably also use flexible images.^[3][4][5] As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.

What this means for new web designers
The standards for web design you may have already learned in high school or college are not completely outdated, however there is the issue of intent. Depending on the audience you are designing for RWD becomes more or less important. The larger, more technical, or more affluent a potential audience is, the more likely they are to experience content/media across multiple devices.

RWD also is not an end all solution, especially for handhelds. The intent of the website may change based on what device a person is using. For example with handheld devices, users are not likely to be interested in doing a lot of reading or searching. They also don’t want to be overwhelmed with actions. For this reason using a mobile site with clear calls to action and large click ready buttons is important.

I suggest in these cases either using a window sized based redirect via Javascript or PHP or using the  visibility selector on Divs combined with CSS Media Queries to make certain Divs visible at a smaller size  and some not.

Responsive Design is particularly useful when developing landing pages for online advertising in networks like Google, though you could also design individual pages for mobile devices and utilize and budget campaigns specifically to target those devices, it just depends on what you or your clients need and what your marketing strategy is.

Dreamweaver CS6 and RWD
Dreamweaver CS6 has several new features including the ability to help you instantly generate RWD sites, preview them and toggle back and forth throughout your entire designing and coding process. Dreamweaver CS6 also makes use of both JQuery Mobile and Phone Gap so you can incorporate these as well. Dreamweaver adapts for RWD by utilizing Fluid Grid Layouts and you can customize them for devices as you see fit. It generates the necessary Javascript and CSS Media Queries instantly and you can modify them at anytime.

Conclusions
Responsive Web Design is quickly becoming common, Adobe’s push to include it in Dreamweaver CS6 is evidence of that. This will likely be a standard requirement for new Web Designers in the job market, and for good reason. As more devices and screens emerge and as the demand for consumable content grows (as it will with the growth of the mobile market), it will be important to be able to deliver a consistent experience across devices and platforms with as little duplicated effort as possible. This will be a time and cost saving measure for companies, designers and agencies moving forward.

Ethan Marcotte has an extensive writeup and guidance on approaching RWD in his book Responsive Web Design

Be Sociable, Share!

• 

Roberto Blake

Roberto Blake is a Professional Graphics Designer and Photographer, living in Fayetteville NC, has work been working with Photoshop® for over 8 years now, and Flash® for the past 5 years.

More Posts - Website - Twitter - Facebook