beanz Magazine

Responsive Web Design

Ivan T on Flickr

Learn some of the basics of responsive website 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

What is Responsive Web Design?

https://www.w3schools.com/css/css_rwd_intro.asp

Responsive web design definition

https://www.nngroup.com/articles/responsive-web-design-definition/

Guidelines for responsive web design

https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design

Responsive web design

https://kinsta.com/blog/responsive-web-design/

10 basics of responsive web design

https://www.youtube.com/watch?v=zF6VSky4SIc

Web design course for kids

https://www.coderkids.com/blog/what-is-a-web-design-course-for-kids

Website builder for kids

https://www.websiteplanet.com/blog/best-website-builders-kids/

Trinket- Python

https://trinket.io/python

Put interactive python anywhere on the web

https://trinket.io/python/657bfe8fc6

Trinket Project Page

https://trinket.io/html/a1c59bafad

Trinket

https://trinket.io/

Write your first program in Trinket

https://www.youtube.com/watch?v=mgNg4iFbfdE

Teaching Python with Trinket

https://www.technokids.com/blog/apps/teaching-python-on-chromebooks-is-easy-with-trinket/

Getting Started with Trinket

https://www.youtube.com/watch?v=2ItOgnMRoo8

Product Reviews for Trinket

https://www.edsurge.com/product-reviews/trinket-product

Also In The April 2022 Issue

Bring your Minecraft game to new heights with the Aether mod.