SIMAEC.NET WEB PUBLISHING

Responsive Design - An Overview

Following our credo that any page has to be optimized for any device, we developed an html structure and stylesheet statements to achieve a device responsive web page design.

Responsive Design

It means that the html and css is built in a way so that the content of a web page smoothly adjusts to the screen size. It is a popular technique because it allows maintaining just one version of a webpage for all device categories (mobile, tablet, computer) saving resources in building and maintaining such webpage and preventing the mess that may happen with having multiple versions.

Mobile First

When working on the design of a webpage, we start with the smallest device category, mobile. At this level most of the properties for all used html tags are defined either directly or by inheritance.

To elaborate on the difference between properties defined directly and by inheritance:

	body { font-family: Arial;}

With this css statement, all tags within the body tag will use the font Arial.

	p { font-family: Arial;}

With this css statement, all p tags in the page will use the font Arial.

The first version is recommended. Take advantage of inheritance as much as possible and keep css code simple. You can always overwrite a previous css statement with a new one targeting a more specific tag. At the end we are using cascading style sheets. Cascading refers to the property of style sheet statements to prioritize later statements over previous ones if they are applying to the same tag but conflicting.

Be aware that not all properties are inherited.

Once, outlook for mobile devices has been finalized, you extend the css code with statements which apply only for the next device category, 520px - 768px. These additional statements are applied conditionally by using a media query.

	@media only screen and (min-width: 520px) {
		/* CSS Statements applying for screens > 519px */
	} 

Once, outlook adjustments for the next device category have been finalized, you move on to the next category, 768px-960px

	@media only screen and (min-width: 768px) {
		/* CSS Statements applying for screens > 768px */
	} 

Keep in mind that only adjustments are necessary to be added which change the outlook from one to the next category. For example if you use a font size for h2 tags of 16px for mobile but 24px for all devices larger than mobile. You just add the font size statement to the next larger device category. Inheritance then will guarantee that the style applied within the min-width 520px media query will apply to all larger screens.

Basic Setup

To setup a webpage with responsive design, we define width properties for the principal semantic tags "header", "footer" and "main". Within these tags, we enclose all content in a div. Elements within this div container then will be organized using grid display.

	<header>
		<div>
			<p>Content</p>
		</div>  
	</header>
	<main>
		<div>
			<p>Content</p>
			<p>Content</p>
			<p>Content</p>
		</div>  
	</main>			
	<footer>
		<div>
			<p>Content</p>
		</div> 
	</footer>

A simple css statement to achieve responsiveness for this html code would look like this:

body { width:100% }
header { width:100% }
header > div { width:100%; margin: 0 auto;}
header > div > p { width:100% }
@media only screen and (min-width: 520px) {
	header > div { 
		display:grid;
		grid-template-columns: 1fr 1fr;
	}	
} 
@media only screen and (min-width: 768px) {
	header > div { 
		display:grid;
		grid-template-columns: repeat(3, 1fr);
	}
}
@media only screen and (min-width: 960px) {
	header > div {
		max-width:960px;
	}	
} 

With this html/css combination we achieve a one column display of all paragraphs on mobile, a two column display on the next device category and a three column display on tablets and larger devices. We also make sure that in the largest device category defined, the max width available is restricted to 960px and centered.

We call the first div within a semantic tag wrapper and usually assign a class to it called wrapper. We prefer having the grid applied to a container within the wrapper and not to the wrapper itself. It allows us more flexibility in mixing content with different number of columns. For simplification we skipped here this additional level.

We don't want to go into details about grid layout. There are wonderful websites covering this topic in details, explaining your options way better we ever would be able to.

Finally, there are other technics available to achieve responsiveness of a webpage. We use exclusively grid layout. We consider it the best option.

Resources