How to Code up a Web Design from PSD to HTML
A couple of weeks back we went through the process of creating a gnarly snowboarding themed website design concept in Photoshop. The tutorial covered the process of designing our site concept from sketch to finished PSD design. Now, let’s take the design to the next step and code up a complete mockup in HTML and CSS, ensuring our code is semantic and standards compliant. We’ll then add some finishing touches with a spot of jQuery.
To refresh your memory
Cast your mind back and you’ll remember we left off at the end of the post titled Create a Gnarly Snowboarding Themed Web Design with a finished PSD sporting a textured background, large feature area and a mix of text, images and video making up the main content area.
Check out part one of the tutorial
Cutting up the PSD concept
With our design being pretty design heavy, there’s a good selection of elements that will need exporting from the PSD. The first is the large textured background.
Disable all other layers then draw a large marquee across the design that includes all the textured elements and blue gradient. Press CMD+Shift+C to copy this selection, then paste in into a new document.
To take into consideration larger monitors, we need to make sure our design is wide enough not to be cropped off. A width of 2200px should be more than sufficient to accommodate even the larger of monitor setups. Select a portion of the gradient and press CMD-T to transform and stretch the background to fill the white space. Save this large image for the web, but take care to balance between file size and quality. With the image being super-sized, it’s important to carefully select the appropriate compression settings. My final file weighs in at 220kb, which is pretty heavy in normal circumstances, but considering that the rest of the design is quite lightweight, it’s a sacrifice that can be justified. We could have made things much easier for ourselves by not including a gradient as well as a texture, this way we could set a smaller graphic in the center that fades out to a flat colour. (Or wait until the multiple backgrounds CSS3 property is more widely supported!)
Continue selecting individual page elements with the marquee tool, pressing CMD-Shift-C to copy-merged then paste in a new document and export. Elements such as the logo, feature graphics, profile shots and every small icon needs saving as an individual graphic.
Remember to choose the most appropriate file type and compression setting for each item. An element that is made up of flat colours will be more suited to PNG format. Elements that require a transparent background can be exported using the PNG-24 option.
Once all of the images have been saved, you’re ready to move onto the HTML section of the website build.
Building the HTML structure
It’s always important to build the house before decorating the rooms, so we’ll begin by writing out the HTML structure of the website. We’ll base the HTML on the XHTML Strict Doctype and add the initial link to the stylesheet and a containing div to hold the content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Snow Candy</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="container"> </div> </body> </html>
The header
The structure for the header is pretty simple. We have our logo, which is set in a H1 and links back to the homepage. Our navigation is perfect for an unordered list, and each contains an anchor to the relevant page. A class of active will then allow us to target an individual page for highlighting the active page.
<div id="header"> <h1><a href="#">Snow Candy</a></h1> <ul id="nav"> <li><a href="#" class="active">Home</a></li> <li><a href="#">Apparel</a></li> <li><a href="#">Team</a></li> <li><a href="#">Shop</a></li> </ul> </div>
The content
Next we flesh out the bulk of the page content. The whole main area can be contained within a div with an ID of content. Within this we’ll start with the large feature graphics, an unordered list will once again be a handy element to use, as it allows us to easily list them out in sequence. Inside each list element is each image graphic, complete with a descriptive alt attribute.
<div id="content"> <div id="features"> <ul> <li><a href="#"><img src="images/feature-1.jpg" alt="5th Annual Big Air Jam. 5th January 2010" /></a></li> <li><a href="#"><img src="images/feature-2.jpg" alt="Salomon Shred Round One" /></a></li> <li><a href="#"><img src="images/feature-3.jpg" alt="Snow Candy in Sälen" /></a></li> </ul> </div>
The design then splits into two columns, so we can add a div with a class of column ready for floating with CSS later. Within the featured video section I’ve embedded a cool snowboarding video from Vimeo, followed by the title and description, both set in natural header and paragraph tags. A paragraph tag with a class of “btn” will allow us to set up a global style for any button style objects, allowing some unique styling to be added. The actual Vimeo embedding code has been modified slightly to keep it valid within our Strict doctype, thanks to the help of this article.
<div class="column"> <h2 class="featured-video">Featured Video</h2> <div class="video"> <object width="379" height="213" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=3155182&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1"> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3155182&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1" /> </object> </div> <h3><a href="#">Snow Candy in Sälen</a></h3> <p>The Snow Candy team head to Sälen to experience the local snow, attractions and lifestyle.</p> <p class="btn"><a href="#">See more videos</a></p> </div>
In the second column, the list of events has a layout that lends itself well to being rendered as a definition list, with the date and event description being relative to each other. The date can be set as the definition title, and the definition description as the content, which will help us target these tags to style up the fancy layout we’ve got going on. With the dates being laid out vertically at different type sizes, adding a span around the month will help provide that extra hook needed for the CSS styling.
<div class="column"> <h2 class="events">Upcoming Events</h2> <dl> <dt>5 <span>Feb</span></dt> <dd> <h4>5th Annual BigAir Jam</h4> <p>Elite riders compete for the title of 2010 BigAir champion in the 5th annual running of the event in Sallback, Austria. Last year’s winner Nate Bailey is returning to defend his crown against some of the most elite names from Europe and the USA.</p> </dd> <dt>3 <span>Mar</span></dt> <dd> <h4>Salomon Shred Round 1</h4> <p>Elite riders compete for the title of 2010 BigAir champion in the 5th annual running of the event in Sallback, Austria. Last year’s winner Nate Bailey is returning to defend his crown against some of the most elite names from Europe and the USA.</p> </dd> </dl> <p class="btn"><a href="#">See more events</a></p> </div>
The last portion of content is the list of team members. Again, this list of objects is tailored nicely to be written as an unordered list element. Within each list element is an anchor link that will head off to the relevant page. Each anchor also has a class to help identify each team member when styling them up.
<h2 class="team">Meet the Team</h2> <ul id="team"> <li><a href="#" class="joe">Joe</a></li> <li><a href="#" class="charlie">Charlie</a></li> <li><a href="#" class="lars">Lars</a></li> <li><a href="#" class="marco">Marco</a></li> </ul>
The footer
The HTML is then closed out with the footer, containing a simple back-to-top link, and the body and HTML tags closed to finish off the document. A quick validation ensures there’s no errors, meaning it’s time to move onto some CSS styling.
<div id="footer"> <p><a href="#header" class="back-top">Back to top</a></p> </div> </div> </body> </html>
Styling the CSS
The first line of CSS that’s written is to quickly reset any browser specific styling. Ensuring that we’re starting from a clean slate when it comes to margins, padding and borders. Next, the sans-serif font-family is set on the body tag, to render the Helvetica font throughout the design. A line-height of 24px will help us stick to our 24px baseline grid from the design, and will help fix any differences between browsers.
The main background of the site is then added. First the flat blue colour is specified, then the large textured background. This is positioned at the top center, and told not to repeat. Unlike inline images, background images don’t create scrollbars if they are larger than the content window, so despite our graphic being a huge 2200 pixels wide, a portion of the edges will be hidden according to how large the viewer’s monitor is.
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
margin: 0; padding: 0; border: 0;
}
body {
font-family: Helvetica, Arial, Sans-Serif; line-height: 24px;
background: #b9d2f8 url(images/body-bg.jpg) center top no-repeat;
}
The header
Next up for styling is the main container div, which is simply given a 980px width and set to appear centrally. This is followed by the header and its sub-elements. The header div is given some padding to create the spacing at the top and sides according to the PSD concept, and is given an overflow:hidden property to clear itself and correctly calculate its height after the floated navigation elements.
The header one tag is given specific dimensions in order to properly display the logo as a background image, and a negative text-indent shifts the standard header text out of the way off-screen. The navigation is then floated alongside it, with a little margin to help align the elements. Each anchor inside the list items is styled to give the appropriate appearance according to the PSD concept, which includes setting the font-size and gaps between each element. They are then finished off with the addition of the transparent brush stroke graphic as a background image for links that have the active class, or are being hovered by the mouse.
#container {
width: 980px; margin: 0 auto;
}
#header {
padding: 48px 16px 0 16px; overflow: hidden;
}
#header h1 a {
display: block; width: 221px; height: 107px; float: left;
background: url(images/logo.jpg); text-indent: -9999px;
}
#header ul#nav {
width: 720px; float: right; margin: 42px 0 0 0;
}
#header ul#nav li {
float: left; list-style: none;
}
#header ul#nav li a {
display: block; width: 155px; height: 34px; margin: 0 0 0 25px; padding: 12px 0 0 0;
font-size: 24px; text-transform: lowercase; color: #fff; text-decoration: none; text-align: center;
text-shadow: 0 3px 3px #333;
}
#header ul#nav li a:hover, #header ul#nav li a.active {
background: url(images/active-nav.png);
}
General content styling
The main central content area can then be styled to mimic the original PSD concept. First it’s given a specific width, with padding to push the content away from the edges. It’s set to overflow:hidden because it will contain some floated elements, and is given a transparent-white background PNG to create the translucent effect. Other options to create the white transparency could have been the opacity property, or the CSS3 RGBa property, but a good old PNG-24 graphic is the most cross-browser friendly, with just IE6 requiring extra work to enable the alpha transparency.
To finish off the content area, a small radius is added to the corners using the border-radius property. Because this isn’t fully supported yet, browser specific code can tell individual browsers to add the novelty effect.
#content {
width: 938px; padding: 16px 16px 60px 16px; overflow: hidden;
background: url(images/white-trans.png);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Styling the feature section
The large features section in the design currently holds three slides, but the aim is to only display one at a time. When Javascript is added, these can be tweaked to transitionally fade between each one, but we also need the section to work without Javascript being enabled. To do this, the features section is given the specific dimensions of one slide. The overflow:scroll property will then add scrollbars to allow the user to manually navigation between slides. The UL is given a width of 2820px (3x the width of the slides), and they’re floated side by side. Without limiting the features container to a specific size, the slides would simply fill up the whole page, which ruins the usability of the site. This way, the user can experience the features slideshow, albeit in a much more low-tech way.
#content #features {
width: 940px; height: 457px; margin: 0 0 48px 0;
overflow: scroll; /* Changed to hidden if javascript enabled */
}
#content #features ul {
width: 2820px;
}
#content #features ul li {
float: left;
}
Styling the columns and their content
Remember those two columns we wrote out in the HTML? They need floating side by side, so a width is calculated that will fit inside the content div, and the float:left property added. Inside these columns the video and upcoming events sections are styled. The video div simply has an image background to style up the embedded video, and some padding quickly aligns everything up. The definition list for the events section requires some extra CSS to manipulate the basic definition list element into the fancy layout we have planned. The date of each event is contained within the definition title, so that can be floated to the side and set to a large font-size. The extra span we added then comes in handy to render the month text at a smaller font-size, and as a block element so that it drops down below the number.
The definition description and its header h4 tags can then be given the appropriate typographic treatment once the DD is floated alongside the DT. With all styling complete it matches the original concept perfectly.
#content .column {
width: 409px; float: left; padding: 0 30px 0 30px; margin: 0 0 24px 0;
}
#content .column .video {
width: 387px; height: 222px; padding: 13px 0 0 17px; margin: 0 0 24px 0;
background: url(images/video-bg.jpg) no-repeat;
}
#content .column dl dt {
width: 55px; float: left; padding: 10px 0 0 0; overflow: auto;
color: #fff; font-size: 64px; line-height: 34px;
}
#content .column dl dt span {
font-size: 16px; text-transform: uppercase; display: block;;
}
#content .column dl dd {
float: left; width: 354px;
}
#content .column dl h4 {
font-size: 32px; font-weight: normal; color: #fff; margin: 0 0 5px 0;
}
Styling the team list
The last part of the content styling is to flesh out the list of team members. Earlier each team member photo was exported, so these can now be set to each individual anchor tag. Each list item is set to float left, and is given the appropriate margin to space them out across the page. Anchor elements are by default inline elements, so to allow a specific width and height to be set, they need to be converted to display:block. Each individual team member can then be targeted through the class names on each anchor, with each photo graphic and image dimensions being added as a background.
#content ul#team {
list-style: none; overflow: hidden;
}
#content ul#team li {
float: left; margin: 0 0 0 27px;
}
#content ul#team li a {
display: block; text-indent: -9999px;
}
#content ul#team li a.joe {
width: 199px; height: 229px;
background: url(images/joe.jpg);
}
#content ul#team li a.charlie {
width: 199px; height: 229px;
background: url(images/charlie.jpg);
}
#content ul#team li a.lars {
width: 205px; height: 233px;
background: url(images/lars.jpg);
}
#content ul#team li a.marco {
width: 198px; height: 229px;
background: url(images/marco.jpg);
}
Styling the footer
The footer area can be quickly finished up by adding the subtle texture background, and the back-to-top link floated over to the right, styled up and positioned into place.
#footer {
min-height: 159px; overflow: hidden;
background: url(images/footer-bg.jpg) center 0 no-repeat;
}
#footer p a.back-top {
float: right; margin: 14px 24px 0 0;
font-size: 12px; text-decoration: none; color: #4d74bb;
}
#footer p a.back-top:hover {
color: #234c97;
}
Adding the Javascript
Let’s not forget the extra Javascript effects we had planned for that features section. With the help of some jQuery, and the super cool Cycle plugin, we can easily transform that basic features list into a fully working slideshow.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> <script src="js/scripts.js" type="text/javascript"></script>
First, the jQuery library and our own scripts file is referenced in the HTML. The cycle plugin is included in the scripts.js, then some of our own Javascript can put it all into practice. First the overflow:scroll on the features list needs changing to hidden to remove those ugly scrollbars, then the cycle plugin is initiated on the features list. By default the plugin will place a simple fading transition between each element, but there’s plenty more options that could be configured.
$(document).ready(function() {
/* Change the overflow:scroll to overflow hidden on the Features list */
$('#features').css('overflow','hidden');
/* Initiate the cycle on the Features list */
$('#features ul').cycle();
});
The final concept
So here we have the complete mockup in live HTML and CSS format. Our HTML is clean and valid, and the CSS renders everything how we wanted according to the original PSD concept.
View full post on Line25
Related posts:
- Coding Up a Web Design Concept into HTML & CSS I’ve recently been working on a design concept for a...
- Design & Code a Cool iPhone App Website in HTML5 HTML5 is definitely the flavor of the month, with everyone...
- Coding a Stylish Blog Design Layout in HTML & CSS Last week we went through the process of designing a...
- Designing an Infographic with HTML, CSS & jQuery I’ve been wanting to get stuck into a creative infographic...
- 8 Ways to Increase the Readibility and Beautify your HTML Code Learn how to tidy up your html code with these...
Related posts brought to you by Yet Another Related Posts Plugin.
HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.
HTML5 isn’t here just yet, but the Working Draft is complete enough for us to play around and get to grips with the exciting new elements we can use in our code. To learn how a few of these elements can be used, let’s put together a simple website for say, a fictional iPhone app. How about we use the recent tutorial I wrote over at Tutorial9 as a base for our app website? This tutorial covered the process of building an interface just like the awesome apps from Tapbots, so head over and check it out, then we’ll be ready to build an accompanying website for our PKE Meter application.
View the demo
The PSD concept
First, we’ll need to put together a concept for our app website. Create a new document in Photoshop. I use the dimensions of 1680×1050 to give a typical widescreen monitor resolution to work with.
Fill the background with grey (#252525), then add some subtle texture by heading to Filter > Noise > Add Noise. Select the Gaussian and Monochromatic options and set the amount to 1.3%.
Draw a simple app icon with the rounded rectangle, and type out the name of our app in Helvetica Bold.
Double click the layer of each object to add some layer styling. Give each one a Color Overlay of #00ffcc and a soft Outer Glow to create an illuminated appearance.
CMD-Click the layer thumbnail of each object to load the selection, then fill a new layer with a horizontal scan-lines pattern. Check out the original tutorial for more information on how to create custom patterns.
Change the blending mode of the scan-lines to Multiply and drop the opacity to around 35%. Add a little logo and the usual highlight to the iPhone icon graphic.
Type out an enticing introduction for the app with the type tool and add the same illuminated layer style. If you haven’t guessed already, the PKE Meter is the tool Egon Spengler uses in Ghostbusters. If Egon was busting ghosts in 2010, there’s no doubt he’d be using his iPhone to track psycho-kinetic energy.
Fill out the design with a description of the app. To give the text a little extra pop, add a black drop shadow.
Take the time to line-up the elements of your design and finish off the description of the app with a list of features.
Download the handy iPhone UI kit from Teehan+Lax and paste in the custom app screenshot in place. Position the iPhone over to the right. Keeping the scale pretty large will help it act as a main focal point for the design and maintain the small details of the app interface.
No iPhone app website would be complete without the ‘Available on the App Store’ badge. Paste in a copy of the badge and add some general styling with a subtle Inner Shadow.
With just some copyright and disclaimer information added to the footer area, the concept is ready to be sliced and exported. Save the logo, the large iPhone graphic, the app store badge and a clipping of the textured background as PNG graphics.
The HTML5 structure
Next we’ll put together the basics for the HTML index page. The HTML5 doctype is pretty simple indeed. Just add
<!DOCTYPE html>. This is followed by some familiar HTML that outlines the<head>and<body>. We’ll add a div with an id of container to enclose all the content in a fixed width.Now the new HTML5 elements will come into play. The
<header>element is used to enclose a group of introductory or navigational aids. The logo and intro title of our design would fit perfectly here. The logo itself is added as an image, and the intro, being the most descriptive element is coded in a<h1>.A
<section>in HTML5 refers to a grouping of content, so all the information about the app in our design can be enclosed in the section element.An
<aside>in HTML5 is pretty similar to a<section>as it also basically a grouping of content, but an aside is used specifically for separate content that has a connection to a nearby section. The large graphic of the iPhone and app screenshot is related to the information that’s within the adjacent<section>element in our design, so it would work well as an aside.The
<footer>element is another handy structural HTML tag that replaces the old<div id="footer">method with something more descriptive. Within the footer I’ve used<small>tags to surround the copyright and disclaimer. The<small>element is used to represent small print, and can be used for disclaimers, caveats, legal restrictions and copyrights (not small as in size, as the name suggests.)So here’s our simple HTML5 page altogether. We’ve only used a couple of the new elements, but that’s all we needed for this particular design. It has however, enabled us to create a really clean markup and has seriously cut down on the number of
<div>tags scattered around the HTML, making it much more easy to see where specific sections start and end.The CSS styling
body, div, h1, h2, h3, h4, h5, h6, p, ul, li, img, header, section, aside, footer, button { margin: 0; padding: 0; border: 0; } body { font-family: Helvetica, Arial, Sans-Serif; background: #2b2b2b url(images/bg.png); } #container { width: 960px; margin: 0 auto; padding: 90px 0 100px 0; position: relative; overflow: hidden; }Now it’s time to get everything styled up according to the visual concept. To begin, the stylesheet is given a quick reset to strip out the browser default styling, the body is given the dark textured background and the containing div is positioned centrally.
header {} header img#logo { margin: 0 0 50px 0; } header h1 { margin: 0 0 30px 90px; font-size: 60px; font-weight: normal; line-height: 74px; color: #00ffcc; text-shadow: 0px 0px 10px #00ffcc; }The logo and title can be moved into position by editing their margins, and the text for the intro title can be styled up the match the visual concept by adding the bright green color, and the illuminated effect with the CSS3
text-shadowproperty.section { margin: 0 15px 30px 0; width: 530px; float: left; } section p { margin: 0 0 30px 90px; font-size: 22px; line-height: 35px; color: #d9d9d9; text-shadow: 0px 1px 5px #000; } section h2 { margin: 0 0 10px 90px; font-size: 40px; font-weight: normal; color: #00ffcc; text-shadow: 0px 0px 10px #00ffcc; } section ul { margin: 0 0 30px 90px; font-size: 22px; line-height: 45px; color: #d9d9d9; text-shadow: 0px 1px 5px #000; }The
<section>that contains all the textual information is given a specific width and floated to the left, and all the subsequent content elements such as the header two, paragraphs and unordered list are all given the appropriate font-sizing, margin and coloring to match the PSD concept.aside { position: absolute; top: 20px; right: 0; }The
<aside>can then be moved into place with some absolute positioning. This ensures the iPhone graphic appears 20px from the top of the page, relative to the containing div.footer { width: 960px; float: left; clear: both; overflow: hidden; } footer a#app-store { display: block; width: 198px; height: 72px; background: url(images/app-store.png); text-indent: -9999px; margin: 0 0 0 84px; float: left; } footer p { float: right; clear: right; font-size: 16px; color: #5a5a5a; margin: 10px 0 0 0; }The footer can then be cleared so that it sits underneath the previous content and given an
overflow:hiddendeclaration to clear itself after the floats used on the anchor and paragraphs. Speaking of anchors and paragraphs, these elements are each given moved into place with floats to finish off the CSS.Previewing the site in Firefox, Chrome and Safari will show the site in all its coded glory. Unfortunately, Internet Explorer doesn’t share support for HTML5, so it needs a little extra work.
<script> document.createElement('header'); document.createElement('footer'); document.createElement('section'); document.createElement('aside'); </script>Because IE doesn’t support HTML5, it just doesn’t recognise those new fancy elements. The good news is it’s easy to tell IE to create them anyway by adding the above Javascript to your
<head>. As soon as this code is added, everything looks perfect in IE, albeit with the cool illumination effects being gracefully degraded. It’s worth noting that if Javascript is turned off, IE will show the broken version of the site. Chances are with an iPhone app website like this, the majority of the visitors are going to be clued up on their browsers, so it’s a risk that we could take for this particular design.View the demo
Line25 Sites of the Week is a weekly roundup of the most outstanding website designs. In this week’s collection, we have designs from Droplr, Mix Online, Yaron Schoen, Traffik and The Hair Foundation.
Droplr
View the website
Mix Online
View the website
Yaron Schoen
View the website
Traffik
View the website
The Hair Foundation
View the website
The world that surrounds the topic of Web Design is home to many debates and opinions on best practices or generally how things should and shouldn’t be done. While many of these opinions are accepted and taken on board by everyone, there are some that end up being split into two opposing camps. One camp will provide an expert opinion for one side of the argument, while the other contradicts with an equally valid argument. Let’s take a look at the five most popular debates; the ones that often end up developing into digital riots with opinions flying like arrows across the vast no-man’s land known as the comments section.
Should links open in a new window?
Camp one says:
Links to external sites should always open in new windows. There’s nothing more annoying than browsing a website, clicking a link and being whisked off to a totally new site, losing the page you wanted to revisit. Internal links should maintain the browser session in the current page, but anything that leaves the site should open in a new tab or window.
Camp two says:
As web designers we shouldn’t take the control away from the user. Whether a link needs opening in a new window is their choice. There’s nothing more annoying than a website taking control of my browser and opening a new tab or window for a link without my permission; if I wanted to open it in a new window, I’d do so! The problem only gets worse with inexperienced computer users, new windows break their trusty ‘back button’.
The mediator says:
In general, opening a new window should be avoided, but is recommended for some situations such as opening a help link in a shopping cart or opening a non-html document such as a PDF. To further aid the usability of your site, use a small icon to identify links that do open in a new window, or provide an options panel that’s configured with Javascript.
Further reading:
Should links use the words ‘Click here’?
Camp one says:
‘Click here’ has been proven to provide a higher click through ratio than descriptive anchor text. ‘Click here’ is a call to action people associate with the web, so it should be used on links to achieve the highest click through results.
Camp two says:
Using the words ‘Click here’ hinders the usability of a site. Instead of being able to see where the link goes and what it does, the user has to read the surrounding text to gain an idea of what’s going to happen. Quality guidelines suggest that anchor text should explain what a link offers.
The mediator says:
A descriptive link should always be used to help increase your site’s usability, accessibility and optimization for search engines. It is be interesting to hear that ‘Click here’ performs better on banner ads, but I’d imagine that bounce rates would also be in favour of descriptive links.
Further reading:
Should Bold <b> and Italic <i> tags be used?
Camp one says:
If your aim is to make a word bold, use the
<b>tag. It’s not correct to use the<strong>tag if the word doesn’t have any extra value or importance. Screen readers pronounce the<b>and<i>tags differently, and they are also included in the HTML5 specification.Camp two says:
Bold and italic tags are often used to make text appear bold or italic, so semantically anything that is being used for visual aesthetics should be reserved for the CSS stylesheet, and not included in the HTML markup. If an element has of specific importance or requires emphasis, the
<strong>or<em>tags helps identify it with meaning.The mediator says:
<b>and<i>tags shouldn’t be used to make text appear bold and italic for the sake of it being bold or italic, this visual styling should be left to the CSS. If a word or passage of text is of high importance, either the<strong>or<em>element would be the best use. The<b>and<i>can and should be used when no other tags fit the situation (eg:<cite>,<var>,<dfn>). An example might be text in another language.Further reading:
Should a logo be enclosed in a <h1> element?
Camp one says:
Logos shouldn’t be wrapped in a header one, the
<h1>element should include a description or title of that particular web page. This is the best approach for SEO, otherwise the primary header for every page would be the same – the company name.Camp two says:
The main identifier of what website you’re on is the logo. With the
<h1>being the largest level of headers, it’s natural to place the logo and site title inside a<h1>. This way, when the page is viewed without CSS, it still holds the same visual structure and hierarchy.The mediator says:
The definitive use for a
<h1>is to describe the subsequent content. Therefore if a particular website has a title or heading that describes the content and appears in the design, this should be placed in the<h1>, otherwise the next highest structural and descriptive item would be the logo.Further reading:
A site should be viewable in IE6
Camp one says:
Internet Explorer 6 makes up 10% of the market share, so it’s crucial that a website is made to work in IE6, as well as newer browsers. There lots of major corporations who have large networks running IE6, as well as lots of computer users who don’t know how to upgrade.
Camp two says:
IE6 is considerably out of date and doesn’t support the technologies that are present in web design today. It’s poses a risk to the user’s online security and is the never ending nightmare for all designers. Large companies including YouTube are phasing out support, so should you!
The mediator says:
IE6 usage is definitely on the decline, and its death will be quicker with large websites dropping support. Whether you support IE6 depends on your own user statistics. Alternatively, consider offering more basic page styling to IE6 users rather than fixing complicated layout and CSS problems.
Further reading:
Line25 Sites of the Week is a weekly roundup of the most outstanding website designs. In this week’s collection, we have designs from Suki, idsgn, Finger, Digital Visions and Tapparatus.
Suki
View the website
idsgn
View the website
Finger
View the website
Digital Visions
View the website
Tapparatus
View the website
We all know how important typography is. Choosing the right typeface(s), colors and, if necessary, applying the right type treatment can help tremendously in conveying your message to your audience. Most of the websites showcased today use large typography mostly in their headers, but also in other places such as sub-headings and other elements to draw attention to areas of importance. Let’s take a look at some of the best examples.
Stackoverflow Dev Days
Get Finch
Carsonified Events
http://www.polargold.de/“>PolarGold
http://www.weareacademy.com/“>We Are Academy
Joao Andrade
Project 365
Digital Mash
Gummisig
Electric Pulp
Kyle Steed
Agencia De Publicidade De Brasilia
Josh Hemsley
Sundance 2010
Benny Roth
Pulchry
Design Wise
Denise Chandler
DIBI Conference
Dreamerlines
FL2’s Blog
The Less Is More Tour
Sourhaze EP
David Jonsson
Carsonispace
Dustin Curtis – Sleep
Huge Inc.
Elysium Burns
Made By Giant
For A Beautiful Web
Alpha Multimedia
Design Woop
Soda Virtual
Find Me By IP
Lorem Ipsum
Line25 Sites of the Week is a weekly roundup of the most outstanding website designs. In this week’s collection, we have designs from Ryan Clark Merrill, Jilion, The House Media, Zennaware and Help Spot.
Ryan Clark Merrill
View the website
Jilion
View the website
The House Media
View the website
Zennaware
View the website
Help Spot
View the website
A couple of weeks back we went through the process of creating a gnarly snowboarding themed website design concept in Photoshop. The tutorial covered the process of designing our site concept from sketch to finished PSD design. Now, let’s take the design to the next step and code up a complete mockup in HTML and CSS, ensuring our code is semantic and standards compliant. We’ll then add some finishing touches with a spot of jQuery.
To refresh your memory
Cast your mind back and you’ll remember we left off at the end of the post titled Create a Gnarly Snowboarding Themed Web Design with a finished PSD sporting a textured background, large feature area and a mix of text, images and video making up the main content area.
Check out part one of the tutorial
Cutting up the PSD concept
With our design being pretty design heavy, there’s a good selection of elements that will need exporting from the PSD. The first is the large textured background.
Disable all other layers then draw a large marquee across the design that includes all the textured elements and blue gradient. Press CMD+Shift+C to copy this selection, then paste in into a new document.
To take into consideration larger monitors, we need to make sure our design is wide enough not to be cropped off. A width of 2200px should be more than sufficient to accommodate even the larger of monitor setups. Select a portion of the gradient and press CMD-T to transform and stretch the background to fill the white space. Save this large image for the web, but take care to balance between file size and quality. With the image being super-sized, it’s important to carefully select the appropriate compression settings. My final file weighs in at 220kb, which is pretty heavy in normal circumstances, but considering that the rest of the design is quite lightweight, it’s a sacrifice that can be justified. We could have made things much easier for ourselves by not including a gradient as well as a texture, this way we could set a smaller graphic in the center that fades out to a flat colour. (Or wait until the multiple backgrounds CSS3 property is more widely supported!)
Continue selecting individual page elements with the marquee tool, pressing CMD-Shift-C to copy-merged then paste in a new document and export. Elements such as the logo, feature graphics, profile shots and every small icon needs saving as an individual graphic.
Remember to choose the most appropriate file type and compression setting for each item. An element that is made up of flat colours will be more suited to PNG format. Elements that require a transparent background can be exported using the PNG-24 option.
Once all of the images have been saved, you’re ready to move onto the HTML section of the website build.
Building the HTML structure
It’s always important to build the house before decorating the rooms, so we’ll begin by writing out the HTML structure of the website. We’ll base the HTML on the XHTML Strict Doctype and add the initial link to the stylesheet and a containing div to hold the content.
The header
The structure for the header is pretty simple. We have our logo, which is set in a H1 and links back to the homepage. Our navigation is perfect for an unordered list, and each contains an anchor to the relevant page. A class of active will then allow us to target an individual page for highlighting the active page.
The content
Next we flesh out the bulk of the page content. The whole main area can be contained within a div with an ID of content. Within this we’ll start with the large feature graphics, an unordered list will once again be a handy element to use, as it allows us to easily list them out in sequence. Inside each list element is each image graphic, complete with a descriptive alt attribute.
The design then splits into two columns, so we can add a div with a class of column ready for floating with CSS later. Within the featured video section I’ve embedded a cool snowboarding video from Vimeo, followed by the title and description, both set in natural header and paragraph tags. A paragraph tag with a class of “btn” will allow us to set up a global style for any button style objects, allowing some unique styling to be added. The actual Vimeo embedding code has been modified slightly to keep it valid within our Strict doctype, thanks to the help of this article.
In the second column, the list of events has a layout that lends itself well to being rendered as a definition list, with the date and event description being relative to each other. The date can be set as the definition title, and the definition description as the content, which will help us target these tags to style up the fancy layout we’ve got going on. With the dates being laid out vertically at different type sizes, adding a span around the month will help provide that extra hook needed for the CSS styling.
The last portion of content is the list of team members. Again, this list of objects is tailored nicely to be written as an unordered list element. Within each list element is an anchor link that will head off to the relevant page. Each anchor also has a class to help identify each team member when styling them up.
The footer
The HTML is then closed out with the footer, containing a simple back-to-top link, and the body and HTML tags closed to finish off the document. A quick validation ensures there’s no errors, meaning it’s time to move onto some CSS styling.
Styling the CSS
The first line of CSS that’s written is to quickly reset any browser specific styling. Ensuring that we’re starting from a clean slate when it comes to margins, padding and borders. Next, the sans-serif font-family is set on the body tag, to render the Helvetica font throughout the design. A line-height of 24px will help us stick to our 24px baseline grid from the design, and will help fix any differences between browsers.
The main background of the site is then added. First the flat blue colour is specified, then the large textured background. This is positioned at the top center, and told not to repeat. Unlike inline images, background images don’t create scrollbars if they are larger than the content window, so despite our graphic being a huge 2200 pixels wide, a portion of the edges will be hidden according to how large the viewer’s monitor is.
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote { margin: 0; padding: 0; border: 0; } body { font-family: Helvetica, Arial, Sans-Serif; line-height: 24px; background: #b9d2f8 url(images/body-bg.jpg) center top no-repeat; }The header
Next up for styling is the main container div, which is simply given a 980px width and set to appear centrally. This is followed by the header and its sub-elements. The header div is given some padding to create the spacing at the top and sides according to the PSD concept, and is given an overflow:hidden property to clear itself and correctly calculate its height after the floated navigation elements.
The header one tag is given specific dimensions in order to properly display the logo as a background image, and a negative text-indent shifts the standard header text out of the way off-screen. The navigation is then floated alongside it, with a little margin to help align the elements. Each anchor inside the list items is styled to give the appropriate appearance according to the PSD concept, which includes setting the font-size and gaps between each element. They are then finished off with the addition of the transparent brush stroke graphic as a background image for links that have the active class, or are being hovered by the mouse.
#container { width: 980px; margin: 0 auto; } #header { padding: 48px 16px 0 16px; overflow: hidden; } #header h1 a { display: block; width: 221px; height: 107px; float: left; background: url(images/logo.jpg); text-indent: -9999px; } #header ul#nav { width: 720px; float: right; margin: 42px 0 0 0; } #header ul#nav li { float: left; list-style: none; } #header ul#nav li a { display: block; width: 155px; height: 34px; margin: 0 0 0 25px; padding: 12px 0 0 0; font-size: 24px; text-transform: lowercase; color: #fff; text-decoration: none; text-align: center; text-shadow: 0 3px 3px #333; } #header ul#nav li a:hover, #header ul#nav li a.active { background: url(images/active-nav.png); }General content styling
The main central content area can then be styled to mimic the original PSD concept. First it’s given a specific width, with padding to push the content away from the edges. It’s set to overflow:hidden because it will contain some floated elements, and is given a transparent-white background PNG to create the translucent effect. Other options to create the white transparency could have been the opacity property, or the CSS3 RGBa property, but a good old PNG-24 graphic is the most cross-browser friendly, with just IE6 requiring extra work to enable the alpha transparency.
To finish off the content area, a small radius is added to the corners using the border-radius property. Because this isn’t fully supported yet, browser specific code can tell individual browsers to add the novelty effect.
#content { width: 938px; padding: 16px 16px 60px 16px; overflow: hidden; background: url(images/white-trans.png); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }Styling the feature section
The large features section in the design currently holds three slides, but the aim is to only display one at a time. When Javascript is added, these can be tweaked to transitionally fade between each one, but we also need the section to work without Javascript being enabled. To do this, the features section is given the specific dimensions of one slide. The overflow:scroll property will then add scrollbars to allow the user to manually navigation between slides. The UL is given a width of 2820px (3x the width of the slides), and they’re floated side by side. Without limiting the features container to a specific size, the slides would simply fill up the whole page, which ruins the usability of the site. This way, the user can experience the features slideshow, albeit in a much more low-tech way.
#content #features { width: 940px; height: 457px; margin: 0 0 48px 0; overflow: scroll; /* Changed to hidden if javascript enabled */ } #content #features ul { width: 2820px; } #content #features ul li { float: left; }Styling the columns and their content
Remember those two columns we wrote out in the HTML? They need floating side by side, so a width is calculated that will fit inside the content div, and the float:left property added. Inside these columns the video and upcoming events sections are styled. The video div simply has an image background to style up the embedded video, and some padding quickly aligns everything up. The definition list for the events section requires some extra CSS to manipulate the basic definition list element into the fancy layout we have planned. The date of each event is contained within the definition title, so that can be floated to the side and set to a large font-size. The extra span we added then comes in handy to render the month text at a smaller font-size, and as a block element so that it drops down below the number.
The definition description and its header h4 tags can then be given the appropriate typographic treatment once the DD is floated alongside the DT. With all styling complete it matches the original concept perfectly.
#content .column { width: 409px; float: left; padding: 0 30px 0 30px; margin: 0 0 24px 0; } #content .column .video { width: 387px; height: 222px; padding: 13px 0 0 17px; margin: 0 0 24px 0; background: url(images/video-bg.jpg) no-repeat; } #content .column dl dt { width: 55px; float: left; padding: 10px 0 0 0; overflow: auto; color: #fff; font-size: 64px; line-height: 34px; } #content .column dl dt span { font-size: 16px; text-transform: uppercase; display: block;; } #content .column dl dd { float: left; width: 354px; } #content .column dl h4 { font-size: 32px; font-weight: normal; color: #fff; margin: 0 0 5px 0; }Styling the team list
The last part of the content styling is to flesh out the list of team members. Earlier each team member photo was exported, so these can now be set to each individual anchor tag. Each list item is set to float left, and is given the appropriate margin to space them out across the page. Anchor elements are by default inline elements, so to allow a specific width and height to be set, they need to be converted to display:block. Each individual team member can then be targeted through the class names on each anchor, with each photo graphic and image dimensions being added as a background.
#content ul#team { list-style: none; overflow: hidden; } #content ul#team li { float: left; margin: 0 0 0 27px; } #content ul#team li a { display: block; text-indent: -9999px; } #content ul#team li a.joe { width: 199px; height: 229px; background: url(images/joe.jpg); } #content ul#team li a.charlie { width: 199px; height: 229px; background: url(images/charlie.jpg); } #content ul#team li a.lars { width: 205px; height: 233px; background: url(images/lars.jpg); } #content ul#team li a.marco { width: 198px; height: 229px; background: url(images/marco.jpg); }Styling the footer
The footer area can be quickly finished up by adding the subtle texture background, and the back-to-top link floated over to the right, styled up and positioned into place.
#footer { min-height: 159px; overflow: hidden; background: url(images/footer-bg.jpg) center 0 no-repeat; } #footer p a.back-top { float: right; margin: 14px 24px 0 0; font-size: 12px; text-decoration: none; color: #4d74bb; } #footer p a.back-top:hover { color: #234c97; }Adding the Javascript
Let’s not forget the extra Javascript effects we had planned for that features section. With the help of some jQuery, and the super cool Cycle plugin, we can easily transform that basic features list into a fully working slideshow.
First, the jQuery library and our own scripts file is referenced in the HTML. The cycle plugin is included in the scripts.js, then some of our own Javascript can put it all into practice. First the overflow:scroll on the features list needs changing to hidden to remove those ugly scrollbars, then the cycle plugin is initiated on the features list. By default the plugin will place a simple fading transition between each element, but there’s plenty more options that could be configured.
$(document).ready(function() { /* Change the overflow:scroll to overflow hidden on the Features list */ $('#features').css('overflow','hidden'); /* Initiate the cycle on the Features list */ $('#features ul').cycle(); });The final concept
So here we have the complete mockup in live HTML and CSS format. Our HTML is clean and valid, and the CSS renders everything how we wanted according to the original PSD concept.
View the demo
Line25 Sites of the Week is a weekly roundup of the most outstanding website designs. In this week’s collection, we have designs from Tapmates, Viljami Salminen, Simon Collison, Information Highwayman and SimpleBits.
Tapmates
View the website
Viljami Salminen
View the website
Simon Collison
View the website
Information Highwayman
View the website
SimpleBits
View the website
Designers have began to inject increasing levels of creativity into their blog posts and articles, throwing out the traditional and generic style of blog posts in favour of a much more attractive layout that’s themed specifically to the content. Let’s take a look at some of the best examples, and see what makes them work so well.
In his fantastic article ‘The Death of the Boring Blog Post‘, Paddy Donnelly sums up this method of fusing together a blog post with the style and design of a traditional magazine article and coins the name, ‘Blogazine’. Be sure to check it out for a great introduction, and to hear from some of the pioneers of this style of blogging.
Examples of the best
Scrap the traditional website layout
We’re all used to blog themes with the traditional two-column content and sidebar layout. But to really create a custom and unique post design, all the common practices are thrown out of the window in order to give yourself a blank canvas to start from. There’s no header, there’s no footer, there’s no sidebar. Instead, the whole page is open to housing the content any way you wish; you really have to break free of the usual web design mindset, and think out of the box in terms of creativity to portray your information in an interesting and enticing way, but also keeping everything readable and accessible. This does subsequently induce a lot of work, as your whole post needs to be completely designed and styled from scratch, using a unique CSS stylesheet and HTML code, but the main advantage is having a unique post that captures the user’s interest and easily puts across your message.
Take inspiration from print design
For decades, designers working in print have used the core design principles to create balanced layouts in magazines and posters. To create the best designed blog post, go back to basics and follow the basic rules of space, colour, shape and type. For inspiration, check out any magazine article for ideas on how to combine images and text, using different type sizes, weights and fonts to portray a certain feeling, or to highlight particular elements of the content.
A grid is your friend
Because we’re now working with a completely blank canvas, it’s important to achieve balance in your new post design. Basing your design on an underlying grid will help develop an eye-pleasing design that’s easily consumed by the reader. On the contrary, simply placing elements where you see fit could end up with a page that’s difficult to follow and doesn’t flow from one element to the next.
Don’t worry about scrolling
Unlike a magazine that can span across multiple pages, as web designers we’re stuck with continuously moving downwards. After balancing out your design with lots of large elements and plenty of white space, it’s highly likely that your post will take up maybe 5 times the space it would have done if it was written as plain old text in the traditional format. Unfortunately this is one sacrifice that has to be made. While an excessive amount of scrolling could impact the usability of your page, it’s safe to say that users are used to navigating with the scroll wheel, so don’t worry about stretching out your page length in favour of a unique design.
Get creative
As designer’s we’re always wanting to break free from limitations and let our creativity shine. Here’s your chance! Next time you’re fleshing out ideas for a blog post, try starting from scratch and design the whole content, creating an attractive post that really gets the point across.
Line25 Sites of the Week is a weekly roundup of the most outstanding website designs. In this week’s collection, we have designs from Upstruct Belin, Charma Inc, Eighty8Four, Demotive and Jay Hollywood.
Upstruct Berlin
View the website
Charma Inc
View the website
Eighty8Four
View the website
Demotive
View the website
Jay Hollywood
View the website