Basic starter code for responsive web design
Posted in Tutorials
A basic starter code for a webpage using responsive web design would be like this …
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<script src="respond.js"></script>
<![endif]-->
</head>
<body>
<p>Your Content here</p>
<script src="script.js"></script>
</body>
</html>
This is based on the basic HTML5 webpage as described here. But it include the important line needed for responsive web design which is …
<meta name="viewport" content="width=device-width, initial-scale=1">
This line tells mobile device (or any device) to render the webpage at normal scale of 1. It tells device to not zoom in or out (such as when some device wants to shrink your webpage smaller in order to show the full page making text too small to read).
Because you will be building a responsive web design will reflow its layout based on browser width, you don’t want device to arbitrary zoom in or out. You want it at normal easy reading scale even on mobile device.
If you forget this line, your responsive web design layout will look correct on desktop view and even when you narrow your browser to simulate mobile view. But if you look on the actual mobile device you see that it shows the desktop layout zoom out to view the whole page and text too small to read.
The normalize.css is the CSS reset to make default CSS be consistent across browsers. This is followed by your own style.css for the CSS of the page.
script.js is any of your own Javascript for the page that you might need. Put at the bottom so that rendering of the page is not delayed by the loading of the script. This is for performance reasons.
However, html5shiv.js and respond.js are typically loaded at the top of the page. Because they are within Internet Explorer’s conditional comments of “if lt IE 9”, they only load if the user browser is older than Internet Explorer (IE) version 9.
The html5shiv.js makes IE6 thru IE6 know about the new HTML5 element tags, which it otherwise would not know about and not render properly. respond.js adds media queries support for IE6-8. And typically with responsive web design, you would need media queries.
Speaking of Internet Explorer, the meta tag with
content="IE=edge"
tells the Internet browser to use the latest rendering mode available on that browser. This prevent Internet Explorer from using an older rendering mode (such as quirks mode) when rendering page. Some would say that you can leave out that line. It is up to you. But as time goes on, you can probably start leaving it out.
Related Posts
Tags
Share This
