Responsive Web Design

By the end of 2021, nearly 54% of global Internet usage came through cell phones. That’s a nearly 47% jump from 2011 when web traffic through cell phones was a mere 7%! Web sites need to be designed with mobile in mind. With a few tweaks to your HTML and CSS code, your website can adapt to various screens sizes (without leaving content out), so it always looks good. We call this Responsive Web Design.

You can look at our project on Trinket (view the project by visiting the link under Learn More). Trinket is a free coding platform that allows users to write and run code online. Trinket lets you type your code and see the results at the same time. Your web pages can also be published – just remember never to share personal information on public web pages.

The Viewport

To begin the process of making your site adapt to screen sizes, you must set the viewport. The viewport is simply the visible part of a web page. Setting it will tell the browser how to control the page’s width and scale. In the meta tag on all of your html pages, include the following:

Responsive Images

A telltale sign that an image isn’t responsive is that it stays the same size no matter how you resize the browser window. You can easily have images scale down (but never larger than their original size) by setting the max-width property to 100% and height to auto.

Responsive Text Size

Text size can also be automatically resized based on the browser window. You can adjust the viewport width of the text by setting the vw unit. 1 vw is 1% of viewport width! In our examples, the text in the body of the web page is 2.5vw and the text in H1 is 3.5 vw, making them 2.5% and 3.5% of the viewport width of the browser window.

Responsive Navigation Bars

To get the cool adjustable size navigation bar, you must utilize a media query. In this case, a media query allows for the navigation bar to adjust from vertical (for mobile) to horizontal (for desktop viewing). In this project, we use a media query to add a breakpoint at 600 pixels. Once the browser reaches a width of 601 pixels, the navigation bar transitions to a horizontal menu.

Responsive iFrames

This website has an embedded YouTube livestream and Google Map. This was done using iFrames, which embed media onto web pages. You’ll have to decide which aspect ratio (proportion between width and height) you want to use; in this project we’ll use the common 16:9 aspect ratio. You can add a div tag and copy/paste the iFrame embed code from the YouTube or Google Map into it.

This will add the video, but to give the media the 16:9 aspect ratio, we need add to our CSS file by putting padding on top of the iFrame (56.25%). 56.25% is the equivalent of the 16:9 ratio (we get 56.25% by dividing 9 by 16) and will give the perfect ratio no matter how the window is resized.

Learn More

The Viewport

Responsive Images

Responsive Text Size

Responsive Navigation Bars

Responsive iFrames

Learn More

What is Responsive Web Design?

Responsive web design definition

Guidelines for responsive web design

10 basics of responsive web design

Web design course for kids

Website builder for kids

Trinket- Python

Put interactive python anywhere on the web

Trinket Project Page

Trinket

Write your first program in Trinket

Teaching Python with Trinket

Getting Started with Trinket

Product Reviews for Trinket