By: Miller Medeiros and David Vale
Miller Medeiros and David Vale of digital agency Firstborn discuss the principles of responsive web design and how brands should be thinking and creating beyond the desktop.
The interactive world is constantly changing, and the number of different devices that connect it all is growing every year. The problem that arises is that there are no rules for the game. As big corporations create new products with different systems and technology, it’s inevitable that we’ll have to come up with creative ways to adapt.Responsive Web Design is not a new concept, but it has gained people’s attention in the past couple years as a good alternative to designing for different screen sizes and aspect ratios for all desktop, tablet and mobile devices. Put simply, responsive design is the creation of a single website with a fluid proportion-based grid that automatically adapts to users’ browsers and the devices they are using. This is not a trend—it’s the future.
"Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience." (Ethan Marcotte)This means that brands now have more control over how users access and interact with their content. These are huge changes. Most brands focus on desktop experiences only and leave the other devices aside. Now, more than ever, consumers are interfacing with brands from anywhere and everywhere; often they are using mobile as a way to augment or enhance another branded experience. By compromising content accessibility, brands position themselves negatively.
Access is good, but it’s not that easy. As we are dealing with multiple platforms, we have to plan ahead and prioritize the content as well as the format that it will be displayed in, to users. In our opinion, that’s the biggest challenge for brands--prioritization. The next step will be to take all that information and adapt it to a single template using the simplest code possible, making sure that it will be displayable on devices that have fewer capabilities.
This is not a simple task for huge brands with countless products and services, but some brands like Starbucks and Sony are already catching up. They’ve both launched new responsive websites that adapt to all formats and devices, thus maintaining a great user experience.
During the design and development of previous projects at Firstborn, we learned some simple rules that should be taken into consideration if you want to target multiple platforms.
1. Plan Ahead
In order to create an efficient and responsive design, we must plan things properly. The design process is a little bit different than what we usually have with a traditional website, especially because we can’t base the layout on a fixed viewport size and there is no simple way to design to every single size. We’ve found that it’s easier to design as few breakpoints as possible and then interpolate the layout between these breakpoints."The grid, like any other instrument in the design process, is not an absolute. It should be used with flexibility, and when necessary it should be modified or abandoned completely for a more workable solution." (Allen Hurlburt)If the layout is based on a grid, make sure the grid still makes sense on smaller/bigger screens and that the size of the grid can be easily adapted.
Most people agree that it’s best to start your grid structure from the mobile version, focusing first on the smaller screens with as few features as possible. That way it’s possible to have a "bare bones" version of the site that works on the oldest phones/tablets, and an "enhanced" version for the most capable browsers. On this project, we worked on both dimensions (desktop and mobile) simultaneously as we wanted to ensure the best experience for each view.
The relationship that a user has with a desktop is different than with a mobile, and therefore it shouldn’t be treated as the same. Priorities change, content needs to be much more clear and concise on a mobile version than on a desktop. A good example is if you access the Chase mobile site, it only gives you three options that are very clear and probably all you need. Review your priorities and only deliver the user what they’re most likely to want.
Remember that on tablets and mobiles there are no "roll overs" and most of the navigation elements that were designed for the desktop version will not work with gestures. Lately I have been noticing that we are blending some usabilities from across platforms. For example, the new mouse from Apple utilizes the scrolling references from the iPad and iPhone. This is a good trend, as sites should adapt to us and not the other way around.
2. Prototyping is Fundamental
Prototyping is really important for testing, validating the grid size and making sure the whole structure will scale to multiple pages. Since we won’t be doing designs for all of the possible widths, it is much easier to set some of the breakpoints on the prototype itself. Prototypes are also a good tool to introduce the project to the client. They show how the design will adapt to different screen sizes and help determine the content priorities that lead to an enhanced user experience.3. Keep it Simple
The simpler the site is, the greater the chance that it will work across multiple devices. Simple blogs are much easier to adapt than a complex interactive site. Technical limitations should always be taken into consideration if you want the best experience on the broadest range of devices. Sometimes we need to simplify the interaction and complexity of the layout to improve accessibility.The amount of breakpoints should be kept to a minimum, since each new breakpoint makes the system harder to test and maintain--especially if each breakpoint changes the design drastically and relies heavily on JavaScript to work.
