Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

June 18 2012

07:00

April 02 2012

07:00
Sponsored post
soup-sponsored
20:53

March 12 2012

08:00

Create a Responsive Web Design with Media Queries

If you’ve yet to get your hands dirty with media queries, now is your chance to create your first responsive website design. In this tutorial we’ll look at converting one of my previous WordPress theme designs into a responsive layout, while taking into consideration the design’s original grid structure.

View the responsive layout demo

If you cast your mind back to late 2011, we went through the process of designing, coding and building ‘Typo’ into a complete WordPress theme. The design itself lends itself well to a responsive layout, so we’ll use the HTML and CSS as a base to transform the static layout into a responsive layout that will adapt to various viewport sizes.

Non-responsive layout

When the viewport size of our browser is reduced on the original demo file we’ll see the site is cut off and ugly horizontal scrollbars are added. The idea of a responsive layout is to adapt to these various viewport sizes so the design remains legible. Smartphones and tablets will automatically scale the original website to fit, but creating specific layouts for those smaller resolutions will allow the site to be read easily without the need for zooming.

Common viewport sizes

The first step to creating our responsive layouts is to plan out what resolutions we’re going to cater for. Common resolutions include the 320px portrait width of smartphones, 768px portrait width of tablets, 1024px landscape width of tablets (and typical netbook resolutions) as well as various desktop monitor resolutions. It’s worth mentioning that a layout that only caters for preset resolutions is often referred to as being ‘adaptive’, whereas a truly ‘responsive’ layout will be built using ems or percentages, allowing an infinite level of scaling.

<link href="mediaqueries.css" rel="stylesheet" />

We can then get started with CSS media queries to add the responsive functionality to our design. I’m adding the media queries and additional declarations to a separate CSS file, but they could be added to your main stylesheet.

@media screen and (max-width: 960px) {

}

The width of the original layout is 960px, so any resolution below this value will generate horizontal scrollbars and cut-off the content. Therefore the first of our media queries will target screens with a width of less than 960px;.

@media screen and (max-width: 960px) {
	#container, footer {
		width: 758px;
	}

	#content {
		margin: 0 20px 0 0;
	}

	#sidebar {
		width: 212px;
	}
		#sidebar section {
			clear: left;
		}
		#sidebar #search #searchbar {
			width: 152px;
		}
}

The next most popular resolution under 960px width is 768px to cater for portrait tablet screens. This Typo design is built using a grid, so to stay true to the layout we can simply remove a column to leave a width of 758px. The original layout can then be narrowed down to fit by reducing the margin on the content div as well as reducing the overall width of the sidebar.

@media screen and (max-width: 758px) {
	#container, footer, #sidebar {
		width: 524px;
	}

	header nav {
		clear: left; float: none; overflow: hidden;
	}
		header nav li {
			width: auto; margin: 0 25px 0 0;
		}

	header {
		margin: 0 0 44px 0;
	}

	header h1 {
		margin: 0 0 24px 0;
	}

	#sidebar section {
		float: left; clear: none;
	}
		#sidebar #social {
			margin: 0 20px 47px 0;
		}

	#sidebar #search #searchbar {
			width: 464px;
	}
}

The value of 758px can then be used for the next media query, so anything smaller than this size will trigger the next layout. At this point the sidebar is too narrow to be made any smaller, so instead it can be naturally flowed underneath the main content when the grid is narrowed by a few more columns. This means the actual sidebar div’s width can be increased to fill the width of the new layout and its child elements floated to fill out the extra horizontal space.
Other areas such as the header have become too narrow to hold the logo and navigation side by side, so the navigation elements are altered to span the width of the layout on a new line.

@media screen and (max-width: 524px) {
	#container, footer, #sidebar, #content {
		width: 292px;
	}

	#content article h2 {
		font-size: 24px;
	}

	#content .postinfo li {
		margin: 0 10px 0 0;
	}

	#sidebar #social {
			margin: 0;
		}

	#sidebar #search #searchbar {
		width: 230px;
	}
}

The third and final media query in our responsive layout will cater for extremely small resolutions such as smartphones. This particular layout is narrower than the original content width, so this div also needs altering with a new declaration in the media queries CSS file. The extremely narrow view has dropped each of the post-info links on a new line, but decreasing the margin between them helps repair some of the floats.

View the responsive layout demo

Thanks to these three sets of media queries our website layout is now responsive enough to cater for common viewport sizes and will aid readability by generating a designed layout in place of scrollbars or a scaled view. View the demo and scale your browser to see the responsive layouts for yourself.

View the responsive layout demo

March 09 2012

11:09

Top Non-Destructive Photoshop Techniques


  

The creative process is not a linear one. As artists and designers, we often set off in one direction only to decide that the proper solution lies somewhere else completely. Unfortunately, many of the creative software packages we use (Photoshop in particular) can be pretty unforgiving when in comes to making changes late in the game.

Sure, we’ve got “Undo” for a quick change of heart, but often we don’t realize we need to make an adjustment until several steps (or days) later. Luckily, Photoshop has some great features built in that allow us to work in ways that protect our precious pixels—truly freeing us to do our best work.

In this video post, I’ll show you some of my favorite techniques and tools for keeping your files flexible, including Smart Objects, Smart Filters, Layer Styles, Adjustment Layers, Masks and more. The approaches shown in this video should provide a solid starting point. But like anything in Photoshop, there is no “one right way” to approach it. The key is to find the method that best supports your workflow so please feel free to add your favorite non-destructive tricks in the comments section below!


Designing or editing photos is a pretty organic process. Allowing yourself to make edits to your document that don’t affect the original pixels provide you with a lot of flexibility when making decisions throughout your design process.

Chime In With Additional Tools And Techniques!


© Adrian Taylor for Smashing Magazine, 2012.

February 13 2012

07:00

How To Build a Handwritten Letter Style Contact Form

Follow this step by step tutorial to create a traditional pen & paper inspired contact form in HTML and CSS. We’ll use a mix of basic and intermediate CSS techinques to give the form the appearance of a letter, then use the @font-face CSS property to transform the digital text into handwriting.

View the letter style contact form demo

The form we’re creating is styled with a lined background texture and a subtle shadow to give the impression of a paper sheet. The title and form fields will be styled as digital text, but instead of using rectangular form fields we’ll create dotted lines with a cursive font to give the appearance of a handwritten letter.

View the letter style contact form demo

The Photoshop concept

Before getting started with any coding I like to create a Photoshop concept to gain an initial idea of how the design will look. Start by giving the background a subtle Noise overlay with settings of 2% Uniform, Monochromatic.

Draw a white rectangle in the centre of the canvas then fill a 1px horizontal line with a light blue colour to replicate the pattern found on lined paper pads.

Hold ALT and hit the cursor keys to make a duplicate, then hold Shift and move the duplicated line 4 times (40px) to create a full page of lined paper.

Fill a black rectangle on a layer underneath the main page. This will be the base of our subtle page curl shadow.

Give the rectangle a Gaussian Blur, then press CMD+T to transform the shape. Right click and select Distort in order to hide the bottom corner behind the main page.

Reduce the opacity of the shadow to finish off the page curl effect.

Use typical font styling to create the printed portions of the letter. Make sure each text item is aligned to the baseline grid created by the lined pattern.

Switch over to Adobe Illustrator in order to create a dotted line effect. Illustrator’s Stroke tool makes it easy to create a series of circular dots by adjusting the Dash and Round cap settings.

Paste the lines back into the Photoshop document and align them according to the baseline grid.

The font styling within the form fields will be created with a handwritten font to give the appearance of a traditional pen & paper based letter. We’ll use Google Fonts to do this in CSS, so for now paste in some placeholder text.

Use a set of postage mark Photoshop brushes to style the send button to relate to the traditional handwritten letter theme.

Once the PSD concept is complete image graphics can be exported for use in the HTML/CSS version. Draw selections to create repeating swatches of the textured and patterned backgrounds.

Make sure an area of white space is included in the dotted image graphic in order to preserve the spacing and line height when the file is repeated.

Export any graphics that require a transparent background as PNG-24 images so they can be overlaid on the backgrounds without issue.

The HTML Structure

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pen &amp; Paper Form</title>

<link href="style.css" rel="stylesheet" />

</head>
<body>

<div id="container">

</div>

</body>
</html>

Create a new HTML document and enter the basic structure of a HTML5 page, including the Doctype, page title, link to the CSS stylesheet and a simple container div to house our form.

<h1>Send a Letter</h1>

<form action="" method="post">
	<fieldset>
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" />

		<label for="email">Email:</label>
		<input type="email" id="email" name="email" />

		<label for="message">Message:</label>
		<textarea id="message" name="message"></textarea>

		<input type="submit" id="send" value="Send" />

	</fieldset>
</form>

Type out the elements to create the overall form. The new HTML5 type="email" attribute can be used on the second form field, but otherwise the syntax is basic HTML. Make sure your labels correspond to the ID of each input for extra accessibility and usability points.

The CSS Styling

body, div, h1, form, fieldset, input, textarea {
	margin: 0; padding: 0; border: 0; outline: none;
}

body {
	background: #abb5cb url(blue-bg.png);
	font-family: Helvetica, Sans-Serif; color: #525c73;
	line-height: 40px; text-transform: uppercase;
}

#container {
	width: 560px; margin: 100px auto; padding: 51px 0 0 0;
	background: url(lines.png); position: relative;
}
	#container:before {
		content: ""; width: 19px; height: 365px; position: absolute; left: -19px; top: 0;
		background: url(shadow.png);
	}

The CSS file begins with a simple reset to remove any browser default styling, then the overall page styling can be added to the body. The #container div is transformed into the paper page with the help of the lined background image, then the shadow is added with the help of the :before selector. Absolute positioning is used to shift the shadow to the left of the main page so it aligns correctly.

h1 {
	font-size: 30px;
	text-align: center; letter-spacing: 5px;
	margin: 0 0 44px 0;
}

label {
	width: 150px; display: block;
	text-align: right; float: left;
	font-size: 18px; letter-spacing: 3px;
	margin: 0 10px 40px 0; clear: left;
}

Next up in the CSS is the styling of the printed or digital text. The Helvetica font family and colour is specified back in the body declarations, so all that’s left is to set the font sizing and to add some letter spacing to match the Photoshop concept. Adjust the margin under the header to keep everything aligned to the baseline and use a specific width on the labels so they all align flush to the right.

input {
	width: 300px; height: 40px; float: left; margin: -14px 0 0 0;
	background: url(dots.png);
	font-family: 'Shadows Into Light', cursive;
	font-size: 24px; color: #18326d; letter-spacing: 3px;
}

textarea {
	width: 300px; height: 200px; float: left; margin: -14px 0 40px 0;
	background: url(dots.png);
	font-family: 'Shadows Into Light', cursive;
	font-size: 24px; color: #18326d; letter-spacing: 3px;
}

The styling for the input fields begins as normal with a specific width and height, but instead of an outlined rectangle our fields are converted into dotted lines with the help of the dotted background image. The white space included in the image will allow the inputs and texarea elements to expand to any size. Grab the @font-face code from the Google Web Fonts page for Shadows Into Light and add it to the CSS to convert the input text into handwriting then adjust the margin to align the text above the dotted line.

input#send {
	width: 202px; height: 84px; float: right;
	margin: 0 70px 36px 0; padding: 0 0 0 77px;
	background: url(post-mark.png);
	font: bold 30px Helvetica, Sans-Serif; text-transform: uppercase; color: #525c73;
	cursor: pointer;
}

The final portion of CSS styles up the Send button. Currenly this input element is being styled by the generic input CSS declarations, so some properties need to be reverted. Otherwise the main graphic is added as a background image and the whole element is moved into place with margins.

UPDATE! Auto-Expanding Textarea

James Seymour-Lock made a great suggestion on Twitter that the textarea should expand as the user types in order to hide the ugly scroll bar. Why didn’t I think of that?!

$(document).ready(function() {
	$('textarea#message').autoResize();
});

This cool functionality can be easily added with the help of a ready made jQuery plugin. jQuery.fn.autoResize provides the exact effect we need. Add the script files to the head of the HTML file and activate the jQuery plugin.

The Final HTML/CSS Form

View the letter style contact form demo

This leaves the styling of our handwritten letter inspired form complete. The lined background image and page curl shadow give the appearance of an actual sheet of paper, whereas the dotted lines and handwriting font styling replicate how printed forms are filled out in real life.

View the letter style contact form demo

January 23 2012

07:00

How To Display a Message on Old WordPress Posts

If you post helpful information on your blog chances are some of your early posts are now outdated as technologies have changed over the years. Let’s take a look at how we can add a mix of PHP tags to our WordPress themes to automatically add a small disclaimer or warning message to posts over X years old.

The little snippets of code we’re going to add to our theme will allow us to display a message above our post content, but only on posts over a number of years old. We might only want to display this message on certain types of posts, in my case it’s only my tutorials that have become outdated, so we’ll also add a category filter to target only old posts from a particular section of the blog.

The WordPress PHP code

<?php
$post_age = date('Y') - get_the_time('Y');
if($post_age > 2 && in_category('4') ) { ?>

<div class="old-post">
<p><strong>This post was originally published in <?php the_time('Y'); ?></strong><br />
The tips and techniques explained may be outdated.</p>
</div>

<?php } ?>

I’m no PHP expert so I had to do a little Google researching to actually figure this out. I stumbled over Horacio Bella’s Forrst post that provides the basic syntax, I then did a little modification to suit my own requirements.
The first line of code takes today’s year and minuses the year the post was published, which gives the post’s age in the $post_age variable. The script then checks if the post age is over 2 years old and is in category ID 4. You could change this filter using many of the WordPress Conditional Tags.
A line of simple HTML fleshes out a message to the user, explaining that the post is a few years old and therefore the content may be outdated. We can use the WordPress <?php the_time('Y'); ?> tag to automatically enter the year the post was published.
Paste this code into your single.php template file above the <?php the_content(); ?> tag.

The CSS styling

Once the code is in place in the template file and the unformatted message is appearing on the correct posts, it can then be styled up with CSS.

.old-post {
	margin: 0 0 20px 0; padding: 15px 20px;
	background: #e9e9eb url(images/grey-bg.png);
}
	.old-post p {
		background: url(images/warning.png) left no-repeat; padding: 0 0 0 65px;
		color: #717171;
	}

The old-post div is styled up with a textured grey background and plenty of padding around the edges. A warning icon is then added as a CSS background image on the paragraph element and the text indented with some left padding.

January 16 2012

07:00

How To Create a Vibrant Cloud Icon in Photoshop

Follow this step by step Adobe Photoshop tutorial to create a colourful and vibrant cloud icon. We’ll be using plenty of gradients and lighting effects to produce a really cool icon perfect for a modern website design or mobile app.

Cloud icon

The cloud icon we’ll be creating features plenty of vibrant colours to create a three dimensional appearance. A flow of purple to blue provides the colourful base while the highlights help illuminate the icon and lift it from the screen.

View the full size icon design

Open up a new Photoshop document and begin by filling a black circle with the elliptical marquee tool on a new layer. Hold Shift and move the selection to one side and fill a copy, then use the rectangular marquee tool to fill in the centre while aligning the bottom edge perfectly.

Back with the elliptical marquee tool, draw a slightly larger circle and a slightly smaller circle each overlapping the original left and right circles.

Fill in any gaps in the centre to finish off the graphic as a recognisable cloud shape.

Double click the layer to open up Photoshop’s layer styles window and add a Gradient Overlay. Add a third swatch in the middle then change the colours to #300a85, #2555dd & #c8ecff. When choosing colours, avoid selecting tones from the same hue. Instead, move around the colour wheel to create more intense changes in colour, so the tones become warmer or cooler.

Give the cloud an Inner Glow effect to add to the three dimensional appearance. Change the settings to white, Soft Light and 100% opacity, then play around with the size slider.

An Inner Shadow effect can be converted to create a cool top highlight. Change the default fill from black to white, then alter the blend mode to Overlay to allow the colours to interact. Adjust the Distance, Choke and Size to balance between a hard/glossy highlight and a smooth/soft highlight.

Press OK to confirm the layer styles, then CMD+click the cloud layer thumbnail to load its selection. Go to Select > Modify > Expand and enter 5px.

Fill this new selection with black on a new layer underneath the main cloud to create an outline effect.

Open up the layer styles for this black outline and add a Gradient Overlay. Choose similar purples and blues, but enough change in tone so they contrast against the cloud layer. I’m using #571a9b, #4c54e5 and #c0e8ff.

Load the selection of the cloud layer again, then right click and select the Stroke option on a new layer.

Alter the stroke width to 2px using white as the colour, then make sure the Location is set to Inside.

Use the Eraser with a large soft brush setting to delete the lower portion of the stroke outline, leaving a gradual fade from top to bottom. This little touch adds another subtle highlight to the icon.

Dab a spot of black on a new layer at the bottom of the stack, then transform and squash it down into more of a shadow shape.

Split the shadow in half using the marquee and selection tools. Hold Shift to make sure the second half stays on the same plane.

Use the Single Column marquee tool to make a selection, then transform and stretch this selection to fill out the centre area of the shadow with a straight segment.

Move the shadow into place under the cloud to ground it onto the background, then add another Gradient Overlay in the layer styles window. Use darker tones of blue and purple to continue the colours into the shadow. A shadow in reality isn’t black, it is made up of all the colours and reflections that are around it.

Cloud icon

Our vibrant cloud icon is now complete. The gradients and highlights really help create a three dimensional appearance, while the variations in colour subtly give a more realistic feel to the shading.

December 12 2011

07:00

How To Create a Stylish Drop Cap Effect with CSS3

Drop caps have been around for years in the print industry, but they are still pretty rare in the web world despite the :first-letter selector having been around for a fair few years. Let’s take a look at how we can create a cool drop cap for our web designs and spice it up with some stylish CSS3 text-shadow effects.

CSS Drop Cap

The design we’ll be creating features a large drop cap at the start of a block of text. The actual drop cap effect will be created with the :first-letter selector, while the extra effects are added with the help of CSS text-shadow.

View the CSS drop cap demo

The HTML structure

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Drop Shadow</title>

<link href="style.css" rel="stylesheet" />

</head>

<body>

<div>
	<p>You either die a hero or You live long enough to see yourself become the villain.</p>
</div>

</body>
</html>

Every web project begins with the basic HTML structure. For this demo file the HTML page is made up of the usual Doctype and Head elements before the quote is laid out as a basic paragraph element. We’ll be using CSS selectors to create our drop cap so no special IDs or classes are required.

The CSS styling

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	font-family: "Chunk", Sans-Serif; color: #fff;
	background: #566074 url(bg.png);
}

@font-face {
	font-family: Chunk;
	src: url("Chunk.ttf") format("truetype");
}

div {
	width: 730px; margin: 150px auto;
}

The CSS demo file begins with a reset to remove any default browser styling, then the main font styling is added to the body. You’ll notice the use of the “Chunk” font; this custom font is being added with the help of @font-face.

p {
	font-size: 50px; line-height: 80px;
	text-transform: uppercase;
	text-shadow: 10px 10px 0 rgba(255,255,255,0.07);
}

Now the slab-serif font is in place the size and line-height of the typography can be set. The text-transform property ensures all the text appears in caps despite how it is written in the HTML file, then the text-shadow property is used along with RGBa colour values to add a subtle ghost effect to the text.

p:first-child:first-letter {
	font-size: 160px; float: left; margin: 20px 20px 0 0; line-height: 0.8;
}

Now the main text is in place we can finally get around to styling up the drop cap. The first letter is targeted with the handy :first-letter selector, but to avoid having drop caps on every paragraph on our page we also need to use the :first-child selector to target only the first letter of the first paragraph.
Just four CSS declarations are needed to correctly style up the drop cap. First the letter is increased in size so it’s large enough to span across two lines of the paragraph, then it is floated left to allow it to break out of the paragraph’s flow. A touch of margin on the top and right help tweak the drop cap into place and add some space between this first letter and the remainder of the sentence. Everything looks fine in Firefox so far, but if we test it out in WebKit browsers (Safari & Chrome) they both seem to place the drop cap higher than Firefox. We can easily fix this with an extra line-height declaration. This makes no difference to the Firefox version while lining everything up in Safari and Chrome.

p:first-child:first-letter {
	font-size: 160px; float: left; margin: 20px 20px 0 0; line-height: 0.8;;
	text-shadow: 4px 4px 0 #566074, 7px 7px 0 #fff;
}

The basic drop cap is complete, but traditionally drop caps come along in all kinds of fancy styling. We can add some cool effects of our own with the help of the CSS3 text-shadow property. A duplicate of the text is created and offset by 4px, then a second duplicate is created at 7px. When the first duplicate is set to the same colour as the background it creates a cool retro style effect. For more drop cap effects check out my old text-shadow effects post.

The final drop cap effect

CSS Drop Cap

View the CSS drop cap demo

December 11 2011

10:00

5 Bizarre Techniques To Find Inspiration Away From Work

Before I start, let me put up a disclaimer. You know, the one that helps me save myself when you guys sit on my head and kick my, well, you know what! See, I ain’t rich enough to fight against your lawyers so, here we go:

All characters and names mentioned by me today are not fictitious or imaginary. And any resemblance to many people living, dead, in a coma or just purely out of work is purely intentional and not at all regretted. Also, all ideas pushed are to kick you out of work. I love all you famous (and rich) designers and am lying!

Getting back to what we are here for. To give up on our tightly lipped schedules where we don’t have a minute free to say “Hello” to our own souls. You know, the world of Internet and freelancing is such that you got to fight against your free will so that you don’t end up messing your client’s time. It is like being on your toes if you don’t want the competition to rip your apart. But, have you noticed that most of us opt for freelancing because we want to get rid of the sick day jobs and be our own boss? Instead, we end up being a freelancer who is working like never before in order to rake in lots of money as quickly as possible.

I do understand the rush but still, come on, guys? Today, I will try to drag you all out of your schedules and make life a lot more interesting for you. There are a lot more fancy things to do that can keep you away from web designing. Well, not exactly fancy but they will prove to be interesting because you will be coming out of your freelancing fad. I won’t blabber anymore now. Here are the pointers for you to consider:

Alcohol


While in school my English teacher taught me to launch the bomb at the very first shot so as to keep the readers engrossed. Henceforth, I won’t save this for the last. Yep! Drink lots and lots of alcohol. Look around for some of the best liquor brands and drink them all. I mean it. Drink till you drop. I assure you that your “so-called” passion for web designing or freelancing will run miles away from you when you are a little drunk.

Remember, you have to continue drinking till you start seeing UFOs in your bedroom. If you cannot picture yourself as the secret operative commander of Area 51 then you aren’t drunk yet. Gulp a few more bottles. Kick your freelancing dream and live life like a true alcoholic.

Warning: You might just lose some of your best friends, relatives and clients so think before you take this seriously.

Watch TV


Don’t you know? TV is the best way to kill time. All that you have to do is assume that TV shows are inspiring you. Once your brain knows that watching TV inspires you then it will never push you towards web designing. Rather, it will look for more inspirations. More shows. More time killed. Soon, you will be the black sheep of the industry who is no longer interested in web design.

In addition, write a paper on the advantages of watching TV. You will attract lots of fans (most of them kids) and might just discover a new business altogether.

Warning: Though watching TV could be interesting, a lot of it usually leaves people lonely. Think!

Call your Ex


OUCH! Don’t get me wrong. I don’t want to hurt you and push you down the memory lane from which you took almost 10 years to come out of. I want you to understand how interesting it could get when you indulge in another red-hot fighting session with your ex.

Go on. Call your ex and tell him/her how you lucky you have been since you’ve broken up. I know initially they will be surprised but soon they will help you take your fights to the next level. Indulge in it. Show some rage. Find some anger. Cry and feel lonely. Drink to kill boredom. Rinse and repeat!

Warning: Love is the most awesome thing that has happened to mankind. If you two weren’t compatible and had moved on then such activities can make you hate yourself. So, again, think before you follow this.

Hateful Words and Clients You Don’t Like


You are an Internet addict and you don’t want to give up using the Internet while you are on our mission of giving up web designing for some time? Not a problem.

I am sure that you must have met clients that made you go mad. It took ages to satisfy their needs. Still, you didn’t get paid up to the mark and your client was never satisfied. Perfect! Search Google for the best hateful words and draft an email. The text of this email should be such that it takes the reader hours of referencing from Dictionary.com. Make sure that the text is interesting enough to keep the reader engrossed till the meaning of each word is clear. Use a fake email address. Leave some proofs. And, send the mail.

Remember this mail will be of no use if you haven’t spent days compiling the best possible hate mail written in the history of mankind.

Warning: Terrorizing someone isn’t human. It is on you when it comes to choosing between being human or the other way round.

Wikipedia Twitter Facebook


Yeah! Read lots and lots of irrelevant content on Wikipedia in order to become the most knowledgeable human being on this planet. Indulge in social networking. Increase your online social network in an area which has all useless people. Spend time with them. See how they teach you unique ways to kill time.  Have fun and live life but don’t design!

Warning: Social Networks and online Encyclopedias are full of useful information. The point is that some might be good for you while the rest might be useless. It is up to you to decide what suits you the best.

Conclusion


I can go on and on with such ideas but I guess I have shown you the path. You got to start running and discover more by yourself. Remember, don’t come to me when you find out that you already lost a month of precious time after you took this article seriously. I already have the warnings and the disclaimer saving my …

November 07 2011

07:00

Create a Typography Based WordPress Blog Theme

Over the past couple of weeks I’ve posted the design process of my latest WordPress theme. We’ve gone through the Photoshop design stage, the HTML5 and CSS3 coding stage and now we’ll go through the templating stage to finish off the Typo design as a fully working WordPress theme.

Typo WordPress theme demo

Revisit last week’s tutorial to see the coded prototype. Since that tutorial I’ve made a couple of little tweaks here and there, including support for Internet Explorer. If you’re new to the series the WordPress theme we’re creating is called Typo. It’s a design that’s entirely based on typography to allow the content to shine. To allow the design to work without the use of any graphical interface elements it is based on a strict grid to balance the design and tie everything together.

View the final WordPress theme demo

The WordPress template files

Being a pretty simple design we’ll be creating the theme with the usual group of template files. Our static HTML5 prototype file will be split up across these template files in order to create the various WordPress page types. All the image and CSS files are also copied over to the WordPress theme folder.

Style.css template file

The CSS styling from the static prototype is pasted into the WordPress style.css file, then a series of theme details are added to allow the theme to be recognised by WordPress.

Header.php template file

View the annoted code

The first portion of code from the prototype index.html file is copied into the header.php file. Everything from the Doctype to the end of the <head> is placed in the header.php file, then additional WordPress template tags are added to provide extra functionality or to replace sections of static code that need to be dynamic. Examples include <?php wp_title();?> to render the post or page title and <?php wp_list_pages('title_li=' ); ?> to display a list of all the pages. The title_li parameter removes the default setting that renders a “Pages” heading above the list.

Index.php template file

View the annoted code

The HTML code from where we ended with the header.php file is then copied right down to where the sidebar begins, then the WordPress loop is added to check for content. Our static HTML file includes three dummy posts, but these can be removed as WordPress will use the same layout for each post found using the code between the while and endwhile tags. Inside this loop the HTML structure still exists, but elements that need to be dynamic are swapped for the relevant WordPress PHP tag, for instance <?php the_permalink(); ?> will render the URL of the post inside the anchor and <?php the_category(', '); ?> will insert a link to the post’s category. All the dummy content from the HTML file can be swapped with just one tag: <?php the_content(''); ?>. WordPress will insert all the content saved in the database from the online editor in its place.
At the top and bottom of this file are calls to other template files in order to piece together a full page. <?php get_header(); ?> calls and inserts the header.php file while <?php get_sidebar(); ?> calls and inserts the sidebar.php file and so on.

Sidebar.php template file

View the annoted code

The next section of content from the HTML file is the sidebar area, between the two <aside> HTML5 tags. The same principle applies where any dummy content is swapped for a WordPress PHP tag to dynamically insert the content from the blog. Examples include <?php wp_list_categories(); ?>, with a series of parameters customising the layout. In this particular theme there’s a lot of custom tags used to allow the end user to personalise their theme using a special settings page. All the tags beginning with omr_ call for custom settings such as the About excerpt and social links. Check out BuildInternet’s handy guide to creating a custom settings page.

Footer.php template file

View the annoted code

The remaining code from the HTML file is then placed in the footer area. There’s no real dynamic elements in the footer, but an extra snippet of code that should be added is the <?php wp_footer(); ?> tag. This is where WordPress can insert any additional content from plugins, such as Javascript code.

Archive.php & Search.php template files

View the annoted code

View the annoted code

The main structure of the page is created using header.php, index.php, sidebar.php and footer.php, but the index.php file is only used on the homepage (if the homepage displays recent posts). Alternatives to the index.php file are used for different features of the blog, such as browsing posts based on a filter such as by category, by date or by author. Or when browsing posts based on a search result. This is where the archive.php and search.php files come into play. Their content is pretty much identical to the index.php file, except they have some additional titles to help describe the content that is being shown.

Page.php & Single.php template files

View the annoted code

View the annoted code

When a single post or page is viewed the index.php, archive.php or search.php files is switched out for either the page.php or single.php template files. These files are very similar again, but their layout often omits some features such as the anchor on the title, the post info, read more link and the pagination links as these are no longer required when the content is viewed individually. The single.php file also includes the comments section, which is called using the <?php comments_template(); ?> tag.

Comments.php template file

View the annoted code

The comments.php file is one of those files that you can re-use over almost every theme you make as it rarely changes. The whole comments list is created with one tag: <?php wp_list_comments(); ?>, then the actual content needs styling with CSS. The file then includes the comments form.

Finishing touches

Once all the template files have been created they can be installed and tested on a live WordPress blog. Now is the time to alter settings and add a range of content to test the theme works under a range of scenarios. I always create a post with a range of headings, blockquotes and lists to style up every potential piece of content.

The final theme demo

Typo WordPress theme demo

The whole process of building a theme basically involves pasting a bunch of template tags in between your HTML. Finding the correct tag to use is usually pretty simple thanks to the WordPress Codex which lists the the whole library of template tags available. Otherwise, using a blank dev theme can be useful so you can copy and paste snippets of code where you need them.

View the Typo WordPress theme demo

October 31 2011

07:00

Create a Typography Based Blog Layout in HTML5

Last week I posted part one of this tutorial series covering the process of creating a typography based blog design in HTML5 and CSS3. We finished off the Photoshop concept with the design based on a strict grid and text laid out in our desired typeface. Now let’s replicate the design in a static HTML5 and CSS3 prototype before finishing it all off as a fully working WordPress theme.

View the Typo blog design Photoshop tutorial

Head back to last week’s tutorial post if you want to follow the step by step process of building this design in Photoshop. The WordPress theme we’re creating is called Typo. It’s a design that’s entirely based on typography to allow the content to shine. To allow the design to work without the use of any graphical interface elements it is based on a strict grid to balance the design and tie everything together.

View the Typo blog design Photoshop tutorial

Preparing the concept

With this design being pretty minimal and largely typography based there’s not much in the way of background image files that need exporting. The only files we’ll need to save are the background texture file and a couple of icons. However, to make life easier while coding up the design we can also export copies of the columns and grid lines so we can quickly align our elements.

This particular layout will be built with HTML5 elements, so it’s important to take a moment to familiarise yourself with the elements and check whether they fit into the layout semantically.

The HTML5 Structure

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Typo</title>

<link href="style.css" rel="stylesheet" />

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

<script src="js/scripts.js"></script>
</head>

<body>
<div id="container">

The static HTML file begins with a HTML5 Doctype and the usual content for the <head> section of the document, including the page title and link to the CSS stylesheet. Our design is using a somewhat unusual font courtesy of Google’s Web Fonts library, so the relevant code is also added. It’s important not to just straight swap your <div> tags for <section> tags when coding in HTML5, sometimes a <div> is still the most semantic choice, like when adding a wrapper or container div to your code.

<header>
	<h1><a href="#" title="Return to the homepage">Typo</a></h1>

	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Archives</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</header>

One new HTML5 element we can make use of in place on a standard div is the <header> element, which can also contain a <nav> element to wrap our main navigation menu. The h1 is marked up as the blog title, with a handy anchor title describing where the link goes. If you remember in our concept we numbered the menu items, an obvious option would be to use an <ol> element, but semantically this isn’t correct because there’s no consecutive relationship between our menu links, the number is just for visual flair so we’ll add them later with CSS.

<div id="content" role="main">
	<article>
		<h2><a href="#">Getting your stock photos seen</a></h2>

		<p>Lorem ipsum dolor sit amet[...]leo placerat.</p>

		<ul class="postinfo">
			<li>17th October 2011</li>
			<li>Posted in <a href="#">Articles</a></li>
			<li><a href="#">Continue Reading &raquo;</a></li>
		</ul>
	</article>

I originally used a <section> element to contain my page content, but after some reading it turned out this wasn’t 100% semantic. The preferred method would be to use a plain old <div>, but the addition of the ARIA role attribute of ‘content’ gives a little extra meaning to the tag. Inside the content area each blog post can be contained in its own <article> tags with the usual HTML elements mocking up the dummy content.

	<nav id="pagination">
		<ul>
			<li class="older"><a href="#">&laquo; Older posts</a></li>
			<li class="newer"><a href="#">Newer posts &raquo;</a></li>
		</ul>
	</nav>

</div>

Underneath the series of blog posts is a couple of pagination links. Usually pagination links wouldn’t qualify as being important enough for the <nav> element (which can be used in multiple places, not just for the main menu), but for a blog layout I see pagination links as one of the primary navigation elements to access further content.

<aside id="sidebar">
	<section id="about">
		<h3>About me</h3>
		<p>Typo is a WordPress theme based entirely on a balanced typographic design. A strict grid layout keeps everything tidy, allowing the content to shine. <a href="#" class="more">Find out more &raquo;</a></p>
	</section>

	<section id="categories">
		<h3>Categories</h3>
		<ul>
			<li><a href="#">Articles</a></li>
			<li><a href="#">Design</a></li>
			<li><a href="#">Graphics</a></li>
			<li><a href="#">Inspiration</a></li>
			<li><a href="#">Retro</a></li>
		</ul>
	</section>

Until the <aside> spec was revised it didn’t have a semantic use as a sidebar, but it can now be safely used without the semantic police knocking at your door. The sidebar in this design contains a number of various sections, which lend themselves well to being marked up with <section> tags over plain old divs.

	<section id="search">
		<h3>Search</h3>

		<form method="get" action="#">
			<fieldset>
				<input type="text" id="searchbar" placeholder="I'm looking for&hellip;" />
				<input type="submit" id="searchsubmit" value="Search" />
			</fieldset>
		</form>

	</section>

</aside>

At the bottom of the sidebar is a simple search bar, which allows us to touch on some of the handy new form related features in HTML5. The one feature we can make use of is the placeholder attribute, which allows us to enter a passage of text to create the popular in-field label effect.

</div>

<div id="footer-container">
	<footer>
		<ul id="credits">
			<li class="wordpress"><a href="http://wordpress.org">Powered by WordPress</a></li>
			<li class="spoongraphics"><a href="http://www.blog.spoongraphics.co.uk">Theme by SpoonGraphics</a></li>
		</ul>

		<p id="back-top"><a href="#">Back to top</a></p>
	</footer>
</div>

The layout is then finished off with the footer area, which in the case of this design needs to be outside of the main container area to allow it to span across the whole page. The footer area itself fits well as a <footer> element and contains a couple of handy links.

The full HTML layout

View the full annotated HTML5 code

View the full annotated HTML5 code

The CSS Styling

With the HTML structure in place the document can now be styled to match the Photoshop design concept.

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #dedede url(images/bg.jpg);
	font-family: 'Droid Serif', serif; font-size: 14px;
	line-height: 24px;
	color: #666;
}

a {
	color: #4b7ea9; font-style: italic;
}
	a:hover {
		color: #105896;
	}

header a, h2 a {
	color: #666; font-style: normal; text-decoration: none;
}

#container {
	width: 916px; margin: 0 auto; padding: 48px 22px 0 22px;

	background: url(images/grid.jpg); overflow: hidden;
}

The CSS file begins with a simple reset, then the global styling is added to the body. The Google Web Fonts code has already been added to the HTML, so our desired font can be called directly in the CSS. The subtle texture background is added and the body text styling set to 14px #666 with a 24px line-height to match the baseline grid. Global link styling is set up, but is removed from links in the header and blog post H2 titles to match the concept. The container div is then centred up and a temporary grid image added as a background to make it easy to line up page elements according to the original grid based design.

header {
	margin: 0 0 98px 0;
}

	header h1 {
		float: left; font-size: 36px;
		font-weight: normal;
	}

	header nav {
		float: right; text-align: right;
		padding: 6px 0 0 0;
	}
		header nav ul {
			list-style: none;
		}
			header nav li {
				float: left; font-size: 18px;
				width: 136px; margin: 0 0 0 20px;
			}

			header nav li:nth-child(1):before {
				content: "1. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(2):before {
				content: "2. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(3):before {
				content: "3. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(4):before {
				content: "4. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(5):before {
				content: "5. ";
				color: #a2a2a2;
			}

Margins and padding are used to line up the elements according to the grid lines, with random figures like 98px being needed to ensure everything lines up correctly. Making live adjustments with the help of plugins such as Firebug is much easier than confusing your brain with complex calculations. Earlier we talked about those visual numbers next to the menu items. They aren’t anything important so they can be added using CSS so they don’t actually appear in the HTML markup, this is done using :nth-child and :before selectors to add the numbers using the content property.

#content {
	float: left; width: 526px;
	margin: 0 98px 0 0;
}

	#content article {
		margin: 0 0 67px 0;
	}
		#content article h2 {
			font-size: 30px; margin: 0 0 29px 0;
			font-weight: normal;
		}

		#content p {
			margin: 0 0 24px 0;
		}

		#content .postinfo {
			list-style: none; overflow: hidden;
		}
			#content .postinfo li {
				float: left; width: 136px; margin: 0 20px 0 0;
				font-style: italic; color: #a2a2a2;
			}

#pagination {
	overflow: hidden; margin: 0 0 120px 0;
}
	#pagination ul {
		list-style: none;
	}
		#pagination li {
			font-size: 18px;
		}
			#pagination li.older {
				float: left;
			}
			#pagination li.newer {
				float: right;
			}

The CSS to style up the dummy blog posts is then added, starting with the content div. A width is calculated according to the columns and gutters, which when combined with the width of the sidebar and any margins equals the width of the container div. The font styling of the H2 elements is added and margins used to keep everything tight to the baseline grid.

#sidebar {
	width: 292px; float: left;
	padding: 4px 0 0 0;
}
	#sidebar h3 {
		font-size: 18px; font-weight: normal;
		margin: 0 0 25px 0;
	}		

	#sidebar ul {
		list-style: none;
	}

	#sidebar section {
		margin: 0 0 47px 0;
	}

	#sidebar #about a.more {
		display: block; text-align: right;
	}

	#sidebar #categories {
		width: 136px; float: left;
		margin: 0 20px 0 0;
	}

	#sidebar #social {
		width: 136px; float: left;
	}

The sidebar element is then floated alongside the main content div and any content not already styled is given treatment to match the Photoshop concept. Some sidebar elements such as the categories and social links and placed side by side, so specific widths are added according to the grid.

#sidebar #search #searchbar {
	width: 230px; height: 36px; float: left;
	border: 1px solid #c7c7c7; padding: 0 45px 0 15px; margin: -8px 0 0 0;
	background: #e2e2e2; /* Old browsers */
	background: -moz-linear-gradient(top, #e2e2e2 0%, #ffffff 16%); /* FF3.6+ */
	background: -webkit-linear-gradient(top, #e2e2e2 0%,#ffffff 16%); /* Chrome10+,Safari5.1+ */

	font-size: 14px; font-style: italic; color: #a2a2a2;
}
	#sidebar #search #searchsubmit {
		width: 17px; height: 17px; float: right; margin: -27px 15px 0 0;
		background: url(images/search-icon.png); text-indent: -9999px;
	}

The search bar in the concept is the only element with visual styling other than typographic tweaks. The gradient effect added to the sidebar can be easily replicated with CSS gradients, whereas the small icon image can be quickly added with good old image replacement techniques.

#footer-container {
	background: rgba(0,0,0,0.2);
	overflow: hidden;
}
	footer {
		width: 916px; margin: 0 auto; padding: 10px 22px 50px 22px;
	}
	footer #credits {
		list-style: none; float: left;
		}
		footer #credits li {
			float: left; margin: 0 6px 0 0;
		}
			footer #credits li.wordpress a {
				display: block; width: 20px; height: 20px;
				background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px;
			}
			footer #credits li.spoongraphics a {
				display: block; width: 25px; height: 20px;
				background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px;
			}

		footer #back-top {
			float: right; font-size: 12px;
		}

The footer area of the design is filled with a darker texture, which can be replicated with CSS using the RGBa color mode with a 20% alpha opacity on a black fill. The footer-container div will span the full page, so the footer div requires new widths and margins to match the main content container area. Finally the footer credits are added using image replacement techniques and the back to top link is moved into place with a right float.

The full CSS stylesheet

View the full annotated CSS stylesheet

View the full annotated CSS stylesheet

The Final HTML5/CSS3 Prototype

View the HTML5/CSS3 prototype

The final working prototype is now ready for testing before the design is converted into a full WordPress theme. Everything appears to be working as it should in Firefox, Safari and Chrome, and unbelievably IE9 has no problem rendering those HTML5 elements too. Some additional work is required for Internet Explorers 7 and 8, but I’ll save those for a rainy day.

View the HTML5/CSS3 prototype

October 24 2011

07:00

Create a Typography Based Blog Design in Photoshop

The tutorial posts where I go through the process of creating a complete WordPress theme from Photoshop concept right through to coding the template files always go down well, so let’s start with another tutorial series based on my latest WordPress theme design. Follow this tutorial where we’ll lay out a typography based blog design over a strict underlying grid, then stay tuned for the next tutorials where we’ll build the concept into a HTML5 prototype then finish it off as a fully working WordPress theme.

Typo WordPress Theme design

The WordPress theme we’ll be creating this time is called Typo. It’s a design that’s entirely based on typography to allow the content to shine. To allow the design to work without the use of any graphical interface elements it will be based on a strict grid to balance the design and tie everything together.

View the Typo WordPress theme concept

Before getting started with our design we need to set up a grid system in our Photoshop document. I have a ready made grid document using 12 columns from the handy generator at grid.mindplay.dk. I also created a pattern overlay to lay out a 24px baseline grid.

Fill the background layer of the Photoshop document with a light grey, then add a couple of percent of Noise (Filter > Noise > Add Noise). Change the settings to Gaussian and Monochromatic.

Save one of the handy seamless paper texture files from LostandTaken and open it up into the website design document. Position it in the top left corner.

Desaturate the texture, change the blending mode to Darken then adjust the levels to brighten up the image to match the lighter grey background, allowing the details of the texture to add to the noise of the background.

This design is going to be entirely made up of typographic elements, including the logo. We’ll be using Google Web Fonts later in the series so for now we can mock up the layout using the chosen typeface, which in this case is Droid Serif.

Lay out the navigation links according to the grid columns and baseline. Number each link for a touch of style, then adjust the colour of the number so it’s not as prominent.

Leave plenty of white space before moving onto the main content. The heading of the blog post is an important element so choose a larger font size.

Drag a text box to create a passage of dummy text. 14pt makes for a comfortable size for body text, with 24pt leading to match the baseline.

Any links in the document should be easily identified, so mock these up with a blue fill, italic styling and an underline.

Group all the items that make up the first sample blog post, then duplicate the group and align the post underneath the original leaving a few lines of white space between them.

At the bottom of the document add a couple of links to previous and next pages. Use the same link styling but increase the size to give these elements more prominence.

Begin adding the sidebar content in line with the main content using the same baseline grid lines. The sidebar headers aren’t as important, so a smaller font size can be used to continue the hierarchy of the page elements.

Some lists of links can be doubled up next to each other while adhering to the grid layout, while others will span over multiple columns.

Fill a rectangle to create a search box element. The search feature is one of the only elements where styling beyond the basic typography is required to make it easily recognisable.

Double click the search box layer to add some Layer Styles. Add a subtle Inner Shadow, a light grey Color Overlay and a thin 1px grey stroke.

Align the label text inside the search box with the baseline grid. This will imbalance the vertical margins so we’ll have to break the grid to cut the search box down to size for the spacing to match.

To the right of the search bar add a stroke to a small circle to create a magnifying glass icon. Finish it off with a 5px diagonal line to represent the handle.

When viewed without the baseline grid the search bar looks perfectly balanced. Elements like buttons and search bars often need sizing outside of the grid to allow the enclosed text to remain on the grid lines and still appear balanced.

Finish off the page with a black border along the bottom edge. Fill a selection that matches the height of two baseline grid lines. Change the blending mode to Overlay.

Add some small elements to the footer area to finish off the overall page design.

Despite only using typographic elements without any kind of interface or images the page still appears interesting and inviting thanks to the baseline grid that ties everything together.

Typo WordPress Theme design

Without the gridlines the page elements balance nicely to give a well laid out design with plenty of white space around each section. The hierarchy of the titles and headings help draw the users eye to the most important information, while the blue links immediately show what’s clickable.

View the Typo WordPress theme concept

September 29 2011

13:32

Conversation Techniques For Designers





 



 


Conversation Techniques for Designers

Designers are visually literate creatures. We use visuals to express our ideas, whether by building wireframes, sketching interfaces or pushing pixels. As a result, the majority of knowledge captured when we design a product is some form of “corporate memory”: a combination of assets and documentation. This creation of visual artifact is widely regarded as our most effective means of communicating thought through a product. However, creating a product takes more than just documentation, and much of it is communicated not visually, but verbally.

Product design and development is a combination of creativity and analysis. But it depends on communication.

– Michael Bremer

Why Are Product Conversations Important?

Due to the growing popularity of iterative product development, the spoken word has become an integral part of the design process. The shift in focus from documentation to collaboration has put greater emphasis on communication. Now more than ever, there is a need to articulate a design “voice” during the early stages of conversation about a product, and to maintain it throughout the process — although this is easier said than done. While conveying one’s findings and opinions in discussion is important for designers, deciding what to say and how to say it often proves difficult.

Because team members and stakeholders sometimes hold different opinions on a product, navigating these conversations can be quite challenging. This social facet of designing digital products has been described by Löwgren and Stolterman (PDF) as follows:

If a design process aims to create an information system in an organization, then individuals, groups, and teams can be seen as kinds of material. The challenge is to design the social “components” together with the technical components as a systemic whole.

Influencing the Product Conversation

The extent to which design is embraced in a project varies greatly. At an organizational level, it is influenced by numerous factors, such as the company’s culture, leadership and strategy. At a product level, one could argue that it is largely determined by the team itself. That being said, teams often struggle to discuss the subtler, more experiential aspects of their digital products. As a result, technical terminology can dominate the conversation, prematurely steering the conversation towards “How should we do this?” without giving adequate consideration to “What should we do?” and “Why should we do it?,” thus minimizing the influence of design early on.

To avoid this trap, good designers need to become good conversation starters. By developing our conversational skills, we become better equipped to discuss the conditions required for a great user experience and to influence any decisions that affect it. Maintaining a healthy dialogue on design is important also because the conversations that are conducted as the product is being created will influence the implicit “conversation” that the product will have with the user. Tim Leberecht of Frog Design highlights the importance of conversation to both the design process and the product experience itself, by suggesting that designers should focus on…

… creating a memorable, auratic and yet reproducible experience for consumers. Conversations are part of this experience; they are integral to the “aura.” Designers visualize it. They unearth, discover, and articulate the consumer stories. They invent the product stories. And then they connect both.

In this article, we’ll examine the role of conversation in the design process, and how the words we use shape the products we ship. We’ll outline nine ways by which designers can maintain a consistent design conversation during a project, helping to create a better product.

Get T-Shaped

Get Multilingual

Better collaboration leads to better products. Designers need to ensure that they can communicate effectively with their team members from various other disciplines. To do this well, familiarize yourself with the kind of language used in each discipline, such as business and engineering. Being able to conduct a conversation using the appropriate vocabulary enables you to find out what you need to know faster, and it helps to establish your credibility on the team.

While each discipline on the product team has its role to play, it is the true teamwork and collaboration of a cohesive product team that makes great user experiences possible.

– Pabini Gabriel-Petit

Designers should also be knowledgeable across the various domains that an issue spans within a project, which will give them a broader perspective on the problem they’re trying to solve. Tim Brown of IDEO maintains that designers should try to become “T-shaped.” This is achieved by cultivating deep analytical skills (the vertical stroke of the T), as well as broad empathy towards the other skills and disciplines encountered in business (the horizontal stroke of the T).

Familiarity with the dialects of various disciplines is important not only in a practical sense, but strategically, too. At a recent AIGA event, it was suggested that it is up to designers to learn the vocabularies needed to be able to communicate the value of design to business managers and executives. In doing so, designers will better justify their representation in the boardroom in future. By becoming skilled communicators and demonstrating the value of design, we increase the likelihood of this happening. Aspiring Chief Experience Officers (CXOs), take note.

In assuming the role of “generalizing specialist” on a multidisciplinary team, designers establish a clearer picture of the problem and the means to address it. They also become armed with the necessary vocabulary to communicate with all those involved in the project.

So, don’t retreat into a silo. Get T-shaped!

Ask The Simple Questions

Ask The Simple Questions

Question everything generally thought to be obvious.

– Dieter Rams

We often forget that simple questions are a powerful way to spark conversation. Designers sometimes back away from asking such questions, for fear of coming across as poorly informed. Canadian designer Bruce Mau describes it thus:

The fear for so many people is that, in asking these kinds of questions, they will appear naïve. But naïvety is a valuable commodity in this context. Naïvety is what allows you to try to do what the experts say can’t be done.

Apparently stupid questions can lead to illuminating discussion. At the outset of a design process, asking such questions is especially important, because they provoke a deeper consideration of the purpose of a product. In this situation, the onus is on the designer to put forward these questions. You might be surprised by the assumptions of stakeholders and, more importantly, by how enlightening it is to question them. Question absolutely everything, especially those things that are considered obvious.

  • Who is this product for?
  • What problem is this solving?
  • Is this really a problem?
  • Are we trying to do too much?
  • Is this feature for you or our users?
  • Do you think this solution is good enough?

A good team will always appreciate a thorough approach and a close examination of its strategy. Try to avoid posing elaborate questions that imply the answer you are looking for. Instead, formulate your queries to spark a conversation and to discourage monosyllabic responses. Both stakeholders and users can reveal a lot by answering such disarmingly simple questions. Nobel Prize-winning physicist Richard Feynman, one of the brightest minds of the 20th century, was a great believer in the value of asking dumb questions. He encouraged people to question accepted solutions and to be unafraid to look ridiculous.

Asking the “stupid” questions is one of the smartest things a designer can do. But be respectful and tactful in how you go about it.

The only stupid questions are the ones you don’t ask.

Define the Problem, Continually

Define The Problem, Continually

When you start with the idea of making a thing, you’re artificially limiting what you can deliver.

– Peter Mehrolz in “Experience Is the Product

In order to solve a problem, you must first define it. Such an assertion might seem obvious, but you’d be surprised by how many people fail to recognize this. When a project commences, there is often a tendency to start designing a solution without having thoroughly discussed the problem itself. Basing a product’s direction on a set of assumptions or hunches is a very risky strategy, often resulting in a design that fails to address the user’s needs. Luke Wroblewski notes:

In many organizations, [the] problem is defined with a written or numerical representation of a market opportunity. Think business model, business requirements document, etc. While these documents are great at defining the aspirations (or net present value) of a product, they rarely fully define the problem a product team needs to address.

By diving headfirst into a solution, a team might find it difficult to overcome the oversights that they failed to recognize early on in the process.

Learning what the problem is rests on the designer’s shoulders. It’s your responsibility to ensure that the problem that a product aims to solve is discussed in depth at the start of the project. In addition, there should be a continuing conversation to evaluate the problem as it is being addressed. This is necessary because a lot can change during a project. A team will often lose sight of these changes, so make sure you don’t. If this does happen, adjust your approach accordingly, and discuss the changes with the team.

Noted design thinker Horst Rittel once wrote:

A design problem keeps changing while it is treated, because the understanding of what ought to be accomplished, and how it might be accomplished is continually shifting. Learning what the problem is is the problem.

By conducting an open conversation on the problem throughout the project, the designer ensures that all new information that affects the situation is quickly shared and absorbed into the solution.

Problems change — this is inevitable. Plan for it.

Find The User’s Voice, Then Use It

Find The Users Voice, Then Use It

Don’t confuse yourself with the user, and don’t confuse the user with the customer. It’s not uncommon for a team to lose sight of who exactly they are building a product for. Marty Cagan of SV Product Group wrote an excellent article highlighting typical product management mistakes. To find your user’s voice is to develop empathy for them and understand their situation. For if you don’t understand your users, then you likely won’t fully understand their problems.

We systematically overestimate the value of access to information and underestimate the value of access to each other.

– Clay Shirky

The phrase “going native” is often used by anthropologists and ethnographers to describe their immersion in a user’s environment. One of the pioneers of user-centered design was industrial designer Henry Dreyfuss (author of Designing for People, which came out in 1951). When commissioned by the company Singer back in the ’60s to design a new sewing machine, he and his team enrolled in an intensive sewing class. He knew that if he was to design a better machine, then he needed to know exactly what operating one felt like. The lesson here is that rolling up your sleeves and putting yourself in your user’s world has no substitute; it’s one of the most effective ways to develop a sense of who they are and what their problems might be.

Where resources allow, conduct research to find out more about the people you are designing for. When possible, get out of the office, spend a day on site, and put yourself in the user’s environment. Find out what they do and how they do it, and observe their daily routine. By doing this, you will gain insight into how the product might fit into their life and find meaningful ways it could assist them. If the nature of the product or budget constraints do not allow this, then spend a day conducting one-on-ones with prospective users. And if that is not possible, then at least carry out telephone interviews or Web-based surveys.

Designers are responsible for introducing the user’s “voice” into the design process. When required, we should act as a conduit for the user, voicing opinions from their perspective. By understanding their problems and regularly weaving their voice into the conversation, we can help ensure that the user’s needs stay central to the process.

Know whose problem you are solving, and speak on their behalf.

Tell a Story, Sell a Story

Tell A Story, Sell A Story

To be a designer is to be a storyteller. Everything we produce has a narrative, whether accidental or intentional. Because design at its core is concerned with communication, storytelling is a natural extension of any thorough design process.

Stories reveal a user’s-eye view of the landscape and provide an extremely effective way for getting people, both users and designers, involved and talking with one another.

– Tom Erickson

Sometimes, a lack of a coherent vision can run a project askew. Joseph Selbie observed the following, based on his firm’s study of in-house Web design teams:

Members of teams performing less well not only tended not to understand the application as a whole, they saw no need to understand it as a whole: programmers did not care to know about users, user researchers did not care to know about programming limitations, and stakeholders were uninvolved and were considered “clueless” by the rest of the development team.

Communication breakdowns such as this are a recipe for disaster.

To prevent these situations, designers can call on storytelling as a means of optimizing collaborative effort and understanding among team members. Compelling stories can clarify the direction of a product and strengthen a team’s empathy with users. In sharing a narrative, all parties have a cohesive vision of the project’s goals and, as a result, are more likely to create a better product.

In his excellent essay “Design as Storytelling,” ex-Apple researcher Tom Erickson notes the following:

Stories are a sort of equalizer. It doesn’t require much expertise or training to listen to and tell stories. Team members from any background can be made part of the process of telling and collecting stories. And once stories have been gathered, team members can discuss the stories, argue about their interpretation, and generate hypotheses about users’ problems, needs and practices.

By reducing the mystery of the disciplines involved in a project and putting focus on what needs to be built, a story helps to establish a common language among everyone involved.

Cindy Chastain also highlights the need for such an approach in her article “Experience Themes,” in which she expands upon the storytelling process and explores how innate characteristics such as pleasure, emotion and meaning can be infused into the product experience.

Storytelling doesn’t just describe relationships: it also helps to build them. Try to translate your stories into the priorities of your users and weave them into your product. While the methods and materials of design give form to a digital product, Roger Sametz and Andrew Maydoney argue that the ultimate goal of manipulating type, color, imagery, space and time is to tell stories, “to engage ‘teller’ and ‘listener’ in a dialogue that builds comprehension, commitment, participation, loyalty and trust.”

Employ storytelling methods not only to strengthen the team but to strengthen the product’s relationship with its users.

Express Your Doubts

Express Your Doubts

If a man will begin with certainties, he shall end in doubts. But if he will be content to begin with doubts, he shall end in certainties.

– Francis Bacon

Doubt may seem like an unusual quality to voice in any product conversation, but it is essential for designers. Positive doubt is the beginning of wisdom, not the end of it. To be able to investigate and synthesize effectively, you must first remain open to all possibilities. Doubt calls on reason, encouraging the application of more rigorous evaluation methods. Questioning assumptions ensures that potentially unusable or redundant features are carefully filtered. It encourages a more thorough exploration of a concept, a product and its goals.

Gordon MacKenzie, author of Orbiting the Giant Hairball cites “attachment to outcome” as one of the biggest obstacles to creativity. As soon as you become attached to a particular outcome, you feel compelled to control and manipulate what you’re doing; and, in the process, you shut yourself off to other possibilities. Milton Glaser observes the same:

Doubt is better than certainty, If you think you know everything, you’re wrong. Rather doubt your abilities a little to give yourself room for improvement, but don’t doubt them so much that you’re too scared to try.

The designer’s responsibility is to ensure that many possibilities are explored and tested — prototypes are your friend. “Pet” functionality often lingers in products without adding value. Don’t be afraid to test the viability of such features and to eliminate them when necessary. Bear in mind that stakeholders sometimes need to see a bad idea realized in order to realize that it’s a bad idea.

Voicing concerns over whether a product is “good enough” isn’t whining. It simply demonstrates that you actually give a darn and that you possess the ability to recognize quality in your craft. Don’t compromise: view conversations as opportunities to refine and improve the product.

If you think something is not right, speak up and explain why.

Inform Your Intuition

Inform Your Intuitions

Designers will have to learn a foreign language to win them [managers, business analysts and developers] over. That language is data.

– Louis Rosenfeld

During product discussions, designers will regularly contribute opinions on the spot about various aspects of a design. If this occurs too early in the process, though, the information available to inform the decision might be limited — and so our intuition comes into play.

A designer’s intuition is developed over time through a combination of knowledge and experience. We can use this intuition to make the quick decisions that are often required during a design process. However, intuition-based decision-making is potentially problematic in team situations, where decisions usually need to be made collectively. If other people disagree with your choice, you cannot simply state that your intuition is more relevant or valuable than that of others.

In this situation, designers can use analytical methods to inform their decisions. Some relatively quick techniques exist to gather data, such as A/B testing and user surveys. The results of these can be interpreted and used to support your argument — when they actually do support it.

Nevertheless, striking a balance between data and design is important. Data should inform the process, not dictate it — otherwise, every product would be designed by statisticians! Adam Mosseri, a product designer at Facebook, gave an enlightening presentation on the subject called “Data-Informed, Not Data-Driven.” He details how Facebook intelligently interprets its vast amount of data but doesn’t allow itself to become a slave to it. James Landay, a researcher with Microsoft, sums up this need to compromise by calling for…

… a balance between analytical approaches to design (e.g. computer science, data mining and quantitative HCI experimentation) and more design-oriented approaches that are good at creating products that make an emotional impact on people and create a desire to own them.

The difficulty with pushing certain recommendations about the user experience of a product is that not everyone will always agree. When discussing a design, use soft words and hard arguments to confidently communicate your view. Where necessary, use data to support your intuition, but never blindly follow it through the process.

Great products are designed by people, not pivot tables. Never let anyone convince you otherwise.

Explain Your Decisions

Explain Your Decisions

Designers get up in front of people and explain why they’ve made the decisions they’ve made. And if you can’t do that, you can’t call yourself a designer.

– Mike Monteiro

Designing a digital product requires many decisions to be made. Collaborative decisions will be made via numerous media, such as meetings, instant messaging, email and even informal chats over lunch. Designers will also make many decisions independently, based on their own research and intuition. Over the course of a project, these decisions combine to form a long chain of interconnected thoughts, as the product begins to take shape. Keeping a mental record of all of this information is not feasible, because we would forget why certain decisions were made.

Kees Dorst captures the situation in Understanding Design:

Every designer knows the moments of complete disorientation while leafing through piles of sketches (What was the reason for this!).

To avoid this scenario, keep track of decisions and the reasons they were made, so that you can explain them when required. Simple annotations on wireframes might be sufficient to jog your memory.

  • “We chose this approach because…”
  • “The team preferred this concept because…”
  • “I decided to place this here because…”
  • “Users prefer this method because…”
  • “This prototype was deemed least usable because…”

When presenting a design, whether to an internal team or to a client, discussing the evolution of the product is sometimes useful. Avoid the lure of the Ta-dah! moment, revealing a concept without any context. Instead, introduce the work and briefly explain how you arrived at it. Engage your listeners.

A record of decisions is also useful when reviewing a project. If a stakeholder comes along in six months and asks, “Why were radio buttons used here instead of a drop-down menu?”, or “What happened to the mock-up that had modal error messaging instead of a status bar?,” you’ll need to have an answer. These conversations will be a lot more amicable if you can explain why those choices were made. Having a simple log on hand of those long-forgotten decisions can be invaluable.

Explain your decisions. Transparency will bring people on board.

Embrace Failure

Embrace Your Failures

Failing sucks; there’s no getting around it. Having said that, no one should ever be ashamed of failing. If you’ve never failed, then you probably haven’t achieved much either — unless you’re one of the lucky ones. A designer will experience various kinds of failure in their working life, some small and easily rectifiable, others large and valuable in their lessons.

If a product or even a feature is rejected, yet the team is still functioning as a unit, that in itself should be considered a small victory. Many successful designers in all disciplines often recall the many false starts and dead ends they had to experience before finding a great solution.

I made 5,127 prototypes of my vacuum before I got it right. There were 5,126 failures. But I learned from each one. That’s how I came up with a solution. So I don’t mind failure.

– James Dyson

When something is rejected, try not to sweep it under the rug — only then would it become a true failure. Avoid pointing fingers and attributing blame. Instead, focus on the product and the ways in which it failed to deliver. Get the team together, put your product up on the autopsy table, and ask the difficult questions.

  • Why did users reject this product?
  • Why did this feature tank in our usability testing?
  • Was this the right feature in the wrong place?
  • Was it the right product at the wrong time?
  • How can we avoid making the same mistakes again?

Nothing is morbid about conducting a post-mortem, as long as you identify the probable cause of death. You may never know for sure which factors contributed to the product’s downfall, but you will have a good idea. Learn from them. Ryan Jacoby recently suggested that in order for designers to get it right, they need to be “interested in being wrong.” He goes on to say:

Great designers and innovators see evaluation moments as learning opportunities. They couple confidence with humility and curiosity.

This captures well the incessant curiosity and mental dexterity of a good designer — traits that enable us to learn from our mistakes.

By conducting a frank conversation on the product and its shortcomings, designers can turn a negative situation into a positive one. The experience and insight gained will help you avoid similar errors in judgement in future projects. When the critique is complete, chalk it up to experience and move on.

Failure is probably the most expensive form of feedback you’ll ever get, but also the most valuable. Make sure to use it.

Conclusion

The path of every project will be unique, as will be the conversations that guide it. What we can do, however, is plan for more productive conversations, using approaches such as the ones explored above to guide the process along. The examples provided are but a few of the many conversations we can have while working on a product — they are not a bulletproof formula. Over time, a designer will learn to cultivate the conversations that they feel are necessary — and these will likely vary from project to project.

While a certain amount of solid documentation will always be needed, it is less important now than it may have been in the past. A 10-minute chat in the hallway today will often prove more informative and productive than a 20-page document next week. Fast iteration demands clearer lines of communication. By becoming keener listeners and speakers, designers can help secure the information and decisions that are needed to advance the product in the right direction.

Remember: there is no formula for a great solution, but rather many paths. Nevertheless, clear communication can make the path smoother and the solution smarter.

Related Articles

Related Books

  • Designing for People, Henry Dreyfuss
  • Orbiting the Giant Hairball, Gordon MacKenzie
  • Inspired: How to Create Products Customers Love, Marty Cagan
  • Storytelling for User Experience, Whitney Quesenbery and Kevin Brooks
  • Understanding Design, Kees Dorst

Illustration by Damien Weighill, in collaboration with Blast Design, for Conqueror: Endless Possibilities

(al)


© Darren Geraghty for Smashing Magazine, 2011.

September 05 2011

07:00

How To Create a Simple WordPress Blog Theme

So far in this WordPress theme tutorial series we’ve put together a visual concept in Photoshop and coded up a working prototype in HTML and CSS. Now let’s take our static web page files and create a fully working WordPress theme by splitting up the code over the various template files and injecting the relevant WordPress PHP tags.

View the theme demo

The site we’re building is a WordPress theme called Ticket Stub. It’s based on the idea of movie review, but the clean layout and basic styling keeps it generic enough to be used for any topic.

View the final WordPress theme demo

WordPress template files

WordPress template files

A WordPress theme is made up of various PHP template files, each of which is called to render out a specific type of webpage. For instance the single.php file renders the blog post view, whereas archive.php renders lists of posts based on some kind of filter. In the case of this theme, we’ll be using the index.php, header.php, sidebar.php, footer.php, archive.php, search.php, 404.php, comments.php, single.php, page.php and functions.php files as well as style.css, our own CSS folder containing IE fixes and a special functions folder containing files to create an admin settings page.

Style.css template file

WordPress stylesheet info

The first step when creating any WordPress theme is to customise and set up the theme details in the style.css file. Paste in the entire CSS from the prototype, then edit the theme details. These details will show up in the themes section of the admin dashboard to identify the theme.

Header.php template file

View the annotated code

It makes sense to work from the top down, so open up your index.html prototype webpage and the header.php WordPress theme file. Paste in the contents of the index.html file from the top right down to where the main content begins. All we then need to do is replace key elements with WordPress tags, which inject the dynamic information when the page is viewed live.
Examples of these code snippets include <?php the_title(); ?> to render out each post or page’s title, <?php bloginfo('stylesheet_url'); ?> to insert the link to the WordPress stylesheet and <?php bloginfo('rss2_url'); ?> to insert a link to the blog RSS feed.
Elsewhere in the code, a spot of custom coding is added to allow for a logo to be selected via an admin settings page as this theme will eventually be made public.

Index.php template file

View the annotated code

The index.php is one of the core files that is called to render out a complete page. The index is usually used to display the blog homepage. The file begins with the tag <?php get_header(); ?>, which calls and inserts the contents of the header.php file in its place. At the bottom of the document are also tags to fetch the sidebar and footer, which when combined in the browser form the full web page.
Inside the content div the WordPress loop checks for content, then the following code is wrapped in a while statement which basically repeats for each post found. The HTML that makes up the blog post intro is pasted in, then key elments are replaced with WordPress tags to allow the content to be dynamic. So <?php the_permalink(); ?> inserts the link to the post, <?php the_title(); ?> inserts the post title and <?php the_content(); ?> inserts the actual post content.
Some tags have special parameters that allow you to control or edit how the tags works. An example is the previous and next links within the pagination section. The text used in these tags can be controlled by entering new content between the brackets.

Sidebar.php template file

View the annotated code

The next file to be called near the bottom of the index.php file is the sidebar. All the HTML from the prototype from the bottom of the content down to the footer is pasted into this sidebar.php file. Tags such as <?php wp_list_pages(); ?> and <?php wp_list_categories(); ?> are used to list out the pages and categories stored in the WordPress install. These two tags also have a range of parameters to customise their appearance. title_li= removes the default heading above the list, show_count=0 removes the post count from beside each category, hide_empty=0 shows the category even if it has no posts and exclude=1 hides the default “Uncategorized” category from the list.

Footer.php template file

View the annotated code

In the case of this design, the majority of the footer is just plain old HTML. Some other designs may include a large footer with a wealth of information. Any of the tags can be used anywhere in the template files, so you could list out the pages and the categories in the footer if you so pleased. It’s always handy to create that prototype HTML and CSS concept beforehand, as your theme will be ready to go as all the content inserted by the WordPress tags will already be styled with your CSS.
The only major tag used in the footer is <?php wp_footer(); ?>, which designates where WordPress can inject any additional footer related content. A similar tag is also used in the header.

Archive.php & Search.php template files

View the annotated code

View the annotated code

Two template files that work in a similar way to the index.php file are archive.php and search.php. These two files can be created as duplicates of the original, with just a couple of edits and adjustments. The archive.php file is used whenever posts are being displayed along with some kind of filter, such as posts in a certain category or from a particular date. To give the viewer an insight into the types of posts they are browsing a series of if statements can control which header is inserted above the content. For example is_category checks the viewer is browsing is particular category, if so the title of the category is inserted into a H2 using <?php single_cat_title(); ?>. The rest of the content is identical to the index.
In the case of the search.php file, a heading is added with the code <?php the_search_query(); ?> injecting whatever queries the viewer is searching for.

Single.php & Page.php template files

View the annotated code

View the annotated code

We’ve completed the template files that collate various pieces of content, now let’s code up the files that actually display this content. Single.php is the file used to display a blog post, page.php is used to display a page. Each file still begins with a loop to check for the content being requested, then the title is dynamically inserted using the same <?php the_title(); ?> tag, this time without the surrounding anchor. Also appearing in the single.php template is the custom thumbnail code which checks if a post thumbnail has been selected and displays it, or if not it displays a generic image in its place.
One tag that can be added to both the single and page templates is <?php comments_template(); ?>, but is most commonly reserved for just the single.php template. This tag injects the commenting system into the layout, which calls the comments.php template file.

Comments.php template file

View the annotated code

The comments.php file covers the whole list of comments and the comment submission form. Inside the file there’s a bunch of comment specific tags that enable you to build a thorough comments section. <?php comments_number(); ?> is a simple tag used to display the number of comments on a post, with parameters allowing you to edit the wording as you please. The comments file has its own mini loop, <?php if ( have_comments() ) : ?> checks to see if there are any comments on the post, then the whole list of comments is simply inserted using just one tag: <?php wp_list_comments(); ?>. The comments file has its own set of pagination links, which combined with the WordPress discussion settings allow you to split comments over multiple pages.

Finishing touches

Theme content testing

Once all the main template files have been filled with HTML content and WordPress tags it can be installed and tested. Create a series of blog posts and alter the posts-per-page setting to check the pagination buttons display correctly, add a range of different HTML to a post using various headers, lists and quotes in order to style up everything in your CSS file. We never included a design for the comments section in the original tutorial, so now would be a good time to conceptualise and mock up the comments section using a mixture of Firebug and a CSS editor. All the comment section is created from one tag, rather than individual tags being inserted into your original HTML, so styling this section up using the working theme as reference is the easiest approach.

The final theme demo

View the theme demo

The whole process of building a theme basically involves pasting a bunch of template tags in between your HTML. Many of the most common tags are listed out in this post, but you’ll also want to keep the WordPress Codex open in order to refer to the whole library of template tags available. On most occasions there’s a tag out there that will help you achieve the exact function you have in mind.

View the TicketStub theme demo

August 29 2011

07:00

How To Code a Blog Theme Concept in HTML & CSS

Last week we went through the process of creating a clean blog theme layout in Photoshop. Now, let’s transform the visual concept into a working HTML/CSS prototype web page before finishing everything up as a complete theme next week. We’ll build the page structure with clean HTML, then style up as much as possible using CSS styling to create a lean website design that still replicates the original concept.

View the HTML and CSS website prototype

If you missed last week’s tutorial, we created the homepage concept for a WordPress theme called Ticket Stub. It’s based on the idea of movie review, but the clean layout and basic styling keeps it generic enough to be used for any topic.

View the Photoshop design tutorial

We can recreate the majority of the design using pure CSS styling, but we’ll still need to export a couple of image files. Toggle off all other layers in order to save out a copy of elements such as the logo.

The final list of images is made up of mostly icon png files. The two post thumbnails will be used temporarily to mock up a sample post.

The HTML Structure

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ticket Stub</title>

<link href="style.css" rel="stylesheet" />

</head>

<body>

<div id="container">

</div>

</body>
</html>

Our static HTML file begins with a typical document structure consisting of doctype , link to the CSS stylesheet and a container div to wrap our page elements.

<div id="header">
	<h1><a href="#"><img src="images/logo.png" alt="Return to the homepage" id="logo" /></a></h1>

	<ul id="subscribe">
		<li class="rss"><a href="#">Subscribe by RSS</a></li>
		<li class="twitter"><a href="#">Follow on Twitter</a></li>
	</ul>
</div>

The first portion of content in the design is the header. We don’t have any kind of title or introduction in this design which would fit into a <h1> tag, so we’ll use it for the logo. The two subscribe options can be written as a <ul>, with classes on the <li> elements to allow for unique styling with the icon images.

<div id="main">
	<div id="content">
		<!--Main column-->
	</div>

	<div id="side">
		<!--Sidebar-->
	</div>
</div>

The main content area of the design is split into two columns. A wide column for the main post content and a smaller sidebar. These two divs are marked up inside the “main” div to allow for the child floats to be easily cleared.

<div class="post">
	<h2><a href="#">Captain America Kicks Ass!</a></h2>

	<a href="#" class="post-thumbnail"><img src="images/temp-post-thumbnail1.png" alt="Read the full post" /></a>

	<p>Lorizzle ipsum dolor sizzle ghetto, consectetuer fizzle elit. Sheezy doggy velizzle, i saw beyonces tizzles and my pizzle went crizzle volutpizzle, suscipit cool, own yo' vizzle, arcu. Pellentesque eget phat. My shizz erizzle. For sure izzle dolizzle for sure turpis tempizzle sizzle. Maurizzle i saw beyonces tizzles and my pizzle went crizzle nibh et turpizzle. Bizzle izzle i saw beyonces tizzles and my pizzle went crizzle. Pellentesque eleifend pot nisi. In hac habitasse platea dictumst. Pimpin' dapibizzle. Cool tellus owned, pretizzle eu, mattis uhuh ... yih!, eleifend dang, nunc. Ma nizzle suscipizzle. Integizzle shizzlin dizzle away sizzle purus. Mammasay mammasa mamma oo sa at dope. Yo mamma erizzle. condimentizzle, turpizzle nizzle congue consectetuer, brizzle libero bling bling fizzle, sizzle ullamcorper sure for sure nizzle sizzle. </p> 

	<div class="post-info">
		<ul>
			<li class="date">18th August 2011</li>
			<li class="category">Posted in <a href="#">Reviews</a></li>
			<li class="read-more"><a href="#">Read more</a></li>
		</ul>
	</div>

</div>

Each individual post is then enclosed in its own div to separate each one from the next. The next level heading of <h2> is used on post titles and the post thumbnail images can be easily inserted with an image tag inside an anchor. Some gansgter lorem ipsum dummy text fleshes out a brief sample post so we can see how the text will wrap, then the series of post info snippets are included as an unordered list.
In order to recreate the double border effect in the design concept we’ll have to commit a slight semantics faux-pas and nest this <ul> in a div to give ourselves another element to attach a border too. I guess another solution would be to use the CSS3 border-image property to add a tiny white/grey border effect around the elements.

<div class="pagination">
	<p class="prev"><a href="#">Older articles</a></p>
	<p class="next"><a href="#">Newer articles</a></p>
</div>

Underneath the posts will be a couple of pagination buttons to allow the user to browse back and forth between the archives. Another <ul> would be the best element to use, but WordPress tends to hide the <li> elements when they aren’t required, which leaves you with invalid code. The use of two separate paragraph elements is a much safer option.

<div id="side">
	<ul id="pages">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Archives</a></li>
		<li><a href="#">Contact</a></li>
	</ul>

	<h3>Categories</h3>
	<ul id="categories">
		<li><a href="#">Movies</a></li>
		<li><a href="#">Reviews</a></li>
		<li><a href="#">Articles</a></li>
	</ul>

	<h3>Search</h3>

	<form method="get" id="search" action="#">
		<fieldset>
			<input type="text" class="searchbar" />
			<input type="button" class="searchbutton" value="Search" />
		</fieldset>
	</form>

	<h3>About</h3>

	<p>Ticket Stub is a WordPress Theme based on the idea of a movie reviews site, but the overall design and layout makes the theme a perfect choice for any type of blog. <a href="#">Read more&hellip;</a></p>

</div>

The sidebar mostly includes lists of pages and categories, which obviously fit perfectly as unordered list elements. Our next level of heading is a <h3>, which separates the different sections in the sidebar. A simple form comprising of a single text input and button creates the search form, then the sidebar is finished off with a brief “About” paragraph.

<div id="footer">
	<ul id="credits">
		<li class="wordpress"><a href="http://wordpress.org">Powered by WordPress</a></li>
		<li class="spoongraphics"><a href="http://www.blog.spoongraphics.co.uk">Theme by SpoonGraphics</a></li>
	</ul>

	<p id="back-top"><a href="#">Back to top</a></p>
</div>

The HTML document is finished off with a simple footer div containing credit links and a back to top link.

The Complete HTML

View the annotated HTML

The CSS Styling

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	font: 14px/24px Helvetica, Sans-Serif; color: #7e7e7e;
	background: #f5f5f5 url(images/bg.png);
}

a {
	color: #9f3a3a; text-decoration: none;
}
	a:hover {
		color: #792323;
	}

#container {
	width: 960px; margin: 0 auto;
}

With the HTML structure in place we can now begin styling it up with CSS. The CSS file begins with a quick reset, then outlines the global font and background styling on the body element. All links in the design will use the same colour, so these can be listed with no specificity to capture every anchor in the document. The container div that wraps the page is given a 960px width and is centred up with auto margins.

#header {
	overflow: hidden;
}
	#header #logo {
		margin: 20px 0 10px 15px; float: left;
	}

	#header #subscribe {
		list-style: none; float: right; margin: 35px 30px 0 0;
		font-size: 16px;
	}
		#header #subscribe li.rss {
			background: url(images/rss-icon.png) left no-repeat;
			padding: 5px 0 5px 40px; margin: 0 0 10px 0;
		}
		#header #subscribe li.twitter {
			background: url(images/twitter-icon.png) left no-repeat;
			padding: 5px 0 5px 40px;
		}

Our header will contain two floated elements, so adding the overflow: hidden declaration will automatically clear the floats. The logo and subscribe buttons are moved into place with various margins, then the classes on each <li> item can be targeted to add the relevant icon to each respective link.

#main {
	background: url(images/faux.png);
	border: 1px solid #e6e6e6;
	overflow: hidden;
	box-shadow: 0px 0px 5px #d8d8d8;
	-moz-box-shadow: 0px 0px 5px #d8d8d8;
	-webkit-box-shadow: 0px 0px 5px #d8d8d8;

	border-bottom: 15px solid #fff;
}

In our design the sidebar has a grey background colour. An initial thought was to simply add this background colour to the #side div, but in the design the column extends all the way to the bottom of the page. The easiest way to replicate this is CSS is using the popular faux columns approach, where a sample image is used as a background image to create the impression of the two background colours. These days we can easily use CSS3 box-shadow to recreate a Photoshop shadow effect without the use of image files.
One problem with our faux columns is they fill the whole area of the div, whereas in the design we have a 15px border. We can replicate this border using the border property on both the #main and #side divs.

#main #content {
	width: 590px; float: left; padding: 35px 30px 60px 30px;
}
	#main #content h2 {
		font-size: 24px; font-weight: normal; text-transform: uppercase;
		margin: 0 0 15px 0;
	}

	#main p {
		margin: 0 0 24px 0;
	}

	#main #content .post-thumbnail {
		float: left; margin: 4px 30px 10px 0;
	}
		#main #content .post-thumbnail img {
			padding: 1px; border: 1px solid #eaeaea;
		}

The first of the two columns is given the larger width and floated to the left. Padding helps push the content into place away from the edges to match the Photoshop design. CSS typography helps set up the font styling to match the concept, using properties such as text-transform to revert text to uppercase even if it’s lowercase in the HTML. The post thumbnail image is floated into place alongside the content and is given a double border effect by combining 1px padding with a 1px border.

#main #content .post-info {
	padding: 1px; border: 1px solid #e9e9e9; margin: 0 0 60px 0;
}
	#main #content .post-info ul {
		background: #e9e9e9; list-style: none; text-transform: uppercase;
		padding: 15px 20px 10px 20px; overflow: hidden;
	}
		#main #content .post-info ul li.date {
			float: left;
		}
		#main #content .post-info ul li.category {
			float: left; margin: 0 0 0 20px;
			background: url(images/star.png) left no-repeat; padding: 0 0 0 35px;
		}
		#main #content .post-info ul li.read-more {
			float: right;
		}

In order to create the double border effect on the .post-info elements we’ll have to split the two border effects between the two items. The unique classes on the three list items then allow us to style and move each one exactly into position.

#main #content .pagination {
	overflow: hidden; margin: 0 0 60px 0;
}
	#main #content .pagination p {
		width: 180px; border: 1px solid #e9e9e9; padding: 1px;
		text-align: center;
	}
		#main #content .pagination p.prev { float: left; }
		#main #content .pagination p.next { float: right; }
		#main #content .pagination p a {
			display: block; background: #e9e9e9; padding: 15px 0px 10px 0px;
			text-transform: uppercase;
		}

Similar CSS styling can be used to style up the pagination buttons. They use the same double border effect, so the mix of background and border between an element and its child element are this time added to the <p> and <a> elements. Each button is then floated to the left or right, so the overflow: hidden; declaration is used on the parent element again to clear the floats.

#main #side {
	width: 263px; float: left; padding: 15px 30px 15px 15px;
	border-top: 15px solid white;
}	

	#main #side ul#pages, #main #side ul#categories {
		list-style: none; margin: 0 0 30px 0;
	}
		#main #side ul#pages li, #main #side ul#categories li {
			border: 1px solid #e9e9e9; padding: 1px;
			margin: 0 0 10px 0; text-align: right;
		}
			#main #side ul#pages li a, #main #side ul#categories li a {
				display: block; background: #e9e9e9; padding: 15px 20px 10px 20px;
				text-transform: uppercase;
			}

The second column of #side is given the narrower width and is also floated to the left. The buttons listing the pages and categories also employ the same double border effect, so the same code can be implemented on the <ul> and <li> elements. The only modification is the text is aligned to the right in this case.

#main #side h3 {
	font-size: 20px; font-weight: normal; text-transform: uppercase;
	margin: 0 0 10px 0; text-align: center;
}			

#main #side form {
	overflow: hidden; margin: 0 0 30px 0;
}
	#main #side input.searchbar {
		float: left; width: 193px; height: 25px; padding: 8px 13px 6px 13px;
		background: #fff; border: 1px solid #e9e9e9;
		font: 14px Helvetica, Sans-Serif; color: #7e7e7e;
	}
	#main #side input.searchbutton {
		width: 34px; height: 34px; float: left; margin: 3px 0 0 8px;
		background: url(images/search-icon.png); text-indent: -9999px;
		cursor: pointer;

		padding: 0 0 0 34px; /*IE Fix*/
	}

A quick series of declarations style up the <h3> titles in the sidebar at a slightly smaller size, then the search form is styled to match the original design concept. The search bar is replicated with a grey border, then padding and font styling helps turn the field into a fully working input. The search button on the other hand is styled using CSS image replacement, adding the icon image in place of the original text.

#footer {
	overflow: hidden; margin: 0 0 60px 0;
}
	#footer #credits {
		list-style: none; margin: 20px 0 0 30px;
	}
		#footer #credits li {
			float: left; margin: 0 6px 0 0;
		}
			#footer #credits li.wordpress a {
				display: block; width: 20px; height: 20px;
				background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px;
			}
			#footer #credits li.spoongraphics a {
				display: block; width: 25px; height: 20px;
				background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px;
			}

	#footer p#back-top {
		float: right; margin: 0 30px 0 0;
	}
		#footer p#back-top a {
			display: block; padding: 0 0 0 26px;
			background: url(images/back-top-icon.png) left no-repeat;
		}

The only section of the design left to style up is the footer. The two credit icons are created using CSS image replacement while the back to top link to floated to the right.

Browser Testing

A quick test in the popular browsers shows no problems in Firefox, Safari and Chrome, but as usual Internet Explorer gets its panties in a twist. Thankfully it doesn’t require too much work to set it back on track.

<!--[if IE 6]>
	<link href="css/ie6.css" rel="stylesheet" />
<![endif]-->

We first need to create a special CSS stylesheet solely for IE6. A link to a separate CSS file is added inside conditional comments which only target Internet Explorer version 6.

#main {
	clear: both; height: 100%;
}

#main #content .post-info ul {
	height: 100%;
}

These days fixing up a website for IE6 is often more trouble than it’s worth, but in some cases only a couple of tweaks are required. In the case of this design the only problems we run into is the infamous double margin bug and some strange height issue. Both are easily fixed with the addition of a height: 100%; declaration.

The Final HTML/CSS Mockup

View the HTML and CSS website prototype

We now have our original concept coded up into a static HTML and CSS prototype so we can see how it looks and performs in various browsers before moving on to the next stage of building a fully working WordPress theme. Check out the mockup and stick around for the final tutorial where we’ll continue building that complete theme.

View the HTML/CSS prototype demo

August 22 2011

07:00

How To Create a Blog Theme Concept in Photoshop

In the next few tutorials posts we’re going to go through the process of building a WordPress theme, starting today with the initial design concept in Photoshop. Follow this step by step walkthrough of the creation of the design concept for my Ticket Stub theme, which is based on a movie review type blog. We’ll create a full page design ready for coding up into a fully working website.

The theme we’ll be building over the next couple of posts is named Ticket Stub. It’s a clean and simple blog layout that’s set up as a movie review blog, but is generic enough to be used for any kind of website.

View the large scale blog theme concept

We’ll start by creating the background texture tile. Open up Photoshop and add a spot from a subtle grunge brush in the centre of the document.

Grab the rectangular marquee tool and draw a square selection somewhere in the centre. Invert the selection and delete out the excess. It’s trial and error to find a section that repeats without any obvious edges.

Reduce the opacity of the texture to around 30%, then see if it repeats correctly by duplicating the square to cover a larger area. Use the Clone tool to delete any unwanted particles in the original file.

With the original texture file selected go to Edit > Define Patterns to save the swatch. Fill the background of your web design file with this newly created pattern file.

Outline a 960px centre area in the document and fill it with white. I use the marquee tool by right clicking a selection and choosing Transform Selection. In the top bar you can then enter specific dimensions.

Add a very subtle Drop Shadow effect to the content rectangle. I’m using settings of 6% opacity, 0 distance, 0 spread and a size of 10px. Also give the layer a very fine 1px grey stroke to help define the edge.

The theme’s default logo can be added to the space in the header area. Fill a rectangle with a deep red.

Add a Gradient Overlay using the Overlay blending mode. Reduce the opacity in order to tone down the impact of the gradient to leave a subtle change of colour.

Add a 1px Stroke using a darker shade of red, then add an Inner Glow effect using a lighter shade. Adjust the options so the Inner Glow has a normal blending mode, 100% choke and 1px size.

Use the subtle grunge brushes to add a textured overlay to the logo using both light and dark red tones.

Add a spot of text to the logo. Here I’m using the American Typewriter font, with size and tracking adjustments on the word ‘Stub’.

Paste in a couple of star graphics from Illustrator and add a subtle drop shadow to the text to finish off the logo with a retro style cinema ticket stub appearance.

Add a couple of icons to the upper right area of the header for RSS and Twitter links. All text will be set in Helvetica in this design, while a deep red has been selected as the global link colour.

Use a guide to highlight a margin from the edge of the content area, then begin fleshing out a sample blog post with header and post image. Set the header to uppercase to help add typographic emphasis to these elements.

Generic dummy text can be used to represent the introductory content for the post. Set up the font at a legible 14px with a generous line height of around 24px to help with readability. Black on white would be way too contrasting, so a mid to light grey is selected for the body text.

Blog posts also have snippets of information that are displayed with every post. These can be included in their own panel. Draw a grey rectangle across the width of the column and add a 1px stroke of the same colour.

Set up an Inner Glow effect using the Normal blending mode, white, 100% choke and 1px in size to create a double border effect.

Use the same body copy text styling to add the date, category information and read more link for this sample post. Don’t forget to highlight links in the red link colour.

The date and category can be grouped together, separated by a little star graphic, while the read more link works well aligned to the right to suggest that it leads further.

Group all the elements that make up a sample post, then make a duplicate and position it underneath. Adjust the title to something much longer to plan how a longer sentence would wrap.

Use the same panel styling used in the post excerpts to create button elements for the older and newer post links.

The same button styling can be used in the sidebar to allow for more prominent links to the blog pages and categories. Align the text to the right in these elements.

Create a search bar using a finely outlined rectangle, then replicate the style of the icons in the header with a grey circle.

Use an Elliptical marquee as the base for a magnifying glass icon. Right click and select stroke to give the selection a 2px white outline, then finish off the icon with a handle using the Line tool.

It’s important to provide consistency throughout any design, using the same link colour, button styling and similar icon designs.

A short About excerpt in the sidebar helps fill out the empty space and provides another link through to other areas of the website.

The sidebar currently blends into the content area a little too much. Draw a light grey rectangle down the right side of the design to enclose all the sidebar elements. This helps the content with its brighter white background stand out with more prominence alongside the slightly darker grey.

Finish off the design with a back to top link, again creating a little icon based on the same style as those in the header.

This leaves our concept for our blog theme homepage complete. Next time we’ll begin chopping up the design and creating it as a coded webpage with HTML and CSS.

View the large scale blog theme concept

July 25 2011

07:00

How To Create a Slick Features Table in HTML & CSS

We’ve all grown up as web designers staying well away from table based layouts, but we don’t often brush up on our table building skills ready for when we will actually need them. Follow this step by step tutorial to create a slick looking data table to compare the features of various Harley Davidson motorcycles. We’ll build the table in clean HTML then polish it up with CSS to create a cool and easily readable HTML table.

Harley Davidson features table demo

The table we’ll be building compares a bunch of features between three Harley Davidson Sportster motorcycle models. Other than the slick design we’re putting together for the sake of this demo, the table will be built with clean HTML then styled with CSS to make the data easily readable.

View the final HTML/CSS features table

For the design of this particular demo there’s a few files we need from my original PSD concept. These include a patterned PNG graphic we’ll use as a background, the large black and white photo to fill up the demo background, the Harley Davidson logo and photos of the three bike models we’re comparing.

The demo file begins with a typical HTML structure including Doctype, page title and a link to the CSS stylesheet. The page content begins with a <h1>, which will later be converted to the HD logo, then a container div is added to help house and centre up the content.

Next the <table> element is inserted, followed by a <thead> to outline the titles and headings in our table. The <thead> contains two rows, one with the bike photos and the second with titles of each model in <h2> tags. The overall table has three columns, but the first cells in the header are empty so a &nbsp; character is added. To help us style the table and aid the readability of the table data while in code view relevant classes are added to the cells.

After the closing of the <thead> the <tbody> begins. Where <th> elements are used in the <thead>, <td> elements are used in the <tbody>. Each series of cells is contained within a row, and our classes help identify the different columns. All the rows of data are added to finish off the HTML.

The complete HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Harley Davidson Sportster Motorcycle Model Comparison</title>

<link href="style.css" rel="stylesheet" />

</head>

<body>

<h1>Harley Davidson Motorcycles</h1>

<div id="container">

	<table>
		<thead>
			<tr>
				<th>&nbsp;</th>
				<th class="iron"><img src="images/iron.jpg" alt="Harley Davidson Iron 883" /></th>
				<th class="nightster"><img src="images/nightster.jpg" alt="Harley Davidson Nightster" /></th>
				<th class="fortyeight"><img src="images/forty-eight.jpg" alt="Harley Davidson Forty-Eight" /></th>
			</tr>
			<tr>
				<th>&nbsp;</th>
				<th class="iron"><h2>Iron 883</h2></th>
				<th class="nightster"><h2>Nightster</h2></th>
				<th class="fortyeight"><h2>Forty-Eight</h2></th>
			</tr>
		</thead>

		<tbody>
			<tr>
				<td class="feature">Engine</td>
				<td class="iron">883cc</td>
				<td class="nightster">1202cc</td>
				<td class="fortyeight">1202cc</td>
			</tr>

			<tr>
				<td class="feature">Torque</td>
				<td class="iron">70Nm</td>
				<td class="nightster">98Nm</td>
				<td class="fortyeight">98Nm</td>
			</tr>

			<tr>
				<td class="feature">Exhaust</td>
				<td class="iron">Chrome, staggered shorty exhaust with dual mufflers</td>
				<td class="nightster">Chrome, slash-cut exhaust with dual mufflers</td>
				<td class="fortyeight">Chrome, staggered shorty exhaust with dual slash-cut mufflers</td>
			</tr>

			<tr>
				<td class="feature">Wheels</td>
				<td class="iron">Black, 13-Spoke Cast Aluminum</td>
				<td class="nightster">Black, Laced Steel</td>
				<td class="fortyeight">Black, Laced Steel</td>
			</tr>

			<tr>
				<td class="feature">Ground Clearance</td>
				<td class="iron">120mm</td>
				<td class="nightster">130mm</td>
				<td class="fortyeight">100mm</td>
			</tr>

			<tr>
				<td class="feature">Price</td>
				<td class="iron">£6,699</td>
				<td class="nightster">£8,099</td>
				<td class="fortyeight">£8,849</td>
			</tr>
		</tbody>

	</table>

</div>

</body>
</html>

The CSS begins with a simple CSS to remove any default browser styling, then the global styling for this particular demo file is set up. The large background image is added to the page body and overall font styling set up as 16px Georgia in grey.

The <h1> element is then converted to the Harley Davidson logo using the image replacement technique, then the container div is styled to sit centrally on the page. The patterned background image is used as a fill and a CSS3 box-shadow is created to replicate the Photoshop drop shadow effect.

By default the table displays with small gaps between the table cells. Our design requires a kind of margin between the columns but no gaps between the rows. The border-spacing property allows us to designate an exact amount of spacing on both the Y and X axis. Padding is added and text centred on all <th> and <td> elements, then this is overwritten for the cells with the class “feature”, sending the text back to left alignment. These cells are also given an exact width to alter the proportions of the table, making this column the largest.

Our classes of “iron”, “nightster” and “fortyeight” are all given a background fill of transparent white using RGBa colour selection. We could have used a single class for all these cells, but the name specific classes help us navigate the table data while in code view. To add a finishing touch to the table, the same transparent fill is also added to table rows, but only when they’re hovered by the user’s mouse. This simple effect boosts the usability of the table, helping the user easily cross reference and compare the data.

The complete CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote, table, tr, td, th {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #000 url(images/bg.jpg) center top fixed no-repeat;
	font: 16px Georgia, Serif; color: #ccc;
}

h1 {
	width: 168px; height: 130px; margin: 30px auto; position: relative;
	background: url(images/harley-davidson.png); text-indent: -9999px;
}

#container {
	width: 940px; margin: -115px auto; padding: 110px 10px 50px 10px;
	background: url(images/bg-pattern.png);
	box-shadow: 0px 0px 15px #000;
}

table {
	border-spacing: 10px 0px;
}

th, td {
	text-align: center; padding: 10px;
}

.feature {
	width: 183px; text-align: right;
	font-size: 24px; font-weight: normal; color: #fff;
}

.iron, .nightster, .fortyeight {
	background: rgba(255,255,255,0.05);
}

h2 {
	font-size: 24px; font-weight: normal; color: #fff;
}

tr:hover {
	background: rgba(255,255,255,0.05);
}
	thead tr:hover {
		background: none;
	}

The final HTML/CSS feature table

Harley Davidson features table demo

Check out the complete demo file to see the feature table in action with its hover effect. The use of transparency from the PNG24 files and RGBa colouring really helps create a sleek design when combined with the large background image. Overall these simple table styling techniques can be used on any project to display your tabular data in a readable and easily digestible manner.

View the feature table demo

July 11 2011

07:00

June 27 2011

07:00

May 23 2011

06:00

Create a Grid Based Web Design in HTML5 & CSS3

Follow this step by step walkthrough of the making of a sleek website design for an eyewear brand in HTML5 and CSS3. We’ll build the HTML structure with the latest elements then style up the appearance of the site with CSS3 affects to match the original Photoshop concept with minimal use of background images.

The design concept

Optik website design concept

The design we’ll be coding up is for a fictional eyewear brand named OPTIK. If you’re interested in seeing how the design concept was created in Photoshop, head over to Blog.SpoonGraphics so see part one of the tutorial. Essentially the page is based on an underlying grid and features a few key focal elements to direct the user towards the various ranges of eyewear.

View the Photoshop design tutorial

Exporting the images

I know I mentioned we’d build the website with minimal background images, but there’s still a few graphics that need pulling out of the Photoshop concept that just can’t be recreated in HTML or CSS (…yet!). The first of those graphics is the patterned background. Copy and export a selection so that the pattern will repeat seamlessly when tiled.

We’ll create the gradients used on the feature area with CSS3, but we’ll need to export the actual photograph. Draw a tight selection around the character and save for web as a JPEG.

In the original concept we saved two versions of the range graphics. Copy both into a new document to create mini sprite images then export as JPEGs.

This design was created according to columns and a baseline grid. Export a copy of the grid image from Photoshop. We’ll add this as a temporary background image so we can easily line up the elements with CSS to replicate the grid based layout.

The HTML structure

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>OPTIK</title>

<link href="style.css" rel="stylesheet" />

</head>

<body>

</body>
</html>

The HTML file begins with a typical document structure of Doctype, page title, link to CSS stylesheet and the opening & closing body tags. The simple HTML5 Doctype really looks great when compared to the long versions of HTML4 and XHTML.

<div id="container">
	<header>
		<h1><a href="#"><img src="images/optik-logo.png" alt="Return to the homepage" /></a></h1>

		<nav>
			<ul>
				<li><a href="#">Sun</a></li>
				<li><a href="#">Sport</a></li>
				<li><a href="#">Tech</a></li>
				<li><a href="#">Special</a></li>
			</ul>
		</nav>
	</header>

A typical container div is added to ‘contain’ the elements to help centre everything up, then we can get stuck in to some fancy HTML5 tags/elements with <header>. As the name suggests, <header> is used to outline an introduction or group of navigation elements and is used in place of the traditional <div id="header"> code we usually use.
<nav> is another new element we can make use of, which identifies a section of navigation. Inside this element a normal unordered list lays out the four navigation links.

	<section id="feature">
		<a href="#"><img src="images/feature-image.jpg" alt="Man wearing Hydrotek sunglasses" /></a>
		<div id="feature-info">
			<a href="#"><h2>Hydrotek</h2></a>
			<p>HYDRO-TEK sports eyewear from OPTIK optimizes the flow of perspiration for an increased aerodynamic advantage over your competition.</p>
			<p class="btn"><a href="#">Find out more</a></p>
		</div>
	</section>

Where we would previously use divs to create major structural areas of a webpage, in HTML5 we can use the <section> tag. <section> is used along with an ID to identify a clear ‘section’ of the document, such as the feature area at the top of the page. The photo of the guy wearing sunglasses could be added as a background image, but I expect users to naturally try to click it, so adding it as an <img> inside an anchor will allow us to link it up to its relative content.
A <h2> and <p> elements semtantically lay out the few lines of content, with a class of ‘btn’ allowing us to style up that particular link as a button graphic later. All these elements will need floating next to the image, so a simple div helps group them all together.

	<section id="content">
		<div class="bucket">
			<a href="#" id="sun">Sun range of OPTIK eyewear</a>

			<p>Enjoy the summer sun in style with OPTIK's range of casual eyewear. Choose from an array of fashionable frames and styles.</p>

			<p><a href="#">View the SUN range</a></p>
		</div>

		<div class="bucket">
			<a href="#" id="sport">Sport range of OPTIK eyewear</a>

			<p>Protect and enhance your vision with the SPORT range of eyewear from OPTIK to give yourself the edge over your competition.</p>

			<p><a href="#">View the SPORT range</a></p>
		</div>

		<div class="bucket">
			<a href="#" id="tech">Technicaly information about OPTIK eyewear</a>

			<p>Find out more about the science behind the materials, geometry and coatings that make OPTIK lenses so technologically advanced.</p>

			<p><a href="#">View the TECH info</a></p>
		</div>

		<div class="bucket">
			<a href="#" id="special">Special range of OPTIK eyewear</a>

			<p>OPTIK also design eyewear for specific industries where eye protection is crucial. Make sure your team has the best optical safety.</p>

			<p><a href="#">View the SPECIAL range</a></p>
		</div>
	</section>

Another <section> tag outlines the main content area, followed by four separate divs with a class of ‘bucket’ to lay out the four boxes seen on the design concept. Inside each of these boxes the images will need adding with CSS to allow the sprite hover effects to work, so they are created in HTML as simple anchors with a descriptive anchor text introducing the section.

</div>

<footer>
	<p id="copyright">&copy; Copyright OPTIK 2011</p>
	<ul>
		<li><a href="#">About</a></li>
		<li><a href="#">Retailers</a></li>
		<li><a href="#">Corporate</a></li>
		<li><a href="#">Warranty</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Contact</a></li>
	</ul>

	<p id="back-top"><a href="#">Back to top</a></p>

</footer>

</body>
</html>

The footer appears below the main content panel in the concept so the container div is closed before the <footer> tag opens. Just like <header>, <footer> is a new structural tag that replaces the old method of <div id="footer">.
The <ul> in the footer isn’t enclosed in a <nav> element because of guidelines in the HTML5 spec:

It is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases.

The complete HTML

View the complete HTML

The CSS styling

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	font: 14px Helvetica, Sans-Serif; line-height: 24px; color: #a6a6a6;
	background: #000 url(images/bg-pattern.png);
}

#container {
	width: 960px; margin: 0 auto 24px auto; background: #000; /*background: url(images/grid.png) center top no-repeat;*/
	box-shadow: 0px 5px 45px #343434;
	-moz-box-shadow: 0px 5px 45px #343434;
	-webkit-box-shadow: 0px 5px 45px #343434;
}

a {
	color: #abe2ff; text-decoration: none;
}
	a:hover {
		color: #5db5e3;
	}

Onto the CSS! First we clean things up with a simple reset and declarations to the body to set the global styling. Then the container div is centered up and given the outer glow styling from the Photoshop concept with CSS3 box-shadow. Remember that grid used in Photoshop? We can add that as a temporary background image to allow us to align all the page elements exactly into place.

header h1 {
	margin: 54px 0 0 21px; float: left;
}

header nav {
	float: left;
	margin: 79px 0 17px 0;
}
	header nav ul li {
		float: left; list-style: none;
		width: 58px; margin: 0 0 0 98px;
	}
		header nav ul li a {
			text-transform: uppercase;
		}

Next up the header items are moved into place according to the grid with simple margins. This is where the Firebug plugin for Firefox comes in handy so you can edit the figures live in order to achieve pixel perfection.

#feature {
	clear: both; height: 431px; overflow: hidden; margin: 0 0 48px 0;
	background: #000;
	background: -moz-linear-gradient(top, #000 0%, #191919 5%, #000 5%, #000 94%, #191919 94%, #000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(5%,#191919), color-stop(5%,#000), color-stop(94%,#000), color-stop(94%,#191919), color-stop(100%,#000));
	background: -webkit-linear-gradient(top, #000 0%,#191919 5%,#000 5%,#000 94%,#191919 94%,#000 100%);
	/*opacity: 0.5;*/
}
	#feature h2 {
		width: 216px; height: 30px; margin: 0 0 31px 0;
		background: url(images/hydrotek.png); text-indent: -9999px;
	}
	#feature img {
		float: right; margin: 22px 0 0 0;
	}
	#feature-info {
		float: left; width: 370px; margin: 89px 0 0 100px;
	}
		#feature-info p {
			margin: 0 0 34px 0; font-size: 16px;
		}
		#feature-info p.btn a {
			display: block; width: 170px; height: 35px;
			background: #497389;
			background: -moz-linear-gradient(top, #497389 0%, #151e36 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#497389), color-stop(100%,#151e36), color-stop(100%,#000));
			background: -webkit-linear-gradient(top, #497389 0%,#151e36 100%);
			border: 1px solid #313e52;
			border-radius: 10px;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			text-transform: uppercase; text-align: center; padding: 12px 0 0 0;
		}

We can really start going to town with CSS3 styling on the feature section. In the concept there’s a gradient glow above and below the feature area. We could replicate this in CSS3 with box-shadow or CSS gradients. Here I’ve gone for the gradient approach with the help of the handy CSS Gradient Generator tool, which makes it easy to match the format from Photoshop.
The <h2> uses a non-web font so a simple CSS image replacement technique switches the default H2 text for an image. The text content and image is moved into place, then the “btn” class is given some styling to convert it into a button style graphic. display:block; converts it into a block element so a width and height can be added, then another CSS gradient is generated to flow from dark to light blue. border-radius then rounds off the corners and the text is set to uppercase and bumped into position vertically using a touch of padding.
Tip: Use opacity: 0.5; as a temporary declaration on the feature section so you can see the underlying grid lines.

#content {
	overflow: hidden; clear: both;
}
	#content .bucket {
		width: 212px; float: left; margin: 0 0 48px 20px;
		border: 1px solid #262626;
		background: #000;
		background: -moz-linear-gradient(top, #000 0%, #000 39%, #191919 39%, #000 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(39%,#000), color-stop(39%,#191919), color-stop(100%,#000));
		background: -webkit-linear-gradient(top, #000 0%,#000 39%,#191919 39%,#000 100%);
	}
		#content .bucket:first-child {
			margin: 0 0 0 22px;
		}

	#content #sun, #content #sport, #content #tech, #content #special {
		display: block; width: 212px; height: 143px;
		margin: 0 0 32px 0; text-indent: -9999px;
	}
		#content #sun { background: url(images/sun.jpg); }
		#content #sport { background: url(images/sport.jpg); }
		#content #tech { background: url(images/tech.jpg); }
		#content #special { background: url(images/special.jpg); }

		#content #sun:hover, #content #sport:hover, #content #tech:hover, #content #special:hover {
			background-position: 0 -143px;
		}

		#content .bucket p {
			margin: 0 0 24px 0; padding: 0 13px 0 13px;
		}

The four buckets in the content area can then be styled up with a specific width and margin and floated side by side. A simple border and another background gradient help replicate the shadow underneath the header images in the concept. To match the layout to the grid the first bucket’s margin is adjusted using the first-child selector.
All the header images can be grouped together for some general CSS such as the width, height and margin. text-indent: -9999px; shifts the default text off screen, then the specific background image for each link is added. These images has a hover state included in the basic sprite, so all anchors are set to move the background position on hover.

footer {
	width: 960px; margin: 0 auto; height: 80px;
	font-size: 12px;
}
	footer #copyright {
		float: left; margin: 0 0 0 22px;
	}

	footer ul {
		float: left; margin: 0 0 0 134px; list-style: none; overflow: hidden;

	}
		footer li {
			float: left; margin: 0 10px 0 10px;
		}

	footer #back-top {
		float: right; margin: 0 22px 0 0;
	}
		footer #back-top a {
			background: url(images/optik-logo-sm.png) left no-repeat; padding: 5px 0 5px 40px;
		}

Finally the footer area can be styled to finish off the page. Because it’s outside the container div it first needs moving into position with the 960px width and margin: 0 auto; declarations. Then each of the three elements can be floated side by side and moved into place with margins.

The complete CSS

View the complete CSS

Patching up IE

Needless to say, Internet Explorer doesn’t support these fancy new HTML5 and CSS3 goodies. Our CSS will simply degrade back to non CSS3 styling, so there will be no gradients or round corners. The HTML5 tags on the other hand won’t be recognised at all, which will bork the layout altogether. Luckily there’s a snippet of code you can add to the head of your page to render the tags as normal elements:

<!--[if IE]>
<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('nav');
</script>
<![endif]-->

Then you can simply create a conditional stylesheet to fix up the mess IE makes of your standard CSS. With this tutorial being a HTML5/CSS3 demonstration, I’ll leave those exciting fixes for another time…

The final website design

View the demo

Our final coded website matches the original Photoshop concept identically with the help of a few CSS3 features and looks cool under the hood with the new HTML5 tags. Check out the demo in the latest Firefox, Safari or Chrome browsers.

View the HTML5/CSS3 website demo

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...