The key here is efficiency, and this can be achieved through minimising your markup. It’s an important topic that seldom gets discussed when talking about website design because the web-design process is so multi-faceted. If you’re a designer, you’ll probably scoff at what I’m about to say here, because in essence, we’ll be putting the training wheels back on the bike by venturing into elementary CSS elements. What’s funny though, is that revision is a quintessential part of web design. Not only should you be digesting new industry techniques, but you should always be revisiting what you already know. Why? Because it can only benefit you in developing your design prowess and plugging the holes in the elements of your code that you have compensated with shortcuts and CSS hacks.

Let’s get into it, shall we?

Why is valid mark-up only half the battle? Well, the most obvious predicament facing designers is W3C conformity. Just because your code meets W3C specifications does not implicitly mean that your mark-up has used the minimal level of code it can possible achieve. In fact, your code might greatly exacerbate what really needs to be in there. Sporadic positioning, extraneous functions that could be minimised simply by following the best practices that you were taught when you first started learning mark-up languages. Sure, the exaggerated function of such lengthy code might have justification because it makes the application of the CSS easier, but there are still ways that you can compact your markup and create just the right amount of style control by properly using the cascade.

Descendant Selectors

The side bar is one of the most commonly over-styled elements of a web page, so it’s the perfect place to see descendant selectors in their prime. It’s the element that contains all of the tid-bits, text-snippets and wacky widgets. Normally, we love to stuff everything into a <div> element, so lets run through a few examples of sidebar styling and how the descendant selectors can make an appearance to streamline things a bit.

Method one: Class overkill

1
2
3
4
5
6
7
8
9

<div id=”sidebar”>
	<h3 class=”sideheading”>My stuff</h3>
	<p>Stuff I like</p>
	<h3 class=”sideheading”>Links</h3>
	<ul class=”sidelinks”>
		<li class=”link”><a href=”captainplanet.html”>Captain Planet</a></li> 
		<li class=”link”> <a href=”bikermice.html”>Biker Mice From Mars</a></li>
	</ul>
</div>

Wow, that really was class overkill. I even got tired typing that out, but if you actually take a look around the web and view some page sources, this is an extremely common method used by designers. It sort of feels like the old school method of doing long division. You get the answer you want at the end, but getting there was an epic journey and there may have been a better way of doing it. In the above example, despite the class delegation not being liberal there could be an apt justification for this method. For instance, you may have decided to assign the “sideheading” class the two <h3> elements so that these headings will have a unique style from other elements on the page. The same could be said for our <ul> and <li> elements.

Now let’s have a look at what CSS for class-happy mark-up, I’m going to go ahead and say that I want to see some Georgia for the font, in a nice deep purple with a solid black border. The links will have bullets disabled and will be bolded and underlined. For method one it will probably go something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.sideheading {
	font-family: Georgia, Palatino, Times, Serif; 
	color: #660099
	border-bottom: 1px solid black;
	}
 
.sidelinks { 
	list-style-type: none;
	}
 
.link {
	font-weight: bold;
	text-decoration: underline;
	}

By calling upon each class declared in our mark-up, we can apply unique styles to each segment. The sidebar is just a snapshot of the method, envision the application of this method across the entire website build. It works fine, and surely you’ve used this method to implement an elegant, sophisticated design, however it’s going to be chaotic and confusing, with lack-luster benefits to load time, search and usability for your own peace of mind. No-one enjoys navigating through a coded labyrinth of classes!

Let’s reiterate that method one is like old school long division, and there are much easier ways that we can reduce the mark-up that’s required for each of those classes.

Method Two: The Darwinist Theory

It’s time to talk natural selection for method two, the ultimate in code compression:

1
2
3
4
5
6
7
8
9

<div id=”sidebar”>
	<h3>My stuff</h3>
	<p>Stuff I like</p>
	<h3>Links</h3>
	<ul>
		<li><a href=”captainplanet.html”>Captain Planet</a></li>
		<li><a href=”bikermice.html”>Biker Mice From Mars</a></li>
	</ul>
</div>

There’s a prevalent amount of logic behind this minimisation. We don’t need classes because we’ve contained all of these elements within a <div> that has a unique identifier (#sidebar).

This is where the descendant selectors start asserting their primary purpose, by referencing elements that are contained within the sidebar we can then decimate any stupid class that we don’t need using a bit of logic, and a bit of context.

Time to feel the wrath of the contextual CSS:

1
2
3
4
5
6
7
8
9
10
11
12

#sidebar h3 {
	font-family: Georgia, Palatino, Times, Serif; 
	color: #660099
	border-bottom: 1px solid black;
	}
#sidebar ul {
	list-style-type: none; 
	}
#sidebar li {
	font-weight: bold;
	text-decoration: underline;
	}

When we factor the sidebar identifier into our CSS, we can declare a unique style to any of the elements contained within the ID by using our descendant selectors. How the descendant selector works is pretty simple to understand, look at the list elements for example, only the <li> elements within the sidebar div will inherit the rules that you have declared.

This is called contextual CSS, and it’s an amazing way of implementing skeletal mark-up whilst still producing some enchanting styles for your website. In effect, you’ll be transforming your website’s innards from that of a dough boy to a skeleton warrior… And everybody loves skeleton warriors!

Don’t be fooled, this is just one depiction of how an element can be emptied of its baggage, as well as how descendant selectors should be implemented to begin with. You can apply some descendant selector magic to the entire build of your website, ideally by dividing the build of your website into logical and practical segments (eg. #header, #nav, #content, #sidebar and #footer) to apply the descending style format.

What would happen if, say, we’ve styled the <h3> elements in the #nav and #sidebar sections and we would like each of the headings to be a different colour, and the h3 font-size in the nav bar to be smaller. We’ve already got the dark purple in the #sidebar and would like a nice icy blue colour for our navigation menu. We don’t need to disturb our mark-up by adding new <h3> classes to our headings. Instead, we can just add a global style to the CSS and then alter one of the elements individually using the descendant selector:

1
2
3
4
5
6
7
8
9
10

h3 {
	font-family: Georgia, Palatino, Times, Serif; 
	}
#nav h3 {
	color: #33ccff;
	font-size: 1.4em;
	}
#sidebar h3 {
	color: #660099;
	}

It’s a simple as that. What we’ve said here is that every single <h3> element should maintain our Georgia font, while our colours will be defined via the context in which they are used. Global declarations are great because they minimise the repetition in multiple declrations (trust me, they add up), and keep things nice and simple to read.

Now you’ve revised div class abuse in mark-up, stay tuned for part two where we take a look at div wrapper fiends and how they’re insulting the use of perfectly good block elements!

Recently, I was given the opportunity to leave my desk for the afternoon and indulge in something you might consider to be the ultimate level of geekdom; visiting the Google offices in Sydney.

The purpose of the visit was to accompany my boss in meeting some of the folks behind the AdSense program. When you take your first steps into the main foyer, you’re instantly drawn towards the colossal Google logo on the wall. And I know Google’s unofficial slogan is “Don’t Be Evil”, however I couldn’t help but think I had just walked into the Death Star. I know, it sounds cliché, but until you visit the place and see it for yourself, you really can’t visualize what a unique workplace Google has.

“Google is at the forefront of delivering next generation web based solutions, and it’s very exciting to be part of that.”

Andrew – Software Engineer
Sydney, Australia

To add, the entire building is laid out like a maze with something visually stimulating in every corner. Entering our meeting room, we were given a short tour past the games room which contained all of the spoils the happy Googlers get to treat themselves to. I’d be happy too; PS3, X-Box, Guitar Hero and pool tables—the whole deal. Moving along I was prescribed a Red Bull during our walkthrough of the kitchen stocked with more food and drink than you can possibly imagine, ready for the next snack time.

I even caught a glimpse from the hallway of these large displays showing in real-time the keywords users from all around the world are currently searching for. Noting the most popular keywords at that exact moment: ‘Obama’, ‘Tiger Woods’, ‘Chilean earthquake’ and ‘how to tie a tie’—thanks Google, you truly are providing millions of aspiring men with a means to dress as true gentlemen.

The meeting itself was a real insight into the tools available within Google’s Empire and arsenal of ad-revenue techniques. While we did talk properly about the AdSense program, including a lot of information covered by the NDA I had to sign when coming to the reception area, my highlight was definitely seeing the casual creative environment where developers like myself are free and even encouraged to do what they do best. Unfortunately, like the many others who have tried before me, I wasn’t allowed to take any snaps of my trip so the images you’re seeing are taken from Google’s own webpage.

Take the time to view Time Magazine’s insight into Google’s Offices as they show exactly the kind of environment that they boast—just remember that the pictures really don’t do it justice.

Reflecting on my own visit, I’m still blown away by it all. I managed to receive some interesting views on revenue streams and answers to many of my questions. The AdSense team was really down to earth and overall a very nice group of people.

I hope you get the chance to visit the offices for yourself one day. For more information and a further look into what it’s like to work at Google, I recommend this video.

Many WordPress plugins are poorly written—not future proof, bug-ridden, contain invalid code or share no regard for their counter-effect on other plugins or scripts. On the other hand are the ones created with a broad feature-base, while your site only uses a small fraction of it’s core code. When you start to install all of these plugins you can severely slow down your site, or even break it if they clash with one another. I’ve seen the smallest of WordPress blogs with so many plugins installed that it’s just not funny—how many of them are actually required? Usually only a handful.

A lot of this comes down to the controversial approach of giving the average computer user full control of their website in the age of the CMS. In 2010, everyone wants or already has a website, every thinks they are or wants to be a web designer.

So if you’re tired of seeing this (left) every time you log in to your admin panel, you shouldn’t take this advice lightly. For the purpose of usability, Let’s break this down into three areas that the average WordPress user won’t necessarily have a great understanding of, or may not be aware of the solutions available.

Bolt-On WordPress E-Commerce

Without a doubt something a designer or blogger shouldn’t have to go near. It’s pretty much unavoidable to use a plugin for e-commerce, due to the advanded programming required and the high level of security necessary to maintain such a feature.

Introducing the Shopp Plugin

No, that wasn’t a typo. My vote goes hands-down to Shopp—the best plugin I’ve ever used with WordPress. The store that used to be on this site ran on this engine as do a couple of other projects I’ve worked on. Shopp is a premium plugin, so it will set you back $55 for a single license, but take it from me that’s a small price to pay for the near-endless functionality you’ll receive.

Shopp boasts a very well maintained documentation & support centre and a solid developer API for building customised e-commerce themes. It has great support for selling digital and physical products, integration with popular payment gateways, and a fully-fledged user account system for tracking orders and providing access to digital downloads.

When placed beside other e-commerce plugins like Instinct’s WP E-Commerce and eStore, from my experience there really is no comparison.

Think about it—with this single plugin you can add a complete store-front to your website allowing you to sell physical products, offer your users access to premium digital goods, run online auctions and even maintain a donation meter system. All without too much additional work if you’re not fussed about branding. Do you really need a separate plugin for each of those features?

Search Engine Optimisation

Let’s face it—real SEO requires a lot of work, and no plugin can truly offer an automated approach to fulfilling all of the actions required to maintain a solid search campaign. What they can do, is use your website’s content to generate search friendly meta data and tags. If your content sucks, so will your search results.

Content is King - Gary Vaynerchuk

There are three plugins I could honestly recommend for use with your search campaign—the reasons for this I’ll go in to shortly. For everything else, do it manually if you want results.

Google XML Sitemap Generator

Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling. In its simplest form, a Sitemap is an XML file that lists URLs for a site along with additional metadata about each URL (when it was last updated, how often it usually changes, and how important it is, relative to other URLs in the site) so that search engines can more intelligently crawl the site.

As your website grows, so will your Sitemap. If you post regular updates to your blog, or edit your content often—you’re going to want Google and the other search engines to know. This is where the sitemap generator plugin comes in. The Google XML Sitemap plugin will generate a sitemaps.org compatible sitemap of your WordPress blog, and that’s why I love it so much—that’s all it does, and it does a great job of it too.

A couple of years ago I used to create these manually for my sites, but as I started using CMSs more often, it grew out of hand and an automated solution was needed. This plugin, does the trick perfectly.

WP-SEO vs All in One SEO Pack

Im a bit un-decided between these two, so if you have had any experience with either or both (positive or otherwise) of these plugins, I’d love to hear it. I’ve used the All in One extensively on many projects and have never had a problem with it. However I recently became aware of WP SEO and am keen to give it a whirl. Which ever way you go, I’m sure they both achieve a similar result in terms of generating the right meta data for your site—because that’s all we want it for right?

There are just certain things that you shouldn’t let a machine handle. I wouldn’t want a plugin to add alt tags to my images. I wouldn’t want a plugin to convert my titles to h1s, to add nofollow attributes to any of my links or to try and validate my code. But I’m happy for it to use content I’ve already created, and assuming I’ve setup the plugin structure correctly, generate my titles, descriptions and keywords. Good SEO requires dedication and time; these plugins are just tools, nothing more.

Form Building

The final element I want to cover for this post is building and managing forms. The average user can’t do this—but every site needs one. I’ve seen webdevs and designers be baffled by the process of building even the simplest of web forms—so understandably, it’s acceptable to use a plugin for this sort of more advanced functionality.

I’ve tried them all. Believe me—I’ve used (almost*) every WordPress plugin under the sun to build forms and to tell the truth I don’t like any of them.

* I’m well aware of the Gravity Forms plugin which I’d kill to be able to have a go at, but don’t like the idea of paying $200 for a plugin. But that’s just me.

If I had to pick one, I’d choose cForms II by Delicious Days. My main problem with the plugin is really that it does too much. I like simplicity more than anything else and this plugin is far from it—packed with so many features that it’s near impossible to hand over to a client to handle.

The plugin itself is well built, and can do pretty much anything. But I’d recommend the developers of cForms read Jason Fried’s book Rework and learn why more often than not, having less features makes your product better than the competition.

In Conclusion

The WordPress plugin directory is a bit like the iPhone App store (or the web as a whole for that matter). You might say the Pareto Principle applies to all three. Do your research before spamming the backend of your site with plugins and dodgy code. Consider building functionality right in to your template, and get it right the first time around.

Domain names vs website names

If possible, you should try to make your domain name the same as either your name if it’s a personal site, your company’s name, or your website’s name. This isn’t always an easy task, especially if you’re in a competition-heavy field and don’t have a very unique name.

Naming your site after your domain may seem like the obvious thing to do, but surprisingly, not every website is named this way. Naming a site after its domain name is important, for the simple reason that when people think of your website, they’ll naturally think of it by name. If your name is also your URL, they’ll automatically know where to go. Particularly with less tech-savvy internet users, some people will actually try looking for a person or company by typing “businessname” followed by “.com” into their browser before using a search engine—I’ve seen this happen.

If you choose not to name your URL after your website for whatever reason, then you’re relying on users to return to your site either by bookmarking it or by searching for it again in a search engine. For this reason, it really pays to have a domain name that reflects your site or business because there are fewer things for your visitors to remember.

The correct length for a domain name

Technically, a domain name can be any combination of up to 67 alpha-numeric characters including or excluding hyphens, followed by an “extension”. Acronyms and abbreviations can in some instances be easy to remember if they have a catchy ring to them, as can longer domains if they flow nicely. Which is easier to remember; ytmnd.com or yourethemannowdog.com? I’ll bet your answers would split evenly here. There is no right or wrong length for your domain name—what it really bores down to is how simple it is to use and remember.

Double characters for separate words

When your name or business name is made up of more than one word and the last letter of the first word is the same as the first letter of the next word, users can become confused as to what the exact domain name is. Let’s take a look at this example; imagine our trading name was Business Seven—what would be the best domain name to use?

1. www.businessseven.com
2. www.business-seven.com
3. www.business7.com

While under normal circumstances, it’s considered best practice to avoid hyphens because it breaks the users’s natural typing process, this particular case would be an exception because there is no way you’d want to have three of the same letter in a row.

Using a combination of numbers and alpha-characters in domain names has become quite a fashion in recent years, with websites such as 37Signals, 45Royale and 24Ways being prime examples. However, it’s only a good idea to use this technique if that accurately reflects your company’s name ie. Business7 not Business Seven. Therefore, the best choice would be number 2, as it is the easiest to absently type while also representing the business most accurately.

Hyphens in domains with multiple words

Hyphenated domain names are often frowned upon for quite a few solid reasons. However, there are some advantages, and often it can be unavoidable if all of your other options are already taken. Should you get a hyphenated name for your website? There are a few things to consider:

Disadvantages

It’s easy to forget the hyphens when typing a name. Most websites do not have hyphens, which has forced users to get used to typing out multiple words without spaces or hyphens. In some cases, your users could actually leave out the hyphens when typing in your address and end up at your competitor’s site or something completely irrelevant and get the wrong impression of you and your service.

It’s hard to communicate a hyphenated domain name offline. Imagine telling someone your website address over the phone or in person if it had a couple of hyphens in it? Not easy.

Advantages

On the other hand—although it’s not as great an issue anymore with modern search engines being much more sophisticated, it can be easier for the engines to distinguish the keywords used in your domain name and thus return your site more prominently in search results for those keywords, if you do use a hyphen.

Over-the-top creative license

Creative license is great—but you can always have too much of a good thing. Many business names or website names are made up of commonly used words with spelling modifications or puns. This can give you a funky looking name for sure, but how easy is it for your users to remember at the end of the day? It’s a lot easier to navigate to www.graphicdesign.com than www.graffikdezyne.com isn’t it? Your users and search engines could also become confused and associate you with the wrong subject matter.

This is definitely something to consider when choosing your domain (and even your business name). I for one, learnt this the hard way with my previous website, having to physically spell out the word over the phone and in person for many users, causing frustration and unnecessary confusion.

How close is too close?

On the other end of the scale, you don’t want your domain name to be too similar to your competitors’, or your users could navigate away from your site and on to theirs. This is why it’s always a good idea to purchase the .com, .net and .org versions of your domain if possible. You can then setup a domain redirection and point them all to the one “master” site. This will help with SEO results and just make life a little bit easier for your users.

Summary

In conclusion, it’s important to note that there is no “correct” domain name, but rather a set of guidelines and common sense that should be considered to ensure the maximum accessibility to your site and the success of the ultimate offering. Try to keep your domain as simple as possible, at a comfortable length and with relevant keywords. If possible, purchase commonly used extension variants just to be safe and avoid being too similar to your direct competition. If you can check all of those boxes, your chances of having a “web-friendly” and accessible website will be much greater.

Let’s say for example you own the following domains:

• www.domain.com
• www.domain.com.au
• www.domain.net

There are many reasons why you would do this; mainly for SEO purposes, international site variations or to stop imitators—but that’s a story for another day. Obviously, though I have known clients who ignorantly do this, you’re not going to want to manage three copies of the exact same website for many reasons;

• You’re paying for extra hosting that you don’t actually need
• Your search engine optimisation will be split among three different websites—good luck getting results!
• Your visitors are being forced to download and cache the same information at different addresses.
• None of your analytics will be accurate

The list goes on. What needs to happen in this situation, is a domain redirection. It’s very simple to do, and will save you money and time and will even help your search engine results, not to mention just being “web-friendly”.

Here’s the tutorial

1. Open any text/html editor and create a new document.
2. Save this document anywhere on your hard drive and name it “index.html” without the quotes.
3. Copy the following code into the document:

1 2 3 4 5 6 7 8 9

<html xmlns="http://www.w3.org/1999/xhtml">   <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="refresh" content="0;url=http://www.redirecthere.com" /> <title>You are being redirected&hellip;</title> </head>   </html>

4. Edit “http://www.redirecthere.com” to the full URL of the website you want to redirect to.
5. If you wish, edit the title of the webpage—this is not so important, as it will only be seen for a fraction of a second before the redirection kicks in, but it’s always best to be as professional as possible.
6. Using FTP or your web control panel, upload this file to the root of each domain you want to redirect from.

That’s it! To make things a little easier, I’ve created this file as a template and made it available for download here:

Download Redirection Template (4KB)

Simply unzip the file and edit as described in steps 4 and 5, then upload it to each domain you wish to redirect from. Too easy!