Part One: Download, Install, “Reset” Theme

Video Page
Direct Video Download (.mov)
Article & Discussion

Part Two: Structure

Video Page
Direct Video Download (.mov)
Article & Discussion

Part 3: Finishing Touches, Extra Stuff

Video Page
Direct Video Download (.mov)
Article & Discussion

Download - “Personal Homepage Theme”

I figured I might as well call it was it is! So the theme we were building this whole time now has a name: “Personal Homepage Theme”. It looks like this:

I literally designed this for use on my personal site, so you can see it live on chriscoyier.net.

Download Theme

Note: The orginal Photoshop file is included in the download in a folder called “orig” in the theme folder. The header of the site generically says “Your Name” instead of my name, but the sidebars have stuff in them still personalized to me. Of course feel free to change, alter and use this theme for any purpose. Link backs are always nice but not required.

In case you don’t already know. In order to use this theme you upload it into the /wp-content/themes/ folder of your WordPress install (you will need to use the self-hosted version of WordPress and have FTP access to your site). Then you can activate it under the “Design” section of the admin area.

In part three of this series, we finish up the structure of the site and start diving into the details. The typography is set up, the right sidebar is set up, and the footer if flushed out. Then we use SimplePie to pull in the external RSS feed and jQuery to pull in the “social” stuff. Not exactly WordPress related, but I warned you! Then we look at styling up the rest of the WordPress layout types like Single pages (with comment styling) and Pages. At the end we pop open the design in a bunch of different browsers to see how it holds up.

Fair warning: this is a long one again at almost a full hour. This will be the last one in the WordPress series, I will get all the files together and tidied up and make them available for download soon.

Also note: I am doing a test on the video page this week. There is a bit of a new layout, which now includes links to things mentioned in the video. The video is also displayed in Flash video format instead of a Quicktime embed. This should help folks who have been having problems with viewing the videos online. The trade off here is that the file size is 3 times bigger (this week is a behemoth 315MB), and the quality is slightly worse. Most of them won’t be this long, and hopefully I can figure out a way to get better compression and higher quality, because I think this will really the viewability of these things. The iTunes subscriptions and regular RSS feeds will still have regular links to .mov files. Although… since those might not be used on the web anymore, I might turn them into .m4v files so they can be AppleTV compatible.

I’ll probably keep up with this Flash thing for a few weeks and see how it goes, if it works out, I’ll go back and do the rest of the archives like this.

The conversation is heating up a little hotter than usual lately, as major companies are starting to pull support for it. Apple’s new MobileMe service doesn’t support it. 37 signals is phasing out support for it. Matt Mullenweg says WordPress.com is still seeing about 25% of visits from IE 6 but will consider phasing out when it drops below 10%.

I thought I would start the conversation by covering the reasons I think people still use this browser. The percentages I am applying here are just for fun and complete speculation on my part. Feel free to chime in with comments on why you think so many people are still using this browser.

1. Because they have to (30%)

I hear fairly regularly from people using IE 6 because that’s what is on their computer at work and they are not allowed to change it. Big companies are slow to change, that has always been true. I’m no security expert, but I’m told IE 7 is a much more secure browser, I would think that alone would be intensive for big companies to get their employees on IE 7. But still, from an IT perspective, I can understand how rolling out a change like this can take tons of man hours for seemingly little benefit, especially if using the web isn’t core to the companies business.

People might also hold onto IE 6 because they use a website that either does, or claims to, only work on that browser. These websites are getting fewer and far between but they are certainly out there.

2. Because they have an old computer. (20%)

If they are using Windows 2000 IE 6 is the most current browser for that operating system as far as I know. Not to mention ME and 98.

3. Because they actively don’t care / dislike change (35%)

I say “actively” because if they just “passively” don’t care, Windows has probably automatically upgraded them without them even knowing. If they are actively not caring, they are probably clicking “No” and “Cancel” on whatever dialog boxes come up suggesting upgrades. They are probably creating more work for themselves by doing so, but they don’t know that.

If anything does change on their system, they may even take drastic steps to have it restored to it’s original version. I bet Geek Squad people could tell your stories of people demanding their web browser be returned to IE 6 after accidentally upgrading. People get used to using software in a certain way to get what they need to do done, and they are prone to getting upset if anything interrupts that.

4. Because they don’t know any better (15%)

I believe this is the smallest portion. People that could or would upgrade to a better browser, if convinced, but just don’t know the advantages yet.

Noticeably missing from this list:

“Because they want to.” I bet there are some crazies out there that love IE 6, but this is sub 1%.

What do these things all have in common?

There is very little we can do. We can educate people about the advantages of better browsers, but a lot of times we are just preaching to the choir or talking to deaf ears. The realit is, as we probably all know deep down, is that we are just going to have to wait this out. In a few years we’ll see probably lower than 10% usage across the board. Then we’ll be upset about a whole new set of things we want to use but are upset IE 7 doesn’t support!

A collection of HTML/CSS T-Shirts. Some are funnier than others… I do like the XHTML one =) I did a roundup of CSS shirts a while ago too.

BgPatterns

As far as these “generators” go, this BgPatterns is pretty top-notch. Customize colors, textures, patterns, sizing, rotation… Preview it live on the page, save it, or download it.

WooThemes

There is a slew of free WordPress themes out there, which is awesome, but I am a big fan of “Premium” themes as well. Design work is worth money and when you pay for something, you have a better shot at getting a higher quality product. I was even considering one of the “Premium News” themes for CSS-Tricks at one point and still think that one is really nice. The creators of that original theme have now rolled it over and expanded it into WooThemes. It is no longer a pay-per-theme but is now a subscription service, starting at 3 months for $150 for a single user subscription. Looks like they have 10 themes right now and they all look great. There will be at least one theme added every month and they even have the fabulous designer Elliot Jay Stocks on board.

Check all checkboxes with jQuery

Anytime there is multiple checkboxes in a form (say, four or more) there really should be an option to “check all” and “uncheck all”. Here is how you can do it with jQuery.

Handwritten Typographers

Every wonder what the handwriting of the designers behind popular typefaces are? I wish Dino dos Santos would make his own handwriting into a font, it’s very nice.

Engine Room

There is totally going to be an MTV reality series on designers.

If web pages were made out of wood, the grain would be running up and down. Vertical is the natural flow of web layout. When page elements reach the right edge of the browser window and go over, the flow defaults to “wrapping” that element down onto the next line. The more content on the page, the taller it gets, not the wider. Why is this? Because it just makes sense. Our eyes are used to reading fairly short lines of text, so if we were to see a paragraph of text in one long straight line, it would be painful to read. Paragraphs need to have line breaks in them to be readable (hence the term “blocks” of text). We sure as heck don’t want to hard-code line breaks into the markup ourselves. Obviously, we don’t have to, the browser does this wrapping for us. Thus the vertical expansion.

This natural flow has lead to conventions in web page layout and even into hardware itself. Notice how many computer mice (mouses?) have a special scroller exclusively for vertical scrolling. But web pages are equipped with both vertical AND horizontal scrollbars right? If we are responsible with our web layout, we can go “against the grain” and create web pages that use primarily horizontal scrolling and can even expand horizontally as we add more content. Perhaps a slight blow to “useability”, but it sure can be a cool creative touch!

View Demo Download Files

The best way to do it

I’m going to go out on a limb here and say that I think a table is the best layout technique for a horizontally scrolling site. Before I explain why, let’s look at a couple of other possible techniques:

• Set a really wide static width. Perhaps the “quick and dirtiest” way to get a horizontal layout started is just to set a really wide static width on the body element itself. Say, 10000px. Go ahead and try it, you’ll surely get a horizontal scrollbar. While this works, it’s a bit inflexible. Web pages are dynamic places and we should be prepared for expandability, not limiting ourselves with static widths. Think about regular vertical scrolling sites. You don’t go around setting static heights on your pages do you?
• Floats + Whitespace. I spent some time playing with the float property and the whitespace property to see if I could find a way to fight browser auto-wrapping, but I didn’t have much luck. Page elements which are floated but do not have a width exhibit a property where they expand to the width of the content inside them. I thought perhaps if I put a bunch of float elements inside of that, it might just keep expanding beyond the width of the browser window. No dice. There is also a whitespace: nowrap; property in CSS which I thought might be able to be exploited to fight the auto-wrapping, but it only works for text elements, not blocks or just any old thing you set to inline. Oh well.
• Use JavaScript to set a width. JavaScript clearly has the ability to manipulate page elements and do calculations on-the-fly. We could use this to create an environment which behaves extensibly. However, it considered bad mo-jo to handle page layout with JavaScript. I agree with this in general, but I do believe you can use JavaScript in this way as long you do so unobtrusively and take care to ensure the page will fall back to a usable layout with JavaScript disabled.

The table method

What we need is a page element which can expand horizontally as needed and never “wrap”. A row of table cells fit the bill perfectly here. Table cells will expand to fit whatever content is inside them by their nature, and the will never wrap until a new row is started. Perfect.

Let’s assume we are trying to lay out a series of blog posts one after another horizontally. We would need to use a page structure like this:

<table>
  <tr>
    <td>
       ..  blog post #1
    </td>
    <td>
       ..  blog post #2
    </td>
    <td>
       ..  blog post #3
    </td>
  </tr>
</table>

Yuck, right? It never feels good to use markup like that, not just because it’s a table, but also because of how non-semantic it is. We are using a bunch of tags here which are exclusively for presentation and have nothing to do with content.

Ideally, our page structure would be like this:

<div class="post">
  .. blog post #1 ..
</div>
<div class="post">
  .. blog post #2 ..
</div>
<div class="post">
  .. blog post #3 ..
</div>

Using jQuery, we can easily have the best of both worlds!

Write the markup we want, get the markup we need

We are going to use jQuery to allow us to the markup we want (the div structure) and manipulate it to get the markup we need for horizontally scrolling (the table structure). You should have little alarms going off in your head here about using JavaScript for layout, but rest easy, we will ensure that without JavaScript enabled the layout will be perfectly useable. As an added bonus, the layout will be useable with or without CSS enabled as well, and any combination.

Let’s first think through what we want to happen:

• Wrap ALL of the posts in a single table tag and single row tag
• Wrap EACH post in a table cell tag

Now let’s include jQuery on our page in the head section, and write the jQuery we need to get this done.

<script src="js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	$(function(){
		$("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
		$(".post").wrap("<td>");
	});
</script>

That should do it! Notice how the cellspacing is added as an inline attribute to the table element. We might normally apply padding to cells with CSS, but we want to make sure that each blog post block is as readable as possible even with CSS turned off. Without this, the blocks would butt right up against each other making them tough to read.

The entire CSS file for this example is very very simple:

/*
	RESET & BASIC SETUP
*/
* 						{ margin: 0; padding: 0; }
body 						{ font-size: 62.5%;
							 font-family: 'Lucida Grande', Helvetica, sans-serif;
							 background: #121212; padding: 20px; color: #999; }
table tr					{ vertical-align: top; }
/*
	STRUCTURE
*/
.post 						{ width: 500px; }

/*
	TYPOGRAPHY
*/
p						{ font-size: 1.2em; margin: 0 0 15px 0; }
h1						{ font-family: Helvetica, sans-serif; font-size: 4.0em;
							 letter-spacing: -1px; color: #ccc; }
h2						{ font-family: Helvetica, sans-serif; font-size: 3.0em;
							 letter-spacing: -1px; color: #ccc; }
a						{ color: #0066cc; }
a:hover						{ color: #ccc; }

Only a few things worth noting. The static width on the .post div controls the width of each block. The vertical-align property on the table row keeps each of the blocks aligned to the top of their table cells. This defaults to middle, so this is necessary.

The Results

With CSS and JavaScript both on (99% of users), we’ll have a nicely executed horizontally scrolling site. With CSS and JavaScript both off (screen readers), the structure of the individual blog posts rule the page, assuming they are semantically marked up, the page will look great. The only quirk here is if JavaScript is on and CSS is off (RARE), the page looks a little bizarre.

View Demo Download Files

Other techniques for horizontal scrolling

Literally expanding the width of your page and using scrollbars to navigate it is only one way to achieve the horizontally scrolling effect. Javascript sliders are another route you could take, which simulate the effect. Flash would be another possibility. When it comes to web design, there is always many ways!

Examples of nicely designed horizontally scrolling sites

• norma cordova photography
• jodi moore | portfolio
• Urban Outfitters: Blog
• Evanescence
• Nana
• Beca
• Radio Zen
• The Horizontal Way

My favorite package for doing fancy tooltips is Prototip for the Prototype javascript framework. Prototip is free to download but requires a small licensing fee to use it on your domains. We will be using only a tiny fraction of what Prototip is capable of here, but hopefully this demo will open up the door of possibility should you need to do something like this.

View Demo Download Files

Image Mapping the Image

Creating image maps is one of the few features I always pop open Dreamweaver to do. When you have an image selected on your page in Dreamweaver, you get little tools in order to draw the areas directly onto the image.

Can’t beat that for simplicity, trying to create areas without some kind of WYSIWYG editor would be a nightmare. Use this code as a starting point and then you can add unique ID’s to each area. You will need those unique ID’s to target with Prototip. Your final code will be something like this:

<img src="images/image.jpg" alt="image" usemap="#Map" />
<map name="Map" id="Map">
	<area shape="circle" coords="147,131,12" href="#" id="tooltip-1"/>
	<area shape="circle" coords="178,169,12" href="#" id="tooltip-2" />
</map>

Adding Prototip

You’ll need to include prototype and the prototip javascript files in your header, the use the new Tip function to create the tooltips for each ID.

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/prototip.js'></script>
<script type='text/javascript'>
	function init() {
	//<![CDATA[
		new Tip('tooltip-1', '<h3>Content for Tooltip 1</h3>', {title : '', className: 'silver', effect: 'slide', showOn: 'mousemove', hideOn: 'mouseout', fixed: true, hook:{target: 'topLeft', tip: 'bottomLeft'} });
		new Tip('tooltip-2', '<h3>Content for Tooltip 2</h3>', {title : '', className: 'silver', effect: 'slide', showOn: 'mousemove', hideOn: 'mouseout', fixed: true, hook:{target: 'topLeft', tip: 'bottomLeft'} });
	//]]>
	}
	Event.observe(window, 'load', init, false);
</script>

You can see in the code above some of the different options for Prototip. First of all, you target the ID and provide the HTML content for the tip. Then you can apply a class name, locational targeting, and change the events on which the tooltips trigger.

Tooltip CSS

This example uses very very basic styling.

.prototip 				{ position: absolute; }
.prototip .silver 			{ width: 733px; font-size: 1.8em; }
.prototip .silver .content 		{ text-align: center; padding: 10px 0; }

Most importantly, you need absolute positioning applied to the .prototip element so that your tips can pop up where they are supposed to and not affect the layout flow of the document. Then through your applied class you can do the rest of your styling. This allows you to have different styling for different tooltips which is a great feature. Notice in the example we have “silver” as the class name. This is what is applied in the javascript and what the CSS is targeting.

So — the usual disclaimer applies here. There are lots of ways to do this. You can create pure CSS tooltips if you’d like and I’m sure every major javascript framework has a solution of their own. My focus here to to show you can attach those tooltips to image maps through unique ID, which can be quite useful.

Band Website Template

We have WordPress installed, now let’s really get our hands dirty and start getting WordPress to do what we want it to do. We start by poking around the backend activating some plugins, changing some settings and creating posts/pages. Then we take a look at the Photoshop design and note some of the important aspects. Layout, color palette and font choices are all imporant things to consider as well as the overall feel. WordPress sites don’t need to scream “Blog!” unless you want them to. Then we take a look at the modular nature of a WordPress theme and start altering the markup of the files and writing CSS. In part three, we will continue touching up the design, adding details and content. We may get to the finishing touches of adding the “extra-content” stuff like the Twitter feed, or that might be a part four.

Special thanks to Volkan Görgülü who sparked the idea for this design and provided a nice sketch I used while Photoshopping the design.

Band Website Template

We need to ways to describe content in an HTML/XHTML document. The basic elements like <h1>, <p> and <ul> will often do the job, but our basic set of tags doesn’t cover every possible type of page element or layout choice. For this we need ID’s and Classes. For example <ul id=”nav”>, this will give us the chance to target this unordered list specifically, so that we may manipulate it uniquely to other unordered lists on our page. Or we might have a section on our page that has no relevant tag to signify it, for example a footer, where we might do something like this: <div id=”footer”>. Or perhaps we have boxes in our sidebar for keeping content over there separated in some way: <div class=”sidebar-box”>.

These ID’s and Classes the “hooks” we need to build into markup to get our hands on them. CSS obviously needs these so that we may build selectors and do our styling, but other web languages like Javascript depend on them too. But what is the difference between them?

ID’s are unique

• Each element can have only one ID
• Each page can have only one element with that ID

When I was first learning this stuff, I heard over and over that you should only use ID’s once, but you can use classes over and over. It basically went in one ear and out the other because it sounded more like a good “rule of thumb” to me rather than something extremely important. If you are purely an HTML/CSS person, this attitude can persist because to you, they really don’t seem to do anything different.

Here is one: your code will not pass validation if you use the same ID on more than one element. Validation should be important to all of us, so that alone is a big one. We’ll go over more reasons for uniqueness as we go on.

Classes are NOT unique

• You can use the same class on multiple elements.
• You can use multiple classes on the same element.

Any styling information that needs to be applied to multiple objects on a page should be done with a class. Take for example a page with multiple “widgets”:

<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>

You can now use the class name “widget” as your hook to apply the same set of styling to each one of these. But what if you need one of them to be bigger than other other, but still share all the other attributes. Classes has you covered there, as you can apply more than one class:

<div class="widget"></div>
<div class="widget big"></div>
<div class="widget"></div>

No need to make a brand new class name here, just apply a new class right in the class attribute. These classes are space delimited and most browsers any number of them (actually, it’s more like thousands, but way more than you’ll ever need).

There are no browser defaults for any ID or Class

Adding a class name or ID to an element does nothing to that element by default.

This is something that snagged me as a beginner. You are working on one site and figure out that applying a particular class name fixes a problem you are having. Then you jump over to another site with the same problem and try to fix it with that same class name thinking the class name itself has some magical property to it only to find out it didn’t work.

Classes and ID’s don’t have any styling information to them all by themselves. They require CSS to target them and apply styling.

Barcodes and Serial Numbers

Maybe a good analogy here is bar codes and serial numbers. Take an iPod in a store. On the packaging will be a bar code. This tells the store what the product is, so when it is scanned, the system knows exactly what the product is and what it costs. It might even be able to know what color it is or where it was kept in the store. All iPod of this same type have the exact same bar code on them.

The iPod will also have a serial number on it which is absolutely unique to any other iPod (or any other device) in the world. The serial number doesn’t know the price. It could, but for the store this wouldn’t be a very efficient way to store and use that data. Much easier to use the barcode, so that for example, if the price changed, you could just change the price for that bar code and not every individual serial number in your system.

This is much like ID’s and Classes. Information that is reuseable should be kept in a class and information that is totally unique should be kept in an ID.

ID’s have special browser functionality

Classes have no special abilities in the browser, but ID’s do have one very important trick up their sleeve. This is the “hash value” in the URL. If you have a URL like http://yourdomain.com#comments, the browser will attempt to locate the element with an ID of “comments” and will automatically scroll the page to show that element. It is important to note here that the browser will scroll whatever element it needs to in order to show that element, so if you did something special like a scrollable DIV area within your regular body, that div will be scrolled too.

This is an important reason right here why having ID’s be absolutely unique is important. So your browser knows where to scroll!

Elements can have BOTH

There is nothing stopping you from having both an ID and a Class on a single element. In fact, it is often a very good idea. Take for example the default markup for a WordPress comment list item:

<li id="comment-27299" class="item">

It has a class applied to it that you may want for styling all comments on the page, but it also has a unique ID value (dynamically generated by WordPress, nicely enough). This ID value is useful for direct linking. Now I can link directly do a particular comment on a particular page easily.

CSS doesn’t care

Regarding CSS, there is nothing you can do with an ID that you can’t do with a Class and vise versa. I remember when I was first learning CSS and I was having a problem, sometimes I would try and troubleshoot by switching around these values. Nope. CSS doesn’t care.

Javascript cares

JavaScript people are already probably more in tune with the differences between classes and ID’s. JavaScript depends on there being only one page element with any particular, or else the commonly used getElementById function wouldn’t be dependable. For those familiar with jQuery, you know how easy it is to add and remove classes to page elements. It is a native and built in function of jQuery. Notice how no such function exists for ID’s. It is not the responsibility of JavaScript to manipulate these values, it would cause more problems than it would be worth.

If you don’t need them, don’t use them

As you can see, classes and ID’s are very important and we rely on them every day to do the styling and page manipulation that we need to do. However, you should use them judiciously and semantically.

This means avoiding things like this:

<a href="http://css-tricks.com" class="link">CSS-Tricks.com</a>

We already know this element is a link, it’s an anchor element! No particular need here to apply a class, as we can already apply styling via its tag.

Also avoid this:

<div id="right-col">

ID is appropriately used here as the page will likely only have a single right column, but the name is inappropriate. Try and describe the context of the element, not where it is or what it looks like. An ID here of “sidebar” would be more appropriate.

Microformats are just specific class names

Think microformats are over your head? They aren’t! They are just regular markup that make use of standardized class names for the information they contain. Check out a standard vCard:

<div class="vcard">
  <a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
  <div class="adr">
    <span class="type">Work</span>:
    <div class="street-address">169 University Avenue</div>
    <span class="locality">Palo Alto</span>,
    <abbr class="region" title="California">CA</abbr>
    <span class="postal-code">94301</span>
    <div class="country-name">USA</div>
  </div>
  <div class="tel">
   <span class="type">Work</span> +1-650-289-4040
  </div>
  <div class="tel">
    <span class="type">Fax</span> +1-650-289-4041
  </div>
  <div>Email:
   <span class="email">info@commerce.net</span>
  </div>
</div>

Band Website Template

Noupe with another very nice monthly roundup of good design-y stuff around the web last month. I like these giant monthly roundup posts. Gives a good monthly goal of trying to write things that are worthy of being on it. Didn’t Smashing Magazine used to do monthly roundups and then just randomly stopped?

Google now indexes Flash content

From the horse’s mouth:

All of the text that users can see as they interact with your Flash file. If your website contains Flash, the textual content in your Flash files can be used when Google generates a snippet for your website. Also, the words that appear in your Flash files can be used to match query terms in Google searches.

One less excuse to avoid Flash now when customers want it. At least we still have “accessibility”.

Ian Whitmore

A friend of mine recently recieved his MFA from UI-Bloomington and he sent me a link to another UI alumni, photographer Ian Whitmore. The “Channels” series is particularly cool. An interesting take on portraiture.

Interview

I was interviewed again this week. This time by Webia, the “Web International Awards”. There is no direct link to it, but this page should have it and then you can see the whole thing with the “full story” link.

Weekend Issues

Thanks to everyone who emailed last Friday about the downtime. My MySQL container on Media Temple was kaput and needed a manual restart. Was down for a quite a few hours there, so sorry about that. Then I thought I would get smart and start using WP Super Cache. This is the third time now I’ve tried to use a caching plugin, and it’s the third time now that it has completed wrecked my RSS feed. I tried doing everything suggested in this thread, still no dice. I think it’s basically caching my feed even though I’m telling it not to, which then serves up my feed as a web page and not an XML document which obviously feed readers can’t handle.

There is a new poll in the sidebar folks. This one is about Content Management Systems (CMS). There was a pretty good comment thread going a little while ago which sparked the idea for this poll.

I’ve always been a WordPress guy, and now with the ability to easily create different page templates for different page styles, I feel like it really has evolved into a “real” CMS instead of just a blogging platform. However, I am extremely curious and interested in other CMSs and what they have to offer. To me, it seems like Drupal or Joomla would be a smarter route to take if you were creating a site that was segmented into different major areas, each with kind of a life of it’s own. For example, DZone has sub-sites like Javalobby and Eclipse Zone. Each of these have different leaders, different RSS feeds, different looks… I think that would be hard to do with WordPress, much easier with Drupal. Am I right?

Cast your vote in the sidebar and let’s see which CMS reins supreme favorite amongst CSS-Tricks readers. Remember you can view and participate in past polls on the Polls page.

Band Website Template