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.
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.
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.
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.
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>.
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.
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.