AmberWeinberg.com » HTML http://www.amberweinberg.com Design, Development and Freelance Articles and Tutorials Fri, 03 Feb 2012 15:14:56 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Review of CSS For Print Designers by JD Graffamhttp://www.amberweinberg.com/review-of-css-for-print-designers-by-jd-graffam/ http://www.amberweinberg.com/review-of-css-for-print-designers-by-jd-graffam/#comments Mon, 12 Dec 2011 16:11:01 +0000 Amber Weinberg http://www.amberweinberg.com/?p=5168 I met JD Graffam a few years back at Barcamp Memphis, though I doubt he remembers me. So I was fairly surprised to see his name when I picked up a copy of CSS for Print Designers. His book, targeted obviously to code newbies with a background of print design, was something I wouldn’t normally read, but since I never pass up a book to read, I thought I’d give it a chance.

CSS for Print Designers was a quick read, at only 167 pages long in full color and large type. It sticks to the fairly basics, assuming you’ve absolutely never seen CSS and HTML before. I like the fact that it touches on the basics of HTML and semantics before jumping over to CSS. I think a lot of non-coders, especially print-turned-web designers, are lacking in proper HTML skills, and this gives you a good foundation to start on.

While the book certainly won’t make you an expert by far, it gets you started and is a good primer to learning how to read the code. I think it’s a great read before you pick up a more comprehensive coding book, as it will help to assage the anxiety one gets while staring at a bunch of gooble-de-gook (which I think aptly describes our code, don’t you?).

While the book does have many pluses, it also came up short for me in a lot of ways. The fact that it is so short and broad is also a negative. JD mentions a lot of ideas and pieces of code in the book, but then tells you to just “google it” instead of explaining. I think he should’ve either briefly explained the item or skipped mentioning it at all.

I also disagreed with some of the coding techniques he used, but that was more personal and since we all eventually develop our own way of coding, I was able to overlook those.

I recommend the book only if you’re an absolute beginner in terms of coding to the web. If you know basic HTML and CSS already, skip this one. You can get it on Amazon for $19.49 if interested.

]]> http://www.amberweinberg.com/review-of-css-for-print-designers-by-jd-graffam/feed/ 0 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 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 Update 2011 Conference Recaphttp://www.amberweinberg.com/update-2011-conference-recap/ http://www.amberweinberg.com/update-2011-conference-recap/#comments Fri, 09 Sep 2011 17:27:11 +0000 Amber Weinberg http://www.amberweinberg.com/?p=4648 I spent last week in beautiful England attending the Update 2011 Conference, thanks to all of your awesome donations last month. I wanted to make sure that I jotted as many notes and photos as possible for those of you who were unable to make the conference.

The conference, put on by Aral Balkan, was fantastic. I finally got to meet Sarah Parmenter, Jeremy Keith, Geri Coady and Remy Sharp. I also made some new friends, Laura Kalbag and Scott Coello. I also enjoyed seeing the Clearleft office in person and having a long tea break discussing politics and religion with Aral.

I do admit that I missed the first set of talks due to the airline “forgetting” to put some luggage on the plane and the hubby not having anything to wear. Luckily, we made it there by the first break.

Let’s get started on the talks, shall we?

One Web by Jeremy Keith

I’ve read a lot of books by Jeremy, but never heard him speak until this conference. The man is as stubborn and loud as me and I loved it. His talk was very passionate and I was able to follow along. At one point, he even called iOS developers “fucking peasants”. It was fantastic.

Jeremy stated that the web was created to be open, and unlike anything else, you didn’t need permission from anyone to create content on it and that anything could be published. The links were open and you could link from one site to another without asking anyone for permission. The internet’s primary design was universality and was meant to be used on any device or with any handicap.

The problem with native app design is that it takes us back 20 years before the web was born. Native apps may be great, but how long will those resources lasts? When you create content on the web, it lasts for forever, as long as you pay for hosting, but it’s harder to keep content alive when it’s tied to a specific device. All a web needs is HTML, HTTP and a URL.

Back when the web was new, it’s competition came from CD-ROMs like Microsoft Incarta, but the web was able to succeed because of the links and it’s updatability. Today’s competition comes from apps, but it can be argued that because of links, web is really the “killer app”.

The internet is real time communication and it threatens publishers and content controllers like magazines, news providers, music and film makers because it allows anyone to publish. These outlets are excited about the popularity of native apps because it brings back control and exclusivity.

What is the web for? For for fun? For users? Merely to make money (which Jeremy argued, is no better than a prostitute)? The web is meant for humans in order to contribute to a better world.

Steve Jobs once said that you don’t need to be permission to be awesome – but you do with native apps.

Geek Ninja Battle – or Jeremy Keith vs. Everyone Else

This WAS the best talk of all, which was more like a debate between Jeremy Keith and everyone else on the panel. The other members were Aral, Kevin, Martin, Matt and Seb. Basically, the battle was about which is better, native or web apps. Jeremy being a hardcore web-only kind of guy, basically ended up arguing with everyone, especially Aral, and there was seriously a part where I though punches were about to be thrown. It truly was a battle and quite entertaining (and informative of course). It’s interesting to see how we all geek out over little stuff like this that the rest of the world never thinks or cares about.

Aral asked Martin, who works at Microsoft, why we should use their new Windows phone. Honestly, I thought the guy gave a pretty weak answer, which basically boiled down to “you can build apps quickly and we’re a big company”…riiiight…..

Matt, and iOS developer, thought it was important to just make the commitment to get something out and that it was more about delivery than the type of platform you used. He cited the example about how when you subscribe to a newspaper on the Kindle, it’s automatically delivered every morning.

Kevin, a Titanium developer, suggested that native was better, because in web it’s difficult to integrate with the phone’s system and all of its features. He suggested using something like Titanium, which is a cross-platform tool and allows you to be more productive by creating one app for all platforms.

Jeremy Keith said it was important to not focus on one platform and limit your user base, but to create a progressive website that can be accessed by everyone, even crappy browsers (at this, he pointed to Martin, the Microsoft guy). Jeremy said that by creating a baseline that worked for all devices and browsers and then enhancing it for a few, it gave you a competitive advantage against those that created an app for only a select few. He also stated that what you’re getting natively on apps now, is what will soon be the future of the web. He also stated that we need to stop trying to make web apps look native, in order to avoid confusion.

Seb agreed with Jeremy Keith’s view that progressive enhancement was a great tool for mobile, but that it’s limited and not for interactive apps.

At this point, it was less about questions from Aral, and more about a huge debate between Jeremy and everyone else. Aral and Jeremy debated about optimising for features, not devices, to which Jeremy disagreed with both. Aral brought up the issue of making money from web apps, which is not as easy to do as native apps are. Jeremy stated that making money this way is outdated. Not sure how I feel about that!

Angry Exorcist – Seb Ly Delisle

This talk was a step-by-step on how to make an Angry Birds clone in under 30 minutes using the Corona SDK. You can find the source code at Seb’s website and follow Seb on Twitter to find out more about this hilarious project. Hopefully, he’ll post a video of how he did it, it was fantastic!

Design Challenges – Sarah Parmenter

Sarah Parmenter laid out 10 design challenges that you’ll face as an iOS designer.

  1. Fluid design – She stated how important it was to make sure your designs are able to be stretched and to watch out for gradients and the slicing of buttons and background elements.
  2. Use familiar behaviors – A great touch reference can be found at Luke W’s website.
  3. Clean up your environment – Properly name your groups and layers, keep folders neat and keep a scratch folder for all the elements developer’s will need, like buttons.
  4. Progressive disclosure – Hide actions that don’t need to be shown. Clients often don’t like this, but users do. For example, the pull down to refresh action.
  5. Tap targets – Make sure they’re big enough for fingers to push without accidentally hitting something else. The minimum hit target is 44×22 pixels.
  6. Orientations – Users have a preference for using either landscape or portrait, so don’t force them to use one or another. Make sure your app is flexible and can adapt. A popular layout technique is using 3 columns in landscape mode and 2 in portrait.
  7. Keep designs relevant to its OS.
  8. Beyond human interface guides – Know the limits of the OS, even the smallest actions and gestures matter.
  9. Retina display – Don’t ignore the retina display, it only takes basic math to do. A trick is to use shapes in Photoshop, as this allows you to resize the PSD easily without distorting it.
  10. Automator – There’s an add on you can find online for adding the suffix to the file for the retina display to work.

Arse Over Tit or “How designers/developers have perfected the art of making things backwards” – Relly

I wasn’t too big a fan of this talk, I’m not really interested too much in content myself and Relly talked much too quickly so it was really hard to understand her.

Relly noted that content strategists normally don’t come into a project until the end. She asked, “What if books were made like apps?” You would first decide to make a book, choose a format, design a cover, pick out fonts, figure out the type of paper you’d want to use, pick a title….and then come up with the subject and content of the actual book??

You can’t make a hit app, but you can think up a plan for one. You’re only as good as the components you make and writing doesn’t scale. Relly suggested breaking up the large content projects into smaller pieces in order to get through them. She reminded us that the plan is not the work.

Ronald Wayne

Apparently there’s a third founder of Apple–I didn’t know that, did you? He met Steve Jobs while working at Atari (and Steve wrote my favorite game, Breakout). Ronald has never owned any Apple product, so he was present with an iPad 2 by the Update crew.

“We are designing for humans and they are central to what we do”

Beyond Delicious – Joachim Bondo

Delicious apps are those that devs put extra work into the UI. They’re the apps that users recommend, love and purchase.

  1. Make code more beautiful than the UI. Delicious apps go beyond skin deep and into the code.
  2. Under-state, Over-deliver.  Move focus from the user interface to the user experience.
  3. Quality takes time. Respect users by taking your time in development.

The Digital Nature – Anna Debenham

Studies show that students who use tech are better with their studies. Unfortunately, schools are more likely to over-monitor the students. For example, a teacher couldn’t show his students the “view source” feature in the student library  because it had been blocked by the school for “security risks”. Over monitoring of students pushes them to hack their way around the systems.

Computer science isn’t taught as a standard in the UK, instead they teach how to use the software, but not how it’s made. Interest in software development is lower than ever. Today’s software and hardware focuses on hiding its design, because it’s thought to be too scary for users.

You can view the slides of this talk at maban.co.uk/dn

 

Geek Ninja Battle 2 – Design Challenges

Consisted of Joachim, Cennydd, Relly, Sarah, Remy and Aral.

Aral asked, “What are some of the unique design challenges to mobile?” Sarah answered that less is more and you should try to strip out the process to only three or four screens to make it easier for the user. Cennydd asked, “What do you mean by mobile? It could be the property of the device or user. Is the person using his iPhone at home mobile, or is the person using his laptop on a train mobile?”

Aral then asked, “What about ergonomics then?” Cennydd replied that ergonomics are limited, there’s a big difference between touch screen and using a keyboard and mouse. Anything more than one touch on a real mobile user is difficult to do. Joachim said to always strive for simplicity. Only put five buttons or less in the toolbar (which is in the Apple user guide).

“What are some copy restrictions?”, Aral asked. Relly said that the “people don’t read” belief actually depends on the context. Consider what the main task of what they’re doing is and how to let them get to that chunk of information. Mobile is “not what we can cut out, but what makes the most sense” to show.

Aral turned to Remy and asked him what some of the development challenges were? Remy said that if the app isn’t designed to be on the desktop, then it’s designed to be mobile. He recommended using libraries like jQuery mobile for quicker developer, although he also suggested using barebones development. If he can use a library to accomplish what he’s doing quickly though, he’ll use that. Apps should be as small and lean as possible. Cennydd said context is king in theory, but difficult to figure out in reality. Only way to figure out is by extensive researching.

The Things of the Future – Cennydd  Bowles

Many of the things of today don’t do anything. We plan for obsolesce now and we create a lot of crap and artificial demand. We;ve become complacent and allow advertisers to talk to us like idiots, making a dilution of value.

The audience is changing, however, only 12% of consumers have high opinions of big business. People are now more connected and can find out the truth about your products easily. They’re no longer satisfied with the consumer role. The web builds societies, educates and frees us.

The things of the future will:

  • Be human and consider how products talk with the user.
  • Mobile phones will have sensory input
  • More clues for designers to interact with
  • Tackle wicked problems like energy consumption, health and financial management.
  • Disrupt by uprooting existing way of doing things

Sites are now cross-channel where media, form and function are now separated. Users don’t see why they should be different from being in-store to on the web or in an app.

Designers should now forced to think about the entire lifestyle of an item and create fewer, better things.

Photos from the Update Conference & Royal Dinner

DSCN0878 DSCN0881 DSCN0882 DSCN0883 DSCN0884 DSCN0885 DSCN0887 DSCN0888 IMG_0547 IMG_0548 IMG_0549 IMG_0550 IMG_0551

I again want to thank all of you who made it possible for me to come here! It was fantastic!

]]> http://www.amberweinberg.com/update-2011-conference-recap/feed/ 13 Thought Lessons When Creating HTML Mobile Websiteshttp://www.amberweinberg.com/thought-lessons-when-creating-html-mobile-websites/ http://www.amberweinberg.com/thought-lessons-when-creating-html-mobile-websites/#comments Wed, 24 Aug 2011 18:58:52 +0000 Amber Weinberg http://www.amberweinberg.com/?p=4626 Working for almost a year now on Audible’s mobile website has taught me a thing or two about mobile development. It was my first mobile web development experience and I was eager to get started. It was also my first real experience with creating an adaptive site using percentages instead of fixed pixels.

In many ways, creating a website for mobile is pretty identical to creating a regular website, the only real difference being that users don’t have a large screen. However the mobile platform comes with it’s own bed of issues.

Lesson 1: Standalone mobile website or adaptive design?

Adaptive design is usually the best method for doing a mobile site, especially if the site is smaller in nature. This way, you can reuse the HTML you already have for the desktop site and not have to worry about redundant content or code. Adaptive designs can actually be created rather quickly, even from a pixel-based layout already in place, and you can easily control what sections of the site you want a custom mobile version for (For example, on my own site, if you look at the site on a mobile device, you’ll notice that it looks exactly the same as the regular layout – except for this blog section, created to make it easier for users to read on a smaller device).

However the mobile site I created for Audible was completely standalone from the regular website, so I didn’t really need to mess with the junk of media queries and hiding things with CSS. This was optimal for the site since the Audible website is massive, including a login system for users, checkouts, account areas and shopping. Trying to do this site in an adaptive design would’ve ended up not being too user friendly.

Lesson 2: HTML5, CSS3 & Mobile Browsers

I’m sad to say I didn’t get the chance to use HTML5 for this mobile site. When I started coding, there still wasn’t a whole lot of push to use it, and it was before I switched all of my coding to even use the HTML5 DOCTYPE. However, I was able to freely (or so I thought) use as much CSS3 as I wanted to, for I no longer had to support IE, yay right?

Unfortunately, the mobile world comes with it’s own IE in the form of Blackberry. At the time I coded the site a year ago, Blackberry only had minimal support for CSS3 – it didn’t support opacity or certain selectors. Which meant, of course, having to use some sloppy code that would’ve otherwise had been a lot cleaner.

Fortunately for us developers, the mobile world is dominated by webkit browsers. For the most part, sites on Android and iPhones/iPads/iPods pretty much look the same. Unfortunately, the Blackberries can be a pain in the arse to deal with, since they don’t have as much support for newer technologies as other devices.

Another blow to the wonderful mobile browser testing field is the new Windows 7 phone that came out – with IE7 built in. Yup. It’s like the early 2000′s all over again isn’t it? Luckily though, IE9 is supposed to be shipping on those soon, if not already.

Lesson 3: Don’t Forget Landscape

On our regular desktop browsers, we normally code for a specific size, say 960px wide, even when doing responsive web designs. We know that no matter how big the monitor is, we can set a maximum width that our site will never expand past. Our monitors, while different sizes, are normally the same aspect ratio, i.e., you can’t flip the monitor around and view it portrait wise (well certain monitors you can, but it’s not common). However, with mobile world, the user has the ability to flip his device and make your site wider or narrower on the fly.

This is when you have to make a decision for your users. When the user flips from portrait to landscape, do you simply zoom into the site, but keep the same dimensions? Or do you adaptively resize the site so the elements now stretch across the new expanse of space?

What I Really Learned

  • I really, really enjoyed mobile development, and am thinking of moving my business into that area
  • Mobile development, at least at this stage, takes me A LOT longer than regular development, probably because:
  • Mobile development comes with way more mockups than the average desktop web site. I’ve done over 100 for Audible so far, and I’m still working on them.
  • While you can emulate a native app, a mobile website will never feel as nice as a native app, no matter how well done it is. You still have loading times, limited access to phone features, and you still have to visit the browser.

I’m still on the fence about whether I want to learn native app development. Last year I spent the entire summer working through the Beginning iPhone 3 Development book and I still feel like I know next to nothing about the process!

]]> http://www.amberweinberg.com/thought-lessons-when-creating-html-mobile-websites/feed/ 14