The days when a web presence meant slapping together nice looking elements that opened at the click of a URL to reveal company information are as dated as last year’s news. Websites today are multi faceted marketing and lead generation tools that influence a brand’s equity across the digital landscape.

Enterprise mobility also means a dynamic delivery environment and your web presence simply has to adapt to myriad device options. In the words of Jeffery Veen, author of ‘The Art and Science of 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”.

So what is Responsive Web Design (RWD) again? Simply put, it is a web design approach that delivers optimized design across devices for a truly friendly viewing experience. Screen size, platform and orientation – a website that is intuitive to these 3 elements uses the responsive design approach.

The one site for every screen practice consists of a mix of flexible grids and layouts, images and the use of CSS media queries. Time and Money are important considerations for any business and the RWD approach ensures that your website automatically responds to any device the user switches too. Imagine having to build a website for every Blackberry, iOS, Android out there! Responsive Web Design ensures a seamless user experience and repeatability from one time coding.

Responsive web design is increasingly becoming one of the most often discussed and debated approaches to delivering a consistent and optimized web experience to any display, whether it’s a high-resolution tablet device, a smartphone, or a 50-inch monitor. As everything from billboards to watches becomes Internet enabled, and device sizes and resolutions are no longer standard, many organizations with strong dependencies on a persistent web presence are investing in resources, platforms, and processes to:

• Build brand awareness and engagement with mobile users
• Grow reach across high-value demographics in the mobile segment with context-relevant content
• Increase customer loyalty with consistent, high-quality digital experiences across devices
• Optimize the investment in resources required to produce and maintain these experiences

Responsive design is a design strategy that is centered on designing your content so that it responds to the environment it’s encountered in. The term was first coined by Ethan Marcotte who identifies three fundamental techniques for responsive design: fluid grids for flexible layouts, media queries to help you adapt content to specific screen sizes, and flexible images and media that respond to changes in screen sizes as well.
It also became standard practice to create designs using fixed widths, meaning that the website was locked into a specific width regardless of the monitor it’s viewed on. In fact, that’s still the standard layout techniques for the majority of sites online. However, over the last five years we’ve seen some dramatic changes in how sites are viewed that are forcing us to reexamine how we design our sites. Some of those changes were relatively minor, like the aspect ratio of monitors changing from 4 X 3 to 16 X 9.

So what makes sites responsive?
As with all web design, a responsive design starts with HTML. Clean, well-structured HTML helps create content that is meaningful and easier to manipulate based on context. Likewise, the care the designer gives when planning the site’s semantics in uses of ID and class attributes can go a long way towards making the site more responsive. Clear roles for elements and consistent structure make it easier to control how content responds or displays within a specific design.

HTML5 also includes a few features that helps sites be more functional across multiple devices. The new form elements, for example, allow designers to create forms that take advantage of mobile device interfaces and facilitate making phone calls and sending texts without requiring extra markup or scripting. As you would imagine, CSS plays a major role in creating responsive design. CSS media queries allow us to apply different sets of styles based on factors such as screen size, orientation, or resolution.

More on how HTML5 and CSS influence RWD in an upcoming post. Watch this space!