The Basics of Responsive Web Design

Photo by Firmbee.com on Unsplash

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.

--

--

--

Industrial electrician working towards a career change in software engineering. Graduate of Flatiron School. Family man. Zappa fanatic.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Re-usability of code in Rails Grape API

Brace Yourself! — Product Querying with Python Sets

Know about the Finest MattressTypes https://t.co/jPB7kcfp3U

From Agency to Product — An iOS developers reflection

Ruby Weekly Issue 6

Embedding Angular in Rails partial view

Working @Fandom.com: Ad Engineering

Time Square with many billboards visible

Akka vs ZIO vs Monix, part 2: communication

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
John Troutman

John Troutman

Industrial electrician working towards a career change in software engineering. Graduate of Flatiron School. Family man. Zappa fanatic.

More from Medium

Frontend Developer Roadmap — Day 0: Visual Studio Code

How Bug Fixing Hardens You

What Is JavaScript Doing On Your Page

An 18-Year-Old’s Frontend Development Journey