Developing a Responsive Website: Secondary Page

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.

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.

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.

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.

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.

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.

Scott Stanton has spent the past decade working nights as a freelance web designer, only to write about the latest design trends at his day job as a freelance writer. Hang on Scott's every word @TheScottStanton.
More articles by Scott Stanton

CrowdFinch

This is a really good read for me, Must admit that you are one of the best bloggers I ever saw. Looking forward for your next one.

Anonymous

Layout is the key element in your website to keep visitors attracting & coming again & again to view your website. Good in detail you have mention CSS for the services page followed by homepage. It will be definately useful for all new comers.

Hey WordPress lovers. Every month dozens of incredible free WordPress plugins are released by the community, and we’re here to bring them to you. This seems to be a month of small but useful utilities that only do one or two things, with a few exceptions. So go on. March on down to the list, and get to it! (I'm only a little bit ashamed of that pun.) WP NoteUp ... Notes! Alongside your posts and pages! Use them to remind yourself, or other authors, about things you'd put in a note. That's really all there is to...

WordPress plugins are coming out all of the time, right and left. Every day, they’ve got new ones in the WordPress plugin repository for the curious developer to check out. Over time, your average designer or developer will end up with a list of their favorites. Usually, they’re plugins that solve common problems, are up-to-date and well-maintained, with good support. With that in mind, we’re sharing a list of some of the best plugins out there. Disable Comments ... Disable Comments does......

When I first started out creating websites with WordPress, I was in awe of the depth and variety of plugins available. During those golden days I would willingly install just about anything that looked cool. Shortly thereafter, I was smacked in the head by reality. Stuff started breaking and seriously hurt my good time. It turns out that not every plugin is a great one. And there are times when it seems like the work we do is held together with bubble gum and duct tape. Everything works splendidly until it...

WordPress is undoubtedly one of the most popular tools on the Internet because it makes it so easy to get a functional web site up and running in such a short time. And then there are the plugins. If you want your WordPress site to do something then odds are there is a plugin that you can install to make your site do what you want it to do. But plugins pose a bit of a problem at times. Since they are created by third-party developers you never know what quality control practices are used and what security testing...

WordPress beginners have difficulty customizing their websites past simple text changes, especially if they have no background knowledge of HTML or CSS. WordPress page builder plugins allow just about anyone to build a stylish or professional looking web page, through a user-friendly interface - quickly, and without knowing HTML or CSS. Though it may seem like WordPress page builder plugins have usefulness mainly for the technically unsavvy, they can also make a WordPress developer’s job...

Oftentimes, setting up a WordPress website results in a haphazard scramble to configure enough of the right plugins to make the client happy, and address any specific needs they might have mentioned. But a failure to install certain plugins means the client will come back at you with questions as to why it wasn’t done in the first place. Though you’re probably happy to rectify the problem (and collect a little extra money on the project), going back in to install plugins can distract from more profitable...

In Part 1 of this series we took a look at how you can better secure your WordPress files during, and after, the installation of the software. But once you have the files hardened against different threats, it is time to start looking at some of the different plug-ins available that can help you further protect and secure your WordPress site. WordPress Firewall 2 ... Having worked with a company that deals with web application firewalls, I can tell you from firsthand experience that these are by far one...

There’s a goal behind every website, and a specific chain of events that must occur before each goal is accomplished. Whether you want someone to sign up for your email newsletter, or fill out a contact form, these things don’t happen without the proper triggers. Used strategically, WordPress plugins can assist with the realization of important goals. Here’s how to turn your website into a conversion machine with WordPress Plugins. Essential Grid ... Essential Grid is an all-around grid solution...

About

DeveloperDrive.com is a blog about web development from the makers of the popular web design blog WebdesignerDepot.com
Founded in 2011, we focus on the latest trends, tutorials, opinion articles as well as tips and tricks to empower our readers to become better web developers.