We do cool stuff.

You should read about it here.

The Side Dish

5 Tips for Crafting Better Responsive Websites

Pralie Dutzel, Senior Front-End Developer / 9.14.2017

With more and more traffic coming from mobile and non-traditional devices, having a responsive website is more important than ever. Level up your next responsive website by sharing these five tips with your team:

  1.  Involve your entire team in the process
  2. Test with real content as soon as possible
  3. Don’t focus on specific device sizes
  4. Build prototypes early
  5. Consider your site’s web performance

Involve Your Entire Team in the Process

Building responsive websites is a big task, and it isn’t any sole person’s responsibility. If you are planning on making a site responsive, remember that it’s a team effort. You should be thinking about how this will impact your audience, objectives, information architecture, designs, development and even web performance (more on that in a bit).

Project managers, designers and developers should be working closely together to ensure that the responsive nature of the site is factored into every part of the process, not just left for the development phase. A unified team discussion will enable everyone to bring their own insights and experience to the project, which will help to improve the site overall and lead to more satisfied clients.

Test with Real Content as Soon as Possible

You could spend all the time in the world designing and building a beautiful responsive website, but if you aren’t testing it with real content early on, it could be in vain. Try to get your hands on the actual content that will be used for the site as early as possible so you can ensure that your content shines and that the design doesn’t break down.

The UX Myths website provides several good reasons why copywriting and design should go hand in hand. Remember: content is the reason users are visiting your site, so it’s important to give it the attention and care it deserves.

Don’t Focus on Specific Device Sizes

We often get hung up on the specific sizes of our devices, and tend to stick to them when it comes to both design and development. Designers might make mockups to match the latest iPhone or iMac specs, while developers might use the arbitrary resolution of the iPad to determine where the breakpoints should be on a site. Even project managers or QA testers can contribute to this by using phrases like “does it look good on the iPad” instead of “does the design break down on small tablets.”

It can require a shift in thinking to break these habits, but by focusing on the actual content instead of a specific device, you’ll help to make your site more resilient and provide a better experience across the board.

Responsive Website Tips

 Not all responsive websites are created equal.

Build Prototypes Early

Prior to the official build out, it’s a good idea to build a few, low-fidelity prototypes in the browser to really test the durability of your design. These don’t need to look pretty; the goal is to see where the design excels and where it could use some work, especially in a responsive context. Things that might look great in Photoshop or a PDF will most likely need to be adjusted once inside the browser, and creating prototypes can pinpoint problematic areas before it’s too late to change them.

Ideally, this should be done before sending designs for client approval, so that you can finesse the design where needed and have confidence that it will stand up to anything you throw at it. Prototypes can also be useful for conducting user studies and focus groups to gain a better understanding of how users might interact with your site.

Consider Your Site’s Web Performance

Web performance refers to how fast a page is loaded, and it’s an important part of responsive design. If your site is slow, your users are more likely to leave and possibly head to your competitors’ sites. The issue becomes magnified if your users are viewing your site on a device connected to a spotty Wi-Fi network, are using cellular data or are in a different country.

It’s important to take the time to optimize your site and its assets, which again includes involving your entire team early in the process. Things like the number of web fonts, the file size of images, and the number of externally loaded resources can contribute to slowing sites down and can all be optimized. This is a great opportunity for designers and developers to work together to weigh their options and provide an experience that not only looks great, but is quick to load too.

Crafting a responsive website that offers a great user experience across a number of devices can be quite a challenge, but hopefully these five tips will put you and your team on the right track. Let us know if these tips helped you, or if you have any tips of your own for building responsive experiences!