Responsive Web Design — Part 1

Dean Watts
3 min readApr 26, 2016

--

In 1996 the tides began to change in internet access. The first “mobile” internet browser was created for a PDA called the Apple Newton. It was barebones, only black and white, but it gave people access to the internet from the palm of their hands.

Image from: http://www.teco.edu/pocketweb/

As mobile devices became more and more prevalent in todays world, the internet began to change with it. Webpages that look great on the PC could look terrible on these new devices. On top of that, “heavy” websites (ones with lots of images/other data) could take forever to load on the slow 1x/2g speeds the mobile networks of the early/mid 2000’s provided. In the world of the web, limited access means less visitors, which means less customers/page views/money. To combat the aforementioned issues developers started creating “mobile” versions of their websites, starting with just heavily stripped down versions of their pages.

An early version of facebook’s mobile interface.

The time and effort the developers put in was worth it, because the Mobile Web took off. By late 2013 the global number of people accessing the internet from a mobile device has actually taken over the number of desktop. Any website without a mobile site had to adapt, or be left in the dust.

Evolution of the Mobile Web

To keep up with the growing mobile market, data caps became “unlimited” and internet speed grew exponentially. Mobile webpages no longer needed to be as stripped down as they were before. Mobile webpages can now be as image heavy as their desktop counterparts, but a new problem arose.

As the mobile market grew, so did the number of mobile devices. Blackberrys, iPod Touches, Smartphones, Tablets, Xbox’s, even TV’s, hundreds of different devices from different companies each with a different sized screen. How can websites keep up with it all?

Enter Responsive Web Design. A term coined by Ethan Marcotte back in 2010 in his fantastic blog post which highlighted the beginning of a change in mobile web design.

He brings up the rise of Responsive Architecture, or “how physical spaces can respond to the presence of people passing through them…rather than creating immutable, unchanging spaces that define a particular experience, [we] suggest inhabitant and structure can—and should—mutually influence each other.”

Responsive Web Design is just that. Our “physical structure” (webpage) should no longer be static and rigid. If we are smart (which we are) we can have our structure adapt to our “inhabitant” (user). We can design a page that reacts to any device and any device’s screen size, a page that will look good and feel good. No matter what.

But how? I will explain in part 2 of this blog post series.

--

--

Dean Watts

Software Developer in Manhattan. Passion to learn and teach about the power of programming.