Perhaps you’ve heard of responsive design or perhaps you haven’t. In reality, responsive design is a terrific solution websites to display across multiple screen sizes, including the largest computer screens and the smaller mobile devices - phones, tablets, etc. While not without limitations, responsive design projects require revamping the design process to integrate more closely the design with the coding. While it has some limitations, responsive design is a great way to ensure usability across platforms at far less cost than building fixed mobile sites.

A responsive package from Tectonica will add about 30% to the cost of the desktop project total whereas a fixed site design for mobile can cost double that of the original project cost.

What is Responsive Design?

Responsive is a fairly new design practice first identified by Ethan Marcotte in an article in “A List Apart”.

The growing popularity of many mobile devices with a variety of small screen sizes, coupled with the growing popularity of larger computer screens has added a significant size spread for website viewing and additional platforms that web developers are being asked to create stable sites for. One great solution: Responsive Design.

Responsive Design uses two coding techniques - fluid grids and media queries. Don’t be too concerned if you don’t understand what that is. Basically, “media queries” is a mechanism that allows the website to know the size of the browser view in which you are seeing the site. “Fluid Grids” allow elements on a site to move around.

The basic concept is that page elements change their location(and possibly their size) in relationship to each other depending on the size of the browser view of the site. how large the browser size is. At specific ‘breakpoints’, reflecting the main screen sizes - such as large screen desktop, iPad, iPhone, smaller phones, tablets, etc - the page elements will rearrange themselves, change size, or disappear (if less relevant) to adjust to fit the size of the browser or screen.

Want to see it in action? I’m sure it will make more sense.

Choose one of these sites:

http://www.bostonglobe.com/

http://www.fork-cms.com/

http://www.smashingmagazine.com/

Now open your browser to its largest size, grab the lower right-hand corner and resize the browser slowly smaller and smaller. Watch the page elements adjust to the size change. If you open the site on a mobile device with a small browser it will look just like that smaller one.

Another great visual demonstration of this can be found here:

http://finecitizens.com/defineResponsive/

Here is a page where you can view several of these responsive site layouts:

http://mediaqueri.es/

Responsive vs. Fixed Mobile Design

If you are new to mobile design, you might be wondering how this differs from the traditional way that mobile sites were set up. The fixed mobile design requires creating a design for each mobile screen. The homepage, for example, would require one design done in photoshop for the desktop design, and perhaps between an additional four to six more designs done in photoshop for the major mobile screens - iPad vertical, iPad horizontal, etc. Following that each of these designs are coded separately. You can easily understand where the workload (and cost) can really add up. As well, this would never totally account for all the potential devices that could be used.

(As an aside, one case where it might be advantageous to design for fixed mobile screens is if there is a specific need for people to view the site on a mobile device. Fixed mobile design provides for more specialization of functionality for the mobile site. Therefore, for example, if you require a site for an event, and you expect most people to be utilizing the site at the event on mobile devices and performing different activities on those mobile devices, then you probably want to consider utilizing a fixed mobile design.)

How the Responsive Design Process is Different

With responsive, the process is a bit different. Instead of designing each template multiple times for each screen, designers and code developers work closely together in an integrated process. First a wireframe for a homepage is designed and reviewed by developers for its ability to adapt to other screens. After client approval of the wireframe, developers jump right into coding to create prototypes that adapt the elements for main ‘breakpoints’. Afterwards it pass back to designers for input and full design completion, and then finally back to developers for code completion.

Responsive design requires the developers to also have a role in making design decisions, as they are making recommendations as to where items will go in the various versions when they develop the prototypes. Luckily, here at Tectonica, our developers are formally trained and have experience in design.

The whole process saves large amounts of time and money from a fixed mobile design because the designer does not need to create six to eight designs for every template. Only the coding time is extended.

Because responsive design is based on breakpoints and works with a fluid gird, the designs work on a large set of devices because it accommodates any number of screens between specific sizes instead of a set of fixed sizes.

General Mobile Limitations

It is important to remember that responsive sites are built to work not only on different screen sizes but different devices. Since there are any number of mobile devicess the responsive design alternative is great as it incorporates the possibilities for many different screen sizes.

This, however, does not mean that every functionality is going to work on every device. For a responsive site, or any mobile device for that matter, the choices of functionalities are limited. Specifically some Javascripts and other major coding tools we use to build some special functionalities will work on some mobile devices but not others.

The truth is that people engage the internet for different reasons on mobile devices than they do on their desktops. Additionally, mobile platforms have certain limitations. Think of this analogy; you wouldn’t text someone the same exact thing you would tell them over the phone. Why? Because the limits imposed by texting make it useful for different purposesbut there are still limitations! With all mobile designs - responsive or not - this must be considered.

At Tectonica, the responsive design package includes testing on three major mobile platforms: iPhone, iPad, and an Android Device.

Limitations of Building a Responsive Website

1. An existing desktop site cannot be made responsive. A responsive site requires a specific integrated process requiring the smaller and full screen versions be built together at the same time. We cannot go in afterwards and change a site to be responsive.
2. There are certain design limitations. Responsive design takes advantage of a set of patterns of moving items. Thus, responsive designs are a bit more basic in their structure and tend to be a little more boxy and they rely heavily upon a set number of columns. Simply put, not everything can be accommodated in a responsive site.
3. Functionalities are more limited on any site with mobile. Mobile devices have browsers with limitations. Also, pointing and clicking with a mouse is a very different thing than touching with your fingers. Workarounds can be made for this by sometimes selecting a more simple functionality to appear when viewed on mobile devices or simply to omit the functionality altogether. However, if it is a key feature of the site, this can be problematic.
4. We need to know very specifically about the user interface objectives for the site’s mobile users. It is important to consider any ways that mobile site users might be approaching the site differently as we decide where elements are to be placed.
5. Every site that goes responsive must include a wireframe stage for any key pages.
6. Responsive sites will have some pages built out directly in WordPress installation. This is usually isn’t a problem, unless for some reason you later wanted to switch Content Management Systems (CMS) or have a programmer build out a back-end specific to your site.
7. The way content works in responsive design is a bit incredible. With parts changing shape and moving around, there are more limitations on the size of content. For example, what would fit nicely on a menu tab on a desktop device won’t work at all on a mobile device. For this reason, it is important that we get content for the site’s main pages from a client early in the process. Usually we will request real content to be developed immediately following the wireframe stage in order that we can use and test the content during the prototyping stage.
8. There are an endless number of devices out there. Unless otherwise requested Tectonica will test the site on iPad, iPhone and Android phone devices.

One July 26th 2012, Tectonica had a planning retreat to prepare itself for offering responsive design as a service to its clients. To see some photos of us planning check out our flickr stream.