- Published on
Magic in the Web: Responsive Web Design
- Authors
- Name
- Yevhenii Airapetian
- @airapetian_dev
Magic in the Web: Responsive Web Design by Y. Airapetian
Topic: Responsive Web Design
Author: Y. Airapetian
Estimated Read Time: 16 mins
Contents:
1. Introduction
5. Responsive Design Approaches
8. Screen sizes
10. Device Emulators
11. Media Queries
13. Prefers-color-scheme media query
14. Prefers-reduced-motion media query
18. The Task
19. Task Hints
20. Extra Task
22. Summary
23. Useful Links
Introduction
Today we're going to step aside a bit from discussing CSS selectors and focus our attention on another important web development topic: responsive web design.
Note: This post will focus on the very basics of the topic and is by no means a comprehensive guide. Keep an eye on the future complimentary articles about this web dev tool.
Note 2: If you need a refresher on how to use tag, class, and/or ID selectors, head over to the tag, class, and ID selectors posts.
What is responsive design?
When you browse your favorite stores, media-hosting providers, or social media, what do you commonly see? If you open Netflix on your desktop computer, you will see this picture (as of autumn 2024):
Figure 1.1: Netflix website's main page (desktop).
If you then switch to a tablet, you will observe this picture:
Figure 1.2: Netflix website's main page (tablet device).
And finally, if you open Netflix on a smartphone device, it may look like here:
Figure 1.3: Netflix website's main page (smartphone device).
As you can see, depending on the visitor's device they use to view the website, the dimensions (width and height) of the user's browser, and other criteria, we get slightly different designs.
You may ask, why is it needed?
Imagine opening the desktop version of the Netflix website on an older small-dimensioned smartphone or, even worse, an old button-powered phone. Your reaction could be (in a negative perspective):
All the information, images, and other elements just wouldn't fit on a screen! Of course, that probably might not happen, as the Netflix developers do all possible for their app to look great on different devices and screens.
This is exactly the definition of responsive web design: make an app look great whichever device is used to view it.
A bit of History
The concept of responsive design didn't exist when the Internet appeared of course. It was introduced much later by a web developer named Ethan Marcotte.
Figure 1.4: A portrait of Ethan Marcotte.
It wasn't a unique technology. Web developers used different styling methods to make their apps more appealing before as well. However, Marcotte was the first to gather a lot of techniques under the united term "responsive web design" and propose it for designing a better web, and so is known as the guy "who started the responsive thing".
He went on by writing and publishing works on this topic, such as:
Figure 1.5: Ethan Marcotte's book `Responsive Web Design`.
Note: If you want to read more about the author and/or the book, visit the following resources:
Pros of responsive design
When using responsive design, we solve many issues at once, such as:
- We save money and time on developing websites and apps.
Designing and coding a browser website/app and doing the same for a native app (desktop and/or mobile) is very expensive and time-consuming, not to mention requiring more complicated technologies like Java. By just using CSS together with responsive design methods, we save time, money, and human resources all at once. Isn't it great?
- We make our apps look great on whichever device we open it on.
With this approach, we design being on the safe side, meaning we remain more relaxed that our code will work anywhere and at any time.
- We make our apps more accessible.
We can also be sure people with certain limitations or disabilities will be able to use our apps with fewer restrictions if any. If you decide to be a developer, web accessibility must be on your to-do checklist.
- The web is becoming mobile.
More and more people use their gadgets daily to browse the web, be it at home, at work, or travelling. Hence, if you design your apps with these demographics in mind, you have better chances of returning visitors/customers.
- Less maintenance.
Imagine you have your app in three versions: a browser website, a mobile app, and a desktop app. That's three (3!) different codebases you need to support and update regularly.
With responsive design, we have just one app that does all three jobs at once.
- Users like it.
A responsive app is pleasant to use and your visitors are less likely to leave it. Consider visiting the MayQuest Website. Now try to resize the browser window screen (reduce the width). Can you still navigate it without restrictions? Surely it is a useful app, but it would benefit from responsive design. Hope you get the point.
Note: Websites and apps, such as the one above, are used in this manner only for demonstration and educative purposes without any harmful intentions.
- Improved SEO and analytics.
Maintaining one app instead of three also simplifies tracking analytical data. Responsive apps also rank better on the web.
- Better user experience.
Navigating a responsive app leaves the user with a much better experience (both online and offline). Just as mentioned, a satisfied user is more likely to stick with using your website. As well, caching will benefit your visitors when they go offline by saving bits of your data to the user's device memory.
- Easy to learn.
Responsive design methods are easy and quick to master. Generally, you'll grasp and will be able to apply the basics to your apps in a matter of day(s).
- It never gets old.
Responsive design is likely here to stay. It appeared somewhat around 2013-2014 (as a concept) and is still widely used and improved every day. You surely don't want your visitors to open your app and say:
As you might know, you should not make your visitors think when they use your app. Responsive design (when properly utilized) greatly benefits this task.
Cons of responsive design
You might say: that's a gold mine! Well, not to disappoint you, there are a few disadvantages to employing responsive designs. Which are:
- Complicated navigation.
On handheld devices, such as tablets and smartphones, responsive apps are basically the full-sized versions minimized for a specific screen size. If an app is relatively big with a lot of pages, sections, and so on, there may be difficulties in user experience on a mobile screen. Hence, you might want to invest in native app development.
- Might take some time to implement.
Keeping in mind all the user needs and realizing them with responsive design might take extra time as compared to maintaining a normal website/ web app.
- Slower loading time.
Your apps may take some extra time to fully load on the user's device due to the media assets you might use, such as images and videos. 
- More code.
Some features come with a cost: the code in your apps written with the help of responsive web design methods will likely be longer. Typically, you'll need to support a bunch of browsers, legacy technologies, prefix- your code and so on which takes up extra lines of code, so you might feel like:
- More testing.
Designing responsively is spending extra time on testing. You have to be sure the website's banner on a desktop screen won't overflow the page on a mobile screen, or that a bunch of some new HTML5 tags will display on an older Safari browser version.
Gladly, the pros quite overshadow the cons. So let's get straight to some common responsive web design methods and use cases.
Responsive Design Approaches
If you decide to design a responsive app, you have 2 common approaches:
- Desktop-first.
- Mobile-first.
Desktop-first approach
With this concept, you design your app to look and function properly on a desktop screen first. And after, you adjust the content to fit the screens as they become narrower and narrower.
The pros to this approach are it is more intuitive as you are used to a normal fully-sized layout.
The cons are that you may tend to prioritize your desktop look and function and forget or neglect some features or styling in the mobile version of your app.
Mobile-first approach
Mobile-first design, which is usually advised, centers around designing your apps with the mobile users first and then scaling your features, content, and looks as the device's screen becomes wider. It is recommended because the world is becoming more mobile-dependent, hence the prioritization to develop the designs around the handheld devices.
The pros of the method are you will likely design a more user-intuitive app. Also, it switches your mind from the cut-all-extra approach to a build from the ground up one.
Some may consider the cons to be the awkwardness of designing, since it may seem more difficult to design as the content builds up instead of being simplified.
So before you choose a red or a blue pill, keep in mind that:
- both ways are perfectly fine and you should choose your working style as you see fit;
- remember that the end user should be comfortable navigating your app whatever method you have chosen!
Screen sizes
When developing responsively for the web, you'll typically be targeting specific screen widths and heights. While there are a lot of devices, ranging from TV screens to smartwatches, the dimensions targeted with the styles are usually as follows:
Figure 1.6: Common digital device sizes.
Let's write them down as well:
Mobile:
- 320px X 480px and 480px X 320px
Tablets and Netbooks:
- 768px X 1024px and 1024px X 768px
Netbooks and Desktops:
- 1024px X 768px and 1680px X 1050px
Which means, one device category blends somewhat into the other.
Note_: If you design with these dimensions in mind (in pixels), you stay on the safe side and solve the majority of issues.
Responsive Design methods
Responsive design is called responsive because it responds to some actions. There are various actions, including:
- resizing the browser width and/or height;
- using a desktop or a mobile device;
- using external devices/device features with the app (e.g. printing the contents, using screen readers);
- personal preferences (e.g. reduced motion, bigger font size)
- using different browsers
So when you, for example, narrow the browser's window, your responsive app may respond by optimizing the images or font sizes.
Figure 1.7: Responsive design is applied.
Note: Devices emulated with the help of the Mobile first app (browser version).
Media-queries is one of the methods closely related to responsive design. An idea behind it is to trigger certain behavior depending on certain conditions.
For example, consider the following case:
A person searches for something on the web. Your app comes up in the results list. The user clicks on the link and loads your app. This user prefers to navigate the web apps with reduced motion.
Typically it means that the person feels unwell when looking at some animations or rapidly changing layouts.
If you design with this user need in mind, you have a much better likelihood of the user navigating your app regularly.
On the contrary, if you omit this feature (intentionally or unintentionally), a great user range will be cut off.
In this post, we'll briefly touch upon the common responsive design methods and approaches. For a more detailed description, keep an eye on the future articles.
Device Emulators
We have just mentioned resizing a browser window for testing an app. This tool can be used straight away (everyone has a browser).
Let's get back to the Netflix website we use as an example. To test an app in terms of responsiveness with the help of a browser, we simply drag the browser window from the side (top, right, bottom, or left) in any direction like so:
Figure 1.8: Responsiveness Netflix app.
Notice the layout adjusting?
Another way is to use the browser's developer tools. Common browsers like Chrome and Edge have them and you can typically toggle the tools via the menu or by using a keyboard key, e.g. F12:
Figure 1.9: Developer tool in Edge.
It's a great tool because it has an integrated device-emulator demonstrated in the animation above.
You may also use other tools (free and paid) for device toggling. When writing this post, I employed the Mobile first app (browser version)_ which is completely free (if with the basic device range).
Media Queries
Screen and..
A media query may look like this:
//CSS file
@media screen and (max-width: 480px){
//styles go here
}
By this code, we say:
- If the screen size is less than/equal to 480px, apply the following styles.
Let's break it down:
an at (
@) sign folowed by the wordmediasignifies the following code is going to be a media query.screenmeans we are going to target the screen devices.andis used to add any extra condition.(max-width: 480px)is a condition responsible for the viewing window's screen width (here in pixels).an opening and closing curly braces
{ }frame the selectors that will go inside it.
Not so long ago, there were a bunch of other media queries for other purposes, such as printing, screen readers, tv-sets and so on, however, most have been deprecated.
Note: To view a list of all supported media queries, visit this resource
Prefers-color-scheme
There's also another commonly utilized media query: prefers-color-scheme:. It may be used to toggle themes in your web apps.
@media (prefers-color-scheme: dark) {
.container {
background-color: #000;
color: whitesmoke;
}
}
And it could look like this:
Figure 1.10: A toggled theme in a navigation bar.
A common use case is to automatically adjust the app's styles depending on what color mode is currently being set on the user's machine.
Prefers-reduced-motion
The prefers-reduced-motion media query is handy for switching on/off certain styles for accessibility means. You may have lots of visitors coming to your website, and very often they might have a certain viewing/using preference, such as fewer animations.
That's exactly what prefers-reduced-motion was designed for.
@media (prefers-reduced-motion) {
.project:hover {
transition: none;
}
.button-download{
animation:none;
}
}
Responsive Elements
Responsive design is made of responsive elements.
Thinking globally, it may be a layout. In terms of the single tag it may be an image or even a table.
Consider the following cases:
When you visit a desktop app, it has a navigation section, a header with an image, a sidebar, and an article.
When you switch to a tablet, the navigation shrinks under a hamburger menu, the header takes all left and right space, the sidebar moves to the footer, and the article is stretched to take all available space.
When you view the app on a smartphone, the hamburger nav remains the same, the header with the logo gets removed, the sidebar is still in the footer, and the article gets a bigger font size, spaced text, and stretched images.
A simplified version could look like so:
Figure 1.11: An HTML layout targeted with media queries.
Note: Devices emulated with the help of the Mobile first app (browser version).
HTML tags are targeted with the special property: value pairs.
For example, images may receive 100% width on smaller screens. Tables may have a horizontal scroll behavior so that the user can scroll the content of the table.
Semantic layout tags and division blocks may be arranged with such properties as position, display, padding, and margin.
Practice Makes Perfect
Ready for a bit of practice?
We're going to style a web page with media queries but more importantly, we'll make it responsive!
Preparation Steps
Click on the button below to visit Code Sandbox. It's a coding playground we will use to practice our web dev skills.
You will see 3 windows:
Explorer
index.html
Preview
If you're logged in, you probably already know what to do. But just in case, go to step 6.
If you're not logged in, you won't be able to edit the files. For this, you need to follow these steps:
- Click on the Sign-in button. You can locate it to the top right of the screen.
Figure 1.12: The CodeSandbox workspace top navigation.
You will be offered a bunch of authorization methods. Click what best suits you but for the purposes of demonstration, we'll stick with the Google authorization method.
- Click on Sign-in with Google button.
Figure 1.13: The CodeSandbox authorization window.
You'll see a field where you need to write your email address.
Note: Here and afterward the login details have been partially shadowed due to privacy reasons.
- Fill in your email address.
Figure 1.14: The Google authorization screen.
If successful, you'll see a password input field.
- Fill in your password details.
Figure 1.15: The Google authorization screen.
If you've done this step, you might be prompted to confirm the login with your smartphone.
- Click to verify the authorization with your smartphone.
Figure 1.16: The Google authorization verification screen.
Then, click confirm on your smartphone. After, click continue or next in your browser if their's a respective pop-up window.
You should now be successfully authorized.
Note: Sometimes it gets buggy so you might have to refresh the CodeSandbox workspace.
Are you in? Now you can make a copy of the code to your CodeSandbox account.
- Click on the Fork button. You will find it at the top right of the screen.
Figure 1.18: The CodeSandbox workspace top navigation.
The code will be forked and you can start doing the task.
Note: Just as mentioned before, sometimes it gets buggy so you might need to reload the CodeSandbox workspace.
The Task
Figure 1.19: The done task.
We are interested in the central window marked with a blue rectangle in the image below. This is where your CSS styles will go.
Figure 1.20: The CodeSandbox workspace.
If you click on the HTML tab (just above the CSS tab), you'll see a basic HTML page.
Note: For the purposes of this task, you must not change the markup. Please only change the CSS styles in the CSS file.
Now the page looks like this:
Figure 1.21: An unstyled HTML page.
Your task is to make it responsive so that it looks and behaves like this (or similar):
Figure 1.22: The final result of the practice.
The changes you make to the file will be visible on the right screen marked with the blue rectangle (called Preview) once you save your work.
If you need to open the web page at full width, click on the symbol marked with a little red rectangle to the top right (double rectangle symbol). It will launch the web page as a separate window.
Note: You'll have to manually refresh the page to see the changes in this case. For this, if you're using Edge, click on the curled arrow button to the top left of the browser like here:
Figure 1.23: The refresh button in Edge.
It looks somewhat alike in the typical browsers like Chrome and Opera. Alternatively, hit the respective keyboard key to refresh the page. Typically, it is an F5 key which you can find in the top keyboard section with the F keys.
This task will not list the required styles that must be applied. Rather, you are free to use the styles as you see fit.
However, there are still some basic requirements:
Don't change the markup in any way. Use the CSS file for any adjustments.
Use the
@media screen and (_your device width here_)rule for targeting different screen sizes.
2.1: The required screen sizes are screens above 960px, (min-width: 481px) and (max-width: 960px), (max-width: 480px);
Here are the tips on how to approach this task:
Hints:
List the device screen size rules for the media queries in a downward fashion, meaning the CSS rules for the widest screen sizes are at the top and the narrowest screens are at the bottom.
You might want to use the
positionproperty to position the sidebar.Article sections can be styled with a variety of options such as widths and flexbox.
Extra task
Want to give this HTML page an even better look? Tge try this:
- Style the menu.
ES1.1: Style the links with the :hover pseudo-class.
ES1.2: Hide the links under a hamburger menu icon on smaller screens.
- Give this web page a well-styled footer (the
<aside>tag).
ES2.1: Give it some colors and spacings.
Hit Ctrl + S (Windows) or Command + S (Mac) after each step's point to see the results live on the right screen of the playground:
Figure 1.24: Saving a file in the CodeSandbox workspace.
Did you complete all the steps? Congrats! Now our web page is responsive and hopefully you are closer to mastering the building blocks of modern web development.
Having a hard time completing the task(s)? Then head over to the section below.
Troubleshooting steps
If you've tried to complete a certain step or a part of a step, but with no success, here's the basic troubleshooting:
1. Ensure you've written the property right. A proper CSS property is named color, not colour.
2. Ensure you've written the value right. A proper value for a CSS font-size property could be 30px but not 30.
3. Ensure you've saved your work by hitting Crtl + S or Command + S.
4. Ensure you're working in the right file. It should be a file with a .css extension.
5. Ensure you've written the media query right. A proper CSS media query is, for example, @media screen and (max-width: 480px) . Check it for misspellings.
6. Ensure you're targeting the right screen dimension. It is common when designing to target a bigger or a smaller screen size while mistakenly testing the wrong dimension.
Summary
Today we've dived into a magical web development topic: responsive web design. We talked briefly about what it is, where it is used, its pros and cons, and the methods and principles of design, and practiced a bit on applying it to a simple HTML page.
That's all for today.
See you next time!
Y.A.
Useful Links
