GDA Lecture: Responsive Web Design, a Hands-on Approach

Posted on Updated on

On Wednesday, February 13th, Tyler Dockery gave an hour-long discussion and hands-on training on responsive web design to the FDA.
Learn about responsive web design with Tyler Dockery

GDA Lecture: Responsive Web Design, a Hands-on Approach

The talk outlined the basics of responsive design, how it differed from adaptive design, and was concluded with a hands-on demonstration in which students could create their own responsive page from a template [ code provided below ].

The Mac Lab was filled and several students remained without computers to discuss the materials and observe the lecture. Q&A after the session covered numerous topics, such as how to use media calls in CSS to reconfigure your responsive pages, and how to organize your content for mobile devices.

He provided two files for the discussion:

First, a word document outlining the basics of responsive design, and giving some great links to websites which students can use to learn more of responsive design basics. The DocX can be downloaded below:

Responsive Discussion Document

Second, a Dreamweaver file with a basic website already coded. Additional CSS has been added BELOW the HTML which will make the page adapt if the screen size becomes 600px or smaller. Cut the commented CSS and add it within the bottom of the <style> tag.

 As this version of wordpress will NOT allow .html files to be uploaded, AND .zip files with .html files insider are also banned, the entire source code will be posted below for those interested.


<html><head><title>Responsive</title>
<style>
body {
background-color:grey;
width: 1024px;
}
.container {
width: 93.75%; /* 960 / 1024 = 93.75% */
height:auto;
margin: 0px auto;
background-color: white;
}
.head {
width: 100%; /* 100% */
height:80px;
background-color: lightgray;
}
.nav {
width: 31.25%; /* 300 / 960 = 31.25% */
height: auto;
float: left;
}
.nav a {
display:block;
}
.content {
width: 66.66666667%; /* 640 / 960 = 66.6666666666667% */
margin-left: 10px;
margin-right:10px;
background-color: lightblue;
height:auto%;
float:right;
}
.footer {
width: 100%; /* 100% */
background-color: pink;
height:80px;
clear: both;
}/* Media Screens Below */</style>
</head><body>
<div class=”container”>
<div class=”head”></div>
<div class=”nav”>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
</div>
<div class=”content”>Whole biggity-bunch of content</div>
<div class=”footer”></div>
</div><!–@media (max-width:600px) {
.nav, .content {
float: none;
width: 100%;
Height: auto;
clear:both;
margin: none;
}
.nav a {
float: left;
margin-right: 10px;
display: inline;
}}
–>
</body></html>

If you’re interested in learning more about Responsive Web Design, please feel free to come and visit with me in my office, 321C in the ETB building. If you enjoyed this or any presentations, please let us know and let us know what you’d like us to present on in the future!

Advertisements