Perspectives

Advanced Responsive Web Design Considerations

SHARE Share on Facebook Share on X Share on Linkedin

Have you ever visited a website on your phone and been so frustrated that you just gave up and left? Why were you frustrated? Was it because things didn’t work correctly? Was the site hard to navigate or use? Or did it just take so long to load that you gave up? Here’s some good news – it’s not your fault. Frustrating mobile experiences are often a result of the company or site’s failure to properly plan for and build experiences that work across all screen sizes.

Web design is in the middle of the biggest shift in its history – transitioning from designing for one screen to designing for an unlimited number of screens. Gone are the days when a designer could make a reasonable assumption about how the user was going to be viewing their design. Now, users might be accessing your website from a phone, tablet, desktop, laptop, car display, refrigerator (I’m not kidding), or any number of other devices.

Approximately 50-60% of all web traffic is now mobile traffic, so your users are more likely to be viewing on a mobile device than a desktop. The reality is that users now expect sites to look, load, and work great on all their devices.

This presents us with a challenge – how do we make sure that everyone viewing our site gets a great experience?

The answer to this is responsive design. Responsive design essentially means building the design to respond to the size of the browser or device. The goal is to provide a pleasant user experience across a multitude of devices and contexts. This philosophy has quickly become the standard in the web design industry, and anyone not practicing it risks being left behind.

As with any web design, responsive design can be done well, or it can be done poorly. There are many things to take into consideration when designing responsively, and if you ignore them you may risk confusing, frustrating, or even losing your users.

Here are a few of the main things you should be thinking about when undertaking a responsive design.

  • Mobile User Needs – Mobile users often have very different content needs compared to desktop users. Make sure you are prioritizing these when appropriate.
  • Clear Navigation – Navigation can be tricky on smaller screens. Making sure your users know where they are, where they can go, and how to get there is very important.
  • Performance Matters – If a site isn’t loading quickly, users aren’t going to wait around. Work closely with your developers to ensure that the site loads quickly and efficiently. Your users (and their data plans!) will thank you.
  • Partner Experience – Make sure you’re working with a design/development partner who has plenty of experience with responsive design. Any number of issues can come up when working with someone who doesn’t understand the ins and outs of designing and developing responsively.

Ultimately, responsive design is about making the user’s experience the best it can be on all devices and screen sizes. The user won’t care how you’ve done it, they’ll just be thankful that you did.

I’ll end with some advanced tips and resources specifically for designers and developers to help with your responsive design projects.

Responsive Considerations for Designers:

  • Wireframes – Wireframes are essential in responsive design because they help you experiment with different layouts quickly before moving on to the time-consuming process of designing comps. They don’t need to be high-fidelity – you can just sketch them out on paper if you prefer – but you should have them.
  • Flexibility – Above all else, responsive design is flexible. This means that your design comp is a snapshot of what the site will look like at one dimension. Is your design prepared to change when content areas start shrinking or expanding? What if there is twice as much content? Designing with flexibility in mind is key.
  • Consider Mobile-First Design – Starting with mobile designs first allows you to focus on the mobile experience and make sure that everything essential is captured before you start progressively enhancing it as it gets larger.
  • Touch vs. Mouse – Many of the paradigms that we’re used to on a desktop, like hovering, are not available on a touchscreen. Make sure you aren’t relying on interactions that aren’t available across all devices.
  • Use a Grid – This is generally just good design advice, but even more so for responsive design. Grids help keep your content organized and aligned correctly as the screen size changes.
  • Remain Involved – You’re probably not going to be designing a comp for every possible screen size, so it’s important to remain involved with your developer during the process. They’re probably going to have questions for you about what happens to the design at certain dimensions, so be prepared to work through any issues or questions that come up.

Responsive Considerations for Developers:

  • Optimize – Responsive design should be fast. Time means money – both in terms of your users’ data plans and the cost of lost users who won’t wait around for your site to load. Be sure that you are optimizing both your code and your images. I like to use Grunt to automate things like image optimization and code minification. Here’s a good starter guide to getting Grunt set up. In addition, consider starting with smaller images and loading in larger versions for desktop. Again, here’s a helpful guide to get you started.
  • Breakpoints Are Dictated by Content – When web developers first started designing responsively, we had only a few devices we needed to create breakpoints for. Now, there are so many possible devices that it seems silly to define two or three breakpoints – instead, create breakpoints wherever the content requires it. If something is starting to look bad at 937px wide, create a media query for that element at that breakpoint.
  • Frameworks – There are plenty of nice frameworks out there, but you might consider not using one. They’re great for quickly getting a prototype up, but you can often find yourself fighting what the framework is trying to do. In addition, they often pull in loads of things you don’t need for that particular project. If you’ve never designed without a framework, try creating your own CSS grid from scratch. It’s a great exercise and will free you from having to pull in a framework with each project.

Responsive Design Resources:

Here are some helpful resources for designers and developers to learn more about responsive design:

Looking for more web design tips? Check out our post: 5 Major Considerations When Rebuilding Your Website.

Subscribe to our newsletter

Get our insights and perspectives delivered to your inbox.