Responsive design is a web design approach that makes websites adapt to different devices, such as smartphones and tablets. This means that the website will look different depending on the device it is being viewed on. For example, if you are viewing the website on your smartphone, it may be designed in a way that is easy to use with small screens. If you are viewing the website on your tablet, however, it may be designed in a way that takes advantage of the larger screen size. There are many benefits to responsive design. For one, it makes websites more accessible. Anyone can use them regardless of their technical ability or experience. Additionally, responsive designs can save users time by making sure they don’t have to scroll through long pages just to find what they are looking for. There are some challenges associated with responsive design as well. One challenge is that it can be difficult to create a single layout that works well across all devices. Another challenge is that responsiveness often requires more coding than traditional web designs. However, these challenges can be overcome with careful planning and testing ..
What Is Responsive Design?
Responsive design allows your site to resize to fit any screen. Rather than designing around a specific layout, or designing a separate mobile and desktop site, your site should scale to fit any device. In the real world, people will use your site in all kinds of different ways; there are small phones, big phones, tablets, tablets in landscape mode, netbooks, laptops, and 5K iMacs.
Take a look at the howtogeek.com homepage. On desktop, it has a header with a logo, main categories, social media buttons, and finally a hamburger menu with extended categories. The article boxes are laid out in a grid that scales with screen size but will only ever take up about 1000px (as scaling up too much would look weird). All in all, there’s a lot of room to work with, so the site looks the best here.
Shrink the screen down a bit to tablet size, and there’s not as much space. The text breaks differently, the images are scaled down or cropped, and the main categories disappear.
The article boxes maintain the layout but at the cost of having extra lines of text. The front-page article is more important though, and will maintain its aspect ratio and scale down without cropping.
And on really small devices, you can’t really afford to have all those buttons in the menu, and there’s not enough room to place the article boxes next to each other, so the menu is collapsed into a hamburger menu and the article boxes are laid out in a column. This column will always take up the full width of the device (minus 20px on each side for padding).
You can test this for yourself to see how your site scales. Open up Chrome’s developer tools by right-clicking anywhere and selecting “Inspect.” Press the mobile devices button in the top-right corner of the pane that pops up, and select “Responsive” as the device type:
You can grab the handles on the edge of your site to adjust the size, or you can enter in manual pixel values. You can also preview what it will look like on popular mobile resolutions (though you should still test on a real device).
How Does Responsive Design Work?
Before doing any responsive design, you’ve got to fix a bug with mobile pages and the viewport. Without this meta tag in your HTML’s header, your mobile page might be zoomed out and not display correctly. This might already be set, as it’s a fairly common piece of boilerplate, but if it isn’t, go ahead and add it:
The primary way of making sites responsive is with the magical display: flex property, otherwise known as flexbox. Flexbox works by adjusting the size of items within a container to scale with a changing window size. You start by creating a container and setting it to display: flex:
And then, set the flex parameter of all of the children:
This will cause the children to expand and take up as much space as the container allows. For example, if you had two children, each would take up 50% of the space:
If you instead set the second child to flex: 2, it would take up twice as much space as the other (66% in total).
When the screen shrinks, the children will shrink with it. They’ll hit a point though where they can’t shrink smaller than the size of their content, but you can make them wrap around to another line (just like text) with flex-wrap on the container.
Now, you’ll never run into issue of having your site content off screen or so scrunched up that it’s illegible.
Another piece of CSS tech behind responsive design is media queries. Media queries are like CSS If statements that allow you to check a value before applying some CSS. You can use this to dynamically style components based off of the width of the browser. For example, if you had a top menubar that you wanted to hide on mobile and replace with a hamburger menu, you could hide it with an @media query:
600px is just an arbitrary value used to define the limits of most mobile devices, but you can have many breakpoints that change the styling. You can use these in combination with flexbox to change the flex properties based on the device size; for example, one common use is making horizontal lists display vertically and center aligned, for easier readability on mobile.
There’s plenty more to responsive design than we can cover here, so if you’d like to learn more about the CSS behind it you can read this great guide to flexbox from CSS Tricks, or read the W3Schools documentation for media queries.
How Do I Make My Site Responsive?
If you don’t want to spend time remaking your site with flexbox in mind, there are plenty of responsive site templates you can use as a base, including many free ones. Many templates that you can use with managed hosting providers (GoDaddy, SquareSpace, Wix, etc.) will be responsive out of the box. Underscores is a great free starter template for WordPress.
If you do want to code it yourself, but don’t want to do it all by hand, there are many third-party libraries for working with flexbox. The most popular of these is Bootstrap, which adds easy-to-use classes for working with flexbox (along with many other useful UI elements). With Bootstrap, you specify containers with the row class and then specify column size with classes like col-md-6, and the CSS is handled for you. For example, the following code will arrange each div into a row of three on desktop, and add a media query breakpoint to turn it into a full-width column on mobile:
Sizes are measured out of 12, so col-md-4 will set the div to 33% width on medium size (“md”) and col-sm-12 will set it to 100% width on small devices (“sm”).
Bootstrap also has a ton of themes and templates for you to start with. It’s designed to get you off the ground very quickly and to get rid of the time spent messing with boilerplate HTML and CSS (hence the name).
