AmberWeinberg.com » wordpress 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 12412 – Experience and Learn 12 New Web Technologies in 12 Monthshttp://www.amberweinberg.com/12412-experience-and-learn-12-new-web-technologies-in-12-months/ http://www.amberweinberg.com/12412-experience-and-learn-12-new-web-technologies-in-12-months/#comments Wed, 04 Jan 2012 14:04:25 +0000 Amber Weinberg http://www.amberweinberg.com/?p=5208

I stumbled across 12412.org when looking at Paul Davis’s work. Consisting of three developers including Paul, Anthony Killeen, and Stephen Fulljames, 12412 aims to log their activities throughout 2012 as they choose a new technology or technique every month to learn and play with.

I thought this was a fantastic idea. I’ve had an insanely busy 2011 and haven’t spent much time learning new things like I should. What better way than to make a goal to learn something new every month? I thought I’d take their idea and list out a few items of my own that I want to do some research on and learn.

January

January’s going to be a short and busy month for me, due to moving across the seas to London. So I thought I’d start the year off a bit easy by doing some research on SASS. I’m very skeptical on this technique, but promised to at least read about it.

February

Inspired by Jeff Croft’s tumblog, I want to make my own to house all of my social media updates. I plan to incorporate Twitter, Instagram, Ravelry, Pinterest, Goodreads, Dribbble, Foursuare and Codesnippit. Building this will force me to learn how to work with APIs, while extending my knowledge of PHP in tying them together.

March

I plan on finishing my Objective-C book that I’ve been working on for so long. After that, I need to make a decision whether to give iPhone development some serious commitment, or move on.

April

Build a premium WordPress theme with admin panels. I haven’t had a chance to build any custom admin panels before, so this will be another great learning experience.

May

Again I want to further my knowledge of PHP and create some kind of user submission gallery site. I’m thinking along the lines of responsive and CSS3 submissions.

2012

That’s all I’m planning for now. Who knows what the next few months will bring in our world. What do you think about 12412?

]]> http://www.amberweinberg.com/12412-experience-and-learn-12-new-web-technologies-in-12-months/feed/ 6 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 Barcamp Nashville 2011 Recaphttp://www.amberweinberg.com/barcamp-nashville-2011-recap/ http://www.amberweinberg.com/barcamp-nashville-2011-recap/#comments Tue, 18 Oct 2011 14:14:35 +0000 Amber Weinberg http://www.amberweinberg.com/?p=5038 Just got back from Barcamp Nashville and it was fantastic this year! There were a lot less people this year, probably owing to the fact it was more development based, but I loved it for that all the more. The sessions were great and for the first time in years, I actually had to choose between the ones I wanted to see, as several of them were scheduled at the same time. Also, this was the first time I’ve ever spoken at a conference or in front of a lot of people about my craft! Unfortunately, this Barcamp was a little bittersweet as well, as it’ll be my last Barcamp Nashville for awhile, since we’re moving to London in a few months.

There was a lot less sponsor goodies this year, but they were holding some great sponsor activities, including two photo contests. I kissed a gnome in one and threw a canoe with Mitch Canter of Studionashvegas in another.

Some Good Times

I loved hanging out with Courtenay Rogers, who’s I’ve worked with before while she was at Primarily Rye, and has now brought me on the redesign of her new employer’s site, Bone McAllistor Norton. She did a beautiful job of organizing the event.

I also got to meet a Seth Green look-a-like and the guys from Industry Collective, which are a group of fantastic web professionals, who always make the coolest swag and come up with all of the fun Barcamp giveaways. This is where I ended up kissing the gnome. Cross your fingers and wish me well in winning an iPad2…I wants it!

It was nice catching up with some other local freelancers I know well, Brad Blackman and Mitch Canter. It’s crazy how I’m literally 20-30 minutes away from these guys and we never talk!

Build a Native iPhone App in 30 Minutes or Less by Dick Pepper

I got in late to this one, but Dick was just telling us about using hybrid apps, which are apps that are build using HTML/CSS and placed into the Objective C framework, so that you can still have an app in the app store.

If you go this route, he suggested using UI frameworks, like Sencha or Webkit, to get the look and feel of an actual app.

Some frameworks tie into Objective C and are ideal for presentation focused apps. Content rich apps work better in HTML5. The cool thing about doing a hybrid app, is that you only have to support one browser and you can use all of webkit’s features, which makes the code a lot shorter.

UX Leadership: See, Speak Share by Laurie Kalmanson

Laurie spoke of everyday objects that had great UX: like the recent trend for car manufacturers to attach the gas cap to the car so drivers don’t forget it; or when a microwave beeps to alert you to finish food and then stays quiet. She noted that when machines got out of the way and did it politely, that was what a good user experience was. Good UX should be delightful and solve problems. It should also give people things they’ve never seen or imagined before.

Interfaces have beats like songs and in mobile, there are so many ways you can delight and surprise your users. Laurie pointed out some popular apps that have bad UX design, for example, Twitter’s header, Facebook’s privacy settings page and Google’s Gmail header.

The difference between IA and UX, are that IA’s (information architects) create outline focused designs, whereas those focusing on UX (user experience) include the visual design.

Let’s Talk About WordPress by Mitch Canter

A good introduction to WordPress, Mitch talked about reducing WordPress download times. He mentioned that the small additional server load that accompanies permalinks without the numerical date in the URL will be fixed in WordPress 3.3 (yay!). A use of a CDN (content delivery network), while ranging around $40 a month, dramatically reduces load time.

You should also use a caching plugin, which is a static screenshot of the site. He recommended W3 Total Cache. I stopped using WP Super Cache after I redid the portfolio and went ahead and tried out W3 Total Cache with his recommendation. It works right out of the box, which I like.

In WordPress, if you change the title you don’t have to change the URL. If you do however, you should use the plugin Redirection to set up htaccess redirects and avoid 404 errors.

Someone asked if the date in the URL was important to SEO, and Mitch replied it wasn’t that important.

Another user asked if there was an issue with having too many plugins – Mitch said a famously fast site had over 40 plugins installed. It’s not how many plugins you have, but how bloated the code in those plugins are. It’s the external calls to things like APIs that slow a site down.

Best Practices: The Worst Case Scenario by Josh Oakes

Josh Oakes did a fantastic talk on best practices. He stated that best practices aren’t what everyone else is doing, a consensus reality or what you call your opinion to end an argument. Instead, best practices is a standard way of doing things that can be used by people in different situations.

However, best practices have three problems:

  1. Specificity – What happens if you can’t adopt these practices? Best practices can not account for the unique knowledge required for or details of a problem.
  2. Baggage – Best practices bring baggage, for example, if it’s your punch list, you might state your goal, go through your list in a straight line and then bring in the assumptions and constraints that your best practice was designed for.
  3. Process – Doesn’t inclue anywhere to see if it actually worked. Best practices don’t help you to improve. It makes you really good at seeing problems that aren’t there and tricks you into thinking your work is good enough and needs no improvement.

To keep best practices from ruining a project, consider them, don’t just implement them at the start of a project.

Innovation is a byproduct: Why you don’t have to be innovative to be a great programmer by Jacques Woodcock

A fantastic rambling of a sem-drunk Jacques (hey it was the end of the day!), Jacques spoke about what innovation was and who had it. He said innovation could be a new idea, method or device or the creation of something better accepted by markets. Innovative companies include Apple, Tesla, Google, Disney, Nike and Whole Foods.

He also discussed a few flots: WebTV, AOL, Blockbusters, New Coke, HP Touchpad and the Zune (my contribution!).

What separates innovation from flops is the creation of a better process that solves the problem and has a great user experience. Apple doesn’t invent products, but instead creates a better product.

The US is no longer a product based economy, but is an IP, copyright and patents country. You used to have to invent something to get a patent, instead now you can just detail it on paper and be the first to file. This, unfortunately, covers software and forces smaller companies to compete in a race against larger ones.

Back to Apple! Jacques mentioned that both Android and the iPhone were innovative, they just solved different problems. Apple focuses on UX problems and providing rich features, while Android wanted to provide solutions, features and a quality competitive item.

In order to have an innovative solution, you need to understand the business goals of a company.

glass.Max() = The Rise of the Female Developer/Leader

Moderated by Kenneth White, this was the first talk I’ve ever participated in! It was basically a panel of me and three other great ladies and we talked about getting into the tech field and the issues with being a female in a male dominated sector. I’m still looking for audio or video of our talk, so if you know someone who recorded it, please let me know!

Did you enjoy Barcamp?

Feel free to share your thoughts and photos!

Images by Dave Delaney and Wonderdawg777

]]> http://www.amberweinberg.com/barcamp-nashville-2011-recap/feed/ 10 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