Emergency response — on the web!

It’s 2017, which means the majority of internet users are using multiple devices to browse the web. I could share statistics to prove that statement, but it would be kind of like sharing studies on the chemical composition of the atmosphere to prove that the sky is blue.

Just look up.

People are constantly browsing online on their phones, so it doesn’t make a lot of sense to have a site that only looks good on desktop anymore. Unfortunately, even if your content is good, if it isn’t structured properly, it will read like the rantings of a deranged lunatic when viewed on the wrong device. What I’ve learned about web responsive websites, is that you really have to design it in from the start.

For example, here is a screen shot from a site I’m building currently for practice;

The Web for Plebs — could be my next site?

See how it looks? Clean and aligned. Now let’s take a look at the same page on a small screen before I’ve had a chance to make it completely responsive;

A pleb version of a responsive site

No. No. No.

This isn’t going to work. I mean look at it, it’s all over the place. Who the hell would want to read something that looks like that? Not me. In fact I’m going to fix it right now.

There.

How did I fix it? Pretty easily actually.

If you read my previous post on the languages that make up the web, you would know that webpages are styled using CSS. What I’ve used here is called a CSS framework. Frameworks exist for a lot of computing languages, and for good reason. Simply put, the ‘best way’ of coding certain tasks, are pre-defined in frameworks. This means you that you don’t have to start from scratch when working on a relatively common issue, like mobile responsiveness. In this instance, I used a CSS framework called Bootstrap. Bootstrap allowed me to set my HTML element’s at different widths, depending on the screen size, quickly and easily. You may be wondering;

Could I have done it without the framework?

Probably.

Do I have time and can I be bothered?

Absolutely not.

Bootstrap was designed by the software engineers at Twitter — I’m pretty sure have already put a fair amount of thought into it. Makes sense to just build on what they’ve already created right?

There are other CSS frameworks you can use to create responsive pages. Bootstrap, however, is by far the most popular and one of the most versatile. It also has extensive documentation to teach you how to used it, so for now, it remains my recommendation for building in responsiveness.

As I continue on my learning journey, I’m seeing that web design is a lot harder than it used to be. In fact, I’m pretty sure if I took what I know now and applied it 10 years ago, I would already be considered a non-pleb web designer. It just isn’t like that anymore though. If you’re the ultimate hipster, still rocking the Nokia 6210 (respect), you’re probably ok with webpages that look weird on small screens. For the rest of us, webpages need to be responsive. I’m going to apply that philosophy for every page that I make from now on, and for anyone reading this, hopefully you will too.