Responsive Website Layout

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