We’re going to begin to wrap up our tutorial on creating a responsive website this week by creating a secondary services page to feature the necessary, and important, content of our site. Keeping a sites layout visually appealing is a crucial aspect of keeping a visitor on your site.
Having a simple box filled with verbiage running from left to right is not very inviting, nor aesthetically pleasing. When displayed like that, the sheer amount of text could be enough to cause your visitor to quickly back up and off your site. That’s why we’re going to break our text up and display it a little more creatively on our larger format.
Let’s first take a look at what we’re going to create and download the work up to this point, if need be.
When developing a site I typically use my homepage as a template by utilizing the “Save As” feature and renaming it what ever my new page will be. Feel free to start from scratch or follow along on my code deleting rampage.
Open up your index.php file and save it as services.php. Once it’s saved as services.php we’re going to need to delete some of the content. We’ll start in the head of our document by deleting most of the Java scripts and links, with the exception of the two lines following the link to our CSS file. These two lines call the jQuery and link the the JavaScript necessary for the Twitter feed in our footer to work. The rest of the Java links can go, they were only necessary for features on our homepage and are no longer relevant.
My <head> section now looks as follows.
<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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="js/twitter.js"></script>
</head>We’re going to rename our “mainBG” div to “services”. Go ahead and make that switch and change class “homeContent” to “servContent”. You’ll also swap the note that closes our services div from “mainBG” to “services” to prevent any future confusion.
Next we’re going to want to ditch our “blurb” class, and the final thing we’re going to want to nix is the entire “mainBG2” section, which contains all of the information for the portfolio slider that’s on our homepage.
At this point, weather you gave your delete key a work out or exercised your words per minute, your page should look as follows.
<!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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="js/twitter.js"></script> </head>
<body>
<div id="services" class="servContent" data-type="background">
<div id="container">
<header>
<?php include('header.php')?>
</header>
</div><!--end div "container"-->
</div><!--end div "services"-->
<footer>
<?php include('footer.php') ?>
</footer>
</body>
</html>
Next let’s add the sections that are going to contain and style our content. We’ll begin by blanketing all of our content with the “servPageContent” id. Then, within that tag, we’ll place the classes “whatWeDo”, a double-dose of “servColumns”, and a quadruple helping of “servCats”. For the content in these I just used some lorem ipsum filler text, feel free to do the same or insert your own.
My full services page now looks like 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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="js/twitter.js"></script>
</head>
<body>
<div id="services" class="servContent" data-type="background">
<div id="container">
<header>
<?php include('header.php')?>
</header>
<div id="servPageContent">
<div class="whatWeDo"><h4>What Can We Do For You?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris augue leo, imperdiet id molestie eu, volutpat sed eros. Praesent ut scelerisque augue. Proin ante nisl, consectetur ut venenatis nec, egestas quis massa. Nullam est sapien, mollis vitae tristique in, tristique eu elit. Mauris orci sem, tempus eu congue et, rutrum ut elit. Donec fringilla euismod varius. Proin quis purus nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie, diam ac ultrices consectetur, justo orci egestas massa, vitae gravida eros tortor id tellus. Morbi in quam nec quam gravida rhoncus a at nulla.</p>
</div><!--end div "whatWeDo"-->
<div class="servColumns">
<ul>
<li><h5>Let us help you</h5></li>
<li>Vivamus convallis</li>
<li>Ut rutrum eleifend nisl</li>
<li>Mauris sed lorem ut</li>
<li>Aliquam leo metus</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Vivamus convallis</li>
<li>Ut rutrum eleifend nisl</li>
<li>Mauris sed lorem ut</li>
<li>Aliquam leo metus</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Vivamus convallis</li>
<li>Ut rutrum eleifend nisl</li>
<li>Mauris sed lorem ut</li>
<li>Aliquam leo metus</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div><!--end div "servColumns"-->
<div class="servColumns">
<h4>Our Team</h4>
<p>Vivamus convallis, est vel gravida suscipit, risus urna aliquet lectus, nec bibendum sapien orci a elit. Aliquam pretium ipsum eu dui venenatis id viverra tellus dapibus. Mauris imperdiet ligula id odio consectetur eget lobortis orci elementum. Praesent commodo luctus ornare. Duis pharetra sollicitudin ante, id dictum diam placerat cursus. Ut rutrum eleifend nisl, vitae egestas dui consectetur eget. Aliquam erat volutpat. Mauris sed lorem ut nunc molestie imperdiet. Pellentesque vehicula ligula et felis mollis malesuada. Aliquam leo metus, ultrices rutrum tempor nec, eleifend ac velit.</p>
</div><!--end div "servColumns"-->
<div class="servCats">
<p><a href="#">Digital Media</a></p>
</div><!--end div "servCats"-->
<div class="servCats">
<p><a href="#">Print Media</a></p>
</div><!--end div "servCats"-->
<div class="bubbles34">
<div class="servCats">
<p><a href="#">Social Media</a></p>
</div><!--end div "servCats"-->
<div class="servCats">
<p><a href="#">Content & SEO</a></p>
</div><!--end div "servCats"-->
</div><!--end div "bubbles34"-->
</div><!--end div "servContent"-->
</div><!--end div "container"-->
</div><!--end div "services"-->
<footer>
<?php include('footer.php') ?>
</footer>
</body>
</html>Now that we’ve got our services page square away, go ahead and save that and let’s move on to our main.css file so we can begin styling our service page elements.
First up, we’re going to want to create our background image and set our width and height. The background image will use the same general styling as we used on our homepage, with the exception of setting the background image as being fixed rather than scrollable.
The beginning of my CSS for the services page immediately follows the main layout code for my homepage and looks as follows.
/* -------------------Services Page ----------------------------------*/
#services {
background: url(images/servicesBig.jpg) no-repeat fixed;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#servPageContent {
width:100%;
margin:0 auto;
font-family:Arial, Helvetica, sans-serif;
font-size:1.1em;
}
.servContent {
width: 100%;
height:100%;
position: relative;
margin: 0 auto;
}
Next we’ll apply some basic styling and positioning to our text elements.
.whatWeDo {
margin:5% 10%;
width:85%;
float:left;
}
.servColumns {
float:left;
width:35%;
margin-left:10%;
}
.servColumns ul li {
list-style:none;
margin-left:10%;
border-right:3px solid #6BA5BD;
}Finally we’ll wrap it up by making some rounded elements to help grab the attention of someone viewing our page and guide them to our specific services. There’s nothing too out of the ordinary that needs explaining. You’re free to change the size of the circles as well, just make sure that you set each radius to half the width of your circle element if you do choose to do so.
.servCats {
float:left;
width:150px;
height:150px;
margin-left:9%;
background-color:#6BA5BD;
-moz-border-radius:75px;
border-radius:75px;
-webkit-border-radius:75px;
}
.servCats p {
width:150px;
text-align:center;
margin-top:40px;
}
.servCats a {
color:#fff;
font-size:1.8em;
text-transform:uppercase;
font-weight:bold;
text-decoration:none;
}
.servCats a:hover {
color:#474e51;
}Save your CSS file and check your work. Does it look similar to the example above? Splitting the text blocks up in to three sections and displaying them in smaller grids like this is less intimidating to someone viewing the page and will encourage them to read on, rather than click away. Imagine how daunting the page would look if our text was just displayed as one massive block that filled the majority of the screen.
In our next installment of how to create a responsive website we will finish up this page by making it fluid and responsive. If you’d like to download the source code up to this point you may do so by clicking here.
