Responsive Web Design Part 2

In previous years, companies and web designers have usually taken a desktop first approach but with the rise of responsive design and the increase of mobile web users, it’s become a rapidly growing trend to design for mobile first. If you’re new to the world of responsive web design check out part 1 here.

Here are some stats from Pew Research last month:

As of January 2014:

  • 91% of American adults have a cell phone
  • 55% of American adults have a smartphone
  • 32% of  American adults own an e-reader
  • 42% of American adults own a tablet computer
  • 67% of cell owners check their phones for messages, alerts and calls even if their phone is not ringing or vibrating.
  • 44% of cell owners have slept with their phone next to their bed because they wanted to make sure the didn’t miss any calls, text messages or updates during the night.

And here is a big one:

  • 29% of cell owners describe their cell phone as “something they can’t imagine living without.”

Based on these stats, and they are increasing yearly, it’s no wonder that web designers have started to take a mobile first approach. Even though this  seems like the way to go, there are always strengths and weakness to everything.

Strengths

Focusing on Content & Functionality First

There is a lot less thinking to do when designing for mobile first. This gives you more time to focus on the core components and functionality of your website first. Leave all the fancy animations for the desktop version.

Progressive Enhancement

By focusing on the delivering the most important content first on mobile, this gives you more flexibility on applying more complex styling as your screen size/connection speed increases when you deliver the full website experience on desktop without slowing down your site with all the scripts and animations.

(Almost) Future-Proof

By having a mobile friendly website you can count on your website to work on the latest and greatest mobile devices. However, you can never predict what kind of whacky screen sizes companies will come out with next.

Weaknesses

It’s Time Consuming

Even though responsive design is currently the ideal way to go about building websites these days, it is however very time consuming to get right. By designing for mobile first you need to come up with a bare bones version of your site with all the necessary functionality that you need and then begin adding extra bells and whistles as you grow towards the desktop version. Designing the other way around is even more time consuming. If you start with desktop design you then have the hard task of subtracting all the cool stuff until you’re stuck trying to figure out what to leave in on the mobile version.

Optimizing for Many Devices

On top of being a long process you have to sit down and figure out which devices you want optimize for. For starters, we design around the more streamlined screen sizes such as iPhone and iPad. If you want to go fully responsive you end up with the daunting task of developing for the the many Android device screen sizes and everything else in between. But it doesn’t always have to be that way…

Speeding Up The Process

Using a Framework

By using a front-end framework like ZURB Foundation or Bootstrap the long process of making your site device friendly is drastically sped up. These frameworks allow you to make your website layout more fluid with its various css selectors and plugins. They will speed up your work flow so you don’t have to worry as much about managing a million media queries.

Whats Next?

 Understanding The Grid

In my next post I’ll go over using the column grid system and apply those principals to responsive web design.