Designing responsively

This article first appeared in issue 231 of .net magazine – the world's best-selling magazine for web designers and developers.

When we recently revamped our site, we wanted to showcase ourselves as a company. Unboxed Technology creates engaging employee training and interactive marketing tools and our site needed to reflect that.

Our solutions are cross-platform, fun, and cutting-edge, so a responsive design seemed the perfect match. We’ve created many traditional websites and mobile web apps, but this was the first time we tackled one design to rule them all. We are thrilled with the new site, but we learned a lot in the process.

Think responsive from the start

The internet is abuzz with discussion on whether we should think ‘mobile-first’ or start full-screen and degrade gracefully. Our experience was that it was best to think holistically. We started with our homepage. How should it appear on a full screen? On a tablet? On a mobile device? How should the navigation work across these different devices? How should the footer work on a small screen? We invested a lot of time on just that page, but ended up with a solid foundation for the whole site.

Whatever UI framework you choose will have standard functionality and constraints. Is it a columnar layout? If so, how many columns and what are the standard widths for each screen size? How does content wrap at smaller sizes? Let the designers help choose this framework and ensure they understand how it works.

While your framework gives a general structure, don’t let it limit your thinking. For example, we really liked having text overlay big images, but these overlaps didn’t play well with our grid layout. The designers recognised the issue, so they worked closely with the developers to figure out how to modify the framework to support their approach. The keys were thinking ahead and collaboration.

Responsive design does not need to mean ‘least common denominator’. It means thinking about what will work best for each situation. Sometimes we just let the pages resize and reflow for smaller screens; other times we need multiple layouts.

For example, we wanted our About page to have interactive ‘Brady Bunch’ pictures that gaze where you hover. But that design doesn’t fit smaller screens. We could have scrapped the idea to keep things, but we didn’t want to compromise. So we invested in two versions. On the phone we have smaller images and reduced functionality, but the full screen version still has everything we wanted.

We also learned we need to think performance from the start. Our early designs had our large pictures on textured backgrounds that required large-file-size transparent PNGs. By simply switching to a white or solid colour background, we could use non-transparent JPGs and significantly reduce the file sizes.

Size isn’t everything

Everyone says ‘wow’ when they resize the window and see how the site adjusts its layout. What isn’t as obvious is how we adjust for different capabilities across browsers and devices. We also needed to consider how touch devices don’t support hover, how different devices support video formats and so on.

A big challenge was when we wanted to teach iOS users about some of our Flash-based desktop products. We decided to build product demonstration videos for those users – videos we liked so much we then made available for all users!

The concept of a responsive design is great. You get a site that works for all your customers, everywhere and on all devices. But the biggest thing we learned is that simply saying ‘we’ll make it responsive’ is not a silver bullet. No matter how good the framework, no matter how great you can develop cross-browser code, you still are limited in how much information can appear at once and how customers need to use the information.

By spending time up planning on how you want your site to respond, you can create an amazing site that will be tailored for all of your customers.