Responsive page development

Here at Matrix Group, most of the design work we’ve been doing is responsive. Being a developer and not a Front End Developer (FED) or designer, I didn’t really have as much exposure to it.

Recently, I had the opportunity to redo a page where I wanted 3 columns on my wide screen monitor, but knowing that other people have smaller laptop monitors, that would mean some very squished data.

So along came responsive to my rescue.

Because I wanted to learn how this worked, I did some research which helped me out. Here’s how to solve this issue:

Add this line in to the head of the page

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Then in your CSS, assign styles to the appropriate page widths using @media, which acts like an if/else statement.

So for example if your screen size is greater than 768px but less than 1120px you would have the following line
@media only screen and (min-width: 768px) and (max-width: 1120px) {
/*You would put in your styles here*/
}

You can put any style in including only showing certain things like a “close” link so that you can collapse a div.

For a super simple example take the following code and play around with it. I put inline styles so that you can just see the outline of the divs.

Have fun :)

Responsive.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Responsive Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="responsiveStyles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
	<div id="leftContent" style="border: solid 1px #000; height:300px; margin-right:5px;">
		<div id="closeLeftDivLink" style="float:right;">Close</div>
		This is the left content
	</div>

	<div id="middleContent" style="border: solid 1px #c0c0c0; height:200px; margin-right:5px;">
		<div id="closeMiddleDivLink" style="float:right;">Close</div>
		This is the middle content
	</div>

	<div id="rightContent" style="border: solid 1px #cc0000; height:200px; margin-right:5px;">
		This is the right content
	</div>
</div>

<div style="clear:both;">

</body>
</html>

responsiveStyles.css


/* anything larger than 1120 */
#leftContent {
float:left;
width:30%;
}

#middleContent {
width:40%;
float:left;
}

#rightContent {
width:28%;
float:left;
}
#closeLeftDivLink {display:none;}
#closeMiddleDivLink {display:none;}

/* if your widow display width is between 768px and 1120px */
@media only screen and (min-width: 768px) and (max-width: 1120px) {
#leftContent {
float:left;
width:35%;
}

#middleContent {
float:right;
width:62%;
margin-bottom:20px;
}

#rightContent {
float:right;
width:62%;
}
#closeLeftDivLink {display:none;}
#closeMiddleDivLink {display:block;}
}

/* if your widow display width is between 480px and 767px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
#leftContent {
float:none;
width:auto;
margin-bottom:20px;
}

#middleContent {
float:none;
width:auto;
margin-bottom:20px;
}

#rightContent {
float:none;
width:auto;
}
#closeLeftDivLink {display:block;}
#closeMiddleDivLink {display:block;}
}

/* if your widow display width is less than 479px */
@media only screen and (max-width: 479px) {
#leftContent {
float:none;
width:auto;
}

#middleContent {
float:none;
width:auto;
}

#rightContent {
float:none;
width:auto;
}
#closeLeftDivLink {display:block;}
#closeMiddleDivLink {display:block;}
}