02 Jan 2015

Defining Responsive Web Design

Now this is something that has definitely picked up some steam in the past years, for good reason. Some may call it a silver bullet, and the jury is still out on that for sure. However there are places that do good RWD, and there are places that do bad RWD.

But first, let’s start out with the basics.

WHAT EXACTLY IS Responsive Web Design?

In a very basic definition, it’s creating one website that can be resized to many different widths and heights, and conform to those restrictions on the fly.

For example, you view the New York Time’s website on your iPhone. The first thing you’re likely to do is to start pinching and zooming. That’s because, if you viewed the New York Time’s website on your laptop or desktop computer, it’d have the same layout but the text would be readable as it was designed for desktop.

Make sense? No?

If we throw in RWD concepts into the mix, we make elements on the same exact page shift, scale, and change their layout to something that’s more intuitive on let’s say : an iPad or an iPhone. That’s the greatness of RWD. We take one website and it’s front-end markup, and with a little power of CSS and maybe some Javascript, we’re able to resize the website’s elements to fit multiple devices.

So now we’re diving into the more technical aspects of RWD, with things like Fluid Grid Design and Media queries.

Fluid Grid Design is a web page that has elements (divs, tables, etc) that are not a fixed size, but are based on percentages or ems. So let’s say we had two divs side by side. One would be 50% width, as would the other. If I took my browser window and shrunk it, it’d change size, but the width of one of the divs would always be 50% width of the browser window. And in reverse if I maximized the size of my browser window, the div would get larger and still take up 50% of the browser window, as would the other div. Thus, giving us a total of 100% width of the browser window.

Media queries – These are the bread and butter with RWD as it stands. Essentially they are implemented into CSS (Cascading Style Sheets) version 3. They allow us to define which and what elements change depending on screen resolution. We define things such as maximum / minimum widths which would be required to “trigger” elements resizing.

To explain that with a little more detail, if we had a 960 pixel wide website for example, and we “triggered” elements to change size and position on the page to conform to, let’s say, an iPad’s portrait resolution (which is 768 pixels wide) we’d use code such as:

@media only screen and (min-device-width : 768px)
and (max device-width : 1024px)
and (orientation : portrait) {
    /* You would put your iPad portrait specific CSS here */
}

It’s a lot to think about if you’re new to this concept, but it really is where the web is heading for sure.

SO LET’S TALK ABOUT SOME ADVANTAGES.

  1. Works for mobile, tablets and desktops without the need of a separate ‘mobile’ site. This is has it’s advantages and disadvantages. The advantage being that we can target all devices with one website, and the disadvantage is we don’t get full customization ability for the nitty-gritty device-specific features without specifically targeting for that device. For more projects though, it’s a perfect catch all solution
  2. Engagement across devices. Obviously if we’re formatting our website’s contents to fit the device a person is using, it’s less work for them to find the pertinent information they’re seeking. I don’t need to explain why this is a good thing, but I’ll just say that the user experience goes through the roof!
  3. One place to make changes effects all the device’s content. Like above, since we’re using one website’s content, if we change an image let’s say, it would change for all devices with that one change. Same thing about copy, or even structure changes. Since we have a master set of files that controls all of the look and feel for multiple devices, we only need to worry about actually making the content changes once, rather than multiple times for specific devices.
  4. Some people minimize their browser windows. Sounds like a simple concept, right? What is great about RWD here is if a user decides to minimize their browser window to something smaller in width, the content could format to reflect that change in width. This gives a new experience for the user that is great, but sometimes isn’t what we would want (some people only like targeting mobile devices for example). We personally love it (resize the width of our blog!). It gives our viewers a little more clarity on focusing on the content, and we wanted the content to reflect a book.

WHAT’S NEXT?

RWD is evolving all the time. Different practices and purposes, to just being on the bleeding edge of what can be done with RWD. All we know is, we welcome any RWD opportunity with open arms!

Leave a Comment