Now that we’ve got our background images squared away and set to break themselves down nicely across various devices and screen resolutions we can look in to populating our home page with some content.
Let’s begin with our header. I always like using a separate file for all the things that will stay uniform throughout my site, header, logo, navigation, etc. That way if I need to make a minor edit down the road I just have to edit the header file, which is then pulled in to every page with a simple PHP include script.
To start, let’s create a new php file, I named my “header.php” in order to keep things simple. In my header.php file I have placed my header, which simply contains the logo (I used the Developer Drive logo for this tutorial). After my logo is my navigation, a simple list will suffice for this tutorial. I chose a few basic links that someone may want to include in their site, but feel free to include what ever links are relative to you. My header.php code looks as follows.
<div id="logo"><img src="images/logo.png" alt="Developer Drive" /></div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
</nav>Go ahead and save that file, and feel free to close it since we’re done working in there.
Open your index.php file and let’s begin adding the content. We’ll start by adding a container div after our background image, then place the php include for our header, and finish it off by putting in our little blurb bubble. When all is said and done you should have something similar to this.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<title>Responsive Web Design</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainBG" class="homeContent" data-speed="8" data-type="background">
<div id="container">
<header>
<?php include('header.php')?>
</header>
<div class="blurb"><h2>Allow us to take your idea and bring it to light</h2>
<p>Our team of creative thinking interactive developers will establish your brand presence.</p>
</div>
</div><!--end div "container"-->
</div><!--end div "mainBG"-->
</body>
</html>If you were to preview your work so far it should look something like this.
The reason for this is because we haven’t applied any styles to our elements, so let’s go ahead and do that now. Open the main.css file and we’ll start by styling our h2 tag. I styled mine as follows.
h2{
margin-left:-3.5%;
top:18%;
font-size:2.5em;
text-transform:uppercase;
text-align:center;
padding:0;
line-height:100%;
position:absolute;
width:107%;
}Next up we’re going to want to set up our container id, header and logo id. I gave mine a maximum width of 960px, as anything over that is going to be too wide on a larger monitor. As for the minimum width, I set it to 600 px to allow the content to shift inward for resolutions that aren’t quite as wide. To center the container you’ll notice I set the margin to 0 auto. The header and logo id are pretty basic as well.
#container {
max-width:960px;
min-width:770px;
margin:0 auto;
}
header {
position:relative;
margin:0 auto;
top:25px;
}
#logo {
float:left;
}Setting up the navigation is a little more complex than the previous stuff because we need to space our links evenly, apply style to the navigation menu as a whole, and tell the list how to display. I like to start with the biggest, outer-most element and work my way in, meaning I start with the nav tag and work in to the unordered list link inside the nav tag.
With the nav tag we want to add some of our basic style, like width, placement, margins, and then I put a bottom border under my navigation menu.
nav {
border-bottom:3px solid #333;
width:642px;
float:right;
margin:26px 30px 0 30px;
font-weight:bold;
}Next up are the list items. This is where we define how we want our list to display, space each link apart from each other, and put any style we’d like the links to have, in this case I want all my text to be uppercase.
nav ul li {
display:inline;
text-transform:uppercase;
list-style:none;
margin-right:4%;
}Lastly we define how we want our links to behave. You’ll notice the “.last” class at the end, the point of this is to clear the margin of our last link so that our bottom border doesn’t extend off to the right after the text ends.
nav ul li a {
font-size:1.2em;
color:#333;
text-decoration:none;
}
nav ul li a:hover {
color:#C44F09;
}
.last {
margin-right:0;
}If you preview your work up to this point you’ll see we’re almost there. All that’s left is styling our blurb and defining some more attributes in our media queries to make our site responsive.
To finish up with our large version of our site, we’re going to have to style our blurb class. Rather than using an image I decided to use the css3 rounded corners trick to cut down on our page having to load a solid color circle png image with a transparent background. It’s possible to set the height and width to keep the circle perfectly scaled regardless of where it falls within each media query, but one thing to keep in mind is if the resolution doesn’t maintain the same proportions then your circle will become an oval, or some other obscure shape.
.blurb {
position:absolute;
width:420px;
height:420px;
margin-left:3%;
background-color:#6BA5BD;
-moz-border-radius:210px;
border-radius:210px;
-webkit-border-radius:210px;
top:15%;
}
.blurb p {
position:absolute;
font-size:1.2em;
color:#fff;
font-weight:bold;
text-transform:uppercase;
text-align:center;
bottom:28%;
width:89%;
margin-left:5%;
}You’ll be able to see the fruits of your labor if you preview your work now. However, keep in mind we still have to do some work in our media queries to make it responsive, so we’re not quite done yet.
To cover my bases for slight variations or oddities in tablet or medium sized screen resolutions I went ahead and used the css3 background-size:cover; trick to ensure my image would fill the screen and not leave any small gaps here or there. This is also where our max-width and min-width will come in to play, which means our logo will be pressed up against the left edge of the display. We can fix this by giving it a slight left margin. Since our display has shrunk, we’re also going to want to scale down some other things like our h2 tag, blurb size and font size within it, as well as the size of our navigation links.
@media only screen and (max-width: 1024px) and (orientation:landscape) {
#mainBG { background: url(images/medium.jpg) 50% 0 no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
#mainBG { background: url(images/medium.jpg) 50% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;}
#container {max-width:960px;
min-width:600px;}
#logo {margin-left:5%;}
h2 {font-size:2em;}
.blurb {width:320px;
height:320px;
top:20%;}
.blurb p {
font-size:1em;
bottom:20%;}
nav {width:560px;}
nav ul li a {
font-size:1em;
}
}Once we get down to the mobile size we want to shift our navigation and header around a bit so that it’s easier to view and follow the links. Other than that, it’s similar to the table query, scale things down a bit more so they display properly on a mobile device.
@media only screen and (min-width: 0px) and (max-width: 767px) {
header {top:5px;}
#mainBG {
background: url(images/small.jpg) 50% 0 no-repeat scroll !important;
background-size: auto !important;
height:450px;
}
#container {
max-width:767px;
min-width:0;
}
#logo {
margin:0 39%;
padding:0;
}
h2 {font-size:1.1em;}
.blurb {width:180px;
height:180px;
top:130px;
}
.blurb p {
font-size:.6em;
bottom:12%;
}
nav {width:91%;
float:left;
padding:0;
margin:0 4%;
text-align:center;
}
nav ul li {
margin-right:2%;
}
nav ul li a {
font-size:.5em;
}
}Preview your work in a browser now and be sure to shrink and expand the window to see how your site becomes responsive to the various resolutions. This is a basic responsive homepage, we’ll keep expanding on this in the weeks to come, so be sure to check back soon!
Download the source code for this tutorial here.
