When designing a website, you have to consider the different sizes of screens of your internet users. These may access your website using a computer (desktop/laptop), a tablet, a smartphone, a smart TV…

A responsive website is a website where the layout adapts to the size of the screen.

On a large screen, the layout may include a header, a footer, several columns, left and right panels. A responsive layout can then adapt to smaller/narrower screens such as smartphones by adopting a linear layout (where all the sections mentioned above appear one after the other).

Using CSS it is possible to apply different sizes and positions to different sections of the website based on the size of the screen.

If you have used one of the layout from “HTML – Website Layout” then you can add the extra CSS provided below to make your website responsive.

@media screen and (max-width: 1040px) {
	BODY {
		margin: 20px 20px 20px 20px;
	}
	
	.page, .pageHeader, .pageContent, .pageLeftPanel, .pageRightPanel, .pageFooter {
		width: 100%;
	}
	
	.pageContent, .pageLeftPanel, .pageRightPanel {
		min-height: auto;
	}

	IMG {
		max-width: 100%;
	}
}

A quick approach to test if your website is responsive is to resize your bowser window to the size of a smartphone and see how your website behaves.

Other aspects of a website can also adapt to the size of the screen. These includes pull-down navigation menus, font sizes, picture sizes, interactive elements such as tabs, accordion menus… However these can sometimes be trickier to implement.

Video Tutorial

When formatting text on a webpage, you will more likely want to use different types of fonts. You may be tempted to use fonts that are installed on your own computers. However, you need to be careful as there is no guarantee that these fonts are also installed on the computers of the client computers/tablets/smartphones of users who will access your webpage.

To remedy this problem, you can limit your choice of fonts to “web-safe” fonts. These are a set of fonts which are installed on nearly every computer/tablet/smartphone. Check this page to access a list of web-safe fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp.

The list of web-safe fonts being very limited, you may then investigate using Google Fonts. These are fonts that are hosted on Google servers and that you can link from your webpages. Which means every time a user loads your page, their browser will also load the required fonts from Google servers. Though this may slow down the loading of your page, it will give you access to hundreds of fonts to choose from and is a very reliable approach to spice up the look and feel of your website.

Check the list of available Google Fonts: https://fonts.google.com/.

The following video clip explains how to use Google fonts on your own webpages.

Video Tutorial

Additional Video:
Google Fonts in less than 3 minutes: https://youtu.be/peR9V-f9OkI

HTML & CSS Code

<link href="http://fonts.googleapis.com/css?family=YOUR_CHOSEN_FONT" rel="stylesheet" type="text/css">

And then in HTML your code either use the

<FONT face="YOUR_CHOSEN_FONT">...</FONT>

Or in CSS:

BODY, H1, P  {
   font-family: 'YOUR_CHOSEN_FONT';
}