Without a doubt, good content gets you the audience. Yet, that alone won’t keep them coming back. Responsive design is the other major feature you should use when creating a website. Remember, your readers use devices that range from desktop computers, tablets, to smartphones. Without a responsive layout, the content display will be inconsistent across the screen types.
What’s responsive design?
A responsive website uses dynamic display properties. That is, the content display is adaptable to devices of different capabilities. Especially, the way the design accommodates varying screen sizes. In short, good design succeeds in showing content on both low-res and high-res screens. And mark you, that’s without the loss of user-friendliness.
But, what if your website already features a poor design? That’s fixable. Responsiveness might seem like extra work; yet without it, you’ll put off your readers. Here, we’ll cover 6 steps that you can use during website creation. Or, even when re-designing your pages.
Step 1: Include a viewport
The viewport is a meta description element in HTML5. It tells a browser how to scale your content. Also, you declare it in the head of your page. So, you see, it’s what you should start with when you aim for responsive design.
Let’s say you intend your page to display on devices of varying widths. Start by stating that the viewport should fit any width (i.e.,). Then next, declare the normal zoom (i.e., ). With that, you’re sure that your content will present in a natural looking manner.
For such a simple approach, the results are quite significant. Like, in these two screenshots (see Figure 1). The page goes from a desktop screen type to one meant for a mobile device. And, that’s with improved clarity too!
Figure 1: Content with viewport tag and without (Source: Google Developers)
Step 2: Choose a responsive layout pattern
If you’re a website developer, good designs should be part of your toolset. On one hand, that poses a risk: repetitiveness. Some may call it monotony. Enter responsive design patterns. They simplify the whole process. Just choose one that’s sure to work and keep on producing!
The only thing you should be careful about is whether a given layout is right for the content. See, there’s the option of making the page fluid, where content just adjusts its flow to fit a screen. Not to mention, you could re-arrange the content columns using ‘dropping’ (see Figure 2). And that achieves the same thing still. The page re-arranges itself as per screen requirements.
Figure 2: Column dropping to achieve responsiveness (source: Responsive Design Knowledge Hub)
Step 3: Use media queries
In your CSS styling, use media queries () to dictate how content will show depending on screen type. Here, you get to specify all the characteristics of your responsive display according to intended device. Of note, the media query contains attributes like: min – width, min – device – width, max – width, orientation = portrait, etc. (see example below)
So, as the query above indicates, when the browser has a width less than 600px, but greater than 500px, h1 gets should be blue. If, for example, you don’t want to limit yourself to how narrow a screen can get, you shouldn’t use the attribute. Instead, opt for. This stems from failure of legacy devices to state the correct device width.
Step 4: Insert breakpoints to fit content
Now that you’ve factored in the media queries consider where to add breakpoints. Proper responsive design provides for about 10 words per line. And that corresponds to a 600px width in a majority of the cases, for small screen devices. In this case, that’s where I’d put my breakpoint.
That doesn’t mean you should use breakpoints without testing them out on target devices. Where you insert them is subjective. You’ve to see how the content looks on varying screen sizes. As a developer, you’ll have to use at least 3 test devices. Choose screens from the major categories: desktop, tablet, mobile …
Step 5: Consider whether images are necessary
Let’s admit it; content can’t be ‘complete’ without some multimedia. Yet, this is also, where it gets tricky, fast. Talk of images, video, audio, and so on. The problem with media (say pictures) it needs considerable bandwidth for the design to be responsive. As a rule of thumb, when you can get a CSS alternative for an image, go for it. If not, optimize images for performance.
Step 6: Use right-sized videos
What’s your page’s main aim? More often than not, that would be to convey information. Then, use videos whenever possible. They provide the content in the easiest consumable way. But, that’s if you get the responsiveness right. On legacy platforms, support for some video formats may not exist. So, first, check (using the argument) if your content would play.
Other than that, use correct-sized videos. For a given platform, you need the video’s frame size and quality to be appropriate. Also, don’t use clips that are longer than necessary. With that in mind, consider using the attribute. It would make your video player fit a given screen type (see example below).
Wrap up
The steps you’ve seen here are in no way exhaustive. Each step points you to a factor that needs extensive practice for your design to become flawless. Still, if you wish to embrace a responsive-, dynamic-content era, this is the starting point. That’s not even the best of it. Responsive design makes it easier for bots to crawl your site. You see, you’ll not only make your readers happy, but the search engines will also rank you higher.
