What is Responsive Web Design?
Responsive Web design is a new set of Web processes and design sensibilities developed by Ethan Marcotte in May, 2010. Marcotte put forth the concept that companies shouldn’t design, build and maintain multiple versions of their websites, such as one for desktop, another for smartphones and possibly a third for tablets.
Particularly at the beginning of the 2007 mobile boom, when some believed apps would deliver virtually all mobile activities, businesses rushed to create apps. But we discovered that people use their mobile browsers too — and emphasis shifted toward creating dedicated mobile websites.
Therefore, the key benefit to having a responsive website is that it is only necessary to create and maintain one site, not two or three.
How Should You Plan for the Responsive Web?
Before even committing to a responsive website, it is important to consider the challenges that are intertwined with going responsive:
• Budget: In the past, firms spent considerable sums developing a fulsome, gorgeous desktop website. Once completed, clients would catch their breath and do it all over again by designing / coding a mobile version of their site. With responsive Web design (“RWD”), it is all done just once. Dollars do need to be earmarked for content editors, project managers, the longer design process, prototyping, production artists and the actual web build itself — and most importantly, testing, testing, testing.
• Time: Due to expanded considerations at every phase, responsive websites take longer to create, test and build. While there are no hard and fast rules of thumb, project timelines should be realistic in nature and agreed upon early.
• Resources: Marcotte says to “solve the parts not the problem.” Responsive Web design, by its very nature, is a process of a million small decisions happening on a daily and even hourly basis. The nature of RWD is the process of placing relative values on what is shown as the device canvas (technically referred to as the device VIEWPORT) shrinks and grows. This requires the responsible parties to work together to agree upon and prioritize what is presented at each device viewport level. Early in the process, marketing managers, stakeholders, designers, copywriters and web developers will want to prioritize and seek consensus on what is displayed and what “falls away,” or changes display order at different viewport sizes. This content prioritizing happens not just at the grand level but also at the granular macro level.
• Design and Imagery: No one wants to simply read text these days. The responsive Web design process aims to give enough visual “sizzle” at every device level to satisfy the goals of all stakeholders, managers and visitors. Photographers, illustrators and infographic designers must be cognizant of different image croppings as the layout changes from viewport to viewport. Production artists need to sensitively crop, sharpen and optimize virtually every significant image for all targeted viewport sizes.
• Grids and Layout: In responsive Web design, emphasis must be placed on easy-to-use interfaces that help visitors find what they want quickly. The practice is to consider smartphone users first and scale up from there. This helps ensure that the site satisfies users on any device and loads quickly on any Internet connection.
Desktop Browsers — on both Mac and PC including IE7 – IE10, Chrome, Firefox and Safari.
Tablets — including iPad 2, 3, 4, and Mini; Android tablets such as the Google Nexus 7, Samsung Galaxy 7, Amazon Kindle Fire, and Microsoft Surface RT.
Smartphones — such as iPhone 4 and later, Android 3.0 phones and later, Windows Phone 7.5 and later, and BlackBerry Curve and later. It is important to note that there are now enough smartphones with Web browsers to fill a small universe and it’s impossible to test them all.
Are You a Candidate for Responsive Web?
Responsive Web Design is still in its infancy. However, high profile sites like Mashable have declared 2013 the “Year for Responsive Design.” Should you take the plunge? There is little doubt that the explosion of the mobile web is real and rapidly eclipsing desktop users. Responsive design fits well into emerging technologies, like HTML5, that make it possible.
Perhaps a starting point is to examine your immediate needs. If you’re undertaking a whole new brand, collateral, logo, naming and the like, it’s a good time to consider going responsive.
If, however, you recently created a new desktop site and are happy with it (and your brand) a dedicated mobile site will be far less expensive, easier to wireframe, design and code than going responsive.
In many ways, the responsive discussion reminds us of those early 1995-96 days of the web when we met many clients who questioned whether they really needed a website. A review of 644 million sites in 2012 might seem to favor considering Responsive Design.