Your website is one of the first impressions you create on your customer. It represents your persona – what you offer, your values, and your team members all in one place.
With a gazillion different devices on the market, this can be a tall task.
“Mobile phones and tablets are responsible for 56.74% of global internet usage.”
This is where responsive web design comes into play. A major component of responsive design is creating the right experience for the right device. Let’s learn how this can be achieved.
What is Responsive Web Design?
Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):
Setting up the Viewport
The viewport is the user’s visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.
To optimize the web pages for multiple screens, HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
You should include the following <meta> viewport element in all your web pages:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
This gives the browser instructions on how to control the page’s dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
Media Queries
Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the types of device rendering the content, or the features of that device, for example width, height, orientation, ability to hover, and whether the device is being used as a touchscreen.
What is a Media Query?
Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true.
@media media type and (condition: breakpoint) {
// CSS rules
}
Example: If the browser window is 500px or smaller, the background color will be green:
@media only screen and (max-width: 500px ) {
body {
background-color: green;
}
}
Notice how @media is used in order to cater screens less than or equal to 500px in width. This is the break point.
@Media Rule
You start defining media queries with @media rule and later include CSS rules inside the curly braces. The @media rule is also used to specify target media types.
@media () {
// CSS rules
}
Parenthesis
Inside the parenthesis, you set a condition. For example, if you wish to apply a larger font size for mobile device. To do that, you need to set a maximum width which checks the width of a device
Example:
.text {
font-size: 14px;
}
@media (max-width: 480px) {
.text {
font-size: 16px;
}
}
The above example set the text size for the desktop to be 14px. However since we have applied a media query, it will change to 16px when a device has a maximum width of 480px or less.
Media Types
If you don’t apply a media type, the @media rule selects all types of devices by default. Otherwise, Media types come right after the @media rule. There are many kinds of devices but we can group them into 4 categories:
- all — for all media types
- print — for printers
- screen — for computer screens, tablets and, smart-phones
- speech — for screen readers that “read” the page out loud
For example, when I want to select only screens, I will set the screen keyword right after the @media rule. I also must concatenate the rules with the “and” keyword:
@media screen and (max-width: 480px) {
.text {
font-size: 16px;
}
}
Add a Breakpoint
Breakpoints are maybe the most common term you will hear and use. A breakpoint is a key to determine when to change the layout and adapt the new rules inside the media queries.
.text {
font-size: 14px;
}
@media (max-width: 480px) {
.text {
font-size: 16px;
}
}
If you refer above example, here, the breakpoint is 480px. Now the media query knows when to set or overwrite the new class. Basically, if the width of a device is smaller than 480px, the text class will be applied, otherwise, it won’t.
Common Breakpoints: Is there a Standard Resolution?
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
Responsive Images
Responsive images refer to images that properly adjust to different screen sizes, resolutions, positions, and other factors.
Specifying the width for scaling
CSS images sizes change in response to different dimensions of the browser window. You need to set either width or max-width properties for CSS to respond to such changes.
You can enable scaling down and up by setting the width to 100%.
img {
width: 100%;
height: auto;
}
Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:
img {
max-width: 100%;
height: auto;
}
Setting background-size to fit screen
Using CSS, you can set the background-size property for the image to fit the screen (viewport).
The background-size property has a value of cover. It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.
In this code example, we make the CSS background image size fit the screen:
html {
background: url('image.png') no-repeat center fixed;
background-size: cover;
}
Note, in the above example:
- The responsive background image fills the whole page without leaving whitespace.
- The image is at the center, scales if necessary, and does not require a scroll bar.
What more?
https://getbootstrap.com/
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
https://get.foundation/
Foundation is a responsive front-end framework. Foundation provides a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions