AmberWeinberg.com » tutorial http://www.amberweinberg.com Design, Development and Freelance Articles and Tutorials Mon, 06 Feb 2012 21:09:07 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 CSS3 Animated Buttonshttp://www.amberweinberg.com/css3-animated-buttons/ http://www.amberweinberg.com/css3-animated-buttons/#comments Fri, 03 Feb 2012 15:08:20 +0000 Amber Weinberg http://www.amberweinberg.com/?p=5320 Today I was tasked with creating some wacky CSS3 animated buttons. I started out by looking at one or two tutorials before I was able to come up with something of my own.

The button made use of three typical states: regular, hover and active. I started out by coding the buttons so they’d look fine in non-animation capable browsers. I split the animated parts separately and placed them into spans:

<a class="btnSellers" title="Sellers Video Overview" href="#">
	<span class="monitor"></span>
	<span class="play"></span>
</a>
 
<a class="btnBuyers" title="Buyers Video Overview" href="#">
	<span class="monitor"></span>
	<span class="play"></span>
</a>

These are styled and formatting quite normally:

#btnVideos .btnSellers, #btnVideos .btnBuyers { background: url('images/btnSellers.jpg') no-repeat; float: left; height: 92px; margin-top: 80px; position: relative; width: 229px; }
#btnVideos span { display: block; position: absolute; }
#btnVideos .monitor { background: url('images/iconSellers.jpg') no-repeat; left: 20px; height: 69px;  top: -26px; width: 102px; }
#btnVideos a:hover .monitor { top: -36px; }
#btnVideos .play { background: url('images/btnPlay.png') no-repeat; height: 51px; right: 25px; top: -12px; width: 51px; }
#btnVideos .play:active { background-position: bottom; }
 
#btnVideos .btnSellers:hover { background-position: left -91px; }
#btnVideos .btnSellers:active { background-position: left -183px; }
 
#btnVideos .btnBuyers { background-image: url('images/btnBuyers.jpg'); margin-top: 54px; }
#btnVideos .btnBuyers:hover { background-position: left -92px; }
#btnVideos .btnBuyers:active { background-position: 1px -184px; }
#btnVideos .btnBuyers .monitor { background: url('images/iconBuyers.jpg') no-repeat; }

Adding the animation in was really very easy. First, we needed to tell the buttons that we wanted to animate them eventually. You’ll put these in your normal states:

#btnVideos .monitor { background: url('images/iconSellers.jpg') no-repeat; left: 20px; height: 69px; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; transition:all 0.3s linear; top: -26px; width: 102px; }
#btnVideos .play { background: url('images/btnPlay.png') no-repeat; height: 51px; right: 25px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; top: -12px; width: 51px; }

As you can see, I’m using different transition easing – a linear and an ease-in-out. There’s no hard rule for which to use, just experiment until you get an effect you like.

To animate the play button, all we had to do was give it a 360 degree rotate:

#btnVideos a:hover .play { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }

To pull the monitor graphic up was even easier, I just adjusted the top value:

#btnVideos a:hover .monitor { top: -36px; }

Definitely much quicker and cleaner than jQuery!

You can see a demo of this here.

]]> http://www.amberweinberg.com/css3-animated-buttons/feed/ 8 Step-By-Step: Turning A Design Responsive in WordPress, Part 5http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-5/ http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-5/#comments Wed, 26 Oct 2011 15:01:33 +0000 Amber Weinberg http://www.amberweinberg.com/?p=4855 Phew, can you believe how far we’ve come? Cross your fingers for the finale, we only have four mockups left to code: blog single, extras, about and contact. Let’s see if we can make it in one post!

Other Posts In This Series

Blog Single

Last week we coded the blogroll page, and the blog single page is almost exactly the same thing – with the addition of some meta, comments and sharing. So go ahead and copy/paste the HTML from the archives.php to single.php, and add in the additional pieces:

<?php get_header(); ?>
 
	<div class="container">
		<section id="heading">
			<h1>The Blog</h1>
		</section>
 
		<article id="blog">
			<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
				<section>
					<h2><?php the_title();?></h2>
					<p class="meta">Posted on <?php the_time('F d, Y');?> in <?php the_tags('', ', ');?></p>
					<?php the_content(); ?>
 
					<section>
						<div class="author">
							<?php echo get_avatar( get_the_author_email(), '75' ); ?>
							<h3>About the author</h3>
							<p><?php the_author_meta('description'); ?></p>
						</div>
 
						<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="amberweinberg">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
 
						<div id="fb-root"></div>
						<script>(function(d, s, id) {
						  var js, fjs = d.getElementsByTagName(s)[0];
						  if (d.getElementById(id)) {return;}
						  js = d.createElement(s); js.id = id;
						  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
						  fjs.parentNode.insertBefore(js, fjs);
						}(document, 'script', 'facebook-jssdk'));</script>
 
						<div class="fb-like" data-href="<?php the_permalink();?>" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false"></div>
					</section>
				</section>
			<?php endwhile; wp_reset_query(); ?>
 
			<?php comments_template(); ?>
		</article>
 
		<?php get_sidebar(); ?>
 
	</div>
<?php get_footer(); ?>

Again, we just have some basic CSS. The meta is a basic paragraph element given a display block, so we can add padding without the math.

#blog p.meta { background: rgba(165,205,205,.5); border: 1px solid rgba(89,153,151,.5); display: block; font-size: .9375; font-weight: bold; margin-bottom: 20px; padding: 3px 1%; }

The bottom meta is surrounded with a section tag so we can float the author box and sharing options together. This section requires a bit more math, but nothing we haven’t done before.

#blog section section { float: left; width: 100%; }
#blog section section > * { float: left; margin-right: 1%; }
#blog section .author { padding: 1.8121911%; width: 78.167116%; }
#blog section .author img { float: left; margin-right: 10px; }
#blog section .author p { line-height: 1.2em; padding: 0; }
#blog section .author a { color: #222; }
#blog section .author a:hover { color: #68a1a0; }
#blog section > iframe, #blog section .fb-like { margin-top: 20px; }

The comments section is pretty easy. Thanks to the HTML5 Boilerplate, the structure is already there, especially for reply comments. Just some more simple styling:

#blog #comments { background: url('images/divider.png') no-repeat center bottom; clear: both; margin: 0; padding: 0 0 10px; text-transform: uppercase; }
.commentlist { margin: 0; padding: 0; }
.commentlist li { list-style: none; }
.comment-body { border-top: 1px solid #f3d2c4; float: left; margin-top: 15px; padding-top: 15px; position: relative; width: 100%; }
.commentlist > li:nth-of-type(1) > .comment-body { border: none; }
.comment-body .avatar { margin: 0 15px 0 0; width: auto; }
.comment-body .comment-author { font-size: .8125em; font-weight: bold; padding-bottom: 10px; text-transform: uppercase; }
.comment-body .fn { font-style: normal; padding-right: 2px; }
.comment-meta { font-size: .8125em; right: 0; position: absolute; text-transform: uppercase; top: 0; }
.comment-reply-link { color: #222; margin-top: 10px; padding: 2px 15px; }
 
#respond { clear: both; width: 100%; }
#respond h2 { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; padding: 12px 0; text-transform: uppercase; }
#respond input[type=submit] { font-size: 1em; font-weight: bold; margin-bottom: 10px; }

Checking it in devices shows the author and comments area getting a bit squished, so let’s fix that.

@media only screen and (max-width: 960px) {
	#blog section .author { width: 98.1878089%; }
}
 
@media only screen and (max-width: 480px) {
	.comment-meta { display: none; }
}

Then don’t forget the regular RGBa fallbacks for IE!

Contact Page

A super simple layout with just a large image, some info and a form. This page is all done using the WYSIWYG and a contact plugin and a bit of CSS.

The only edits we need to make for mobile devices is to remove the map from the iPhone and stretch the form 100%.

@media only screen and (max-width: 480px) {
.page-id-1066 #page .alignleft { display: none; }
.page-id-1066 #page .content { width: 100%; }
}

The About Page

Another super simple page and very similar to the contact page. I’ll go ahead and skip this one…I think you can handle it on your own ;)

Extras Page

My Extras page is a bit more complicated than the others, and is close to the portfolio main page. We’re going to list all of the apps at the top of the page, then a small list of links to the little extras I make at the bottom. The PHP just requires two loops and very simple markup:

<?php get_header(); ?>
 
	<div class="container">
		<section id="heading">
			<h1>Extra Dev</h1>
			<p>A place for all the extra goodies I make.</p>
		</section>
 
		<p>Please excuse the mess! I'm swapping over the design, and won't be ready until the end of this week!</p>
 
		<?php query_posts('post_type=apps&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<section>
				<a title="<?php the_title();?>" href="<?php echo get_post_meta($post->ID, 'Link', true);?>"><?php the_post_thumbnail('apps');?></a>
				<a title="<?php the_title();?>" href="<?php echo get_post_meta($post->ID, 'Link', true);?>"><img src="<?php echo get_post_meta($post->ID, 'Logo', true);?>" alt="<?php the_title();?>"/></a>
				<?php the_content();?>
				<a class="btn" href="<?php echo get_post_meta($post->ID, 'Link', true);?>">Visit Website</a>
			</section>
		<?php endwhile; wp_reset_query(); ?>
 
		<div class="heading">
			<h2>Templates, Plugins and More</h2>
			<p>Stuff for you to download</p>
		</div>
		<?php query_posts('category_name=extras&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_title();?></a>
		<?php endwhile; wp_reset_query(); ?>
	</div>
 
<?php get_footer(); ?>

Each app has it’s own screenshot, a logo, a description and a button. Let’s first give it some standard styles and IE fallbacks

.tax-ex .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-ex .wp-post-image:hover { opacity: .5; }
 
.no-rgba .tax-ex .wp-post-image { background: rgb(229,118,61); border: 1px solid rgb(183,91,43); }

And force WordPress to make our featured image resizable based on browser. Remember, we come at these numbers by dividing the number of the item (the image) by the container (which is 960px)

.tax-ex .wp-post-image { height: auto !important; margin-right: 1.5625%; width: 35.416667% !important; }

We’ll also need to make sure the image looks nice in the iPhone, so we’ll make it extend the whole width:

.tax-ex .wp-post-image { margin: 0 0 10px; width: 97% !important; }

The bottom extras are is easy, we’re just doing some simple math and styles

.extras { color: #222; float: left; font-size: .775em; margin: 0 1% 1% 0; padding: 1.2%; width: 30%; }
.extras:nth-of-type(3n+3) { margin-right: 0; }
.extras:hover { color: #222; }

For devices under 600px though, we’ll need to clear the extras and make them extend 100%.

@media only screen and (max-width: 600px) {
	.extras { clear: both; margin: 0 0 10px 0; width: 97.6% }
}

Oh Boy!

Fantastic work we’ve done, eh? Feel free to ask questions about ANYTHING you don’t understand and I’ll do my best to help.

Look for the eBook version next week, and happy coding!

]]> http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-5/feed/ 2 Step-By-Step: Turning A Design Responsive in WordPress, Part 4http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-4/ http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-4/#comments Fri, 21 Oct 2011 13:56:18 +0000 Amber Weinberg http://www.amberweinberg.com/?p=4851 We’ve come a long way in the past few weeks already, but we’ve still got seven more mockups to go. This week we’ll be focusing on the portfolio detail, testimonial and blog archive pages.

Other Posts In This Series

Portfolio Detail

The portfolio detail page is pretty simple. We’ve got a large image to the left, and some details on the right. This should be super easy to turn responsive, right? On the single-portfolio.php, I’ve coded up the basic layout:

<?php get_header(); ?>
 
	<div class="container">
		<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<section id="heading">
				<h1><?php the_title();?></h1>
				<?php if($myImageFileName = get_post_meta($post->ID, 'Website', true)){ ?><p>Website: <a title="View <?php the_title();?>" href="<?php echo get_post_meta($post->ID, 'Website', true);?>" target="_blank"><?php echo get_post_meta($post->ID, 'Website', true);?></a></p><?php } ?>
			</section>
 
			<?php the_post_thumbnail('portfoliodetail');?>
 
			<section id="details">
				<?php the_content();?>
			</section>
 
		<?php endwhile; wp_reset_query(); ?>
	</div>
 
<?php get_footer(); ?>

First we’ll need to apply some simple styles. The section#heading has already been made responsive from last week, but we’ll need to float the link to the right.

.single-portfolio #heading h1 { float: left; }
.single-portfolio #heading p { float: right; font-weight: bold; }

For the featured image, we need to pull the URL out without WordPress sticking height and width attributes on it, so we can resize at will. Replace the standard the_post_thumbnail with:

<?php 
	$image_id = get_post_thumbnail_id();  
	$image_url = wp_get_attachment_image_src($image_id,'full');  
	$image_url = $image_url[0];  
?>
<img src="<?php echo $image_url;?>" alt="View <?php the_title();?>" class="wp-post-image">
.single-portfolio .wp-post-image { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; padding: 1.5%; max-width: 60.416667%; }

The details section to the left is then sized with the leftover percentages and prettied up:

.single-portfolio #details { float: right; width: 34.490605%; }
.single-portfolio #details h2 { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; clear: both; margin-top: 0; padding: 20px 0 15px; }
.single-portfolio #details ul { margin: 0 0 20px; padding: 0; }
.single-portfolio #details li { background: url('images/li1.jpg') no-repeat; font-size: .75em; list-style: none; margin-bottom: 3px; padding-left: 15px; }
.single-portfolio #details li:nth-of-type(3n+2) { background: url('images/li2.jpg') no-repeat; }
.single-portfolio #details li:nth-of-type(3n+3) { background: url('images/li3.jpg') no-repeat; }
.single-portfolio #details .highslide img { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; height: auto !important; margin: 0 3% 15px 0; padding: 1.8%; width: auto !important; max-width: 26.470588%; }

Checking in mobile devices, it actually looks pretty good already. We just need to clear and center the info in the heading on the iPhone, make the main image full width of the screen, as well as the details so they’re stacked.

@media only screen and (max-width: 480px) {
	.single-portfolio #heading * { clear: both; text-align: center; width: 100%; }
	.single-portfolio .wp-post-image { max-width: 97%; width: 97%; }
	.single-portfolio #details { margin-top: 30px; width: 100%; }
}

For IE, we’ll just need to provide the regular fallbacks for the multiple backgrounds and RGBa borders. We’ll go ahead and add them to the list of fallbacks we’ve already made:

.no-multiplebgs #heading { background: url('images/divider.png') no-repeat center bottom; }
.no-rgba .items img, .no-rgba .single-portfolio #details .highslide img, .no-rgba .single-portfolio .wp-post-image { background: rgb(229,118,61); border: 1px solid rgb(183,91,43); }

Testimonials

The testimonials template is the easiest of all. All we need is some very simple HTML

<?php get_header(); ?>
 
	<div class="container">
		<section id="heading">
			<h1>Client Testimonials</h1>
			<p>What my clients think of me and my work…<a title="Contact Freelance Web Developer" href="<?php bloginfo('siteurl');?>/contact">Ready to work together?</a></p>
		</section>
 
		<article>
			<?php query_posts('post_type=clients&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
				<p><?php the_content();?></p>
				<p><strong><?php the_title();?></strong></p>
			<?php endwhile; wp_reset_query(); ?>
		</article>	
	</div>
 
<?php get_footer(); ?>

The rest of the CSS is all presentational, just set the article to 100% for the width.

.tax-clients article { background: rgba(238,142,104,.5); border: 1px solid rgba(103,51,24,.5); float: left; margin-bottom: 10px; padding: 1.25%; width: 97.5%; }
.tax-clients article p:nth-of-type(2) { font-weight: bold; padding: 0; }

Then all we need to do is provide a simple IE fallback for the backgrounds and borders.

.no-rgba .tax-clients article { background: rgb(238,142,104); border: 1px solid rgba(103,51,24); }

Blog

The blog section is a bit more complicated, as we have a main content area and a sidebar to deal with.

<?php get_header(); ?>
 
	<div class="container">
		<section id="heading">
			<h1>The Blog</h1>
		</section>
 
		<article id="blog">
			<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
				<section>
					<h2><a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_title();?></a></h2>
					<?php wpe_excerpt('wpe_excerptlength_index', 'wpe_excerptmore'); ?>
					<a class="btn" title="Read <?php the_title();?>" href="<?php the_permalink();?>">Read more…</a>
				</section>
			<?php endwhile; wp_reset_query(); ?>
 
			<?php wp_pagenavi(); ?>
		</article>
 
		<?php get_sidebar(); ?>
 
	</div>
<?php get_footer(); ?>

The main content area is 77.604167% wide and the aside is 21.041667% wide. If you float the aside to the right, you don’t have to worry about calculating the margins between those. The widgets themselves need a padding of 15px, so divided from 201, we get 7.4257426% padding and a width of 85.074627%.

The rest is simple CSS!

.category #heading h1 { margin-bottom: 10px; }
.category #blog { float: left; width: 77.604167%; }
.category #blog section { background: url('images/divider.png') no-repeat center bottom; float: left; width: 100%; }
.category #blog h2 a { background: url('images/blogTitle.jpg') no-repeat left center; color: #222; text-transform: none; padding: 2px 0 0 65px; }
.category #blog h2 a:hover { color: #68a1a0; }
.category #blog .btn { background: #ee8e68; border: 1px solid #e5763d; color: #fff; float: left; font-size: .8125em; margin-bottom: 25px; padding: 6px 30px; }
.category #blog .btn:hover { background: #a5cecd; border-color: #68a1a0; }
 
aside { float: right; width: 21.041667%; }
aside h2 { font-size: 1em; }
aside > ul > li { list-style: none; margin-bottom: 15px; padding: 7.4257426%; width: 85.074627% }
aside ul ul { margin: 0; padding: 0; }
aside input[type=text] { border: 1px solid rgba(183,91,43,.2); font-size: .8125em; font-style: italic; padding: 2%; width: 96%; }
 
.wp-pagenavi { float: left; font-size: .8125em; margin-top: 20px; width: 100%; }
.wp-pagenavi .pages { float: left; font-weight: bold; padding: 5px 15px 0 0; }
.wp-pagenavi a, .wp-pagenavi .current { background: #ee8e68; border-radius: 12px; color: #fff; float: left; font-weight: normal; height: 20px; margin-right: 5px; padding-top: 3px; text-align: center; width: 23px; }
.wp-pagenavi a:hover { color: #222; }
.wp-pagenavi .current { color: #222; font-weight: bold; }
.wp-pagenavi a:nth-of-type(3n+2) { background: #e5763d; }
.wp-pagenavi a:nth-of-type(3n+3) { background: #a5cecd; }

Now it’s time for device check, you know the drill! Again the iPhone is a little squished, so I’m just going to hide the sidebar, since I don’t think anyone will be interested in the sidebar when coming on an iPhone.

@media only screen and (max-width: 480px) {
	#blog { width: 100%; }
	aside { display: none; }
}

Check in IE7 shows we have a few browser bugs. Mainly, the triple circles in the title are being cut off and the read more button is on top of the divider line. The button issue is easily fixed, simply remove the margin from the button and add it as padding to the div with the divider. The h2 a simply needed a display: block and it’s good to go. All the other IEs look great now as well.

Now we’ve come to the end of Part 4, here’s what our total CSS looks like:

/*
Theme Name: Amber Circles
Description: This theme is a combination of Hijinks (www.amberweinberg.com) and HTML5 Boilerplate (http://html5boilerplate.com/)
Author: Amber Weinberg
Author URI: http://www.www.amberweinberg.com.com/
 
*/
 
/*****HTML5 BOILERPLATE MINIFIED*******/
 
article{display:block}aside{display:block}details{display:block}figcaption{display:block}figure{display:block;margin:0}footer{display:block}header{display:block}hgroup{display:block}nav{display:block}section{display:block}audio{display:inline;zoom:1}canvas{display:inline;zoom:1}video{display:inline;zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{font-size:13px;line-height:1.231;font-family:sans-serif;color:#222;margin:0}button{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;line-height:normal;overflow:visible;cursor:pointer;-webkit-appearance:button;margin:0}input{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;line-height:normal;overflow:visible;margin:0}select{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;margin:0}textarea{font-family:sans-serif;color:#222;font-size:100%;overflow:auto;vertical-align:top;resize:vertical;margin:0}::-moz-selection{background:#f8e8c0;color:#222;text-shadow:none}::selection{background:#f8e8c0;color:#222;text-shadow:none}a:focus{outline:thin dotted}a:active{outline:0}abbr[title]{border-bottom:1px dotted}b{font-weight:700}strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:700}pre{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}code{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em}kbd{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em}samp{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em}q{quotes:none}q:before{content:none}q:after{content:none}small{font-size:85%}sub{font-size:75%;line-height:0;position:relative;vertical-align:baseline;bottom:-.25em}sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;top:-.5em}ul{margin:1em 0;padding:0 0 0 40px}ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul{list-style:none;list-style-image:none;margin:0;padding:0}nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;margin-left:-7px;padding:0}table button{overflow:auto}table input{overflow:auto}input[type="button"]{cursor:pointer;-webkit-appearance:button}input[type="reset"]{cursor:pointer;-webkit-appearance:button}input[type="submit"]{cursor:pointer;-webkit-appearance:button}input[type="checkbox"]{box-sizing:border-box}input[type="radio"]{box-sizing:border-box}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner{border:0;padding:0}input::-moz-focus-inner{border:0;padding:0}input:invalid{background-color:#f0dddd}textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}
 
/****BODY STYLES********/
 
body { background: url('images/bkg.jpg') #FFF; color: #222; font: 100% Droid Sans, Arial, sans-serif; }
 
p { font-size: .8125em; line-height: 1.55em; margin: 0; padding-bottom: 15px; }
 
h1, h2 { font-size: 1.125em; text-transform: uppercase; }
h3 {}
 
a { color: #e5763d; font-weight: 700; text-decoration: none; }
a:hover { color: #68a1a0; }
 
.container { clear: both; margin: 0 auto; max-width: 960px; padding: 0 3%; }
 
/****HEADER STYLES*******/
 
header { border-top: 5px solid #222; float: left; margin-bottom: 15px; padding-top: 15px; width: 100%; }
header .container > a, header li { float: left; }
 
/*****NAV STYLES*******/
 
header .container > a:hover { opacity: .8; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; transition: opacity .5s ease; }
header ul { float: right; padding: 5px 0 0; }
header li { list-style: none; padding: 0 10px; }
header li a { color: #222; font-size: .9375em; }
header li.current-menu-item a { font-weight: 700; text-decoration: line-through; }
 
header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { padding: 0; position: relative; top: -5px; }
header li.menu-item-4780 a, header li.menu-item-4782 a, header li.menu-item-4781 a, header li.menu-item-4783 a { background: url('images/iconTW.jpg') no-repeat; float: left; height: 27px; margin-left: 5px; text-indent: -1000000px; width: 28px; }
header li.menu-item-4780 a { margin-left: 20px; }
header li.menu-item-4782 a { background: url('images/iconFB.jpg') no-repeat; }
header li.menu-item-4781 a { background: url('images/iconDR.jpg') no-repeat; }
header li.menu-item-4783 a { background: url('images/iconVC.jpg') no-repeat; }
 
header ul:hover li a { opacity: .3; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; transition: opacity .5s ease; }
header ul:hover li a:hover { color: #222; font-weight: 700; opacity: 1; }
 
.no-rgba header ul:hover li a { color: #dee1be; }
.no-rgba header ul:hover li a:hover { color: #222; font-weight: 700; }
.ie7 header li.menu-item-4780 a { margin-left: 0; }
 
 
/*****FOOTER STYLES*******/
 
footer { background: #222; color: #fff; float: left; margin-top: 50px; padding: 15px 0; width: 100%; }
footer li { float: left; list-style: none; margin-right: 5.9375%;  }
footer #text-14 { width: 26.5625%; }
footer #text-14 a { background: url('images/arrowBlue.jpg') no-repeat right; display: inline-block; padding-right: 20px; }
footer #text-15 { width: 20%; }
footer #text-15 p { color: #ee8e68; font-weight: bold; line-height: 2em; }
footer .widget_twitter_vjck { font-weight: bold !important; width: 22.083333%; }
footer .widget_twitter_vjck ul { font-size: .75em; line-height: 1.55em; margin: 0; padding: 0; }
footer #text-17 { margin-right: 0; width: 13.541667%; }
footer p { font-size: .75em; }
footer a { color: #a5cecd; }
 
#bsap_1255814 .bsa_it_ad { background: none; border: none; padding: 0; }
#bsap_1255814 .bsa_it_ad * { color: #fff; font-size: .4em; font-weight: normal; line-height: 1.3em; text-align: center; }
#bsap_1255814 .bsa_it_ad .bsa_it_t { color: #fbfed6; font-size: 1.5em; font-weight: bold; }
#bsap_1255814 .bsa_it_p{ display: none; }
 
/*****HOME CONTENT STYLES*******/
 
#sliderBkg { background: url('images/sliderBkg.png') no-repeat; background-size: 100%; clear: both; height: 100%; margin: 0 auto; 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; }
 
.home h1 { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; float: left; font-size: 1.549375em; font-weight: normal; line-height: 1.625em; padding: 22px 0; text-align: center; text-transform: none; width: 100%; }
.home h1 span:nth-of-type(1) { color: #68a1a0; }
.home h1 span:nth-of-type(2), .home h1 span:nth-of-type(5) { color: #e5763d; }
.home h1 span:nth-of-type(3), .home h1 span:nth-of-type(6) { color: #ee8e68; }
.home h1 span:nth-of-type(4) { color: #a5cecd; }
.no-multiplebgs .home h1 { background: url('images/divider.png') no-repeat center bottom; margin-bottom: 20px; }
 
.column { float: left; padding-right: 7.908164%; width: 28.061224%; }
.column.end { padding: 0; }
.column ul { color: #a5cecd; font-size: .8125em; line-height: 1.7em; list-style: none; margin: 0; padding: 0; }
.column p { padding: 0; }
.column p + a { background: url('images/arrowLink.png') no-repeat right; clear: both; float: left; font-size: .8125em; padding-right: 20px; }
 
/*****SUB CONTENT STYLES*******/
 
/*Portfolio Landing*/
 
#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%; }
.no-multiplebgs #heading { background: url('images/divider.png') no-repeat center bottom; }
#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 .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; }
.no-rgba .portfolio h2 { background: rgb(165,206,205); }
 
.tax-work .items { float: right; width: 80%; }
.tax-work .items a:nth-of-type(3n+3) { margin-right: 0; }
.tax-work .items img, .single-portfolio #details .highslide img, .single-portfolio .wp-post-image, aside > ul > li { 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; }
.no-rgba .items img, .no-rgba .single-portfolio #details .highslide img, .no-rgba .single-portfolio .wp-post-image, .no-rgba aside > ul > li { background: rgb(229,118,61); border: 1px solid rgb(183,91,43); }
 
/*Portfolio Detail*/
 
.single-portfolio #heading h1 { float: left; }
.single-portfolio #heading p { float: right; font-weight: bold; }
.single-portfolio .wp-post-image { float: left; padding: 1.5%; max-width: 60.416667%; }
 
.single-portfolio #details { float: right; width: 34.490605%; }
.single-portfolio #details h2 { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; clear: both; margin-top: 0; padding: 20px 0 15px; }
.single-portfolio #details ul, aside > ul { margin: 0 0 20px; padding: 0; }
.single-portfolio #details li { background: url('images/li1.jpg') no-repeat left center; font-size: .75em; list-style: none; margin-bottom: 3px; padding-left: 15px; }
.single-portfolio #details li:nth-of-type(3n+2) { background: url('images/li2.jpg') no-repeat left center; }
.single-portfolio #details li:nth-of-type(3n+3) { background: url('images/li3.jpg') no-repeat left center; }
.single-portfolio #details .highslide img { height: auto !important; margin: 0 3% 15px 0; padding: 1.8%; width: auto !important; max-width: 26.470588%; }
 
/*Testimonials*/
 
.tax-clients article { background: rgba(238,142,104,.5); border: 1px solid rgba(103,51,24,.5); float: left; margin-bottom: 10px; padding: 1.25%; width: 97.5%; }
.tax-clients article p:nth-of-type(2) { font-weight: bold; padding: 0; }
.no-rgba .tax-clients article { background: rgb(238,142,104); border: 1px solid rgba(103,51,24); }
 
/*Blog*/
 
.category #heading h1 { margin-bottom: 10px; }
#blog { float: left; width: 77.604167%; }
#blog section { background: url('images/divider.png') no-repeat center bottom; float: left; padding-bottom: 25px; width: 100%; }
#blog h2 a { background: url('images/blogTitle.jpg') no-repeat left center; display: block; color: #222; margin-top: 3px; padding: 3px 0 0 65px; text-transform: none; }
#blog h2 a:hover { color: #68a1a0; }
#blog .btn { background: #ee8e68; border: 1px solid #e5763d; color: #fff; float: left; font-size: .8125em; padding: 6px 30px; }
#blog .btn:hover { background: #a5cecd; border-color: #68a1a0; }
 
aside { float: right; width: 21.041667%; }
aside h2 { font-size: 1em; }
aside > ul > li { list-style: none; margin-bottom: 15px; padding: 7.4257426%; width: 85.074627% }
aside ul ul { margin: 0; padding: 0; }
aside input[type=text] { border: 1px solid rgba(183,91,43,.2); font-size: .8125em; font-style: italic; padding: 2%; width: 96%; }
 
.wp-pagenavi { float: left; font-size: .8125em; margin-top: 20px; width: 100%; }
.wp-pagenavi .pages { float: left; font-weight: bold; padding: 5px 15px 0 0; }
.wp-pagenavi a, .wp-pagenavi .current { background: #ee8e68; border-radius: 12px; color: #fff; float: left; font-weight: normal; height: 20px; margin-right: 5px; padding-top: 3px; text-align: center; width: 23px; }
.wp-pagenavi a:hover { color: #222; }
.wp-pagenavi .current { color: #222; font-weight: bold; }
.wp-pagenavi a:nth-of-type(3n+2) { background: #e5763d; }
.wp-pagenavi a:nth-of-type(3n+3) { background: #a5cecd; }
 
/*****MEDIA QUERIES FOR MOBILE STYLES *******/
 
@media only screen and (max-width: 1024px) {
	#slider { height: 52.999999%; }
}
 
@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: 34.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; }
}
 
@media only screen and (max-width: 480px) {
	#slider { height: 41.5%; }
	.column, footer li { float: none; padding: 0 0 15px; width: 100% !important; }
	.single-portfolio #heading * { clear: both; text-align: center; width: 100%; }
	.single-portfolio .wp-post-image { max-width: 97%; width: 97%; }
	.single-portfolio #details { margin-top: 30px; width: 100%; }
	#blog { width: 100%; }
	aside { display: none; }
}
 
@media only screen and (max-width: 400px) {
	header { margin-bottom: 0; }
	header li { padding-bottom: 10px; }
	header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { display: none; }
}
 
/******PRINT STYLES*********/
 
@media print{
	*{background:transparent!important;color:#000!important;text-shadow:none!important;filter:none!important;-ms-filter:none!important}a{text-decoration:underline}a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after{content:""}a[href^="javascript:"]:after{content:""}a[href^="#"]:after{content:""}pre{border:1px solid #999;page-break-inside:avoid}blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr{page-break-inside:avoid}img{page-break-inside:avoid;max-width:100%!important}@page{margin:.5cm}p{orphans:3;widows:3}h2{orphans:3;widows:3;page-break-after:avoid}h3{orphans:3;widows:3;page-break-after:avoid}
}

Responsive design is no easy task! This site has taken me a whole lot longer to code than anything else I’ve ever worked on!

Next week

Cross your fingers, we’ll be finishing up the site, and I’ll offer an eBook of everything!

]]> http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-4/feed/ 6 Step-By-Step: Turning A Design Responsive in WordPress, Part 3http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-3/ http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-3/#comments Wed, 12 Oct 2011 16:37:12 +0000 Amber Weinberg http://www.amberweinberg.com/?p=4844 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!

]]> http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-3/feed/ 2 Step-By-Step: Turning A Design Responsive in WordPress, Part 2http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-2/ http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-2/#comments Wed, 05 Oct 2011 16:06:43 +0000 Amber Weinberg http://www.amberweinberg.com/?p=4775 Last week we started work on my new design and finished up the header. This week we’ll focus on the homepage.

Other Posts In This Series

The Crazy Slider Background

While I originally thought about coding this completely in CSS3 so it can resize with our browser, I realized that it would require too many ugly spans and non-semantic elements, so instead I’ll be using it as a PNG and using CSS3′s background resize to get it to “go with the flow”.

Let’s create a div and place it at the top of index.php, since it only needs to show on the homepage. Your index.php should look like:

<?php get_header(); ?>
 
	<?php query_posts('pagename=home'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
		<div id="sliderBkg"></div>
	<?php endwhile; ?>
 
<?php get_footer(); ?>

Now for the fun part, the CSS! Let’s give sliderBkg our standard background element. Here’s the tricky part. We want this background to resize when we resize the browser below the standard 960px width. So, we’ll give it max & min width and height to the full size of the background image, and set the standard height and width to 100%. We’ll also need to tell it to resize with background-size and center the whole div.

#sliderBkg { background: url('images/sliderBkg.png') no-repeat; background-size: 100%;  clear: both; height: 100%; margin: 100px auto 0; max-height: 328px; max-width: 1096px; width: 100%; }

As you can see…it works!

For IE, we’ll need to give it a set height and width to make the slider show up at all.

.no-backgroundsize #sliderBkg { height: 328px; width: 1096px; }

I want this section to be an actual slider showing the newest five portfolio items. I’m simply using custom post types and post thumbnails here.

<div id="sliderBkg">
		<div id="slider">
			<?php query_posts('post_type=portfolio&posts_per_page=5'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
				<a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_post_thumbnail();?></a>
			<?php endwhile; wp_reset_query(); ?>
		</div>
	</div>
	</div>

My jQuery plugin of choice is the simple jQuery cycle plugin, I don’t use an actual WordPress plugin for this. I hide the overflow with simple CSS, and position it within our nice background. Make sure you DON’T specify a set height and width…use percentages so it will scale down, and max width/heights so it won’t overscale up!

One issue I’ve come across this point is the issue of scaling heights. So far I haven’t found a way to scale the height correctly when using percentages…for example, if you scale down the new design, the background of the slider doesn’t match up with the images in the slider at all points. The only thing I’ve been able to do is to try to catch it at correct points with media queries and manually resize it at important size points, like for the iPhone and iPad. If anyone knows a fix for this, I’d be happy to hear.

@media only screen and (max-width: 1024px) {
		#slider { height: 26.999999%; }
}
 
@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%; }
}
 
@media only screen and (max-width: 480px) {
		#slider { height: 41.5%; }
}
 
@media only screen and (max-width: 320px) {
	header { margin-bottom: 0; }
	header li { padding-bottom: 10px; }
	header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { display: none; }
 
	#sliderBkg { background: rgba(238,142,104,.5); border: 1px solid #e5763d; height: 100px; padding: 3%; width: 91%; }
	#slider { height: 100%; margin: 0; width: 100%; }
}

These specifically target the iPhone and iPad in both landscape and portrait modes. I also made some adjustments to the menu in iPhone portrait mode, removing the social media icons, as I felt they got in the way of the main target. I swear, this is the longest I have EVER spent on coding such a simple header and slider!

Looking at the slider in iPhone portrait mode, it’s obvious it’s not working at that size…all that work for nothing! I decided to remove the lovely circle background, and instead at the border that will be around the images in the sub pages, as well as increasing the height, so you can see a little more.

@media only screen and (max-width: 320px) {
	header { margin-bottom: 0; }
	header li { padding-bottom: 10px; }
	header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { display: none; }
 
	#sliderBkg { background: rgba(238,142,104,.5); border: 1px solid #e5763d; height: 100px; padding: 3%; width: 91%; }
	#slider { height: 100%; margin: 0; width: 100%; }
}

Homepage Content

We now have our homepage tagline area, which I’ll use for the homepage’s h1, since it’s full of keywords and nice and descriptive.

<div class="container">
			<h1><?php echo get_post_meta(4748, 'Tagline', true);?></h1>
	</div>

We’ll simply use multiple backgrounds for the lines, and set them to center, so they can easily expand and contract.

.home h1 { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; font-size: 1.549375em; font-weight: normal; line-height: 1.625em; padding: 22px 0; text-align: center; width: 100%; }
.home h1 span:nth-of-type(1) { color: #68a1a0; }
.home h1 span:nth-of-type(2), .home h1 span:nth-of-type(5) { color: #e5763d; }
.home h1 span:nth-of-type(3), .home h1 span:nth-of-type(6) { color: #ee8e68; }
.home h1 span:nth-of-type(4) { color: #a5cecd; }

Checking it in Internet Explorer 9 looks great, but anything below doesn’t support multiple backgrounds, so we’ll need a fallback. I’ll just use the divider on the bottom to separate it from the text blurbs beneath.

.no-multiplebgs .home h1 { background: url('images/divider.png') no-repeat center bottom; }

Underneath our tagline, we’ve got three pieces of content that we’ll be pulling from our Home page inside of WordPress, plus a blog roll of our newest posts:

<section>
			<div class="callout"><?php echo get_post_meta(4748, 'Callout 1', true);?></div>
			<div class="callout"><?php echo get_post_meta(4748, 'Callout 2', true);?></div>
 
			<div class="callout end">	
				<h2>From The Blog</h2>
				<ul>
					<?php query_posts('category_name=blog&posts_per_page=5'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
						<li><a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_title();?></a></li>
					<?php endwhile; wp_reset_query(); ?>	
				</ul>
			</div>
		</section>

Each callout is a bit smaller than a third of the container, allowing for some padding. We’re finally getting into more of the math part of responsive design, and Lord knows I hate math! Basically, to get our percentage rates, we divide the size of our element by it’s container. Each callout is 275px and the container is 980px. So you’d get:

275 / 980 = 0.28061224

Move that over two points and you have 28.061224% and yes – it’s advisable to keep the entire string of numbers for the most accurate size. Multipled by three columns, that gives us 84.183672%, which means we have 15.816328% left for padding (yes this really does suck). Divided by two, we can give the first two callouts a right padding of 7.908164%. Here it is all together:

.column { float: left; padding-right: 7.908164%; width: 28.061224%; }
.column.end { padding: 0; }

Surprised the math was correct the first time? Yea me too. Now it’s time for some styling on those columns.

The three columns look great until you get down to the iPhone in landscape mode and below, so we’ll need to fix that.

@media only screen and (max-width: 480px) {
		#slider { height: 41.5%; }
 
		.column { padding: 0 0 15px; width: 100%; }
}

The columns work great every where else, including Internet Explorer!

Where We’re At

We’ve covered a lot of ground already. In case you’re lost, here’s my CSS so far:

/*
Theme Name: Amber Circles
Description: This theme is a combination of Hijinks (www.amberweinberg.com) and HTML5 Boilerplate (http://html5boilerplate.com/)
Author: Amber Weinberg
Author URI: http://www.www.amberweinberg.com.com/
 
*/
 
/*****HTML5 BOILERPLATE MINIFIED*******/
 
article{display:block}aside{display:block}details{display:block}figcaption{display:block}figure{display:block;margin:0}footer{display:block}header{display:block}hgroup{display:block}nav{display:block}section{display:block}audio{display:inline;zoom:1}canvas{display:inline;zoom:1}video{display:inline;zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{font-size:13px;line-height:1.231;font-family:sans-serif;color:#222;margin:0}button{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;line-height:normal;overflow:visible;cursor:pointer;-webkit-appearance:button;margin:0}input{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;line-height:normal;overflow:visible;margin:0}select{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;margin:0}textarea{font-family:sans-serif;color:#222;font-size:100%;overflow:auto;vertical-align:top;resize:vertical;margin:0}::-moz-selection{background:#f8e8c0;color:#222;text-shadow:none}::selection{background:#f8e8c0;color:#222;text-shadow:none}a:focus{outline:thin dotted}a:active{outline:0}abbr[title]{border-bottom:1px dotted}b{font-weight:700}strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:700}pre{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}code{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em}kbd{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em}samp{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em}q{quotes:none}q:before{content:none}q:after{content:none}small{font-size:85%}sub{font-size:75%;line-height:0;position:relative;vertical-align:baseline;bottom:-.25em}sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;top:-.5em}ul{margin:1em 0;padding:0 0 0 40px}ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul{list-style:none;list-style-image:none;margin:0;padding:0}nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;margin-left:-7px;padding:0}table button{overflow:auto}table input{overflow:auto}input[type="button"]{cursor:pointer;-webkit-appearance:button}input[type="reset"]{cursor:pointer;-webkit-appearance:button}input[type="submit"]{cursor:pointer;-webkit-appearance:button}input[type="checkbox"]{box-sizing:border-box}input[type="radio"]{box-sizing:border-box}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner{border:0;padding:0}input::-moz-focus-inner{border:0;padding:0}input:invalid{background-color:#f0dddd}textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}
 
/****BODY STYLES********/
 
body { background: url('images/bkg.jpg') #FFF; color: #222; font: 100% Droid Sans, Arial, sans-serif; }
 
p { font-size: .8125em; line-height: 1.55em; margin: 0; padding-bottom: 15px; }
 
h1, h2 { font-size: 1.125em; text-transform: uppercase; }
h3 {}
 
a { color: #e5763d; font-weight: 700; text-decoration: none; }
a:hover { color: #68a1a0; }
 
.container { margin: 0 auto; max-width: 960px; padding: 0 3%; }
 
/****HEADER STYLES*******/
 
header { border-top: 5px solid #222; float: left; margin-bottom: 15px; padding-top: 15px; width: 100%; }
header .container > a, header li { float: left; }
header .container > a:hover { opacity: .8; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; transition: opacity .5s ease; }
header ul { float: right; padding: 5px 0 0; }
header li { list-style: none; padding: 0 10px; }
header li a { color: #222; font-size: .9375em; }
header li.current-menu-item a { font-weight: 700; text-decoration: line-through; }
 
header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { padding: 0; position: relative; top: -5px; }
header li.menu-item-4780 a, header li.menu-item-4782 a, header li.menu-item-4781 a, header li.menu-item-4783 a { background: url('images/iconTW.jpg') no-repeat; float: left; height: 27px; margin-left: 5px; text-indent: -1000000px; width: 28px; }
header li.menu-item-4780 a { margin-left: 20px; }
header li.menu-item-4782 a { background: url('images/iconFB.jpg') no-repeat; }
header li.menu-item-4781 a { background: url('images/iconDR.jpg') no-repeat; }
header li.menu-item-4783 a { background: url('images/iconVC.jpg') no-repeat; }
 
header ul:hover li a { opacity: .3; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; transition: opacity .5s ease; }
header ul:hover li a:hover { color: #222; font-weight: 700; opacity: 1; }
 
.no-rgba header ul:hover li a { color: #dee1be; }
.no-rgba header ul:hover li a:hover { color: #222; font-weight: 700; }
 
/*****NAV STYLES*******/
 
 
/*****FOOTER STYLES*******/
 
 
/*****HOME CONTENT STYLES*******/
 
#sliderBkg { background: url('images/sliderBkg.png') no-repeat; background-size: 100%; clear: both; height: 100%; margin: 0 auto 0; max-height: 328px; max-width: 1096px; width: 100%; }
#slider { float: left; height: 60.670732%; margin: 6% 0 0 6.1%; max-height: 199px; max-width: 960px; overflow: hidden; width: 87.591241%; }
#slider img { max-width: 100%; width: 100%; }
.no-backgroundsize #sliderBkg, .no-textshadow #sliderBkg { height: 328px; width: 1096px; }
 
.home h1 { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; float: left; font-size: 1.549375em; font-weight: normal; line-height: 1.625em; padding: 22px 0; text-align: center; text-transform: none; width: 100%; }
.home h1 span:nth-of-type(1) { color: #68a1a0; }
.home h1 span:nth-of-type(2), .home h1 span:nth-of-type(5) { color: #e5763d; }
.home h1 span:nth-of-type(3), .home h1 span:nth-of-type(6) { color: #ee8e68; }
.home h1 span:nth-of-type(4) { color: #a5cecd; }
.no-multiplebgs .home h1 { background: url('images/divider.png') no-repeat center bottom; }
 
.column { float: left; padding-right: 7.908164%; width: 28.061224%; }
.column.end { padding: 0; }
.column ul { color: #a5cecd; font-size: .8125em; line-height: 1.7em; list-style: none; margin: 0; padding: 0; }
.column p { padding: 0; }
.column p + a { clear: both; float: left; font-size: .8125em; padding-right: 20px; }
.column p + a span { background: url('images/arrowLink.png') no-repeat right; float: right; height: 15px; padding-right: 25px;  }
 
/*****SUB CONTENT STYLES*******/
 
.alignleft { float: left; margin-right: 15px; }
.alignright { float: right; margin-left: 15px; }
 
/*Blog*/
 
.single #comments { float: left; margin-top: 30px; width: 100%; }
.single .commentlist { float: left; position: relative; width: 100%; }
.single .commentlist > li { padding: 10px; }
.single .comment-author img { float: left; margin-right: 5px; }
.single .commentmetadata { position: absolute; right: 10px; top: 10px; }
 
#respond { float: left; margin-top: 30px; }
 
/*****MEDIA QUERIES FOR MOBILE STYLES *******/
 
@media only screen and (max-width: 1024px) {
		#slider { height: 26.999999%; }
}
 
@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%; }
}
 
@media only screen and (max-width: 480px) {
		#slider { height: 41.5%; }
 
		.column { padding: 0 0 15px; width: 100%; }
}
 
@media only screen and (max-width: 320px) {
	header { margin-bottom: 0; }
	header li { padding-bottom: 10px; }
	header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { display: none; }
 
	#sliderBkg { background: rgba(238,142,104,.5); border: 1px solid #e5763d; height: 100px; padding: 3%; width: 91%; }
	#slider { height: 100%; margin: 0; width: 100%; }
}
 
/******PRINT STYLES*********/
 
@media print{
	*{background:transparent!important;color:#000!important;text-shadow:none!important;filter:none!important;-ms-filter:none!important}a{text-decoration:underline}a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after{content:""}a[href^="javascript:"]:after{content:""}a[href^="#"]:after{content:""}pre{border:1px solid #999;page-break-inside:avoid}blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr{page-break-inside:avoid}img{page-break-inside:avoid;max-width:100%!important}@page{margin:.5cm}p{orphans:3;widows:3}h2{orphans:3;widows:3;page-break-after:avoid}h3{orphans:3;widows:3;page-break-after:avoid}
}

Here’s my header.php file:

 
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7" manifest="default.appcache?v=1"><![endif]-->
<!--[if lt IE 7 ]><html class="no-js ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="no-js ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="no-js ie8" lang="en"><![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" manifest="default.appcache?v=1" lang="en"><!--<![endif]-->
	<head>
		<meta charset="UTF-8"/>
 
		<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
 
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"/>
		<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
		<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
 
		<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
		<?php wp_head(); ?>
 
		 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
 
  		<script src="<?php bloginfo('template_url');?>/js/libs/modernizr-2.0.6.min.js"></script>
	</head>
 
	<body <?php body_class(); ?>>
 
		<header>
			<div class="container">
				<a title="Amber Weinberg: Freelance Web Developer specializing in WordPress, Mobile, CSS and HTML5 Development" href="<?php bloginfo('siteurl');?>"><img src="<?php bloginfo('template_url');?>/images/logo.png" alt="Amber Weinberg: Freelance Web Developer specializing in semantic WordPress, Mobile, CSS and HTML5 Development"/></a>
				<?php wp_nav_menu( array('menu' => 'Main', 'container' => false, )); ?>
			</div>
		</header>

And my index.php file:

<?php get_header(); ?>
 
	<div id="sliderBkg">
		<div id="slider">
			<?php query_posts('post_type=portfolio&posts_per_page=1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
				<?php 
					$image_id = get_post_thumbnail_id();  
					$image_url = wp_get_attachment_image_src($image_id,'full');  
					$image_url = $image_url[0];  
				?>
				<a title="<?php the_title();?>" href="<?php the_permalink();?>"><img src="<?php echo $image_url;?>" alt="View <?php the_title();?>" width="100%"></a>
			<?php endwhile; wp_reset_query(); ?>
		</div>
	</div>
 
	<div class="container">
		<h1><?php echo get_post_meta(4748, 'Tagline', true);?></h1>
 
		<section>
			<div class="column"><?php echo get_post_meta(4748, 'Callout 1', true);?></div>
			<div class="column"><?php echo get_post_meta(4748, 'Callout 2', true);?></div>
 
			<div class="column end">	
				<h2>From The Blog</h2>
				<ul>
					<?php query_posts('category_name=blog&posts_per_page=5'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
						<li><a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php $title = the_title('','',FALSE); echo substr($title, 0, 28);?>…</a> <?php the_time('m/d/y');?></li>
					<?php endwhile; wp_reset_query(); ?>	
				</ul>
			</div>
		</section>
	</div>
 
<?php get_footer(); ?>

I decided to remove the jQuery slider, as the animation was distracting and had issues resizing with the browser. Still with me so far?

What’s Next

We’ll next venture on to the footer and the sub pages, stay tuned!

]]> http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-2/feed/ 3 Step-By-Step: Turning A Design Responsive in WordPress, Part 1http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-1/ http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-1/#comments Wed, 28 Sep 2011 13:21:52 +0000 Amber Weinberg http://www.amberweinberg.com/?p=4710 I’ve been dying to try out a real responsive design for awhile now on my site, but didn’t feel like recoding the whole thing. Thankfully, I was able to beg bribe get the fantastic Paul Maloney to redesign my site for me, which gives me the perfect excuse to try out all the new bells and whistles. And what better way to learn than to write about it as I go along?

This is going to mostly likely be a long series, much longer than my How To Build a WordPress CMS Theme series, so please bear with me. And like that series, I’ll also be packaging this one into a downloadable eBook for you guys. :) I’m also contemplating packaging this current theme up to sell licenses for a few dollars. Let me know if you’d be interested in that.

This series also assumes you already have a good working knowledge of WordPress, CSS, HTML and basic PHP. I want to focus mainly on how I put the elements together to make them responsive.

Let’s move on.

Other Posts In This Series

Goals For This New Design

  • Fully responsive, from larger monitors to iPhone size devices.
  • Try out the HTML5 Boilerplate with Modernizr.
  • Completely done in HTML5, including new tags.
  • As always, increasing semantics and cleanliness of code.
  • Finally moving my portfolio section to it’s own custom post type.
  • Use of CSS3 animations and easter eggs
  • Use the least amount of images as possible.
  • Accessible in IE7+ and all modern browsers.

The Mockups

Here’s what we’ll be coding:

Getting Ready

Because I’ve already got this current site up and none of the content will be changing, I’m not going to start from a fresh install of WordPress. Instead, I’m going to make use of the Theme Switch and Preview plugin, which allows me to develop the new site live, without anyone but myself seeing it, allowing me to use all my plugins and content.

I won’t be giving access to the PSDs (sorry guys!) but you can easily follow along, and yes, there are ways of making a clone of this new site. I just ask you use it for learning/testing purposes only, as this is my business design. I just thought the best way to learn is to use a real site that any of us could have.

Download and copy my Super Hijinksified starter theme to your WordPress theme folder and give it a fancy name. It’s got the HTML5 Boilerplate already integrated in it. I’m calling my new theme Amber’s Circles, so the folder is ambers-circles.

I normally code in a very specific way, I write down all of the sizes and grab the images from the PSD, I code all of the HTML, and then I code all of the CSS. This time, I’m wanting to pay closer attention to everything especially since this is my first full responsive design, so I’ll be jumping back and forth between the three stages.

Let’s Code

I like to work in a top down approach, so let’s start out with the basics. First, you’ll need to fill out the top of style.css with your own information. This will show up in the themes section of WordPress. Make sure you also create your theme screenshot.png file and place it in the top directory in your theme.

Now get the background sliced up. Simple enough and nothing special. The max size of the site is 960px wide, not including the background frame and circles of the slider on the homepage, so let’s add a container with max-width and center the site:

.container { background: url('images/bkg.jpg') #FFF; margin: 0 auto; max-width: 960px; }

This will go inside of our header, footer and content elements, since they need to stretch the entire width of the browser. I also want to make sure that the site isn’t going to butt up against the edges on smaller devices, so let’s add a bit of padding:

.container { margin: 0 auto; max-width: 960px; padding: 0 3%; }

Switch back to the browser and check out what you’ve done (you might want to but a temp background on the header so you can see it). Responsive already and we’re just getting started!

On my new site, we’ll be using variations of Droid Sans, so let’s go ahead and drop in the link to that from Google

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>

Set the font to 100% since we’ll be using ems. 100% is roughly equal to 16px.

body { background: url('images/bkg.jpg') #FFF; font: 100% Droid Sans, Arial, sans-serif; }

Let’s go ahead and set our padding for paragraph elements as well.

p { padding-bottom: 15px; }

The Header

Your header.php page show look like:

<!--[if IEMobile 7 ]><html class="no-js iem7" manifest="default.appcache?v=1"><![endif]-->
<!--[if lt IE 7 ]><html class="no-js ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="no-js ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="no-js ie8" lang="en"><![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" manifest="default.appcache?v=1" lang="en"><!--<![endif]-->
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
 
		<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
 
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"/>
		<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
		<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
 
		<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
		<?php wp_head(); ?>
 
		 <meta name="viewport" content="width=device-width,initial-scale=1">
 
  		<script src="<?php bloginfo('template_url');?>/js/libs/modernizr-2.0.6.min.js"></script>
	</head>
 
	<body <?php body_class(); ?>>
 
		<header>
			<div class="container"></div>
		</header>

The header is always first – and this time it’s not going to be a boring one! Paul came up with the awesome navigation, where the elements that aren’t rollod over will fade out when one is, and the active page will be struck through. This is also where we’ll be able to start using CSS3 animations.

Let’s add the logo. We won’t need a class because we can use the cascade selector in CSS instead. Don’t forget your standard bloginfo elements on the URLs:

<header>
<div class="container"><a title="Amber Weinberg: Freelance Web Developer specializing in WordPress, Mobile, CSS and HTML5 Development" href="<?php bloginfo('siteurl');?>"><img src="<?php bloginfo('template_url');?>/images/logo.png" alt="Amber Weinberg: Freelance Web Developer specializing in semantic WordPress, Mobile, CSS and HTML5 Development" /> </a><?php wp_nav_menu( array('menu' => 'Main', 'container' => false, )); ?></div>
</header>

In the CSS, we’ll need to add a top border of 5px to the header element, as well as float and make sure it stretches 100%;

header { border-top: 5px solid #222; float: left; padding-top: 20px; width: 100%; }

Go ahead and float the logo left. Create your menu in WordPress under Appearance > Menus and name it “Main”. If you’re using custom post types and taxonomies like I am, now would be the time to create them in your functions.php file. I went ahead and created three for my portfolio, extras and testimonials sections. Add some basic styling to the header elements:

header { border-top: 5px solid #222; float: left; padding-top: 20px; width: 100%; }
header { border-top: 5px solid #222; float: left; padding-top: 20px; width: 100%; }
header .container &gt; a, header li { float: left; }
header ul { float: right; padding-top: 5px; }
header li { list-style: none; padding: 0 10px; }
header li a { color: #222; font-size: .9375em; font-weight: 700; }

Now we can get to the fun stuff, CSS animations!

For the logo, I want it to slowly fade out when it’s hovered over:

header .container &gt; a:hover { opacity: .8; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; transition: opacity .5s ease; }

For the nav rollovers, I want the rolled-over item to stay exactly the same, but the other items to fade out.

header ul:hover li a { opacity: .3; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; transition: opacity .5s ease; }
header ul:hover li a:hover { color: #222; opacity: 1; }

Is that not cool or WHAT?

Of course, we’ll need a fallback for IE8 and below:

.no-rgba header ul:hover li a { color: #dee1be; }
.no-rgba header ul:hover li a:hover { color: #222; }

Now to go ahead and add the social media icons as well. Nothing too special here.

header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { padding: 0; position: relative; top: -5px; }
header li.menu-item-4780 a, header li.menu-item-4782 a, header li.menu-item-4781 a, header li.menu-item-4783 a { background: url('images/iconTW.jpg') no-repeat; float: left; height: 27px; margin-left: 5px; text-indent: -1000000px; width: 28px; }
header li.menu-item-4780 a { margin-left: 20px; }
header li.menu-item-4782 a { background: url('images/iconFB.jpg') no-repeat; }
header li.menu-item-4781 a { background: url('images/iconDR.jpg') no-repeat; }
header li.menu-item-4783 a { background: url('images/iconVC.jpg') no-repeat; }

Now, we need to keep sizes and devices in mind, and when switching over to a screen smaller than 780, the header, while working, wasn’t exactly pretty. So I decided that having the logo center itself, with the navigation centered beneath it, would work better. When it gets down to mobile, the nav goes to two lines.

@media only screen and (max-width: 768px) {
 
	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; }
}

Next week

We’ll be moving on to the content inside the homepage….see you then!

]]> http://www.amberweinberg.com/step-by-step-turning-a-design-responsive-in-wordpress-part-1/feed/ 17