What is a Responsive Website?

Every single part of the style of every website is dictated by a Cascading Stylesheet or CSS file. This is usually a separate file that sits alongside your webpage. The webpage file will tell your browser what content to deliver to the browser and the css file will tell the browser how that content is going to look.

Here’s a small number of the things that your stylesheet will dictate to give you an idea:

• Font family, size, letter spacing, line spacing
• All colours throughout the site including font, background, buttons and more
• The width and height of anything
• Gaps in between things

You can actually see the CSS for any website on the internet very easily. It’s not encrypted and it’s not hidden. Here’s what you do on Chrome or Edge on a desktop (I wouldn’t recommend trying this on a phone, it’s going to be fiddly due to your very small working area):

• Let’s look at the top of this page, Specifically where it says ‘the ins and outs’
• Right click on it then at the bottom of your menu click Inspect
• You may be on a laptop or small screen, if so:
  Click the 3 dots at the top right and next to Dock Side or Dock Location click the one that says ‘Undock into a separate window’, this’ll let you move the opened window around and see it in more detail

Getting a little technical but stay with me

The Inspector is a web developers best friend. It tells us exactly what’s happening on a website and helps us fix any errors when we’re coding.

On the left is all the code, and highlighted in grey is the title wrapped between <h2> tags (Header type 2).

On the right we can see all the css that tells the browser exactly how to display this including the the font-weight (bold, normal, light, etc.), the font family, the font size, line-height and much more if we scroll down.

So let’s say I’ve decided I want to change the colour of all h2 tags.

I can go into my css file, change one value and that will set how every single Header 2 tag is displayed throughout the whole website. I also know that whenever a Header 2 tag is used, they will all be the same colour/size/font/weight/etc.

As you can quickly see, it’s very useful and it’s very powerful.

Still with me so far? Fantastic.

Here’s where it gets interesting and with everything you’ve learned above we can now understand responsive web design:

When us web developers make a website for you lovely people we will write sections that says something along the following:

• When the width of the screen is less than 1024 pixels employ the following rules and overwrite the same rules I set above
• When the width of the screen is less than 600 pixels do the same again and employ a new set of rules
• Etc.

E.g. When the screen is 900 pixels wide set the font size of H1 tags to 40 pixels, when it drops under 600 pixels drop it again to 36 pixels, and so on.

We can write as many rules as we like and make it as complicated as we like.

One useful and very common rule to employ is to say: When the screen gets below this certain width, instead of putting pictures to the side of the text, put them above or below so we have more room to read the text. Or instead of having 3 boxes side by side, when we’re viewing this on a phone put those boxes on top of each other and make them the full width of the screen.

It’s very likely that you’ll have already seen these rules in action throughout the years.