Ten Tips for Creating a Responsive Website

Websites need to be responsive. Not only will you drive away users if they can't see your website on their phones or tablets. Search engines like Google and Bing will also push your site down in organic search results if they notice issues with responsiveness. Used well, these ten tips can help developers transition a website gracefully from landscape style desktop browsers to portrait style phone screens.

Use a Container CSS Class

With the exception of full-bleed sections, all of the content on a website should be nested inside a container. Make the container’s size a percentage of the browser’s width. By doing that, you can not only control the width of your content across the entire site, you can also tweak the width for different screens. On desktop, you likely want a little whitespace on the edges of your website. On mobile, there’s a lot less real estate. So, you want to expand the container to take up most of the screen.

Make websites responsive by using a container class.
The gray bounding box represents the borders of the "container".

Proportional Units

Don’t limit yourself to hard pixels. Experiment with responsive units. For example, you can use percentages to create image containers that display at a certain ratio (a 16:9 ratio is 56.25%). You can even use viewport width to style text so that the text gets bigger or smaller depending on the user's browser screen.

Flexbox “Wrap Children”

Flexbox is a layout mode in CSS (a website programming language -- short for Cascading Style Sheets). It's a responsiveness powerhouse. By using flexbox's wrap children feature, you can force repeating elements to cascade to a second line when they would normally keep stretching on an infinite horizontal line. This feature is extremely handy for creating layouts like blog thumbnails or team profiles.

By using Flexbox "Wrap Children", the team profiles above will automatically move to a 3, 2, or 1 column layout as the browser narrows.

Flexbox Alignment Reverse

A key idea behind website responsiveness is moving from a 12-column layout on desktop to an 8-column layout on tablet and a 4-column layout on mobile. On desktop, there's plenty of room to show two elements side-by-side. But, when you downgrade to tablet or mobile, you will likely need to stack those elements on top of each other. With flexbox, you can easily switch from horizontal to vertical alignment. So, you can have two elements that are side-by-side on desktop switch to stacking vertically on mobile. You can even use “reverse” order to change which column, left or right, displays first.

Keep your classes tidy.

CSS classes are powerful. But, adding a class every time you need to make an adjustment can make your site unwieldy. It's important to plan ahead and strategize your class usage so that you're using the fewest classes possible. For minor tweaks, use combo classes. By keeping your CSS lightweight, you'll make it easier to:

  • Modify your website. Instead of having to track down a bunch of different classes on a range of pages, you can make site-wide changes with a single class.
  • Expand your website. You can reuse elements from other sections or pages to quickly scale.

Text Columns

Though not as powerful as flexbox, text columns provide a handy way to create a flexible column layout (it doesn’t have to be text only). For example, you can create a beautiful Pinterest style image layout (a masonry grid) by giving a container a column-count of 3 and then adding to it 6 images of differing ratios.

Pro tip: make sure any children of a text column is set to position: inline-block.

A masonry grid created using CSS column-count. Photos by Alexandru Acea.

Use “max-width” to create natural, responsive-friendly line breaks.

Whenever you insert an artificial line break by hitting enter, you’re adding an HTML element: <br>. Sometimes, those breaks cause awkward looking sentences on tablet and mobile. Max-width is a better way to introduce those line breaks without using a <br>.

Background-image

There’s two ways to insert images into your website. One is to add an image element (the <img> HTML tag) and the other is to add a background-image CSS style to a div. They each have their place. But, a background image can be flexible. Instead of being fixed to a certain ratio, background images adjust to their container.

Landscape Declarations

As much as possible, make mobile style changes in mobile landscape, not portrait. That will eliminate double work. And, as phone screens continue to get larger and larger, you won't have to go back to make adjustments because landscape is quite a bit wider than portrait.

Ephemeral Units (EM)

By setting the font-size on your <body> tag and using EMs for all other font styles, you can increase or decrease the size of all the typography on your site with a single style change. So, you can switch from a base 16-pt font size on desktop to 18 (or another size of your preference) on mobile.

More Blogs | View All

What makes a great brochure design and where to print it in Chattanooga

February 20, 2019

Great brochure design is about distilling the content down to what's most essential and presenting it in a way that's both visually compelling and easy-to-read. Here are 7 tips for how to do just that.

How to evaluate a logo design from a Chattanooga graphic designer

February 19, 2019

If you don't have a background in graphic design, it can be hard to know what makes a good or a bad logo. In this article, I review 8 questions you can ask when evaluating the work of a Chattanooga logo designer.

How to work with a Chattanooga graphic design agency to develop your website

February 18, 2019

Websites can be time and labor intensive. But, you can effectively partner with your creative agency by thinking through the website’s functionality ahead of time and by starting some of the content creation.

Start your project.

Every project starts the same way. I ask questions, get to know you, and delve into the challenges you face. My crticial thinking roars to life and I envision what we will accomplish together.

Send a message