Best Practices For Your Responsive Website

5 Guidelines to Get the Most from Your Site

Responsive Web Design Tips and Tricks

This is part three of our series on Responsive Web Design. Click here to read Part 1 and Part 2.

In our previous articles, we’ve covered why your business should have a responsive website, as well as what kind of content should live there. Today we will cover some best practices for making sure your site looks and functions great no matter what device a potential visitor is using.

1. Design “Mobile First”

The first step to building a good responsive website is to design your site to be mobile friendly from the ground up. Traditionally, sites were designed to look great on a large desktop monitor first and foremost, and those sites often did not respond at all based on the size of a visitor’s device screen. You may encounter older sites like this still, with images and text shrinking to the point of illegibility, or worse, spilling off the side of the screen entirely.

Designing with a mobile first philosophy means figuring out how your site will work and look at the smallest device size they are likely to use – say, an iPhone 5 – before designing the layout to be used at larger screen sizes because over 51% of website traffic these days is mobile.

That said, it’s important to remember that mobile first does not mean mobile only. It is still important that you visitors have a rich and intuitive experience when navigating your site with their tablet, laptop or desktop.

2. Determine Your Breakpoints

There are thousands of individual devices out there, with no such thing as industry-wide standards for what dimensions those devices use. There are a handful of generally useful breakpoints, though, that should work well across most broad categories of devices. While individual sites and individual devices can vary, we’ve found these pixel widths to be very useful:

• • 320px: This is the width of the original iPhone, and remained standard for that line until the iPhone 6 hit the market. Outside of smartwatches (a topic for another day), there aren’t really any current, popular devices that get smaller than this.
  • 600px: This width represents a good cutoff for devices that are smaller than your typical large format tablet, so between 320px and 600px covers most new iPhone and Android devices. The majority of current handheld devices fall within this range.
  • 768px: The “portrait” width of iPads as well as most other tablets of similar size.
  • 1024px: The landscape width of most tablets, also useful for browser windows on laptops that aren’t viewed full-screen.
  • 1366px: The average laptop monitor width. If you design your site with this as the largest width, sites will still look great on larger screens as well.

3. Scale Your Images

Your users, especially on mobile devices, may have limited bandwidth. Sure, beautiful full screen images (like the one in this article!) are becoming more and more common on websites, but it’s important to make sure your images are appropriately scaled and sized.

Tools like Photoshop and the free image editor GIMP will let you save your pictures at a web friendly size (ideally no wider than 1366px wide if you can help it), and also let you reduce the image quality to a point where a human eye can’t tell that it’s compressed — but your computer still can. 50% – 60% quality for JPGs is a good rule of thumb. TinyPNG and TinyJPG are great online tools that can compress your images further without any visible content loss.

In addition, size your images appropriately for where they live on your page. If you are uploading an author’s headshot that will only show up 300px wide or smaller in your author bio, there’s no reason to upload an image that is any wider than that. Save your pictures at the size they will be displayed on your site.

4. Resize Your Fonts

Whenever possible, you should try to keep your titles and headlines on one line. That frequently means that you will need to resize the fonts you use based on different breakpoints. You should also take care in selecting what fonts you use at any size. Make sure that typefaces that are thin don’t become unreadable as they get smaller. It’s also a good idea to give your text strong contrast against the background, to help screens with lower brightness or users with vision impairments.

5. Responsive Navigation

Navigation is one of the biggest challenges when it comes to designing a responsive website. This is especially true for large sites with many levels of menu items, but the same philosophy can work on any site.

The first thing to keep in mind is function. While your full screen site might have a full width menu across the top, that simply won’t work on devices like a tablet or phone. A standard solution is to replace your full width menu with an icon (such as the famous “hamburger” icon) at a reasonable width, such as 1024px or 768px, and change the format to a vertical menu.

On a laptop or desktop, you can hover over a navigation link to open a drop down context menu. On a tablet or mobile device, there is no hover function – this is where your site should be designed to work with taps and swipes. In your responsive vertical menus, icons like arrows or plus-signs can be used to indicate that a menu item is multi-level, and tapping these icons will expand your menu choices further.

So Is My Site Responsive Now?

While the guidelines presented above will get you well on the way toward a stellar responsive website, it’s important to note that the internet is always changing, along with the ways in which we access it. Other responsive design best practices to keep in mind are mobile page speed loads, how users interact with forms at mobile sizes, and more. Make sure you test your site on as many devices and browsers as you can get your hands on, and use tools like Browserstack to test for devices you don’t own yourself. And don’t forget, you can always consult an expert!

Whether you are programming your own website, are looking for someone to optimize what you currently have, or are looking to have a site built from scratch, we’re here to help!