History of Responsive Web Design – A Browser Extension Web Designers Can’t Live Without

History of Responsive Web Design & Productivity Tools

Welcome to 3V and thank you for stopping by. We hope that you will take the time to read this article and learn a little about the history of responsive web design (RWD) and takeaway from this article valuable information about one of the tools that we routinely use for mobile website and web app testing, the Chrome Mobile Browser Emulator.

Skip the Dialog and Show Me How to Install and Use the RWD Tools

The Problem: Testing Multiple Devices and Browsers

Every professional web developer, designer and even most DIY designers are challenged with the unenviable task of designing, publishing and testing their website on multiple devices and multiple browsers. I remember in the formative years of web 2.0, IT and technical professional referred to this challenge as “device agnosticity“, which incidentally I find to be a near malapropism, a bizarre combination of words;

• Device – A computing device such as a desktop, laptop, smartphone or tablet computer.
• Agnostic – A person who believes that nothing is known or can be known of the existence or nature of God or of anything beyond material phenomena; a person who claims neither faith nor disbelief in God.
• Device Agnostic – The capacity of a computing component to work with various systems without requiring any special adaptations. The term can apply to either hardware or software. In an IT context, agnosticism refers to anything that is designed to be compatible across most common systems.

During the 2000’s, I was simply programmer (a foot soldier if you will) so I thought it was cool to be involved in “device agnostic” design meetings, building web applications based upon the needs and requirements of business analysts, managers and executives. Nonetheless, the challenge in the early to mid 2000’s was the publishing of web content that would render consistently on multiple browsers and multiple OS’s. Fast forward a couple of years and with the incredible growth of smart phone and tablet consumers, IT and technical professionals were challenged with not only browser compatibility and OS compatibility, we now have to deal with device compatibility.

A Solution: Responsive Design, HTML5 and CSS3 – Simple Solutions for Simple Problem

As web 2.0 evolved, as browser standards continue to develop and as technology professionals push the envelope of UI/UX design, responsive web design (RWD) started to become mainstream. During the formative years of RWD, 2008-2011, designers used terminology like “flexible”, “liquid”, “fluid”, and “elastic” design. The adolescent years of RWD, 2010-2012, was crucial point and fork in the road that the web design community began to embrace and build upon responsive user interfaces.

I recall conversations dating back from 2012 to 2014 where clients, partners and other agencies emphasized to us, 3V, the importance of designing and publishing responsive web sites. In 2015, we are WELL beyond that conversation (much like in 2010 if you asked someone if they owned a cell phone, you would not dare ask that question for it is a simple assumption that everybody has one). No longer must a client request a mobile friendly website, now it is a foregone conclusion that web designers and developers build to a standard of responsive web design.

Solution Quality Control: Mobile Browser Emulators

Designers and developers utilize a host of tools to test device, OS and browser compatibility. Testing web assets on each device, OS and browser is VERY time consuming, tedious and downright boring! That said, we have come across a tool that we simply cannot live without, the Chrome Mobile Browser Emulator.

There are a thousands of emulators out there but let’s face it, if you are not a PhD of software engineering finding a user friendly solution can be a challenge. The tedious and time consuming method for testing devices and browsers is to pull out your phone and/or your tablet and open a URL or web app. The less than optimal method of testing device sizes is to resize your browser window and test the “fluidity” of the website or URL. Each of these methods serve an important purpose, but when it comes to true quality control The Chrome Browser Emulator will provide you with these benefits;

• Simple to Install
• No Setup Required
• Easy to Use
• Flexible – Test all the Major Devices & Browsers
• Peace of Mind

The Takeaway

If you are looking for a more consistent, quality and time saving means of validating, testing or verifying your website is truly responsive and renders perfectly on all types of OS’s, browsers and devices, follow these steps to install and use the the Chrome Mobile Browser Emulator.

• Installation (See Image 1): Using your Chrome Browser, visit this URL and click Install (Click Here to Install)
• Usage Preparation (See Image 2): Once installed, select the “M” button in your Chrome browser and select the type of display (device, size, orienation). NOTE: make sure you have select ‘use mobile user agent’ (this option will ensure that your request for the web page is truly emulating a mobile device)
• Usage Launch (See Image 3): After selecting the device type, size and orientation, view the screen!

Image 1

Image 2

Image 3