Making a website responsive

In 2019 we are actively using our phones and other mobile devices to browse the interwebs. So, why is make a responsive website important? Simply for viewing and accessibility purposes. You can usually tell if a website is responsive if the content changes its size properties when the size of your viewing screen changes.

Note: If you use css libraries like Bootstrap 4, material ui or semantic ui; you most likely have the advantage of having a responsive layout. If you’ve been code out your css or use a preprocessors like sass, then you’ll have to make those changes yourself.

To start you can place the meta tag above in the head tag of your HTML5 file. The name property viewport is referencing the user’s visible area of a web page; the content is comprised of two properties which should be separated with a comma. The width is going to be measured based on the width of the device that is viewing the content. Initial-scale is set to 1.0 which means the content will scale to 100% of the the devices viewport.

NOTE: Css media queries are bit more content specific; the code snippets belows are contrived examples in sass.

Above is a reference point that I like to look at when creating a responsive site.

So for this example I’m using a mixin instead of writing the same css and will import that into another file where the global styling of my site will be.

In the code snippet above a we made this site response to the tablet screens in portrait and landscape views. We also show the css that this would translate into.

Now that you have an idea of what goes into making a responsive website, it doesn’t seem like a monumental task… at least I thought it was, when I didn’t know how make a page responsive. The idea behind responsive web design is to make the content of the site readily available to a user on any screen. that all, pretty simple huh. 😁

Related posts:

With the conclusion of the NA and EU Regionals, and after gathering feedback from the Team Captains, some format changes are in store for the Echo Arena VR Challenger League!

Stake Capital is excited to announce support for NuCypher, an innovative cryptographic network for privacy-preserving applications. In the works for well over two years now, NuCypher enables…

One of the essential tasks of a data scientist is to obtain useful results from large data sets. Preferably, these findings are showcased through a simple and sleek visualization. With the right…