Responsive Web Design: 10 Things You Need to Know

RWD 10 Things to Know

The latest trend in website development is responsive web design (RWD).  RWD is an approach to web design in which a website is built to provide an optimal viewing experience on a wide range of devices, from desktop computer monitors, to iPad, to Android smart phone. 

The big driver behind this design trend is the explosive growth in smart phones and tablets such as the iPad. Companies want to seamlessly deliver their web content on a mobile device without having to build a custom mobile application. Moreover, companies want an aesthetically pleasing design that is easy to view on a tiny mobile screen (without stretch and zoom). Typically, we are talking very narrow screen resolutions of 240×432 pixels for the Android devices and 320x380 for the iPhone.

So how is it possible to build an RWD design?

Under the hood, RWD websites use a combination of JavaScript, user agent detection and cascading style sheets (CSS) to create dynamic page layouts which move, squeeze, and hide content on a webpage based on the device’s browser width. The foundation of these designs is based on a concept known as a fluid grid.

Sound great! So how hard is it to build an RWD site? 

If you are thinking about building an RWD site, here 10 things you need to know:

  1. RWD websites need to be designed from the ground up to leverage the fluid grid design concept. You can’t bolt an RWD design on top of an existing website.
  2. A significant amount of content planning is required for RWD. For example, images can be shrunk down with CSS using the max-width = 100% on an img tag but will degrade if they are enlarged and the original image resolution is not high enough to support large layout.
  3. You need to design your pages for mobile devices first.  This is also known as lowest common denominator design. This means you need to be able to either squeeze all your content elements down to a minimum of 320 pixels wide column and rearrange or remove page elements to fit in this narrow layout. Often getting rid of elements is the best option for mobile devices.
  4. As you design for larger devices you will need to plan for a least six distinct widths: 320px, 480px, 600px, 768px, 900px, and 1200px to cover all your bases.
  5. Conditional display logic will need to be applied to page elements based a variety of devices and screen resolutions.
  6. Unless you want to have your web developer make all the text changes to the site, the site will need to be built on top of a robust content management system that fully supports RWD.
  7. Your content management system must have tight integration with its theme layer and must expose conditional RWD design logic to your content editors. This will allow them to turn on and off specific content elements based on screen width.
  8. While moving content around to fit within a narrow viewport can pose a challenge, creating a menu/navigation system that works well under multiple layouts can prove to be especially vexing. One option is to create a dynamic menu (using CSS media queries) that converts a horizontal menu into a single column drop-down menu as the screen width narrows. This is assuming you only have a simple menu tree without a significant number of child elements.
  9. Devices with touch screens behave differently than computers with a mouse. For example, on a touch screen the CSS hovers are not available; users need to tap the screen. This behavior can cause some issues with certain dropdown menu systems.
  10. You need to extensively test and debug your website design on a variety of devices during development and before going live. We can’t stress this point enough.  Testing will save you from the post launch house of pain.

Looking for more information on responsive design check out these articles:

www.alistapart.com/articles/responsive-web-design/

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/