Responsive Design Part 1: What is it?

One of the most exciting, challenging and rewarding aspects of my job is how quickly the Internet and the technology driving it changes. I am forced to learn, unlearn and relearn every year. There seems to be a hot new topic or a new gadget that redefines how users interact with content on the Web every few months. One of the most noticeable shifts in the past year at Noble Studios has been the interest and investment in responsive design.

By now, the majority of brands have caught on that their website needs to be accessible on a smartphone or tablet. However, it is pretty easy to get caught up in a whirlwind of terminology, technology and exceptions once one steps beyond this basic understanding. The easier it becomes for the general public to access information on the Internet, the more challenging it becomes for companies to ensure their content is reaching their audience.

In this series, I will discuss what responsive design is, why it matters, and what you can do to make your project successful. I will also touch on tools available for design and development professionals to aid in the responsive creation process.

Part 1: What is it?

Responsive design responds to the user’s behavior and environment based on screen size, platform and orientation. There is not a separate mobile and desktop experience; users have access to the same information regardless of which device they are using.

You are able to quickly judge if a site is responsive on your desktop computer by resizing your browser. If you decrease the width of your browser window while viewing Visit Newport Beach, you can see how the content is adjusting and resizing based off of the width. Conversely, resizing your browser while viewing CNN.com will yield very different results.

Mobile vs. Responsive

Long gone is the day when businesses could create a single mobile counterpart to their main website. Accompanying the shift in technology is departure from the school of thought that there are only two types of traffic: 1) mobile, aka smart phones, and 2) desktop computers.

Mobile

  • Separate development code for desktop and mobile
  • Two separate designs for phone and desktop. Middle range devices, such as tablets, will default to one site or the other
  • View usually has limited content
  • Separate URL for mobile – m.cnn.com

Responsive

  • Site responds to the width of the screen
  • One set of code
  • Full site is available on mobile
  • One URL

Pros and Cons of Responsive

Pros

  • Visitors can access all content rather than having a minimized experience on their phone
  • Device independent – no worrying about the new phone, tablet or coffee maker that can access the Internet
  • Puts focus on the content
  • SEO friendly for users searching on mobile

Cons

  • More planning needed up front to account for multiple user experiences
  • More focus on creating content that is easy to read on a phone as well as a desktop
  • Can slow down your site for mobile users if code, images and video are not optimized
  • The code that runs a website also has to  do a lot more legwork in order to display content nicely across devices.

The Future

Regardless of what direction you decide to take with your website, it is important to think through all of the potential ways your audience may be accessing your content. The strength of responsive design is that it has a higher chance of working for any new and emerging devices that may come along during the life of a particular site design.

In part two, I will discuss the intriguing stats that support why responsive design matters now more than ever.