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!

So how does one ensure that your existing website does not lose out on it’s current ranking and in fact turns up tops on relevant searches?

1. Know your keywords

The top 10 successful keywords from your existing website is a great starting point. Learn how your site is doing right now as a benchmark exercise. Start with finding keywords that already work for you. A useful tool to get this data is Google Analytics – use Analytics to find keywords that actually brought traffic to your site. Additionally Search Queries under the Traffic section in Google Webmaster Tools will give you a new portion of keywords relevant to your site. Those are search queries that people typed in Google to get your Web pages in search results. Knowing your keywords makes it simple to track their ranking.

2. Landing pages

Before you redesign, make a list of landing pages that perform best for your site right now. Using Google Analytics, get a list of pages that brought you the most traffic. Also make a list of landing pages that show up for your top keywords. If you combine pages that rank for your keywords and your most viewed pages according to Google Analytics, you’ll get a list of your top landing pages.

3. Backlinks

These are critical to website SEO, and it is important to understand which pages are linking to external websites. Google Webmaster Tools will provide you with perhaps the most detailed link profile of your site. Backlinks should clearly be keepers in the redesign as well.

So if you are getting ready to redesign your website, remember there is more than one reason to ensure that it is SEO friendly.

In our next post we will talk about UX & UI in web design – is the hype surrounding them translate to something real? Oh and more and more SEO related topics too. Fun times ahead!