We all love our smartphones, tablets, desktops, laptops and eReaders. You could be reading this blog post on anyone of them.
This holiday season, millions of iPads, Kindles, Galaxies, Surfaces, RAZRs and countless other devices will be unwrapped, charged up and used to surf the Internet. It's great. There are big devices, small devices, and every size in-between. It's the free market at work, but what many users don't realize is that with every new screen size, every new high density display, every new operating system that hits the market, a web developer's job gets a little more complicated.
By now, the term responsive web design is nothing new. It's a way of designing and developing websites so that as the screen size changes, so too does the layout of the page. The approach is in a constant state of evolution, and the problems it aims to solve continue to grow. The onslaught of devices and resolutions may not mean much to the average user, but the ramifications are felt behind the scenes. They affect every phase of creating a new website and present challenges for designers, developers, brand managers and brand partners.
Let's take a look at a typical website workflow and see how a responsive site differs from a typical static website.
We'll pick up after a site map and information architecture document have been created. Normally, a designer would block out simple wireframes in photoshop and it would be on to the design phase, but with a responsive site, we need to see how these content blocks shift as the screen size changes. There are a few ways that we can solve this. The most effective way is to jump right into code and lay the foundation for development.
Coding out our wireframes will allow us to establish the basic code structure of our site and allow us to interact with a fluid representation of content. The other way we can approach wireframes is with the more traditional static files built by a designer in Photoshop. This method will show clients what the design will look like at mobile, tablet and desktop sizes, but it lacks the percentage based fluidity that our final product will have. Either approach is much more intensive then the traditional one size static wireframes that brand partners are used to seeing and paying for.
Once the structure of the site has been created, the design phase poses its own unique set of challenges.
Traditionally, we create two unique home page designs, then after a direction is chosen, we design out the remaining pages. But with such an array of sizes that our design can be viewed within, we now must figure out where our designs "break points" will be, i.e. at what point the design becomes distorted and needs to shift the layout of its content. At the very least, we need to show our brand partners a full-sized and a mobile layout, essentially doubling the work of a traditional static site.
Once we decide on a design direction and get the files built out, the problem of screen density or retina screens comes into play. If you've ever been on your retina screen device and noticed that icons and images look blurry and pixilated, its because the site was not optimized for such high resolution screens. Designers and developers need to work together to figure out what design elements need to be optimized. This is done by creating two sets of images, one at normal size and one at twice the size, then when development begins, the code will call different images depending on the screen density, again doubling the time we spend designing and coding out all the elements of our site. Using font icons and CSS for design elements can save us from duplication of background images and icons, but it adds yet another layer to the process that previously did not exist.
Once we make it to the development phase, differences between static sites and responsive sites really show up. Instead of just translating our static design files to code, we need to build everything on a fluid grid. At this point, our design should become device agnostic. We can code our break points to iPad dimensions, but what happens when the next generation comes out and it's a different size?! There are countless screen dimensions between devices, to focus in on one device or size is defeating the purpose of our one-size-fits-all design approach. We instead must focus on where the design naturally breaks, letting the aesthetics guide our design decisions.
Once we have our site visually correct, we now have to account for the difference between a touch-operated device and a mouse-operated device, and wait, what's that? … now there are laptops that act as both? With traditional mouse-driven devices we have the ability to hover on and off objects, this is not the case with touch, where we instead have gestures that are not possible on mouse driven devices. There are multiple ways to deal with these complications, but you can see that it is a far cry from the traditional approach to website design and development.
The last step in developing any website is lots and lots of testing. Where we used to only worry about a few browsers, Windows and Mac, we now have the added time of testing and debugging multiple mobile operating systems and browsers as well as worrying about how our responsive layout degrades to legacy browsers and devices.
So what does this mean for designers, developers, brand managers and brand partners? Time and money. If you want your site to look great no matter what device it's viewed on, you need to expect to spend more time worrying about the little things. Planning upfront can make all the difference between success and failure. Knowing ahead of time all the issues you will face will allow you to plan for snags along the way.
Designers must learn the basic principals behind responsive coding. Developers must learn and stay educated about the ever-changing approaches to responsive web development. Brand managers need to learn from designers and developers to keep the brand partners educated on the process and brand partners need to expect an increased investment to reach a broader audience and improve their customer's experience.
Let us know your experience with responsive web design. Tips, tricks and problems are welcome in the comments!