What is responsive web design and how do I get there.

mashable-responsive-designA few short years ago, I could have almost guaranteed that you would be reading this on a Windows PC with Internet Explorer (IE) and a few short years after that, I could reasonably conclude you would be reading this on the aforementioned PC with IE, Firefox or Chrome but you could also be on a Mac with Safari, Firefox or Chrome. If we look back to two years ago, I could add that you would most likely be reading this on an iOS device such as an iPhone or iPad with Safari. Today, I would have to add the plethora or Android phones and tablets to that cacophony of mediums. All that being said, I can no longer reasonably guarantee with a degree of certainty how you will be reading this content. This is where a “responsive user interface” comes to the rescue.

The rise of the smartphone and tablet has made the old debate of simply browser and platform responsiveness a purely academic one. Today, we must add to our consideration screen size, device type, browser, mobile, etc. Does anyone remember the old days of trying to write code to determine a user’s browser in Javascript and simply tailoring the response? Doing that very thing today is more of an art instead of a science.

More and more, the phrase “responsive user interface (UI)” or “responsive web design” are thrown around without much consideration to the preponderance of effort that is required to make it happen. Being “responsive” is about detecting the screen size, browser, platform, and device type of the user and providing an aesthetically pleasing and functional interface to said user. In essence, as the user’s resolution changes, so does the interface to accommodate that resolution.

“It’s not a single piece of technology, but rather, a set of techniques and ideas that form a whole.” as stated by a fellow blogger.

Just to get you started as a primer, let’s look at some terminology you’ll hear with regards to responsive design.  Keep in mind that none of this jargon is new to designers as these concepts have been around for many years.

  • Fixed layout – a Web Design that is defined by exact pixel widths. Typically the banner image or header provide the maximum inner width for collapse
  • Fluid layout – Nothing new here, but a fluid design is merely providing a percentage width instead of a fixed width, for example, your header may be defined as 100% of the browser width.
  • Elastic – Adds the best of both fixed and fluid but adapts to the users preference in font size. In this design font are expressed using em or emphasis.
  • Adaptive – Adaptive is merely responding to the users device with a template based on their device type or screen resolution with a canned template. This differs from pure responsive in that typically it involves a redirect.

Now that we have the jargon out of the way, let start talking about being responsive. I’d never get into a discussion about how to paint a car without knowing what kind of car we are painting. We wouldn’t paint a Ford Pinto hot rod red would we? It isn’t just a matter of providing a UI layer with chameleon like properties, but it also means having an architecture to match.

Responsive Design design has given birth to RESS or Responsive Design with Server Side components. Some responsive design purists will claim that being responsive is merely about responding to the screen resolution. This is all fine and dandy so long as the user is going to sit there on their desktop browser and resize it to ohh and ahh at your responsive design. (Come on… you know you have done it.) RESS is merely leveraging server side detection to target the client more specifically, e.g. a template for mobile iPhone users or a specific stylesheet for an Android tablet. The net effect of RESS is that you can provide a better experience with a smaller footprint. This is because less code has to be downloaded for the UI to be responsive. In a pure responsive UI, the images for multiple resolutions are often downloaded all at the same time. This technique wreaks havoc on users with limited bandwidth or a limited data plan. If you load up your favorite responsive site on your mobile phone via wifi, you’ll no doubt notice that it looks really nice. Now turn off your wifi and attempt to load it if you have 3G service and you’ll notice it is probably slow. It is trying to unnecessarily load all those resources to respond to all UI possibilities, including a desktop. The responsive solution here is to conditionally load elements and carefully tailor your design.

The easiest way to get your feet wet with responsive design is to start with a simple web site built with a responsive technology. For example, bootstrap is a good start for a responsive UI layer.

responsive-web-design

Since I cannot guarantee how you will be read this, I can with a degree of certainty say that you are most likely on a mobile device of some kind. The latest statistics show that people who read news and blogs prefer to do so over the mobile web and not through a native app. From my own experience and research, I have seen this to be true. Although, I will add that most users do prefer a native mobile experience when they are doing tasks that require more interaction, e.g. shopping apps, productivity, music. The reasons for these are fairly simple in that they are local to the device and respond faster and are more intuitive that using a browser. The key here really lies in offline ability of an app. Think about it this way … when you request a page over the mobile web it may error out and not load, but if you request something in a native app, I can attempt the connection in the background and catch the error and retry over without you knowing it and also, I could give you cached data that I stored on the device if the connection is down. Which this isn’t entirely out of the question with HTML5 since you can use local storage. The key concept here is allowing you to work regardless of your moving around, traveling or being completely out of service. All that being said, the mobile web is the ideal way to view static content like news, social media, etc.

Being responsive is about blending technologies if you are considering a “roll your own” approach, e.g. HTML5, Javascript, CSS Media Queries, fluid grids, flexible images and JSON. It is not a simple task by any stretch of the imagination. Alternatively, you can choose to utilize a product or reach out to a partner to assist in your responsive needs. Keep in mind that just because you are responsive to screen resolution, doesn’t mean that you don’t have to consider certain nuances of the device or browser you are running on and respond accordingly. This is why most responsive sites have special stylesheets for Android, iPhone, etc.

Here are some of the top framework projects that provide out of the box responsive design.

Overall, I’d say to follow these rules when attempting a responsive UI.

  • If your site is content-based, consumer facing or fairly static, a responsive UI is definitely the way to go
  • If your site is more an application with lots of user interactions, you may be better off choosing to build something more adaptive than responsive.
  • Choose a responsive UI framework like the ones mentioned above… Don’t attempt the role your own approach

This should give the rest of you folks out there a better understanding of responsive design. The key to being effective and getting the most bang for the buck with regards to responsive design is simply in being there when your users need you to be.

Follow

Get every new post delivered to your Inbox.