Mar 13
The Basics of Responsive Web Design
People browse the internet on a variety of devices. Phones, tablets, laptops, and monitors all have different size screens so it is important to design web pages with this in mind. Here are a few important concepts to begin creating web pages that look good no matter what device it is viewed on.
Viewport
The very first thing to be done for responsive web design. The viewport of the browser is the space that the user can see based upon screen or window size. Setting the viewport allows the browser to scale the page based on the dimensions of the display. It is placed within the <head> and declared with a <meta> tag.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Media Queries
These allow different styles to be used depending on the size of the browser. Certain layouts work better with larger screen sizes than small so sometimes it’s best to modify them to better suit each device type.
In this example the navigation bar is on the side for larger screens and for screens that have a width of 640 pixels or less the navigation bar moves to the top. Media queries inherit their values from the original element, in this case the .navbar class, therefore any changes to the original element must be made explicitly. Multiple media queries can be made to account for different devices such as phone, tablet, and laptop/desktop.
Responsive Images
There are two ways to scale images so that they are sized properly. The first is with the max-width style.
<img src="scalable-img.jpg" style="max-width:100%">
Setting max-width to 100% allows the image to be scaled down if the viewport is smaller while preventing the image from scaling larger than it’s original size on bigger screens.
The other way to achieve responsive images is with the <picture> element. This element can contain multiple images and uses media queries to choose the one that is displayed based on screen size. This is especially useful for having multiple versions of the same image that are cropped for various devices.
Device Toolbar
It’s always nice to be able to see how the page will look on certain devices while styling it. Google Chrome offers a convenient way to do this with the device toolbar. It is located within the developer tools.
There is a dropdown where a number of different devices can be selected and will display how the page renders on that device. If a device isn’t listed a custom size can be created by selecting “Edit” from the device dropdown and inputting the dimensions and pixel ratio.
Those are a few basic concepts to get started with responsive web design. We are only scratching the surface here but it is important to know these things when beginning to design applications that scale properly. The internet is viewed on all kinds of different devices so web pages should look good on each and every one of them.
