Even before all the ubiquitous IoT tech we have today, websites needed to be able to adapt to various monitor sizes. Today, we have a wide range of devices that connect to the web — like smartphones, tablets, laptops, watches, and refrigerators.
Luckily, web developers don’t need to build unique apps for every single device. (Can you imagine the cost? It’d be unsustainable.) Instead, they use responsive web design to provide their users with a consistent, seamless experience across all of their devices.
We take a closer look at responsiveness in our free course Learn CSS: Responsive Design — but here’s a quick breakdown.
Learn something new for free
What is responsive design?
Responsive design ensures a website can adapt to users whether they’re viewing content on a phone, tablet, laptop, or desktop, through Cascading Style Sheets or CSS. In CSS, you use various settings to serve different styles depending on the user’s device.
Responsive design means the website is automatically configured for the device it’s being viewed on. The fonts, images, and other elements are scaled to make the best use of the screen.
Why responsive design matters
Responsive design matters for both users and web developers. For users, it ensures a smooth experience regardless of what device you use to view a website. For developers, it allows you to make one website that users can view on multiple devices rather than just a computer — which is crucial because most web traffic comes from mobile devices.
Instead of building responsive web apps, some people use redirects to point users to the appropriate version of the website for their device. But this option is clunky and slow and can potentially impact the user experience. It’s also more work for the developers, so creating one well-designed website is a better experience for everyone.
Why learn responsive design
If you want to become a web developer, or even just build efficient websites, you’ll need to provide a smooth experience for every device. The design should translate across multiple screen sizes and continue to look visually appealing.
How HTML and CSS are used in responsive design
Responsive design uses HTML (HyperText Markup Language) and CSS. HTML determines the content and structure of a web page, while CSS controls how the HTML is designed and displayed.
With responsive design, each device receives the same HTML. CSS is what alters the appearance of the page. It adjusts the page to conform to the screen in use.
Responsive images
One way to see how HTML and CSS work together for responsive website design is by looking at images. For example, you might add an image to a website with the following HTML:
<img src=”image.gif” alt=”describes image”>
You can also set a class that you can customize with CSS:
<img src=”image.gif” alt=”describes image” class=”full-width-img”>
You include CSS as a separate stylesheet file. You can use CSS to manage the width of all images using the following:
img {
width: 100%;
height: auto;
}This means that the image will scale down when necessary to fit onto the screen, but it won’t scale up to larger than its original size.
You can also control a specific class using the following syntax:
. full-width-img {
width: 100%;
height: auto;
}Background images should also be responsive. One way to do this is by setting the background-size property to contain, meaning the background image will scale to fit the content area, but it will also keep its aspect ratio (original proportions). Here’s what it would look like using an animated image, image.gif:
div {
width: 100%;
height: 400px;
background-image: url(‘image.gif’);
background-repeat: no-repeat;
background-size: contain;
border: 1px solid blue;
}Another option is to set the background size to 100% 100%, which stretches the background image to cover the content area. It looks like this:
div {
width: 100%;
height: 400px;
background-image: url(‘image.gif’);
background-size: 100% 100%;
border: 1px solid blue;
}You can also change the background size to cover, which will scale and keep the aspect ratio, but it may clip the image.
Setting the viewport
The viewport is the visible area of a web page. It will be larger on computer screens than tablets and smartphones. Developers can control the viewport by using an HTML tag.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
The example above sets the width of the page to follow the width of the device’s screen. And the initial-scale attribute sets the zoom level when the page is first loaded.
Responsive grids
Websites are typically designed using a grid, which divides the page into columns. Grids make it easier to place elements on a page and see how they relate to each other. A responsive grid is fluid, which means the elements can change and move based on the user’s viewport.
One popular grid option is the Flexbox grid. It uses a 12-column layout in which each column is 8.33% of the layout. You can also build a responsive grid using CSS. If you want to learn more about responsive grids, check out our free course Learn CSS: Flexbox and Grids.
Media queries
Media queries, changes to CSS properties if certain conditions are met, are another cornerstone of responsive design. They allow you to add a breakpoint or threshold at which parts of the design will behave differently. For example, you might have a three-column layout on desktops but a one-column layout on smartphones.
It’s common practice to design for mobile first and then scale up. Here’s what a media query would look like in that case:
/* For mobile phones: */
[class*=”col-”] {
width: 100%;
}
@media only screen and (min-width: 768 px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
}You can also use media queries to change the layout of the page based on its orientation, as well as change fonts or hide elements depending on the screen size.
Bootstrap
Another option for responsive web design is using a framework like Bootstrap. A framework provides a foundation that you can personalize and build on. Bootstrap is a free, open-source, front-end framework built on HTML, CSS, and JavaScript. It saves you the time of having to write all of the code yourself and includes a responsive grid, code for responsive images, and code for other elements like navigation bars.
Bootstrap also has extensive documentation and an enthusiastic community. You can also find Bootstrap templates, which simplify the responsive design process even more.
Getting started in responsive design
To learn responsive design, you need a solid grounding in the basics. First, you’ll need to know HTML. Our Learn HTML course is a beginner-friendly course that introduces you to common HTML tags and how to create tables and forms.
Once you’ve mastered HTML, it’s time to add in CSS. Our Learn CSS course teaches you visual CSS rules, the Box Model, CSS rules for display and positioning, and colors and fonts.
After you’ve learned HTML and CSS, you have several options. One is to continue building your CSS knowledge. Our Learn Intermediate CSS course teaches you the skills you need for responsive design, including how to use Flexbox to create flexible page layouts. It also teaches you how to build accessible web pages.
We have a course that focuses exclusively on responsive design. The Responsive Design course is for those who have taken the Learn HTML and Learn CSS courses or have the equivalent knowledge. It covers the elements discussed in this article, including media queries.
Our Learn Bootstrap course teaches you Bootstrap’s grid system and how to style and populate your site. The Bootstrap course requires knowledge of HTML and some knowledge of CSS is helpful, but not required.
We also have other web design courses and Skill Paths. Our Build a Website with HTML, CSS, and Github Pages skill path is beginner-friendly and teaches you HTML, CSS, responsive design, accessibility, and Flexbox. At the end of the path, you’ll have developed your own website from start to finish.
Our How to Make a Website with NameCheap course teaches you HTML, CSS, and Bootstrap. By the end of the course, you’ll have built four simple websites, including a personal portfolio, which is a must-have for any job search.
If you’re not sure about where to start, feel free to reach out in our Forums or Discord server. We’re happy to help you find the right courses to build your skills and develop the website of your dreams.
