What is Responsive Web Design (RWD)?

According to Wikipedia, responsive web design (RWD) is: “an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).”

Typically a site designed with RWD adapts to the layout of the device being used (including the orientation of how it is being held—either horizontally or vertically) by using fluid, proportion-based grids (think Windows 8-10), dynamically-proportioned images, and CSS3 media queries. As RWD layouts becomes more sophisticated, the “grids” of earlier iterations of RWD are becoming more and more “invisible” and what is left is an enhanced user experience that looks fantastic, and acts the same, across any type of device.

Naturally there are some design challenges, considering that a desktop monitor can be over 2000 pixels wide while a mobile phone in portrait orientation is as little as 200.  This is very apparent on sites NOT designed with RWD in mind, since smart phones will typically shrink the entire website proportionally, often rendering the text too difficult to read.

So significant was/is this problem that most websites have “mobile versions” solely for the purpose of looking good on smartphones and/or tablets.  Of course, the challenges of designing something to look equally good at 2000 pixels as 200 often means the mobile versions look significantly different from the “normal” versions.  Good-bye branding.

page-2_img01-1An RWD website offers the solution to this issue by ensuring that the website looks as similar as possible across all devices.  It also eschews the need for an entirely different “mobile version”, which can save on development and on-going maintenance costs over the long haul. Developing and maintaining one RWD website is more efficient than developing and maintaining both “normal” and “mobile” versions of a website.  Additionally, Google “rewards” mobile-friendly (and particularly RWD-enhanced) websites by improving their organic search result rankings.

So what does any of this have to do with self publishing with Outskirts Press?  We are deep in the process of migrating our website to RWD to further enhance the publishing experience for our clients; so you could say it is on the top of my mind.  Over the next several posts, I’ll get into more details about that migration.