Step-By-Step: Turning A Design Responsive in WordPress, Part 3

Back for another week? In the first week, we got our design ready and coded the header. Last week, we coded the homepage content. This week we’ll be finishing up the homepage and the footer, and doing some testing. Maybe we’ll even get into one of the sub page designs, maybe not.

Other Posts In This Series

The Footer

The footer is probably the easiest part of the whole design. We simply need to float the footer 100% and add the background and the centering container.

	<footer>
			<div class="container"></div>
		</footer>
footer { background: #222; color: #fff; float: left; margin-top: 50px; padding-top: 15px; width: 100%; }

I went ahead and added a widget bar to the footer, so I wouldn’t need to go into the code to update the content.

<footer>
			<ul class="container">
				<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ) : ?>
				<?php endif; ?>
			</ul>
		</footer>

This time, while we have four different columns, they’re all different widths and style, so it’s time to break out the maths again. The first widget’s target width is 255px, and with the parent being, of course, 960px that makes it 26.5625% wide. The second column is 192px so 20% width, third column is 212px, 22.083333%, and the fourth is 130px, 13.541667%. This leaves us with 5.9375% of right margins for the first three columns. Broken down, the equation comes to:

26.5625 + 20 + 22.083333 + 13.541667 (the width of the columns) = 82.1875 (total width of columns) – 100 (percent) = 17.8125 (space left over before we hit 100%) / 3 (number of columns needing margins) = 5.9375 (amount each column can have as a margin).

It seems more complicated than it is, I promise.

footer { background: #222; color: #fff; float: left; margin-top: 50px; padding-top: 15px; width: 100%; }
footer li { float: left; list-style: none; margin-right: 5.9375%;  }
footer #text-14 { width: 26.5625%; }
footer #text-15 { width: 20%; }
footer .widget_twitter_vjck { width: 22.083333%; }
footer #text-17 { margin-right: 0; width: 13.541667%; }

Let’s check it in IE7-9 now. A few styling bugs in IE7, but nothing that wasn’t easily fixed. Now for the devices. iPad landscape and portrait look great. Not so much with the iPhone in both portrait and landscape. We’ll need to make the columns on their own line, like we did with the content above.

@media only screen and (max-width: 480px) {
		#slider { height: 41.5%; }
 
		.column, footer li { float: none; padding: 0 0 15px; width: 100% !important; }
}

I wasn’t happy with the way the hero area was displaying across resolutions. The circle background and border just wouldn’t match up correctly. Finally realized that by removing the border from the background and making it an actual border, I could make it match in sizes. For IE, I just specified it’s old image with the PNG border, because I didn’t want to compromise on the style. The new slider area now looks like:

#sliderBkg { background: url('images/sliderBkg.png') no-repeat; background-size: 100%; clear: both; height: 100%; margin: 0 auto 0; max-height: 328px; max-width: 1099px; width: 100%; }
#slider { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; height: 60.670732%; margin: 6% 0 0 6.1%; max-height: 199px; max-width: 960px; padding: 1%; width: 87.591241%; }
#slider a { float: left; height: 100%; max-height: 199px; overflow: hidden; width: 100%; }
#slider img { max-width: 100%; width: 100%; }
.no-backgroundsize #sliderBkg, .no-textshadow #sliderBkg { height: 328px; width: 1096px; }
.no-backgroundsize #sliderBkg { background: url('images/sliderBkgIE.png') no-repeat; }
.no-backgroundsize #slider { padding: 0; }

Now that we’ve finished the homepage, it’s time to do some extra testing. First, we need to validate the doc. It may not seem important anymore, but I believe that it’s essential to help find bugs and issues, as well as promoting standards.

And ouch..there’s a lot…31 errors which is more errors than I’ve ever had in my entire life…on closer inspection it looks like they’re mostly due to the HTML5 boilerplate being implemented correctly. Simply by moving the IE if statements below the doctype (I coulda sworn that’s how they where in the example!), our errors get cut down to 8. These were easily fixed, except for one created by a plugin and a standard WP validation error (hoping they fix that soon!).

What about Android? It’s time we fired up the simulator for that as well.

And woot! Perfect as well. Let’s move on.

The Portfolio Landing Page

The portfolio landing page displays all of the portfolio pieces, separated by category. I’m also going to include some neat rollover effects here.

This section is pretty basic. We’ll be looping through each category, and displaying the thumbnails to the right, with the title to the left:

<?php get_header(); ?>
 
	<div class="container">
		<section id="heading">
			<h1>Client Portfolio</h1>
			<p><?php category_description();?></p>
		</section>
 
		<section>
			<h2>WordPress</h2>
 
			<div class="items">
				<?php query_posts('work=wordpress-development&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_post_thumbnail('portfoliolanding');?></a>
				<?php endwhile; wp_reset_query(); ?>
			</div>
		</section>
 
		<section>
			<h2>Mobile</h2>
 
			<div class="items">
				<?php query_posts('work=mobile-development&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_post_thumbnail('portfoliolanding');?></a>
				<?php endwhile; wp_reset_query(); ?>
			</div>
		</section>
 
		<section>
			<h2>CoreCommerce</h2>
 
			<div class="items">
				<?php query_posts('work=corecommerce&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_post_thumbnail('portfoliolanding');?></a>
				<?php endwhile; wp_reset_query(); ?>
			</div>
		</section>
 
		<section>
			<h2>Static</h2>
 
			<div class="items">
				<?php query_posts('work=static-development&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
					<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_post_thumbnail('portfoliolanding');?></a>
				<?php endwhile; wp_reset_query(); ?>
			</div>
		</section>
	</div>
 
<?php get_footer(); ?>

We’ll need to start out styling the heading section first. This is simple to get working responsively, by just giving it 100% width and allowing the browser to resize at will.

The circle headings and thumbnails will remain a fixed size however, to preserve the integrity of the layout.

#heading { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; float: left; margin-bottom: 20px; padding: 22px 0 10px; width: 100%; }
#heading h1 { margin: 0 0 15px; }
 
.tax-work .portfolio { float: left; margin-bottom: 20px; width: 100%; }
.tax-work .portfolio h2 { background: rgba(165,206,205,.6); border-radius: 81px; color: #fbfed6; float: left; height: 93px; margin: 0; padding-top: 70px; text-align: center; width: 163px; }
.tax-work .items { float: right; width: 80%; }
.tax-work .items img.wp-post-image { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; margin: 0 6px 6px 0; padding: 6px; }
.tax-work .items a:nth-of-type(3n+3) { margin-right: 0; }

When the window is reduced, the thumbnails fall below the circle nicely, but the circle itself is left in the top left corner, so we’ll add a rule to a media query to position in the middle and give it a bit of space at the bottom.

.tax-work .portfolio h2 { float: none; margin: 0 auto 20px; }
.tax-work .portfolio .items { width: 100%; }
.tax-work .portfolio .items img { display: block; float: none; margin: 0 auto 10px; }

Now for the hovers. I wanted the the titles in the circle to disappear and a short description to appear when the user hovered over any item in that section. I also wanted to do this in CSS only. Here’s my solution:

<h2><span class="title">Mobile</span><span class="desc">mobile web sites built in CSS3, HTML &amp; JS</span></h2>

I put the description and title into seperate spans in HTML, which I hide with display none in CSS. Then when the user hovered over the items div, it would display the span.desc and hide the span.title

.tax-work .portfolio { float: left; margin-bottom: 20px; width: 100%; }
.tax-work .portfolio h2 { background: rgba(165,206,205,.6); border-radius: 81px; color: #fbfed6; float: left; height: 93px; margin: 0; padding-top: 70px; text-align: center; width: 163px; }
.tax-work .portfolio:nth-of-type(3) h2 { background: rgba(229,118,61,.6); }
.tax-work .portfolio:nth-of-type(4) h2 { background: rgba(238,142,104,.6); }
.tax-work .portfolio h2 span.desc { color: #222; font-size: .7125em; font-weight: normal; line-height: 1.55em; position: relative; top: -10px; text-transform: none; }
.tax-work .portfolio h2 span.desc, .tax-work .portfolio:hover h2 span.title { display: none; }
.tax-work .portfolio:hover h2 span.desc { display: block; }
 
.tax-work .items { float: right; width: 80%; }
.tax-work .items a:nth-of-type(3n+3) { margin-right: 0; }
.tax-work .items img { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; margin: 0 6px 6px 0; padding: 6px; }
.tax-work .items img:hover { opacity: .5; }

Nothing to it! Doing a quick check in the iPhone and iPad, the iPhone looks great but we have a few issues on the iPad. We basically just need to move our statements around.

@media only screen and (max-width: 960px) {
	header .container > a { display: block; float: none; text-align: center; }
	header ul { clear: both; float: left; text-align: center; width: 100%; }
	header ul li { display: inline-block; float: none; }
	header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { top: 9px; }
	#slider { height: 14.70732%; }
	.tax-work .portfolio h2 { float: none; margin: 0 auto 20px; }
	.tax-work .portfolio .items { text-align: center; width: 100%; }
	.tax-work .portfolio .items img { float: none; }
}

This results in the circle on top and rows of two thumbnails on portrait mode of the iPad, full regular display on landscape mode of the iPad, and then the circles on top and rows of one thumbnail on both views of the iPod (and Android of course!).

Now it’s time to take a quick peek at IE…which needs fall backs for the circles and the borders since IE8 and below doesn’t support RGBA.

.no-rgba .portfolio h2 { background: rgb(165,206,205); }
.no-rgba .items img { background: rgb(229,118,61); border: 1px solid rgb(183,91,43);

While not the prettiest, having rounded corners and opacity just isn’t a big enough issue for me to make image fallbacks…plus the amount of IE8 and below users I have is less than 2% of my total traffic.

Another End!

We’ll be back next time for some more responsive goodness!