Add to collection(s) Add to saved
  1. Engineering & Technology
  2. Web Design

Tugas Pertemuan

advertisement 
Tugas Pertemuan 14
Merancang Responsive WEB HTML5
http://www.onlywebpro.com/2013/03/18/design-your-own-responsive-web-template/
Dalam pertemuan ini akan dirancang WEB yang dapat merespons user, misalnya pada
gambar di bawah:
Banyak Device yang digunakan oleh pengguna untuk mem-browsing internet dengan
ukuran layer yang macam-macam, seperti gambar bawah:
Berikut adalah langkah untuk membuat responsive WEB
WEB Design
1
Step 1: The HTML Strucutre
Here is the HTML structure for the responsive website. In this example, we have a
basic HTML5 page layout with a header, page content container, sidebar and a footer.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Responsive Demo Web Design | onlyWebPro.com</title>
</head>
<body>
<div id="site_wrapper">
<header id="header">
<hgroup>
<h1>Demo: HTML5 Responsive Web Design |
onlyWebPro.com</h1>
<h2>A blog for web designers & web developers</h2>
</hgroup>
<nav id="main_nav">
<ul>
<li class="current"><a
href="http://www.onlywebpro.com/category/html5-showcase/">HTML5
Showcase</a></li>
<li><a
href="http://www.onlywebpro.com/category/tutorials/html-css/">HTML
& CSS Tutorial</a></li>
WEB Design
2
<li><a
href="http://www.onlywebpro.com/category/tutorials/javascript/">JavaS
cript Tutorial</a></li>
<li><a
href="http://www.onlywebpro.com/category/tutorials/mobilecontent/">Mobile Content Tutorial</a></li>
<li><a
href="http://www.onlywebpro.com/category/tutorials/php/">PHP
Tutorial</a></li>
<li><a
href="http://www.onlywebpro.com/category/tutorials/search-engineoptimization/">SEO Tutorial</a></li>
</ul>
</nav>
</header><!-- END header -->
<section id="page_content">
<article>
<header>
<h3>HTML5 Responsive Web Design Tutorial</h3>
<p>Nowadays, users no longer just browse web on their
desktop. Users now use mobile devices such as iPhone, iPad or Samsung
Galaxy Tab to view the website. So as a web designer or web
developer, we shouldn't designed the web page in fixed width anymore.
This tutorial will show you how to create a cross-browser responsive
design with HTML5 & CSS3 media queries. <a
href="http://www.onlywebpro.com/2013/03/18/design-your-ownresponsive-web-template/">Read tutorial</a>
</p>
</header>
</article><!-- END article -->
</section><!-- END page_content -->
<aside id="sidebar">
<h3>Follow Us</h3>
<ul>
<li><a target="_blank"
href="http://www.facebook.com/pages/Connect-withonlyWebPro/149917668368025">Facebook</a></li>
<li><a target="_blank"
href="http://www.twitter.com/onlyWebPro">Twitter</a></li>
<li><a target="_blank"
href="https://plus.google.com/100910543735224109915">Google
Plus</a></li>
</ul>
</aside><!-- END sidebar -->
<footer>
<p>Copyright 2013 onlyWebPro.com</p>
</footer>
</div><!-- END site_wrapper -->
</body>
Step 2: Adding Meta Tag
We need a viewport meta tag to tells the browser to use the device width as viewport
width and disable the initial scale.
WEB Design
3
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”
Step 3: Provide Fallback Support For IE
HTML5 tag such as <header>, <nav>, <section>, <article>, <aside>, <footer> are
not supported in Internet Explorer 8 or older, so we have to provide fallback
support for users using IE.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueriesjs.googlecode.com/files/css3-mediaqueries.js"></script>
<script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Step 4: The CSS
The CSS for the website is simple. Note that we have divided the CSS into 3 parts: –
Borwser Settings, Base Structure & Navigation. I’m not going to get into the details
of Browser Settings, instead we will focus on the Base Structure & Navigation
sections.
<style type="text/css">
/*** Browser Settings ***/
body {
background: #fff;
color: #333;
font-size: 13px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sansserif;
line-height: 1.4;
}
h1 {
color: #000;
font-size: 20px;
font-weight: bold;
margin: 0;
}
h2 {
color: #999;
font-size: 13px;
font-weight: normal;
margin: 0 0 10px;
}
h3 {
WEB Design
4
color: #222;
font-size: 16px;
font-weight: bold;
margin: 0;
}
a {
color: #09F;
text-decoration: none;
}
a:hover {
color: #333;
}
/*** Base Structure ***/
#site_wrapper {
margin: 0 auto;
width: 90%;
}
#page_content {
float: left;
width: 65%;
padding: 0 5% 3% 0;
}
#sidebar {
float: right;
width: 30%;
}
footer {
clear: both;
width: 100%;
}
/*** Navigation ***/
#main_nav {
position: relative;
margin: 20px 0 40px;
}
#main_nav ul {
margin: 0;
padding: 0;
}
#main_nav ul li {
display: inline-block;
list-style-type: none;
margin: 0 5px 10px;
padding: 0;
}
#main_nav ul li a:hover {
color: #333;
}
WEB Design
5
#main_nav ul li.current a {
color: #333;
border-radius: 5px;
}
</style>
Responsive design is percentage based layout, instead of using fixed pixel value, we
used percentage value for the width of all base structures.
We aligned the main navigation button to left by specifying ‘display:inline-block‘.
Step5: The Responsive
Now here is the magic that turns our website into responsive. The CSS media
queries is the key component for responsive web design, it tells the browser how to
render the page for specified viewport width. If you are not familar with media
queries, please be sure to read previous article on media queries.
<style type="text/css">
@media screen and (max-width: 650px) {
#header {
height: auto;
}
#page_content {
width: auto;
float: none;
margin: 20px 0;
}
#sidebar {
width: 100%;
float: none;
margin: 0;
}
/*** Navigation ***/
#main_nav {
position:relative;
min-height: 30px;
}
#main_nav ul {
background: #fff;
border: 1px solid #ddd;
padding: 5px 0;
position: absolute;
width: 40%;
WEB Design
6
}
#main_nav ul li {
display: none;
margin: 0;
}
#main_nav ul li.current {
display: block;
}
#main_nav ul li a, #main_nav ul li.current a {
background: 0;
display: block;
padding: 5px 10px;
}
#main_nav ul li.current a {
color: #333;
}
#main_nav ul:hover li {
display: block;
}
}
On 650px breakpoint, we removed ‘float‘ property for page content container and
sidebar. We try to hide all main navigation by specifying ‘display:none‘, but except
for the ‘.current‘ button. Then when users touch / mouse over on the main naigation,
we set the main navigation buttons back to ‘display:block‘, this will turn the main
navigation into a dropdown box.
Save all your files and view it on browser. Then resize your browser window, you
should see your website automatically adjust its layout to suit your window.
Conclusion
You just learned how to design your own responsve web template. We hope you
enjoyed this tutorial and look forward to your feedback!
WEB Design
7
Download
advertisement