People all over the world open web pages from various devices with different characteristics. Nevertheless, there are practices that you can follow in order to optimize your website for every device that is out there. For that, you will need a responsive web design. We've already covered the basics of responsive web design, so in this topic, we will learn about the best practices to follow to achieve responsive web design.
Mobile-first Approach
A mobile-first approach is one of the practices you should consider for implementing RWD. Start designing your website for mobile devices first and then scale up to desktop devices. There are multiple reasons why you should consider this practice:
- it's practical and more efficient with the primary focus on mobile design because mobile websites have more usability concerns,
- scaling up the mobile version is much easier than scaling down the desktop version, and
- mobile-first web design helps reassess what’s visually and functionally necessary.
While building a desktop website, we navigate through it with a mouse, but on the mobile version, we do it via taps and swipes. In the image below you can see the thumb zone:
Not to mention the physical differences, such as holding the mobile in your hands versus placing your laptop on a table while using the desktop version. These differences significantly change how mobile UI designers design tap targets and other important UI elements with which users interact. Here are the key UI differences you should pay closer attention to:
- The navigation bar on the desktop version is expected to be at the top, while on the mobile device, it should be at the bottom.
- Important links should be easy to reach and tapped with ease, and important links and CTAs (Call-To-Action elements on a web page that prompt users to take a specific action) should have a height of at least 44px (smaller tap targets are bad for usability).
- Other interactive elements should be easy to reach. The best practice is to keep them in the center of the screen because it is difficult to reach the corners of the screen with thumbs.
Generally, desktop and mobile approaches prioritize content. Ensure that the most important content is displayed first, especially on smaller screens. Avoid cluttering the screen with too many elements.
Responsive Frameworks and grid systems
While building a responsive website, consider responsive frameworks such as Bootstrap and Foundation. A responsive framework can help you design a responsive website more efficiently because it's a pre-written code library. Responsive frameworks have built-in responsive grid systems. This means that you just need to make a few adjustments for other screen dimensions, such as optimizing typography and images.
For example, in the Bootstrap framework, you can find various components. Here is an example of the Bootstrap buttons:
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>Here is the output:
As you can see, you can just copy the code from the Bootstrap website, and save yourself a lot of time.
Using frameworks has a lot of benefits. The first one is saving time. Frameworks are prewritten code for commonly used elements such as navigation, layouts, buttons, menus, etc. These prewritten elements are also optimized for different screen resolutions. Meaning, they are responsive which allows developers to focus on customizing their website's design and functionality rather than starting from scratch.
Next, frameworks are consistent because they have standardized styles and design patterns. This can help to create a cohesive user experience across all devices.
Frameworks have cross-browser compatibility because they are often designed to work across multiple web browsers, which can save time and effort in testing and debugging.
Since most of the frameworks are open-source, they have large community support. This can help with troubleshooting and improving your website.
To summarize, frameworks save time and effort, provide consistency, optimize responsive design, ensure cross-browser compatibility, and offer community support. Because of these benefits, it's one of the best responsive design practices.
Media Queries
Media queries are an essential component of responsive web design and one of the best practices to implement in RWD. Because of media queries, you can apply different styles to a website based on the screen size of the device it is viewed on. Creating a responsive design with media queries is easy because it adjusts the design to the screen size of the device. From large desktop monitors to small mobile screens, the website will look good and function properly on various devices because of media queries. In this topic, we will not cover how to apply media queries, but you can see the example of Bootstrap media queries below:
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }In @media (min-width: @screen-sm-min) you would put CSS properties that are applied to screens that are for tablets, @media (min-width: @screen-md-min) for desktops, and @media (min-width: @screen-lg-min) for large desktops.
Google and other search engines consider mobile-friendliness when ranking websites. That's why, by using media queries to create a responsive website, you can improve your website's mobile-friendliness, and benefit from SEO. This can help you improve your search engine rankings and drive more traffic to your website.
To summarize, media queries are an essential tool for creating a responsive website. They allow you to optimize your website for different devices, provide a better user experience, and improve your search engine rankings.
Optimizing typography and images
Optimizing typography means selecting the right fonts, font sizes, line heights, and other typographic elements to create a visually appealing and readable design. Let's look at the best practices to follow when it comes to optimizing your typography:
- Font — don't use a font that is too decorative and difficult to read.
- Font size — use a bigger font size for the desktop version and a smaller one for the mobile version.
- Line height — use a line height that is not too tight or too loose. Stick to 1.5 to 2 times the font size rule.
- Font style — incorporate different font styles to emphasize certain text, or add a hierarchy to website design.
- Font weights — create contrast and hierarchy with font weights. Use bold for headings and subheadings, and lighter fonts for body text.
- Spacing — create spacing between elements for a balanced and visually appealing design.
With these tips, you can create a design that is easy to read and visually appealing on a variety of devices and screen sizes. Here are two examples, try to figure out which one is following the tips listed above.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ullam eius laboriosam placeat eum quisquam provident dolorum dicta neque corporis laudantium repudiandae, laborum rem libero accusantium excepturi! Soluta nihil facilis, reprehenderit eius quis distinctio odio sit, ducimus error eveniet doloremque et, velit ea. Ullam dicta blanditiis earum cupiditate. Molestias iure voluptatem cupiditate ratione esse cumque provident, corrupti aliquid vel ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ullam eius laboriosam placeat eum quisquam provident dolorum dicta neque corporis laudantium repudiandae, laborum rem libero accusantium excepturi! Soluta nihil facilis, reprehenderit eius quis distinctio odio sit, ducimus error eveniet doloremque et, velit ea. Ullam dicta blanditiis earum cupiditate. Molestias iure voluptatem cupiditate ratione esse cumque provident, corrupti aliquid vel ad.</p>
</section>
<section>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ullam eius laboriosam placeat eum quisquam provident dolorum dicta neque corporis laudantium repudiandae, laborum rem libero accusantium excepturi! Soluta nihil facilis, reprehenderit eius quis distinctio odio sit, ducimus error eveniet doloremque et, velit ea. Ullam dicta blanditiis earum cupiditate. Molestias iure voluptatem cupiditate ratione esse cumque provident, corrupti aliquid vel ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ullam eius laboriosam placeat eum quisquam provident dolorum dicta neque corporis laudantium repudiandae, laborum rem libero accusantium excepturi! Soluta nihil facilis, reprehenderit eius quis distinctio odio sit, ducimus error eveniet doloremque et, velit ea. Ullam dicta blanditiis earum cupiditate. Molestias iure voluptatem cupiditate ratione esse cumque provident, corrupti aliquid vel ad.</p>
</section>
</body>
</html> CSS:
body {
display: grid;
grid-gap: 3em;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
height: 100vh;
}
section {
font-size: 18px;
padding: 3em;
}
section:first-child {
background: #161616;
color: white;
font-family: 'Kelly Slab', cursive;
line-height: 13px;
}
section:last-child {
font-family: 'Frank Ruhl Libre', serif;
line-height: 30px;
}The code output:
Optimizing images and media means adjusting them to different screen sizes. The best way to achieve it without losing the quality of the image and media is to use vector graphics instead of raster images and use responsive video players that can adjust to different screen sizes.
A raster image is a digital image format that is made up of a grid of pixels. Each pixel in the grid is assigned a specific color value, which collectively creates an image. Vector graphics are infinitely scalable, which means they can be resized without losing quality. Using vector graphics, such as SVG (Scalable Vector Graphics), can help ensure that images look good on any device or screen size. On the other hand, you can also compress images and upload them but it's best to stick to vector graphics.
By following these methods, you can achieve flexible images and media in your responsive web design, which will help ensure that your website looks great on any device.
Conclusion
In this topic, you've learned about best practices to follow when making your website design responsive. To summarize, you need:
- take a mobile approach first
- use frameworks and media queries
- optimize your content, such as text, images, media, etc.
Lastly, do not forget to test the design every time you want to implement something new.