Scale Like You Mean It: Best Practices for Designing a Responsive Website
Published on Jan 15, 2015 by Stephanie Rizzo
Take a moment to think about how the web has changed over the last few years, and you’re likely to notice one of the biggest differences is how we access information. No longer chained to a desktop, web users are more likely than ever to take their information to go.
“Clients expect their websites to work on all devices—desktops, laptops, tablets, and phones—at no additional cost,” Says Eric Van Holtz, a 2004 Computer Animation grad who now works as a Senior Developer for Push, a creative digital branding agency. Eric specializes in responsive web design. Depending on what sort of device a person is using, responsive sites intuitively scale up or down to present the best possible layout and interface.
“You’re actually going to design the site for several break points,” says Chris Burke, Program Director for Full Sail’s Web Design & Development (now called Web Development) program. “If you think holistically about the fact that your content will scale up or down depending on the device, then you can design intelligently.”
We asked Eric and Chris to share some of their best tips for designing responsive websites for a multi-platform world.
Design with intent.
According to Chris, a lot of novice designers make the mistake of trying to cram too much content into scaled down versions of a website. Instead, he suggests focusing on the most important and immediate information. For instance, if you’re trying to book a flight on your phone, you’ll need to be able to choose your destination, put in your arriving and departing times, and scroll through a list of flights.
“When designing responsively, we want to focus on user intent. For mobile, we want to strip away everything that’s unnecessary for accomplishing the task at hand. As we scale up to a tablet or a laptop, we can start adding content back in, like sidebars suggesting other trips you might like, or user ratings for a particular destination.”
Making a list of content ranked from most important to least important will give you a good idea of how to decide what gets included at certain break points.
Work with your developer from the beginning.
As a designer, your goal is to come up with an idea for a beautiful site. But your site also needs to be functional, and certain design elements might not be appropriate for the web. Bringing your developer on early in the design process will ensure you get optimal results faster.
“Responsive design starts in the information architecture phase,” says Eric. “A designer should not expect the developer to “just figure it out” or make everything one column. A lot of thought needs to go into how the user interface and content should adapt.”
In other words, don’t simply design a comp for the desktop and assume that the developer can easily shrink everything down to fit a mobile device. This just makes more work for the developer, and could result in a poorly designed mobile layout. Plus, you run the risk of making your partner angry. “If a developer is not provided with at least a homepage mobile comp, you will feel their wrath,” warns Eric.
Consider the cost of using a CSS framework or grid versus doing it yourself.
If you’re handling the back end of the site yourself, using a CSS responsive grid and framework can be really helpful, especially if it’s your first time building a responsive site. Grids allow you to easily design using percentage values rather than pixel values. However, relying on them comes with a few disadvantages.
“After I developed a few sites using a responsive grid, I found my mark-up to be really cluttered,” says Eric. “Sometimes you need width defining classes for desktop, tablet, and mobile views, or even a few more, like ‘hide-on-mobile’ or ‘pull-50.’ Over the past year, I can’t remember ever using a responsive grid. Instead, I just define my own widths on elements in different media queries.”
Even if you decide to forgo a grid or framework during the bulk of the developing process, you might consider using one in specific situations.
“If you’re developing a web app, then a CSS framework like Bootstrap or Foundation might come in handy. Or if you have a website with many different layouts, a lightweight responsive grid might be helpful,” says Eric.
Test compatibility with all browsers.
Different browsers have different quirks, and if you design with just a few in mind, your final product might feel a little off to some users. Looking at the site in a variety of browsers will take care of that. You may need to add extra CSS to account for browser inconsistencies, but that’s far preferable to having your design compromised for some users.
“You can utilize browser developer tools to make this easier,” says Eric. “Chrome even has device emulation and network throttling built in.” Using these types of tools will help you see the code, and you’ll be able to manipulate it in the browser to test values. You’ll also want to check that the site looks correct on popular iOS and Android devices.
Ultimately, a lot of responsive design practices boil down to prioritizing content, both in the design and development stages as well as for the user interacting with the final product. If you design with efficiency in mind, then both the design process and your site will run much smoother.
For examples of responsive websites, check out Eric’s portfolio.