Six Revisions

The phrase "design by committee" evokes a range of emotions from designers, mostly the kind you save for an arch-nemesis (think Lex Luthor) or expend on your Windows-based PC. A quick search will uncover a variety of articles and jokes bemoaning the process, and with good reason; it has long been the Achilles’ heel of many a designer’s creative freedom.

However, as enjoyable as it can be to slam the design feedback process, there are steps you can take to make the most out of it — because let’s face it — you usually don’t have a choice to design on your own (and if you do, consider yourself lucky).

In fact, there may even be situations when design by committee (when managed effectively) produces better results than a single design dictator could produce on their own. Like the old proverb says, "two heads are better than one," which can result in additional experience (knowledge of what has worked and what hasn’t in the past), combined creativity, unique viewpoints and efficient error checking.

Before we continue, let’s examine why design by committee exists and why it so often fails.

History of Design by Committee

Design by committee occurs anytime more than one person is actively involved in a design project. For most designers, this is standard operating procedure. At times, a committee might consist of a boss or client weighing in on the design, but more often than not, it can encompass your co-workers, managers, clients and even outside opinions (think spouses, children and pets). Oftentimes a committee is established to make everyone feel involved in the process, or to provide a "safe and often anonymous process for finger-pointing down the line," says writer and graphics artist, Speider Schneider.

Design by committee is nothing new. On July 4, 1776, a design committee was established to design a seal for the new American nation. Members of the original committee included well known historical figures like Benjamin Franklin, Thomas Jefferson and John Adams. After numerous variations, three separate committees and six years of revisions, a final design from Charles Thomson was approved.

Since that event, which certainly was not the first, thousands of other designers like Thomson have dealt with design committees. And while we may be able to consider his final product a success, the process itself (6 years in the making) most likely was not.

Hopefully, the thought of participating in a multi-year, government-run design committee makes your situation seem a little more manageable.

Why Design Committees Fail

There is never one clear reason why design by committee fails. Usually it is a combination of factors that plague the project from the start. If you haven’t read Matthew Inman’s How a Web Design Goes Straight to Hell, it is the one of the most entertaining portrayals of design-by-committee-gone-wrong to date, along with Stop Sign Designed by Committee. Gary Hartley at The Floating Frog describes a typical design by committee outcome:

• Susan loves it
• Clive hates it
• Malcolm gives his thoughts 2 weeks later that contradicts his original changes
• Mike wants it how it originally was
• Clive’s wife adds her two cents
• Two members of the committee fail to give feedback

Sound familiar? Most committees end up in this kind of circular, unproductive feedback loop because the group operates on many or all of these principles:

• Lack of a clearly stated objective
• Suggestions based on individual opinions
• Absence of a strong leader
• Disorganized feedback process
• Personal or political agendas

Despite the obvious pitfalls of design by committee, there are effective strategies for navigating the process that can produce positive outcomes. When done right, the product of a well-run design committee will satisfy all parties involved and produce a better design than if just one person were in control.

How to Successfully Navigate Design Committees

There are several approaches you can take next time you find yourself in a design by committee situation. One option is to never give in, ignoring the suggestions of others and stubbornly standing by your creative decisions. This tactic — if it doesn’t get you fired — will certainly label you as "defensive" and "insubordinate."

On the other end of the spectrum is the doormat approach, yielding to everything and trying to be a crowd-pleaser. This approach may be more favorable for your immediate career prospects, but eventually it will catch up with you, resulting in subpar, generic work.

Fortunately, there is a third way, an approach that will keep your client happy and allow you to maintain your creative integrity. Outlined below are the principles of this approach.

1. Clarify the Objective

A successful design starts with a well-defined objective that everyone understands and supports. Without one, it’s nearly impossible to complete a design project on your own, let alone as part of a large group. Be sure you also define and agree upon the target market, business objectives and criteria for success. Once you begin the feedback process, having a clear set of goals will help keep feedback on track and make it easier to disregard suggestions that are not in line with the objective.

2. Use the Right Tools

Meeting face to face to discuss a design proposal is often the most effective route, but when a meeting is not an option, it’s important to use the correct tools to facilitate an organized and productive discussion.

For example, collaborating via email often leaves a confusing string of comments and attachments which are difficult to manage and will lead to frustration.

Services like Private Feedback from Concept Feedback offer a secure environment where teams can exchange feedback in an organized and visual format (for more options, here are other feedback/critiquing tools).

3. Ask Good Questions

Instead of asking "What do you think?" which often elicits a long-winded emotional response, try to ask questions that require the participant to consider objective factors, like business goals or the end-user experience (i.e. "Does the design meet our stated business goals?").

Make sure to challenge personal opinions by asking questions that dig deeper and expose the core of the issue. Simply asking "Why?" can start the process of determining whether or not the opinion is valid and relevant to the objectives.

4. Defend with Reason

Make sure there is a purpose behind each element included in your design, and be prepared to articulate each of them. Having a well-reasoned response based on design principles and real world experience will be much better received than a defensive, emotional reaction. You should also know when to pick your battles. Some aspects of a design just aren’t worth arguing over.

5. Filter Feedback

A design committee is made up of a variety of personalities. Some people are there to see the project succeed and provide educated feedback, while others are just there to argue or add their fingerprint to the process.

Determining who is who from the outset can help you effectively manage the feedback process and focus on the suggestions and discussions that will contribute to the success of the project. If at all possible, try to limit the size of the group and only include key players to avoid added confusion.

6. Use Real World Testing

Internal discussions can only take you so far in the design process. At some point, your committee will run in to disagreements. Testing with real world users can often help resolve these disputes and determine a solution that not only works on the drawing board, but in a production environment.

Here are several tools to consider which can be used throughout the design process:

• Concept Feedback – Best for testing mock-ups and wireframes (pre-launch).
• UserTesting and Feedback Army – Ideal for testing websites in staging or production (pre or post-launch).
• Google Website Optimizer – Best for testing web page variations with real users (post-launch).

Summary

Design by committee is a fact of life for many designers. Despite the many negative connotations, when approached with the proper tools and strategies, design committees can be a satisfying experience for everyone involved, producing quality projects and happy customers. However, the responsibility is on you, the designer, to create an environment that produces results.

Have you had a design by committee experience of your own, whether good or bad? Let us know how you handled it in the comments below.

Case Studies

Read about some projects designed by committee.

• Design by Committee: The U.N. Headquarters
• The Perils of "Designed by Committee" as a Pejorative
• Design by Committee: W3C
• Designing the Great Seal of the United States

Related Content

• How to Make Remote Team Collaboration Work
• The Key to Successful Collaboration
• 15 Free Tools for Web-based Collaboration
• Related categories: Project Management and Productivity

About the Author

Andrew Follett is marketing director at a small business outside Chicago, Illinois and founder of the new feedback community, Concept Feedback. Follow Andrew and Concept Feedback on Twitter.

For most people, the web looks and feels like things are all peachy — vibrant, alive, new, fresh. However for those of us in the know, below this facade exists a consistent cycle of death and rebirth.

While many technologies and practices have left this world and passed on to the next (R.I.P Netscape), some have been more resilient. Supposedly dead elements of the web are rising from the grave, continuing to haunt us.

This article will explore the state of the web zombie invasion!

Nature of the Beast

I’m an avid horror film fan. I love television shows like Buffy the Vampire Slayer and movies like 28 Days Later. The idea of "beings" which shouldn’t exist (like vampires, ghosts, mummies, and zombies) highlights the similar thoughts and feelings I receive when viewing the source code of some pretty awful websites from back in the early days.

For the novice coder who hasn’t explored the history of our craft, these undead beings may blend into the landscape rather well. But unbeknownst to them is the debris of the "abandoned web" — and the perpetuation of this cycle.

IE6 is considered dead to such an extent that an unofficial funeral was given in its honour!

When I talk about zombies on the web, I’m not referring to the stereotype of the old-school "web surfer" who naively wanders around the internet, clicking on every get rich in 24 hours link to get malware infections — no, not those guys.

On the web, my zombies refer to the browsers, technologies, code and design practices that are officially dead, but continue to live.

Let’s talk about the walking dead, starting with web browsers.

Zombie Browsers

Of the many different types of web zombies that exist, the noticeable case of outdated versions of web browsers hold the potential for being most dangerous.

Ironically, these are the types of creatures that we hold the least amount of control over. We all know the agony of giving post-mortem support for Internet Explorer 6 (which passed its use-by-date eons ago when Microsoft issued its replacement, IE7). And we fondly remember the Netscape browser that IE killed. However, the scariest thing is that, even today, there are people who can’t or won’t let go of their undead browsers by taking five minutes to upgrade.

The invasion of zombie browsers is still an ongoing battle.

Because we can’t control the zombie browsers, the issue of those infected (staggering around using these dead shells) often becomes a matter of containment (patching our work) or in Zombieland style, killing their life support.

It’s a scary thought how many dead browsers exist out there on our clients’ machines.

In regards to the ethics of zombie support, some of us take the Shaun of the Dead approach. Because some people still have an attachment to their "undeceased" browsers (e.g. IE6), rather than shooting them up with "Upgrade your browser now!" messages or forcing them into a wasteland of zero tolerance, we keep them alive through hacks and special stylesheets — the developer equivalent of how Shaun from the movie kept his best friend, zombie Ed, alive in his shed.

Rather comical perhaps — but in many ways, some of us go out of our way to give leniency towards zombie browsers.

Zombie Technologies

Whereas we can easily spot the zombie browser — they stagger around the web confused at what CSS3, HTML5, and other modern standards mean — one of the more frustrating types of zombies are web technologies and standards that have already died, but developers still cling onto.

One perfect example of a zombie technology is Wireless Markup Language (WML). Due to the evolution of the smartphone market, modern mobile devices can now render regular HTML.

The peak days of WML may be over, but the BBC still shows this web zombie some love!

While WML itself is deprecated (W3C’s way of pronouncing something dead) — and let’s face it, it wasn’t exactly the real web in the first place — there are still some with old mobile phones wanting to access the web even through a subpar viewing experience.

To this day, there are still developers who insist on providing or maintaining WML versions of their website to cater to this zombie technology, and while their care for users with old cell phones is admirable, their contribution to the proliferation of a zombie web standard is not.

Testing your website using a variety of older handsets shows how bad things are getting.

Old technologies being replaced by new ones is nothing new to the nature of the web. And I suppose that like web browsers, there will become an epidemic point where the number of undead languages goes far beyond the number of living ones, which may be problematic for beginners deciding what they need to learn.

The case of undead technologies isn’t so much of an issue of support — as we modern web developers tend to comply with current web standards — but that of excess baggage that the web’s future is going to have to deal with.

Zombie Code

This zombie is something which most of us want to see dealt with in the harshest possible manner because it’s something that we have control and choice over.

While undead languages maintain some level of support for the sake of older browsers or devices, using deprecated HTML tags (e.g. <font>, <marquee>, <blink>) and non-standard/proprietary CSS (e.g. -ms-overflow-y) to solve today’s design tasks becomes proof of poor quality craftsmanship and thought by certain developers.

Revenge of the fallen markup — deprecated code still exists in modern web designs.

While we may consider zombie code as just an annoyance, let’s be clear and state they’re not completely benign.

The most worrying thing about zombie code is the danger of future browsers stopping the support of these deprecated and non-standard coding practices. What happens to these sites? They will still be floating around in cyberspace, waiting to be visited by a potential client, who’ll later come to us asking for their site’s logo to blink and scroll.

From past experience, I know of developers even today who still maintain and produce websites (professionally, I might add) using the kind of source code we would have expected to see in the early 90s — and it shocks me just as if I saw a real zombie straight out of 28 Days Later.

Separating structure from style is the modern convention, yet zombie code still works in modern browsers.

In much the same way as that of dead browsers or dead technologies, education will ultimately be the way to combat this epidemic of outdated code — code that "works" but does so using undead coding habits.

The number of casualties of the original browser wars  has served us a lesson of what happens when militant code becomes so disproportionate that web professionals are forced to deal with each browser individually (with the mobile device war, it could happen again).

Zombie Design Practices

Finally, we have something that is near and dear to my heart — the sympathetic case of what could easily qualify as design zombies.

We all remember the days of the early web: Table-based layouts (a zombie practice still widespread), obtrusive JavaScripts, spacer gifs, statistics counters, flashing banners, animated clipart, "designed for" banners, phoney website awards and background music (often blended to form an epileptic massacre of color).

While it could be seen that many of these practices have evolved into new strains, the issue of outdated design is as apparent today as ever.

Sites as bad of this can still be found on the web, and in many cases they’re still maintained!

Design is one subject that — with the web’s evolution — has managed to maintain a level of historical value with itself. If you’ve ever visited a newly launched website and thought, "Wow, this website looks retro in a bad way" — that’s a sign that you’re on a site designed using undead practices.

While zombie designs seem insignificant — as the code can itself be very well crafted using best practices and standards — they do nourish a sentiment of a lack of regard towards usability, accessibility, user experience and modern aesthetic appeal, making the design zombie an interesting foe.

Another well-intentioned website, with the aesthetic design value of a zombie.

In Buffy the Vampire Slayer, when asked to spot a vampire, Buffy looked for people in the club wearing seriously outdated clothes. While this is funny — it’s also true that having something so old looking that we could probably carbon date it will ultimately affect our users’ experience.

Education (surprise, surprise) seems to be the best way forward in eliminating undead designs.

The Circle of Life

With future standards like HTML5 and CSS3 emerging, brand new zombies from the array of existing standards will continue to rise.

Maintaining a skill set and knowledge base that is up to date — and staying ahead of the curve — is the best way to avoid the reoccurrence of zombie practices and habits.

And while some of the web’s afterlife will continue to exist without causing too much harm, there comes a time where such undead beings can ultimately lead us into a spiral of escalating annoyance and rot.

Details about standards aren’t that hard to come by when you know where to look.

It’s worth pointing out that the web has an interestingly rich history full of technologies which, though ousted by something newer, may still hold a place in our world.

While in a perfect world, the transcendence from one to the next should be the ideal solution, newborn standards (like XHTML 2.0) can die before their time. As such, don’t think of zombies simply as the old stuff — they can be new stuff that didn’t quite fully form yet but may have been early-adopted by some. Perceptions can lead to accidental shootings and you don’t want to give the death sentence to a practice that has legitimate value.

XHTML 2.0 unfortunately didn’t make it to fruition and thus became a newborn zombie.

Old standards die and new standards appear in their place — that’s just the way of the web. The circle of life is well intentioned, it moves us forward to bigger and brighter things. The solution isn’t to stop innovation — that’s just crazy — but culling the ever-increasing zombie population that still exists.

As an industry, it’s our duty to use what skill, knowledge and network we have to push back the zombie invasion. And while I’m not saying you should go after IE6 users with holy water and a crucifix, you could take a more civil approach through education and conversations.

If you know someone with web zombies, why not spend a few minutes explaining the problem and helping them make an informed choice? Every outdated element on the web we can eliminate is worth fighting against. Especially if we don’t want the web to be a haunted graveyard.

Related Content

• 5 Web Files That Will Improve Your Website
• Problems with Using Website Validation Services
• 10 Tools for Evaluating Web Design Accessibility
• Related categories: Web Technology and Web Standards

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

Globalization is one of the biggest business buzzwords in the 21st century. The rise of the internet as the world’s dominant medium is largely responsible for the onset of this global mindset, as businesses of all sizes realize the potential of tapping into new or emerging markets afforded by the World Wide Web.

So what can the web designers of the world do to help the global cause? How can developers ensure that their work is accessible and appealing to as diverse an international audience as possible?

The key is to think "international" from the outset. So even if you’re building a website intended only for English-speaking countries, there are measures you can put in place to ensure it’s as easy as possible to adapt later in the process.

And even if you have developed a culturally-flexible website, it may be helpful to know how you can make it as visible as possible to each of your target markets. To go global, businesses, designers, content writers — anyone involved in a website’s development process — need to think local.

So where to start? All the bells and whistles in the world are no substitute for quality content. Content is what makes visitors return to your site for more — so you must ensure your text can be adapted for international audiences.

Working with Unicode

If you do nothing else to make your website adaptable for non English-speaking countries, then at the very least you should ensure you create your web pages using Unicode.

Unicode is a computing industry standard, designed to promote and facilitate the consistent representation of text, irrespective of the script.

So English, Arabic, Chinese, Hebrew, Thai — any written language, whether it reads left-to-right or right-to-left, is catered for. Unicode has a repertoire of well over a hundred thousand characters, spanning ninety different scripts.

Most of the big players in the computing industry subscribe to the Unicode standard, with the likes of Adobe, Apple, Microsoft and Google all fully signed-up members of the Unicode Consortium. The Unicode Standard 5.0 is the bible that all developers and programmers really should have.

The most common character encoding for Unicode is UTF-8, which is a variable-length encoding representing every character in the Unicode character set. And unlike UTF-16 and UTF-32, it is backwards-compatible with ASCII, meaning UTF-8 is increasingly becoming the default encoding system for e-mail and websites.

Culture and Symbolism

Our culture affects the way we see the physical world and the meanings we attribute to objects in our immediate environment. The digital world often borrows from the physical world and uses metaphors to help enhance our understanding of something that would otherwise be incomprehensible to most people.

For example, if a user is logged onto a website and found that it was made up purely of zeros and ones, only the very geekiest of geeks would be able to grasp the meaning of the information.

And that’s why we use things like menus, checkouts, shopping baskets, buttons, folders, arrows — digital representations of real-life objects that help us understand the virtual world in front of us.

So if you’re designing a website for a culturally diverse audience, you really need to consider what visual representations you use on your website, as meanings can vary from culture to culture.

For example, in many cultures, the owl is a symbol of wisdom and grace. But in many Arabic countries, an owl is synonymous with pessimism — certainly, it isn’t the icon of positivity that exists in the west.

And whatever you do, try to avoid using a picture of green hat on your website if there’s a chance that you may target Chinese markets in the future. A green hat is a symbol of infidelity in China and should be avoided if possible.

As a web designer, there’s no way you can know for sure what graphical representations are suitable and where. But if you know there’s a particular market/country that you would like to target with your site at a later time, then it’s certainly worth putting the research in and establishing whether you should avoid any particular kind of imagery or references on your site.

Culture and Colors

Similar to graphics and imagery, color will play a big part in your website’s look and feel. But remember, you’re designing for your audience, not for you so it’s worth bearing in mind that colors represent different things in different cultures.

Red, for example, tends to denote danger, love, passion and even Christmas (with green) in most western countries. However, red can signify communism in some countries (e.g. Russia) or death/after-life in some Celtic countries.

Similarly, whilst orange is the color of Halloween in the US, or autumn/fall in many western countries, in Ireland Orange is synonymous with Protestantism.

And whilst yellow can represent summer or happiness in many western countries, it represents mourning in Mexico. It’s also worth noting that yellow can sometimes be associated with cowardice in western countries — but it actually means the opposite in Japanese culture, where it denotes courage.

Blue is often considered to be the best color to use from an international perspective as it has the most positive associations across most cultures.

Naturally, as a web designer/developer, you can’t accommodate every single culture with your design. But by being aware of such issues early on in the design process, you can be sure that your design is as culturally sensitive as possible, and it will help you avoid having to make drastic design changes later.

The Need for Speed…

Many web designers and developers have a multitude of technical skills covering a range of disciplines. So you may be adept at coding an entire website in HTML or JavaScript, as well as developing fancy Flash animations in ActionScript to really take your website to the next level.

However, given the proliferation of high-speed broadband internet across many parts of the world, it can be easy to forget that some countries are still awaiting the super-fast cyber-connections to head their way.

Much of South America, Africa, Asia and the Middle East are still on slow internet connections, which means that websites with heavy graphics and Flash animations may take a long time to load.

This isn’t to say you should build text-only websites, but if you suspect your target audience may not have sufficient bandwidth to access your pages, then you could consider having a stripped down text-only version of your site that users can select.

Text: The Food of Search Engines

If you’ve designed the world’s most attractive website, you probably deserve a pat on the back. But if people can’t find your website online, then there’s probably not a lot of point in it being there.

It’s often said that text is the food of search engines, it’s what Google, Yahoo! and Bing use to rank websites.

So if your website is all about colors, graphics and fancy Flash components, then it’s unlikely that people will be able to find your site. If you have lots of text embedded in Flash files, search engines can’t pick up on this, so you need to ensure that as much text is possible is in the HTML markup.

Multilingual SEO and Localization

The subject of SEO probably deserves an article in itself, so we’ll keep this bit brief. The one golden rule to keep in mind when localizing your website for other countries is that the keywords that you rank highly for on your English-language website, shouldn’t be translated and used in your foreign language website.

The reason is this: even a correct and accurate translation of a keyword or term may not be what people actually use to search for a product or service locally. They may use abbreviations, synonyms or some other variation of the search term. And that’s why you need to research your keywords for each of your languages and incorporate these into professionally translated/localized website.

Flexible Web Design

The key to cross-cultural web design is to create your pages to be as flexible as possible to change and adaptation.

For example, German tends to use much longer words than English, whilst many Asian languages require much less space for text than English. This means that if you’re ever translating your website into other languages, it’s best that your content and design are kept as separate entities.

You should avoid fixed width structures with text in it — space should be allowed to expand or contract in accordance with the size of the text.

Using CSS helps keep your content and design separate, giving you flexible and adaptable web pages for just about any language you can think of.

Putting the World into Web

The Web by its very nature is a global medium and the need for web professionals to cater for international audiences is likely to grow as the online population increases in non-English speaking countries. Asia accounts for over 40% of the world’s internet users and China alone has 30% more internet users than the US.

To go global, businesses need to think local. And to do so, they’ll need all the help they can get from the web designers and developers of the world.

Related Content

• Reach a Larger Audience with Content Translation Tools
• Four Aspects of a Usable Modern Web Interface
• How to Make Remote Team Collaboration Work
• Related categories: Web Design and Content Strategy

About the Author

Christian Arno is head of translation company Lingo24, a company that specializes in website localization. With 127 employees working across North America, Europe and Australasia, and clients in over sixty countries, Lingo24 achieved a turnover of $6m USD in 2009. Connect with Christian on Twitter: @Lingo24chr.

Alongside my primary income stream, which is my web design freelance business, I’ve also been selling themes and templates for content management systems and publishing platforms like WordPress for close to two years now.

Although theme design can seem like the promised land for web designers and web developers — with some theme authors making tens of thousands of dollars from a single theme alone — it’s actually more like a gold rush: a chosen few hit it big, but only after putting in a lot of hard work.

Here is a short guide to help you decide if getting into professional theme designing is for you.

No Clients? No Problem!

One of the main reasons why designers start designing themes is simply because they might not have anything else to do.

Whether you’re fresh out of design school, have recently begun freelancing, or are simply experiencing a dry spell, finding clients can sometimes be hard.

Designing a theme lets you get to work right away without having to wait for a project to fall in your lap.

Of course, contrary to a "real" client, there’s no guarantee that you’ll ever make any money off your theme.

But if the alternative is doing nothing while your design skills erode, you might as well get to work on that theme.

Plus, theme design is a great way to build a portfolio and get valuable experience, which in turn will help you get new clients.

Build It and They Will Come

Building on my previous point, theme design can be a very effective way of getting your name out there and attracting clients. When you build a website, your work is seen by every user. Now multiply that by the number of people using your theme for their own site, and you’ll understand that you can reach a very large audience. And add to this all the people who come across your work while looking for a theme, even if they don’t end up using yours.

In this age of social media saturation, just having a Twitter account isn’t enough to get people to pay attention to you.

Having a real tangible product that people use every day makes a big difference, and will help you build strong relationships with customers and potential clients.

Democratic Design

Another big part of the appeal of theme design is that it’s egalitarian: No matter where you went to school, where you live, who you know, or how old you are, the only thing that counts is the quality of your work.

Even though the world is a lot flatter thanks to the Internet, a company in New York would probably not entrust its $5,000 site redesign to a 16 year old from Mumbai that they found through Google. On the other hand, that company would have no problem buying a $50 theme from that same 16 year old.

Passive Income (or "How to Retire While You’re Still Young")

I’m surprised to see how many people don’t know the difference between active and passive income.

To put it simply, active income is the money you earn while actually working, while passive income is not linked to the time you put in, and usually comes from things like product sales or investments.

There’s a simple test to know if your income is active or passive: Do you earn money while you sleep? If the answer is "no", then this means your income is of the active kind; your revenue is attached to the time you put in, and the only way to earn more is to work more. A traditional web design business is active income.

The problem with this is that there are a limited number of hours in a day, which in turns limits your income. So unless you become a design superstar and get paid hundreds/thousands of dollars by the hour (and raise your prices every year on top of that), your revenue streams will eventually reach its limit.

This might not be a problem right now, but what if you get sick and are unable to work for a month? What if you want to take a vacation? And what if you need to provide for your family, or plan for retirement?

Theme design is one of the few sources of passive income available to web designers, and probably the only one that lets you actually design. For example, writing a blog or an e-book can also be good sources of passive income, but not every designer enjoys writing, so designing/coding premium themes can be an alternative.

The $50 Theme versus the $5,000 Website

You’d be tempted to assume that, provided a client has the budget, a custom-made $5,000 website will always serve them better than a cheap $50 WordPress theme.

But this is far from certain: if your clients are like mine, at the end of that $5,000, they get a brand new website, but have ran out of money to pay for things like copy writing, video production, or additional marketing.

Wouldn’t the result be much better if the client had used a $50 theme, and the remaining $4,950 had gone into content creation instead of design?

I know it sounds suicidal coming from a web designer, but I’m pretty sure most clients will figure it out by themselves eventually anyway.

The truth is that not everybody needs a custom-made site. Only a few people buy custom-made cars or even custom-made houses, there will come a point where a website becomes the same way.

As more and more people realize this, I believe the theme market will only get bigger. So this is another good argument to enter the field now while the iron is hot.

Finding Fulfillment

Dan H. Pink’s Drive is a great book about motivation. It shows that the old "carrot and stick" way of motivating people is outdated and doesn’t work for complex tasks. Instead, he puts forward three key principles that make work motivating: autonomy, mastery, and purpose.

Theme design gives you a lot of autonomy. You’re usually working alone or in small groups, and you’re responsible for every choice you make. The fact that you’re selling a product to consumers instead of working for clients means that you feel less pressure from any single buyer and are less likely to get bossed around (unless you really take customer support to extremes).

It also gives you a real feeling of mastery. To be able to say you’ve mastered a craft, you need to be able to track some kind of metric to know your progress — sales is the perfect metric for this. If you see that every theme you publish is generating more sales than the previous one, you’ll know you’re making good progress and getting better at what you do.

And finally, you’ll get a real sense of purpose once you see how people are using your themes. It can be very gratifying to know that your work helped someone launch their personal site or their startup.

But It’s Not All Gravy…

If I stopped writing here, you’d probably wonder why everybody isn’t out there designing their own WordPress themes or site templates. Everything sounds so peachy!

But the truth is that there are also serious downsides to professional theme designing, and you should be aware of them before entering the field.

Nobody Likes Working for Free

Nobody likes working for free, but if you decide to enter the theme design market, I can almost guarantee that you’ll end up doing just that.

Even the top theme authors can produce themes that don’t sell. And when that happens, you’ll have spent hundreds of hours to earn a meager few hundred dollars.

You will then be faced with the hard decision of whether to invest even more time in the theme to try and make it more attractive to buyers or scrap it and move on to the next project.

I Hope You Like Long Hours

Theme design takes a ton of time. First, you have to come up with a design, slice it up, and code it into HTML/CSS.

Then comes the fun part: developing the WordPress /Drupal/Blogger theme.

Oh, and don’t forget cross-browser testing, adding multiple color schemes, custom options, and writing the documentation.

And that’s only before the theme is launched. After the launch, you’ll have to take care of promotion, customers support, and bug fixes. You can safely assume that about 30% of the work happens after a theme is published. So if you’re trying to see if theme design is going to be profitable for you, be sure to factor this in your calculations.

Don’t Ignore Competition

While 37Signals famously advises ignoring and underdoing the competition, you might not want to heed that advice when you enter the theme design arena.

The market is very crowded, competition is extremely stiff, and the quality level is through the roof. Most themes offer design on the same level as any custom-made site — with far more features.

If you want to be successful, you’ll have to compete on all fronts: Customers are receptive to good design, but also compare every theme’s features, so you can’t afford to be found lacking in that area.

And of course, if a competitor undercuts you in price, you will probably have very bad consequences on your sales, too. And then you’re also competing with free themes…

It’s Really Hard

Finally, theme designing in the professional level is hard. In fact, it’s harder than traditional web design: Imagine having to design a site without any content or guidelines.

Oh, and instead of pleasing just one client, it has to appeal to thousands of potential buyers. But it should still be different from all the themes already on the market and must bring something new to the table if you want to gain an advantage.

From a technical point of view, you’ll have to make sure your theme works in all browsers, and across all possible server configurations (Apache, IIS, nginx).

And you have to do all of this before even earning a cent. Your theme could be a total flop and all that time you invested would have gone to waste.

Final Thoughts

If you’re considering entering the theme design market, this should give you a few elements to help you make a decision.

Personally, I don’t regret selling themes at all, but on the other hand, I also wouldn’t do it full time. I’ve reached a good balance between themes and regular web design gigs, and I hope you’ll be able to find your own path as well.

Related Content

• Five Reasons Why You Shouldn’t Expand Your Design Business
• A Guide to Premium WordPress Themes
• Problems with Using Website Validation Services
• Related categories: Web Development and WordPress

About the Author

Sacha Greif is a web designer from Paris, France who specializes in user interfaces and theme design. Visit his personal site at sachagreif.com. He blogs about design at AttackOfDesign.com and his latest Wordpress portfolio theme is Silverio. Follow him on Twitter: @SachaGreif

You’ve heard it plenty of times before: We’re at the precipice of a transition in the way we, as developers, do things. Leading the way are future standards like CSS3 and HTML5, both already partially implemented in 4 out of the 5 major web browsers, with IE9 promising support, empowering us as with new ways of making interactive and rich user experiences.

Just how awesome is CSS3? Find out by checking out these 10 experiments and demos that push the capabilities of the specs.

1. Our Solar System

This experiment presents our solar system’s planetary orbits (fast-forwarded, of course) by utilizing CSS3’s border-radius, transform, and animation. Additionally, hovering over the names of each planet on the right displays an animated tooltip using CSS (learn how to make CSS3 animated tooltips). You can read about how this experiment was developed from this walkthrough by Alex Girón, the creator of this stellar CSS3 demonstration. The animation, at the moment, only works on the WebKit browsers (Google Chrome and Safari).

2. CSS3 Ads Versus Flash Ads

Flash animated web banners are notorious for being intrusive in the user’s experience. Ad-blocking apps can turn these off by looking for all embedded Flash objects on a web page and hiding them. However, using CSS3 animation, these Flash ads can be mimicked in functionality, but will be harder to disable with third-party software. In this experiment, several ads were recreated using CSS3, and the results are almost identical to their Flash-constructed counterpart.

3. CSS3-Man

This is a robust animation sequence inspired by the Spider-Man animated television series in the 60’s. Making the sequence work involved using CSS3’s transform, @key-frame and rotate; a bit of jQuery was used to preload the images as well as HTML5 for the audio. The creator wrote an explanation of how the CSS3-Man animated sequence works, which will give you a general idea of the level of effort involved in this amazing experiment.

4. The Man From Hollywood

This demonstration is an animated sequence (based on kinetic typography) that explores a way in which we can replace rich animation components such as Flash or After Effects. This proof of concept chiefly utilizes advanced CSS selectors and CSS3 animation, however, it’s not purely CSS since JavaScript was used to toggle element classes on and off.

5. Anigma

We often use Flash (or Silverlight) for rich and interactive web-based video games. This CSS3 demonstration is a puzzle game and a proof-of-concept of how we can use open standards to create games — though admittedly, not as facile as Flash yet if you compare it to Flash games on sites like Kongregate. HTML5’s <audio> element was used to embed the sound.

6. Animated Polaroids

This demonstration is of stacked images that look like Polaroids. Hovering over a photograph transitions it smoothly to the front of the stack, making for an interesting interaction for presenting your photo gallery. The demo was made by leveraging transition, transform, dynamic psuedo-selectors (to animate the target element), as well as stylistic properties such as box-shadow for visual effects. Read the tutorial on how this was constructed if you’d like to learn how this was developed.

7. CSS3 Music Player Menu

With HTML5’s <audio> and <video> APIs, which will enable us to utilize multimedia without dependence from proprietary plugins, we’ll eventually have a need for GUIs that provide our users with controls for the media we serve them. Though we could use static images in conjunction with other HTML elements (such as buttons) to build these interfaces, using just HTML and CSS to render media controls mean we’ll have a more malleable solution. This user interface for a music player was built using only CSS3 (gradient, border-radius, box-shadow and all that good stuff). Read the explanation on how this was contructed in this tutorial.

8. Sliding Vinyl with CSS3

This demonstration, found in the ZURB Playground, takes vinyl album covers that, when hovered on, animates the sliding out of a vinyl record that contains additional controls ("more information" and "play"). This proof of concept could one day be used as an elegant web-based interface for a site that plays music when combined with HTML5’s  <audio> API.

9. Gabriel Sharp’s Small Planet

This animated cartoon sequence depicts a fast-forwarded cycle of day and night. It works on WebKit browsers (Safari and Chrome) using the @keyframes CSS3 property for moving and transitioning PNG images.

10. Falling Leaves

WebKit presents the capabilities of CSS3’s animate property with a spectacularly smooth demonstration of falling leaves. Tip: Use your browser’s "view source" feature to read the source code of the demonstration — the code’s well documented with explanations of how it works. Read WebKit’s blog post about the animate property to get a better feel for all the possibilities.

Related Content

• CSS3 Techniques You Should Know
• Basic CSS3 Techniques That You Should Know
• 20 Useful Resources for Learning about CSS3
• Related categories: CSS and Web Development

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

JavaScript libraries, ICEfaces, Adobe Flash 4, Microsoft Silverlight, and now, HTML5 have been competing for web dominance as the world wide web is thrown into a new era — an era dominated by rich internet applications (RIA for short).

The purpose of this article is to define what RIAs are, explain why the web has been moving towards RIAs, explore the different RIA frameworks that exist today, give an overview of the pros and cons for each framework, and discuss how these new technologies might coexist in the future.

What’s an RIA?

An RIA, or rich internet application, is a web application that behaves like a desktop application. Before RIAs began popping up, most web applications were composed of static pages.

Sumo Paint is an Flash-based RIA, functioning like a graphics editor software such as Photoshop.

Unlike desktop applications, any interaction with a web page usually resulted in reloading a whole new page. Desktop applications, on the other hand, had much better user interactivity because all of the processing was being done natively on the user’s machine, resulting in a more seamless user experience.

As a result, software developers began to ask themselves, "Should my product be a desktop application or a web application?"

It has always been a fair question, because both types of applications have very strong pros and cons.

Desktop applications have smoother user interactivity, but require distribution and dealing with software updates when the software has shipped.

Web applications, on the other hand, are easily accessible from the web, freeing it from the problems related to software distribution and updates, but were very lacking in user interactivity.

So how can we have the best of both worlds?

RIAs are the best of both worlds. RIAs are distributed through the web, and have very rich user interactivity. Since the advent of Ajax, a method for web applications to make server requests with JavaScript without reloading a web page, new technologies have been popping up left and right to join the RIA movement.

Among these technologies are frameworks that help developers build and deploy rich internet applications, such as JavaScript libraries, ICEfaces, Adobe Flash 4 (formerly Flex 3), Microsoft Silverlight, and HTML5.

Let’s talk about these RIA frameworks one by one.

JavaScript Libraries for Web Application Development

JavaScript libraries like jQuery and MooTools were one of the first technologies to really help deploy slick and interactive rich web apps. They provided a framework for an RIA application that leveraged client-side scripting to handle front-end interface functions. They are basically JavaScript files that comprise of a collection of useful, cross-browser-tested functions for doing things with Ajax and dealing with common user interactions like hiding and showing content based on a user-driven event.

Some of the most popular ones today are jQuery (especially with jQuery UI), MooTools, YUI (Yahoo! User Interface library), and ExtJS. All these libraries include RIA components like grids, graphs, and complex form elements, as well as utilities to handle Ajax. Best of all, most great JavaScript libraries for web development are open source.

JavaScript libraries are good to use if you don’t want to pay for an integrated development environment (IDE) but still want great-looking and professional RIA functionality in your website.

Sites using JavaScript libraries include Google, Digg, Yahoo, Amazon, Microsoft, Twitter, and Best Buy.

ICEfaces

ICEfaces extend the standard JavaServer Faces (JSF) framework and is intended to simplify the programmer’s workflow by removing JavaScript from the equation. In other words, ICEfaces handle all of the JavaScript/Ajax for your web application via Java APIs. This greatly simplifies the task of creating rich internet applications by removing some of the complexities introduced by building custom JavaScript functions.

ICEfaces is good to use if your team is made up mostly of Java developers, if your web application doesn’t require other complex components that ICEfaces doesn’t offer, or if your web application is event-driven. If your app is event-driven, make sure that you understand that ICEfaces doesn’t offer true "server pushes" in the sense that HTML5, Flash Builder 4, and Silverlight can. Instead, it uses a long polling method to simulate server push.

Sites using ICEfaces include Boeing, NASA, Union Pacific, T-Mobile, and Bank of America.

Adobe Flash Builder 4

Flash has been around for a long time, but building entire web applications out of Flash used to be more trouble than it was worth until the introduction of Flex, which is an extension to Flash that provides RIA web components.

What makes Adobe Flash Builder 4 so exciting is its cross-platform and cross-browser nature, allowing it to run exactly the same way across all operating systems and all browsers. Comparing it to JavaScript, where browsers have varying JavaScript engines that handle and process your code, Adobe Flash has one engine that your users install via the Adobe Flash browser plugin (which more often than not, they would already have).

Flash Builder 4 applications can do this because they are embedded into HTML pages, meaning that the browser itself has no effect on the application’s performance. This means that you can run even the most complex web applications correctly in IE6 if you wanted to (this is of course a simplification because the Flash plugin/engine regularly gets updated, so it would slightly depend on the user’s version of the plugin).

These applications are usually accompanied by server-side processing like a Java backend and need the Flash Builder 4 IDE for development.

Adobe Flash Builder 4 is good to use if your web application requires complex graphics, if your team is made primarily of Java developers (because it works well with Java), or if your application uses an event-driven architecture.

Sites using Flash for web applications include Mint.com, Flickr, and Hyundai.

Silverlight

Silverlight is basically Microsoft’s version of Adobe Flex/Adobe Flash. It has been gaining some traction, but doesn’t seem to be catching up to Adobe Flash in terms of popularity.

Silverlight applications are obviously bound to have a .NET backend because it’s a Microsoft product. This means, though, that you’ll have tighter Silverlight/.NET integration versus Adobe Flex/[some server-side scripting language like PHP].

Silverlight is a good option if your web application requires complex graphics, if your team is made primarily of .NET developers, or if your application uses an event-driven architecture.

Sites that use Silverlight include Netflix.

HTML5

HTML5 is the latest development in the RIA movement. HTML5 is, in essence, the result of merging the best of HTML4, JavaScript, CSS, JavaScript libraries, and Flash into a single specification that leverage the API model. HTML5 is an open technology, which means there isn’t going to be a single governing body like Adobe for Flash or Microsoft for Silverlight.

Since HTML5 specifications is not yet complete, and IE9 has not yet been released (read about new IE9 features), you’ll need to wait a little bit before building a production-ready HTML5 web app.

Currently, all major browsers support HTML5 except for IE8 (go figure). Since IE8 has a major portion of the browser market, HTML5 really won’t go mainstream until IE9 is released.

Once HTML5 becomes widely supported, it will be good to use if you don’t want to buy or learn an IDE (which you would need for frameworks like Flex and Silverlight), your application uses an event-driven architecture, or if you would rather use built-in HTML functionality and JavaScript APIs rather than using third-party JavaScript libraries for basic RIA functionalities. 

Although HTML5 can handle graphics very well, using Flash and Silverlight for complex graphics and animation is still easier/faster at the moment.

The Future of RIAs

Are HTML5 apps the future of the internet? Not exclusively. As long as there are creative and innovative web developers out there who are driven to create something special, there will always be new technologies that can provide amazing things that HTML5 or any other web technology won’t be able to offer.

Creativity and innovation are the reasons why JavaScript libraries, ICEfaces, Flash, Silverlight, and HTML5 came into existence in the first place. The future of the web will be made up of many coexisting technologies, just like it is today.

Related Content

• What is The Future of Web Development?
• 10 Promising JavaScript Frameworks
• Getting Started with the iPhone SDK
• Related categories: Web Development and User Interface

About the Author

Eric Rowell is a professional web developer and designer who is fascinated with everything related to the web, including RIAs, emerging technology, and social media marketing. He is the Founder and Chief Editor of Web Krunk and loves HTML, HTML5, CSS, JavaScript, Ajax, jQuery, Flash, PHP and Java. You can follow him on Twitter at @webkrunk.

I was pretty proud when I netted my first clients as a freelancer. Wow! Someone is actually willing to give me their money and have me design their site? I was ecstatic that someone had picked me out of all the talented designers out there.

But my joy didn’t last very long.

The projects were underfunded and the clients always asked for more, so I ended up designing and coding entire sites for about half the cost of what I currently make.

The logos were a mess, but I couldn’t change them because my clients liked them or already built an (unremarkable) brand around them.

And the products themselves were fairly boring and not innovative in any way. But it paid the bills (barely) at the time, and I didn’t have much experience in these things.

Don’t get me wrong, being flexible, open-minded, and being a "team player" is great.

But in retrospect, I wish I had taken a stand at some of the things I decided to tolerate. Here are 6 things I pledge not to accept anymore.

1. Client-Centered Design

User-centered design (UCD) means putting the user at the center of the design process (who would’ve guessed!) and designing the site around them.

But for some reason, a lot of clients seem to prefer what I call "client-centered design": designing the site around their own needs and preferences, and assume their users will like it just fine, thank you.

Warning signs of this attitude include arbitrary judgments ("I don’t like blue, please use fuschia for the background"), no basic market research (asking around on forums is the least you could do), no metrics-tracking (you should know who clicks on what), and no user feedback (a simple contact form can go a long way).

If you’re a good designer, fulfilling the users’ needs is probably pretty high on your list (just behind "using that cool new font I found"). This ultimately means that you’ll constantly clash with a "CCD"-type client, and it won’t make for a pleasant relationship.

2. Cheapskate Clients

I used to think there was nothing wrong with clients being cheap or asking for discounts. After all, we all love bargains. But when you ask for a discount on a car or a house, the seller usually keeps a nice margin. And no matter how good a discount you get, there’s very little chance that they’re taking a loss on the sale.

But it’s different for us. The complex nature of web design work means that pushy clients will always find a way to fit in more work in your agreement. And you run the very real risk of not making any profit on the project, or worse, not even breaking even and actually losing money while you work.

The only safe way to give out a discount, to me, is agreeing on a lower hourly rate that you’re able to renegotiate if needed. But never accept starting a project for less than usual, because the types of clients who ask for discounts are very often the same types who ask for more work than agreed upon, too.

3. Terrible Logos

In this era of cheap 99Designs.com logos, it can be hard to make people realize just how important a good professionally-designed logo is. The logo is their identity, and a bad logo will make the whole site look awful no matter how many hours you, as a web designer, put into it.

I’m guessing the rationale for neglecting logos is that if they provide a good service with a great user interface, people will use it anyway. But consumers are constantly being targeted by brands that shove their own logos in their face, and as a result, they’ve unconsciously learned to recognize what constitutes a good logo. And a prospective client’s logo better pass the test.

My rule of thumb is this: If I could’ve done a better job myself, the logo has to go.

And something else to consider: A site’s logo also often ends up being the most visible thing when you crop thumbnails for your portfolio.

4. Bad Names

I used to think that site names were a subjective matter — until I started getting request for proposals to work on sites and projects that have names such as GreatPremiumWordpressThemes4Free.com. No matter how you cut it — that name sucks.

Sure, it might be great for SEO, but on your portfolio, it will look like you designed one of those placeholder sites filled with spam links. A bad name is indicative of the type of people you will be working with.

Another bad sign is unpronounceable names like kxospkti.com; it sounds like someone rolled their head around their keyboard to come up with the domain name. Just because it’s short, doesn’t mean it’s good, and it’s hard telling future employers what you worked on if you can’t even say the name out loud.

5. Bad (Or No) Business Strategy

This is different from a weak idea. You can work with a weak idea if it’s brilliantly executed. And it can be very hard to judge the value of an idea if it’s not part of your own knowledge domain.

But please stay away from business plans that sound like the South Park Gnomes came up with them.

You might think the client’s business plan is not your problem. Who cares if the client ends up broke as long as you get paid, right? Wrong.

First, a project with no clear strategy is very hard to design for. What do you put forward? What’s the main goal of the home page? If the client can’t answer those questions, who else will?

Secondly, if the site fails then it won’t be around anymore, and you won’t be able to show it in your portfolio.

6. Bad Copy

It took me a long time to come to terms with bad copy on a client’s site. English is not my native language, so I wasn’t sure if I even had the authority to question my English-speaking clients’ writing.

And I also thought that it just wasn’t my job to care about content. After all, if you start correcting a client’s typos and grammar, where do you stop? Do you also help them close sales and do their taxes?

But the hard truth is that my job as the web designer is not that important. People don’t go to a site to admire the way I use color gradients or the web typography I composed — they go to consume content. If the content is bad, spending time on the design is like putting lipstick on a pig.

You’d be surprised how many people ignore even basic copywriting tenets: they use jargon and acronyms, assume people already know what their product does, or drone on about features without mentioning the benefits to the user.

I now accept the fact that it’s part of my job to call clients out on this.

Further Thoughts

Being successful as a web designer is all about creating things you can be proud of and building long-term relationships with clients.

Unfortunately, our eagerness to find work can lead us to make choices that are directly counter-productive to those two goals. We’re particularly vulnerable to these mistakes when starting out, but even with a few years of experience behind me, I still catch myself making them sometimes.

You might be thinking that if you follow these guidelines you’ll end up with no clients whatsoever. But I believe it’s our role to produce the best work possible and adhere to sound design principles, even if that means saying "no" and being unpopular sometimes.

So if you’re in this for the long term, pick your clients wisely and don’t tolerate these things.

Related Content

• Eight Tips on How to Manage Feature Creep
• 7 Things Web Designers Hate Hearing from Clients
• How to Design for Your Worst Client: You.
• Related categories: Project Management and Productivity

About the Author

Sacha Greif is a web designer from Paris, France who specializes in user interfaces and theme design. Visit his personal site at sachagreif.com. He blogs about design at AttackOfDesign.com and his latest Wordpress portfolio theme is Silverio. Follow him on Twitter: @SachaGreif

One of the most variable aspects of web design is the way in which we approach width and height in terms of measurements and flexibility.

For many years, we have rotated between the benefits and pitfalls of using fixed, elastic, and liquid measurements in a quest to give optimal viewing experiences in highly varied situations, while balancing our need to control things in our web pages.

But, as Bob Dylan proclaimed a long time ago, "The times, they are a-changin’," and with these changes come a variety of new ways for laying out your website’s pages and an even more variable landscape of methods for viewing websites.

In this article, we will examine web layout types — old, new, and the future. We will explore the subject in the context that websites are being viewed in a diverse amount of ways, such as through mobile phones, netbooks, and touchscreen personal devices like the iPad.

About Your Options

Let’s set our objectives for this exploration of layout types:

• We shall examine the variety of options that exist
• For each layout type, I’ll try to suggest some situations they are best used in
• The pros and cons of a layout type compared to others

We will discuss 10 types of web layouts.

While pixel perfection is a pipe dream, there’s more to layouts than fixed, liquid or elastic!

The main lesson to take away from these choices is to think carefully about why an option is suitable for a particular situation and how your choice will affect your audience.

Let’s dig in, starting with absolute layouts.

Absolute Layouts

One of the least commonly used methods of measurement employed in web design is absolute measurement (i.e. inches, cm, mm and picas). Absolute units and positioning is traditionally found in print media, which natively use these units of measurement.

The conversion of print to web format can be seen in word processing software such as Microsoft Word, which still uses these conventions when formatting text and sizing the dimensions of a document in order to make it appear as close as possible to printing on paper.

Absolute layouts have limited use in web designs.

A use for absolute layouts on the web is for PDF documents where content remains static.

Of course, just because it isn’t popular doesn’t mean it doesn’t have its place on the web designer’s bevy of options.

If you are someone who utilizes printer-friendly stylesheets — yes, people do still print web pages — the absolute measurements of cm, mm, inches, and pt can help you prepare a page layout for printers more accurately.

Relative Layout

Relative positioning and layouts adjust in size depending on the size of the user’s browser viewport.

The area inside the red border is the browser’s viewport. You can change the size of the viewport by resizing the window. Different monitor sizes have various maximum sizes for the view port.

Typically, this type of layout relies on everything working at 100% width, whether it’s a small screen (like a netbook) or a 24-inch widescreen desktop monitor. This means that the layout will scale according to the viewer’s situation.

Very few sites make use of 100% widths, but it does work.

Fixed Layout

Commonly regarded as one of the least flexible methods of laying out a web design, the use of pixel-based measurements has almost a digital resonance associated with it that transfers across from the print industry, in that the medium relies on fixed/static measurements.

This unit of measurement is accurate and leaves little guessing as to how a web design will appear across different web browsers and has become exceptionally popular among sites that favour control and predictability over optimizing the layout for the audiences’ particular viewing situation.

A fixed width layout is used on Six Revisions.

We all know that problems can arise from having to scroll in all sorts of directions, and the fixed measurement of a px-based layout has this general issue in spades.

While many people seek out some sort of ideal width to ensure maximum compatibility, it’s worth mentioning that if you use a lot of elements that require fixed layout rules like non-repeating background images or borders with other non-relative elements, fixed measurement layouts can do the job well and act as the best all-around solution.

Elastic Layout

One of the most used methods of laying out a design’s content is using the relative em unit of measurement.

Commonly referred to as an elastic layout design (due to the way it flexes by growing and shrinking to meet the content’s needs), it has shown a great deal of appreciation within the web design community due to its ability to scale content, text sizes, and such.

Unlike with fixed units of measurements where absolute-unit elements like images are best suited (due to maintaining without distorting), elastic layouts work best when flexible content (such as text blocks) takes the front seat (though there are ways to have images scale elastically as well).

Popular for its elastic nature, em measurements are recommended for font sizes.

Of all the methods listed, the elastic layout type is the most subservient to your content as it gives the content itself the deciding position as to how the layout should scale.

Making the text smaller in such a design will reduce the width or height, and enlarging the text will have the opposite effect.

This unique attribute allows the layout to resize based on the content rather than the needs of the layout.

Using an elastic solution is perfect if you want the layout to be determined by the content, but it can have issues if the text scales beyond the viewport (causing unwanted horizontal scrolling).

Scaled Layout

One of the latest methods in CSS3 allows the manipulation of the available viewport around certain device orientations (i.e. portrait and landscape).

Depending on the way in which the device is held, the design has the potential to alter its visual layout (altering the amount of space given to the content itself).

Unlike the others, this type of layout does not rely on measurement units, but rather a specific layout type. However, this notion shouldn’t be underestimated as a way of dealing with complex columns on small screens.

10 years ago, we wouldn’t have considered a screen’s orientation. How the times have changed!

Scaled layouts truly shine in the smartphone market where the display can be rotated or moved frequently (such as the iPhone, for example).

The iPhone adjusts orientation of your websites on-the-fly.

With such limited space being available on handheld mobile devices, you cannot only maximize the way your pixels are allocated, but you can also allow people the option to choose whichever method they prefer to visualise the information.

Each person will use his or her web-enabled mobile device in a different way, and by allowing your design to relate your content in a transformative way depending on the orientation, you can maximize the usability of your content.

Liquid (or Fluid) Layout

The most relaxed method of providing a dynamically expanding or contracting design makes use of the ever-popular percentage (%) unit measurement.

This layout type has gained mass popularity because it is the ultimate way of allowing the total opposite of a fixed layout where the content will simply take whatever space is available to it.

Percentages require careful calculation as you can’t give more than 100% without issues!

The limited guarantees you hold on the viewport being used goes beyond screen resolutions (imagine your site on a 6-inch screen versus a 100-inch screen, even just at 80% width).

Though it goes without saying that a liquid layout is useful in almost every web-based situation because it adjusts its width depending on how big or small the user’s viewport is — so it’s definitely worth looking into.

Equated Layout

The next method of laying out content we shall look at is the equated layout, which makes use of a new CSS function called calc (see W3C calc spec).

When this measurement capability reaches browsers, a new level of control will exist.

While the previous layouts we’ve covered rely on specific widths or heights being provided, an equated layout allows you to mix a fixed and relative value by using a calculation like width: calc(50% - 200px).

Have you ever had a situation where you wished that you could make up the full 100% but also account for things like divs with borders and elements that have fixed widths (such as an image)? If you’re anything like me, it’s certainly something that has crossed your mind.

The calc CSS3 function, which has not been widely adopted yet (but is part of the CSS3 spec) may just be the thing you are looking for. While the function still isn’t widely supported by existing web browsers, this can be a future-forward option for building layouts with an added layer of pliancy.

Fluid-Min/Max Layout

A common problem that we have as designers is that whenever the amount of space we have becomes either too wide or too narrow (or too tall or too short), the relatively-measured and flexible content we have gets too diluted or too compressed (which is bad news).

Using minimum and maximum widths (or heights), you can set limits on how much the design can scale so that you can still have flexibility — but only to a certain extent. Rather than spanning the viewport like a liquid layout, this layout type flows only up to where it’s told (’atta boy).

A fluid/"jello" layout will scale only to a certain fixed width or height.

If there’s one thing that causes problems with layouts, it’s us making assumptions as to the amount of space that we will have available for our design elements.

The benefits of the CSS min-width, max-width, min-height and max-height properties are most widely noticed when you want your layout to be confined within certain dimensions (like within a fixed-width design) but don’t want to suffer the wrath of horizontal scrolling.

For example, if you wanted to have your width scale to 100% for small screens but only up to, say, 1,500px so that your layout doesn’t get too wide for larger screens, then you can use a max-width:1500px.

As this method of laying out a web page provides a safety net that browsers can rely on (based on the min and max values you supply), you can give your fixed work a bit of added flexibility.

Conditional Layout

With the rise in devices like the iPhone, a need has appeared for a way of altering web designs beyond conventional layouts to ensure that mobile device users can have an optimized experience.

The ability to serve a unique stylesheet based on the device or viewport width and height (through CSS3’s media queries) gives rise to an even more flexible and friendly way to represent your site’s content. This layout type is something I’d like to call "conditional layout."

The above design uses CSS3 media queries to scale the design down as required.

Of all the methods of laying out information that have appeared recently, this is by far the one with the most promise (once the browser compatibility issues are ironed out).

Most website designs rely on a single stylesheet. Using CSS3 media queries (especially with mobile and desktop experiences) can bring conditional layouts to best meet the user agent.

The downside of this is that it means you will need to develop and maintain stylesheets for particular devices — much like how you, in the past, maintained IE-specific stylesheets.

Hybrid Layout

Of course, while mentioning all of these layout types, we can’t forget to mention the most popular layout method of all — the hybrid layout pretty much stands by its name in that the design ends up using a mixture of various layout types. This includes mixing and matching various units and concepts to ensure that the design adapts to the browser’s viewport only when it needs to and still be able to retains a certain level of control over parts of a website that need more fixed structures.

While it requires you to be more thoughtful over your work, it’s possibly the smartest way to design and develop.

Most sites don’t stick to one measurement type, they hybridise based on needs.

Most websites make use of a hybrid layout because certain measurement units are useful for certain situations. While many people still cling to the idea that there is one perfect layout method waiting to be found, I think that the hybrid will overcome situational issues by blending together the best of all worlds.

Perhaps you might end up with an absolute layout in your print stylesheet, and maybe you might have fixed widths using a liquid body with elastic content and a fluid control for the outside edges with scaled and flexible support for certain devices — the combinations are bountiful!

The Bigger Picture

Clearly, there are many options to consider when laying out your web pages, and thus it makes sense — both pragmatically and theoretically — to pay close attention to the details and scope of any design project you undertake.

Which layout type you utilize to produce your website is something that deserves as much attention as the fonts you use or the color theme you put together.

It’s also worth highlighting that there’s no perfect way to deal with every situation and therefore there’s no one type that is universally the best for all situations.

There’s no right or wrong way to design, but careful thought can improve some situations.

Design is one of the most fundamental skills that any web professional must get to grips with. The way the Internet is being consumed is rapidly evolving, with wide disparities in both the devices we employ and the tools we take advantage of.

There’s more to contend with than good usability, accessibility, web copy, color contrast, and so forth. A good website must meet an ever increasing number of needs and thus the search for the perfect layout has become a Holy Grail quest of sorts for web designers.

While times are changing (as do situations), picking the right layout right now should be done methodically.

Related Content

• The 960 Grid System Made Easy
• A Brief Look at Grid-Based Layouts in Web Design
• The Brads – Alignment in Design
• Related categories: Web Design and Web Development

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

Tracking and studying searches on your site is a valuable part of site analytics, but many site owners underestimate the benefit of it. Website search analytics can provide advantageous insights into what people are looking for on your site and also what your site looks like in search engine results.

In this guide, we’ll go over the fundamentals of search analytics, using Google Analytics as our tool.

Types of Searches

We’ll look at the two broad categories of search: external search and internal search, both of which offer different information to you as a site owner.

External search relates to the keywords people use to arrive at your site through search engines such as Google.

Internal search is tracking what users input into the search feature on your site. For example, WordPress and Drupal have built-in website search capabilities that you can log through Google Analytics. Internal search capabilities in Google Analytics require some additional set up (which we’ll cover later down in this guide).

External Search Reports in Google Analytics

External search results that bring visitors to your site are viewable in any Google Analytics account by default without further set up. Studying external search reports give you a good idea of how people get to your site. In other words, if you’re getting lots of visits for certain phrases then chances are you are ranking highly for that phrase.

To look at your external search keywords is rather straightforward and is shown in a "Keywords" box on the standard Google Analytics dashboard. This box shows the top five search terms that drive traffic to your site through search engines. You can then click "view report" (this might also say "view full report," which is the same thing) at the bottom of the box to look at a more thorough overview of the results.

If you don’t see the "Keywords" box, you can still get to your Keywords report by using the navigation menu on the left, Traffic Sources > Keywords.

As with many Google Analytics report pages, you will have the time/visits graph showing you the amount of traffic generated by search engine keywords over the past month.

Underneath the graph, you will have your table of keywords where you can start to extract some more meaningful information. By default, this table shows 10 rows.

What Should You Be Looking For?

To start with, it would be interesting to see what your popular keywords are. It would be helpful to analyze what search phrases are bringing people to your site. Are the keywords you are seeing to be expected? Do you need other keywords to be ranking well in your site?

For example, if your site were about Sudoku puzzles, you would expect to see words and phrases such as "sudoku," "sudoku puzzles" and so forth to comprise most of the top search key phrases.

However, you might also discover other key phrases that people use that you didn’t expect such as "brain games" and "mental agility exercises" that you can consider when you create more content for your Sudoku site to improve the ranking of these keywords.

This report is a good barometer for seeing how your site looks like to search engines. If you have some unexpected phrases in your top results, then you might want to ask yourself why they are there. Does it have a positive effect on your site in that you’re drawing in the audience you are targeting? Or are they arriving there by accident because of an ambiguous key phrase and thus you aren’t effectively getting the right type of people viewing your site?

Using the Filter Keywords Feature to Find Trends

You want to pay attention to trends, so it’s worth filtering out some results before you start digging any further. For example, you’ll have plenty of results that have only been used once; you want to filter these out because just one use of a search term doesn’t really show a trend.

To filter out non-trending search terms, pick a minimum number of page visits. This is going to be relative to the amount of traffic you get on your site and how long your website has been up (newer sites might not yet be highly visible in search engine results, and thus, would have limited information). I’d normally say about 10 visits is a good minimum.

Once you have figured out the minimum number of page visits, it’s time to filter.

At the bottom left of the Keywords report page, there is "Filter Keyword" option, and beside it, an "Advanced Filter" link. Click the "Advanced Filter" link — this will expand a new set of options for more refined reports.

Click on the "Add new condition" dropdown, and then choose the Visits option under Site Usage.

After adding the new condition, you will see a conditional statement dropdown menu, which will have options such as "Less than," "Less than or equal to," "Greater than", and so forth. In this menu, choose "Greater than" and then enter "10" in the input field beside it — our filter should now read, "Visits Greater than 10." Finally, click on the "Apply Filter" button to filter your results.

You can browse around these results, comparing the number of visits from different phrases to get a good idea of what your site is doing best.

For example, are people who arrive through the keyword "apple" spending more time browsing than people who arrive via "banana"? It’s likely that your site is proving to be more interesting towards people who like apples, and so you could make educated design changes using this information, such as making it more attractive to banana lovers to get them to spend more time on your site or just focusing on apple lovers to get more of them to come.

Analyzing Bounce Rate

Another good figure to look at is the bounce rate for search terms. A quick click on the Bounce Rate column heading will sort the table by bounce rate.

A high bounce rate will show that your site isn’t really appealing to people looking for a particular search term. If it’s supposed to be appealing, then it’s time to figure out why.

Let’s say you have a high bounce rate for the phrase "chicken farming" yet it’s something you think people would want to read about on your site.

In the first column (under "Keyword"), click on the keyword that has a high bounce rate ("chicken farming" in this instance); this will take you to a new screen where you will get more detailed data about that particular search term.

Staying on the Site Usage tab and clicking on the box that says "None" will give you options for a variety of metrics that you can dig into for discovering trends, such as "Language," "Continent," "Browser" and so forth.

For this particular task of realizing why a particular term has a high bounce rate, a good metric to look at is "Landing Page" to see which web pages visitors are actually leaving from.

A Note about New Visits Stats

One thing you may notice when you’re digging into external search reports is that many Keyword metrics will show mostly new visits. This stands to reason, as many returning visitors will often come straight to your site without using a search engine (e.g., they have bookmarked your site or have remembered your website address).

Internal Search Reports in Google Analytics

Next, let us discuss internal search reports; search phrases that are used on your site’s native search feature. Internal search tracking will give you great insight into what users are expecting to find on your site and the effectiveness of your information architecture.

Once internal search is set up, you should be able to view what people have been typing into your search boxes.

What Internal Search Reports Are Telling You

The data you obtain from internal search analytics is essentially a resource that tells you what your visitors cannot find on your site.

For example, if you sell clothing and you have hundreds of searches for "pink ball gowns" but you don’t sell them, it might just be worth looking into selling pink ball gowns.

If you receive a lot of searches for pink ball gowns, but you have a link to your pink ball gowns category right on your navigation bar, then there’s a good chance there’s something wrong with your site navigation’s design and effectiveness.

Setting Up Internal Search Analytics

To set up site search reporting, navigate to Content > Site Search in Google Analytics’ left menu. When you go to this menu item, you’ll receive some instructions for setting up your site search.

As a quick example, we’ll look at setting up site search for a WordPress site.

Firstly, you need to figure out what URL variable is being used for the search feature on your site. Google Analytics refers to this as "Query Parameter." The easiest way to figure out your Query Parameter is by typing in a search keyword into your site search and then looking at the resulting URL afterwards.

In WordPress, doing a search using the built-in search feature should send you to a page such as http://www.yoursite.com/?s=search+term, which shows that the search term is passed in the URL as a URL variable called s.

In Drupal, the search result page’s URL looks like:

http:// www.yoursite.com/index.php?q=search/node/search+term

This means that the URL variable is q.

Once you’ve figured this out, click on "Edit" under the Website Profiles summary table that you can find by navigating to the first screen of Google Analytics when you first log in, or by clicking on "Analytics Settings" right below the Google Analytics logo.

This will take you to the Profile Settings page for your site. Click "Edit" beside the Main Website Profile Information box heading. This will take you to the Edit Profile Information page.

In the Edit Profile Information page, scroll down to the Site Search section and choose the "Do Track Site Search" option; choosing this will reveal more options.

The only box you need to fill in is the "Query Parameter" option, which in the case of WordPress’ built-in search, we figured out to be the URL variable of "s". Enter that value and click the Save Changes button at the bottom of the page.

Hey — Presto! — your site search is now set up. You just have to leave it alone for a little while so that it gets a chance to gather some results.

Viewing Internal Site Search Reports

To look at your Site Search reports, go to Content > Site Search. The first thing you’ll notice is that there are a few new sections you might not be familiar with if you haven’t set up Site Search before.

Don’t feel too daunted though, as everything you need can be accessed quite easily from the Content > Site Search > Overview page. Additionally, Google has also handily put a few helpful links on this page to answer some questions you may have.

By clicking on the various sections on the Overview page, you can quickly see some useful information about your internal site search. Let’s examine some of these report pages.

Search Terms Report

One of the easiest places to start getting information from is the Search Terms page.

Simply ordering/sorting the data using the various columns will start to give you a feel for what people are doing in terms of internal site search.

The default is ordered by total unique searches and whatever phrases are at the top will clue you in on a couple of things.

The first thing is this: If a phrase is on something that is already on your website, then this is indicating that people can’t find (or can’t be bothered to try to find) it through your normal site navigation.

The second thing to look for is phrases that relate to things that aren’t on your site. In this case, a large volume of searches will show what people are expecting to find from your site. If these things are something you think you should be offering, then why aren’t you?

However, if popular site search phrases are unrelated to the nature of your site, then maybe people haven’t understood what your site is actually about. This could imply many things that you could be doing to improve the content, structure, and design of your site, such as including a site summary or tagline in a visible location on all your web pages or improving your About page to clearly state your site’s objectives.

Some site search features have default values that act as placeholders (such as "Enter search term…" or "Search…"); these search terms might therefore show trends in your Search Terms report.

This isn’t uncommon and is caused by people accidentally clicking your site search feature before entering their search term. If it happens too much though, there might be something wrong with the design or functionality of your site search feature. It could be, for instance, a web-browser-specific bug, and in that instance, it would be helpful to see if you can hunt down a pattern in the occurrences of these search terms for a certain web browser.

Usage Report

Another page under Site Search to go and see is Usage.

Usage shows you a simple comparison of page visits where people use site search versus visits where people don’t use site search.

This is really a very subjective measure because it all depends on the nature of your website. Amazon, for example, probably has a large number of visits where search is used, but that doesn’t mean much in terms of the failure of their information structure because they want people to use site search to find highly specific things, using the site search feature as a prominent element of their site design.

In short, these figures can be good or bad depending on your intent.

Start Pages

The next page after Usage is the Start Pages. This report displays where visitors tend to use site search from. This report can identify navigational dead-ends in your site — pages where people get confused as to what to do next.

Don’t be too concerned if your home/front page ranks highly in this report. Often people will visit your site knowing what they want, so they’ll tap it straight into the search box from your main page.

However, if a particular landing page seems odd, such as an e-commerce checkout page where you want people to effortlessly buy your products, then you might need to look at the efficacy of your procedure for buying products on your site.

Goals

The last thing I want to talk about is the Goals report. Before, I talked about setting up Goals and Funnels in Google Analytics (read that guide if you’re unfamiliar with the term). This report is useful for seeing the effectiveness of turning your search results into conversions. After clicking on the Goals tab, a quick summary at the top of the page will report some basic figures. If you aren’t turning many of your searches into conversions, it could well be worth looking at the quality of your results in delivering the desired information to users in order to keep them interested.

Analyze and Explore Your Search Terms

It’s essential to note that we have barely scratched the surface of search analytics. This guide was meant to highlight the fundamentals and set you on your path to exploring the subject further. If you have any questions or additional tips, please do share in the comments — let’s talk about search analysis!

Related Content

• Google Analytics in Depth: Goals and Funnels
• Unleashing the Power of Website Analytics
• 10 Promising Free Web Analytics Tools
• Related categories: Tools and Resources

About the Author

Dave Sparks is a web designer and developer working for Armitage Online in the Lake District. He can be found writing about various web topics on his blog at Kamikazemusic.com, twittering as twitter.com/dsparks83 and working on his website analytics project – Stat Share.

Did you know that becoming a designer is relatively easy? You go to school (some people even skip that part), you interview for a job or start your own freelancing business, and then you start getting paid in exchange for making stuff look cool.

That’s about it.

Or is it?

Becoming a great designer — like becoming great at anything — takes a lot of practice, hard work and dedication. Maybe you are a student wondering if a design major or minor is the right way to go. Or maybe you are already a designer but you’re wondering whether a career as a designer is really right for you.

If you get through reading this article and find a couple reasons why you shouldn’t be a designer, it’s probably no big deal. If, on the other hand, you find that the huge number of these reasons apply to you, you may want to re-think design as a career.

1. You’re Not Artistic

I know this seems like a no-brainer, but it’s worth discussing. Some people have the mentality that designers and artists fall into two completely different, only vaguely related categories.

In reality, that type of thinking couldn’t be farther from the truth. Designers are artists — or at least they should be. Just because so much of what designers do these days takes place on a computer doesn’t mean there is no art involved in the modern day design process.

Many of the best logo and website designs start as sketches on a blank piece of paper. If you take the time to notice, you will see that many of the software applications designers use take cues directly from the art world. For instance, Photoshop and Illustrator — industry-standard software in the design field — both have painting-inspired features and vocabularies.

2. You Don’t Have Passion for Design

To be a great designer, you’ve got to have passion for creating things. Having passion is more than just liking or tolerating something. Passion pulls you in full-throttle, and makes you thirsty for more.

If you aren’t incredibly passionate about becoming a designer, don’t become one.

Burnout is a big obstacle for many designers; just wait until you’ve been working on the same type of project for months on end. That’s when you start to feel burned out and that’s when your passion will fuel you to push forward.

3. You’re Easily Distracted and Have a Hard Time Meeting Deadlines

Design requires the ability to focus, oftentimes for long periods at a time. It’s not to say that people with ADHD can’t be good designers as many believe that individuals with ADHD can hyperfocus on things they’re interested about — which is a big plus.

Are you planning on working for a local advertising agency? Ask yourself if you can sit through the time required to tediously and meticulously add realistic shading, remove skin blemishes, tweak typography and play with color combinations on an ad piece or a poster design until you reach pixel-perfection, sometimes over a weekend to meet a deadline.

Don’t get me wrong, design isn’t all work and no play, but there are times when you’ll need to concentrate hard on finishing a task for an extended period of time.

4. You’re Not a Good Communicator

How well do you get along with people? Do you work well in groups? If these questions sound familiar, you must have applied for a job sometime in the last few years. Business owners are putting a premium on communication skills these days, and it’s really no different for designers.

There are times when you’ll be working solo, but there will also be times when you’ll need to collaborate, take orders, give orders, and so forth.

When I say you need to be a good communicator to be a good designer, I’m not talking solely about being able to effectively talk to clients and people you collaborate with. I’m also talking about the medium of the work itself. After all, design is essentially a form of communication — the only difference is that design is visual instead of verbal.

5. You Don’t Respond Well to Criticism

When someone tells you there is room for improvement, do you feel the urge to punch them in the face? Criticism — and the ability to incorporate insights gleaned through critiques of your work into your projects to make them better — is an everyday part in design.

Obviously, you can’t go around punching people in the face all day, so do you have what it takes to understand the role that criticism plays in design? Nobody likes to be told their ideas are no good, but sometimes it’s not worth arguing.

If you are a freelancer, for example, your client (who is not a designer) may want to make some changes that don’t work well, or give you some harsh (even if inaccurate) criticisms. It’s best to roll with the punches so you can get paid for that project.

Alternatively, if you work as an in-house designer, your superiors are probably going to be standing over your shoulder telling you what works and what doesn’t (even if you don’t agree). It will take time to work your way up the ladder until you are the one who calls the shots — in the meantime, can you take the heat?

6. You’re Bad at Brainstorming

Designers need brainstorms like koalas need eucalyptus — without the ability to brainstorm effectively, you’re as good as dead.

Every design starts as an idea. Originality is everything in the design world. Even the best designers get stuck at times, but the truly great ones drive a mental bulldozer right through any roadblocks and keep going strong.

So, if you’re driving a mental tank, you’ll make a great designer, but if you’re riding in a mental clown car…

7. You’re Always Disorganized

Designing requires good organizational skills. Surprised? You shouldn’t be. It all starts with your workspace. If you work in an organized environment where your stuff is easily found, you’ll be more productive. But it doesn’t end there.

You’ve got to organize your schedule as well, but there’s more, much more — design itself is an organizational task. You’ve got to organize information in a way that makes sense to people who view your designs. Design is, to a large extent, the art and science of visual organization.

8. You’re Lazy

Laziness is the enemy of good design. Students, I hate to break it to you, but gone are the summers where the most important thing to do was catch up on daytime television. Once you graduate from college, you’re going to be working full time.

If you choose design as a career, you’re going to have tasks to accomplish (surprise, surprise). It’s something like schoolwork except if you don’t "turn it in" on time, you’ll get an F for Fired. It’s that simple, really.

If you want to get paid as a professional designer, you have to work. And you can’t just work, you have to do good work. To do good work, you have to practice, put in the hours and not give up.

9. You Hate Not Being Physically Active on the Job

Designing is not running. It’s not swimming, it’s not hiking, it’s not snowboarding. It’s not a physically strenuous  job. You’ll spend the majority of your day in a chair getting to know your computer monitor, mouse, keyboard and pen tablet a little better.

If you want to maintain your physical fitness, you’ll have to do that on your own time.

10. You Don’t Like Learning

If you barely survived college — and let’s be honest here, it’s literally not rocket science, design is one of the world’s easiest majors — you may not like what I’m about to say next.

Design requires a lifetime of constant learning to maintain relevance. Some people enjoy learning (especially if they are passionate about what they do for work), but others shy far, far away from it.

New versions of programs are always just around the corner, new technologies are born and designers must learn how to create for new mediums all the time. Learning new things and changing your set ways (if having set ways is even an option as a designer) is a huge part of the job.

Some Parting Words

Design, like any profession, takes dedication. You should only consider a career as a designer if you are truly passionate about design, have strong communication skills, can organize yourself and information and love to learn new things.

What are other traits that designers can’t afford to have? Share your thoughts in the comments.

Related Content

• Five Reasons Why You Shouldn’t Expand Your Design Business
• Why Designers Should Learn How to Code
• How to Design for Your Worst Client: You.
• Related categories: Productivity and Project Management

About the Author

Chris McConnell co-founded the Brandeluxe network of sites, which includes Freelance Review, Design News Source and Daily Design Advice. Be sure to follow @Brandeluxe and @DesignNewsSrc on Twitter.

[T]here are no bad fonts — only inappropriate ones.

— Jason Beaird

The majority of computer users became aware of Microsoft Windows Vista on January 30, 2007, when the company released the new operating system publicly.

You and I of course knew about it well beforehand. Once Vista was available for beta, many web designers adopted it early to begin trying — with varying levels of success — to figure out if they can incorporate Vista fonts into their designs.

Three things quickly became clear:

1. They are beautiful typefaces.
2. They are unusually — and, for designers, unacceptably – blurry unless you have ClearType or another anti-aliasing protocol enabled; but there are serious issues with ClearType.
3. With some exceptions, they are markedly smaller in size than most fonts, making them difficult to incorporate into font stacks.

Trust Microsoft to create something attractive and potentially valuable like this set of spiffy new fonts (or an operating system like Vista), and then take steps to ensure they can’t be used easily.

But I like these fonts: they’re beautiful and they are available in many of our user’s computers (as much as 92% of all PCs use Windows as of May 2010[1]). In addition, the design community deserves some thought as to how to use them in their work.

Let’s see what we’re up against.

Breaking Down the Fonts

Vista "C" fonts.

Let’s examine the fonts themselves, starting with the best known of the group: the 6 "C" fonts — their nickname derived from the fact that all their names start with the letter C, and officially, because they are part of the Microsoft ClearType font collection.

John Hudson, the font designer who made one of the C" fonts (Constantia), shares some insights on how the "C" font names were picked:

"One of the Microsoft managers had come up with the idea that all the CT [Vista] fonts should have names that started with C. I can’t remember all the possible names I came up with, each of which ended up rejected after international trademark searches. Microsoft probably spent more money on lawyers doing trademark searches than they spent on the typeface development! As I recall, the day before the penultimate choice came back rejected, I’d been singing some psalms during vespers, and noticed the word constantia. Hey, I thought, that starts with C!"

If you have Vista, Windows 7, MS Office 2007 for Windows, or MS Office 2008 for the Mac, you have these fonts already. If you don’t have them yet, keep reading!

The "C" List

Here is a bit of information about each of the "C" Vista fonts.

Calibri

The new default font for MS Office apps  — replacing the tired old warhorse, Times New Roman — Calibri is a softer, more rounded sans-serif font.

Calibri’s designer Lucas de Groot says, "Its proportions allow high impact in tightly set lines of big and small type alike."

When anti-aliasing is applied, it is an attractive and very reader-friendly font; when it is not applied, Calibri looks like something I’d draw with my foot.

Font maven Megan McDermott observes that Calibri "looks terrible in Opera and Firefox," an observation I don’t agree with, but since I respect her work, I’m passing along her opinion.

Cambria

There are only two serif fonts in the "C" collection, and Cambria is, to my eye, the lesser of the two.

Microsoft states that Cambria was "designed for on-screen reading and to look good when printed at small sizes.

Designer Jelle Bosma calls it a "robust, all-purpose workhorse text face." Van Wagener calls it "sturdy" and "formal." I think the font lacks a certain elegance, though it is solid enough and is very strictly spaced.

If you’re interested in rendering mathematical equations, check out Cambria Math.

Candara

This sans-serif font incorporates some decorative flourishes, along the lines of Trebuchet MS and therefore is less useful in body text.

Consolas

The only monospace font of the set, Consolas is as appealing as any monospaced font out there. I cordially despise everyone’s default monospace fault, Courier New, much preferring Andale Mono and other more stylish monospaces. Like Calibri, Lucas de Groot designed this font.

Constantia

The other serif font of the collection, Constantia, is elegant without being overtly ornate. It’s clean, readable, and overall an excellent and versatile font.

Creator of the font, John Hudson, says he designed it to work in both print and electronic display formats.

On the screen, it looks very similar to Palatino Linotype or Book Antiqua, but with a bit more modern feel. Dan Cederholm of SimpleBits — in his quest to provide the best ampersand ever for use in your designs — finds Constantia’s ampersand (&) works well as a companion to Palatino/Palatino Linotype in the ampersand beautification code.

Corbel

Corbel is the last of the sans-serif fonts in the collection. It is clean and readable, but to me, it suffers from some of the same design limitations as Cambria. Microsoft calls Corbel’s appearance "uncluttered and clean" on screen, and claims it is "legible, clear and functional at small sizes."

"C" Fonts On Mobile Devices

It’s worth noting that mobile/handheld advocate Alexander Turcic says the "C" fonts are "gorgeous" on handheld devices. In 2005, he submitted 6 screenshots of the fonts in use on his iSilo device, including this example of Constantia in use below.

Constantia on iSilo.

The Odd Ones Out: Segoe UI and Nyala

The Vista font collection contains two more fonts that are often forgotten in discussions of the collection: Segoe UI and Nyala.

Segoe UI

A sans-serif font, Segoe UI is a member of a larger "Segoe" (pronounced "SEE-go" according to Microsoft designer, Jensen Harris) family of fonts. It has a lighter and more rounded feel than the "Swiss" fonts such as Helvetica and Arial, and is less linear than Tahoma.

It is Microsoft’s designated system font, replacing Tahoma in most Windows displays.

Microsoft blogger Saveen Reedy calls it a "beautiful" font, an assessment I agree with.

Some controversy over the font erupted in 2006, when the European Union declared Segoe UI to be a ripoff of another font (Frutiger Next) and refused to accept Microsoft’s registration applications for the font.

To be sure, there are slight but discernible differences between the two, but most people believe that Microsoft admitted some form of plagiarism when it decided not to appeal the EU’s decision. Designer Steve Matteson says Segoe UI is an entirely original design.

All legalities and disputes aside, Segoe UI is a terrific design choice if you have ClearType enabled, and if you’re comfortable with the heavy-handed anti-aliasing the technology provides. Without proper anti-aliasing, Segoe UI goes from strong yet delicate, to almost brutishly crude.

Nyala

The least known of the eight Vista fonts, Nyala, is supplied with Windows Vista and Windows 7, as well as with Windows Server 8. It’s a restrainedly ornate serif font that — to my rather blurry eyes — appears a bit jagged in many displays. It’s also the only one of the eight Vista fonts that is virtually impossible to find for free if you don’t have it as part of your Windows installation.

According to Microsoft, "[t]he Nyala typeface is named for the mountain nyala (tragelaphus buxtoni) a species of great African antelope native to the highlands of Ethiopia."

It was created by veteran font designer John Hudson (who, just as a reminder, also created Constantia) and is designed to reference native Ethiopian typography and lettering.

Design Issues in Using Vista Fonts

Designing with Vista fonts — both the "C" font collection and the two redheaded stepchildren — is problematic at best.

Certainly, by looks alone, most all of the fonts make excellent design choices, being elegant, attractive, and readable at a variety of font sizes.

And since they’re not the same old Web-safe font choices we see every single boring day, it gives both designers and users something fresh and different to see on their screens.

Market Penetration is Decent

Font embedding aside, we all know that it’s all but pointless to design with a font that no one has.

Microsoft is probably the only computer technology company in existence that can introduce a font — or in this case a group of fonts — that will achieve serious market penetration in the Windows user community within only a year.

That’s because the Vista fonts were included with Microsoft Windows Vista, Office for Windows 2007, and Office for Mac 2008. Suddenly, hundreds of thousands of potential Web users were gifted with almost a dozen new fonts.

So how many Windows users have them? The savants at CodeStyle can answer that question. Periodically, they issue an update of their survey of the fonts being used "in the wild" and what percentage of what users have what fonts.

As of CodeStyle’s June 2010 font survey results, the various "C" fonts seem to have a 60-61% market penetration among Windows users.

Segoe UI has a bit less, at around 51%. Nyala comes in a good bit lower, at around 43% of Windows users having that font on their machines.

A small but significant number of Mac users — about 13-15% — have the "C" fonts on their systems. For some perspective, that’s twice the percentage of Windows users who have Helvetica (the Mac equivalent of Arial) on their machines.

Linux users, which accounts for around 4.8%[2] of all Web users, pretty much don’t have any of these fonts: even the most common of the fonts, Calibri, doesn’t show up at all on the Linux font listing.

Is market penetration growing? The numbers for Windows users went up about 5% in just a month (from May to June) — a significant increase. This tells us that market penetration for these fonts is going up.

Quick recap: We can expect well over half of our Windows users to have the Vista "C" fonts, about 14% of our Mac users to have the "C" fonts, and our Linux visitors won’t have the fonts, period. There are signs that this will increase relatively rapidly.

What this means for web designers, though, is that while you can lead off with a Vista font in your font stack, you should have it followed (backed up) by fonts that are more universally available (Web-safe fonts) until these numbers reach higher percentages.

Size Really Does Matter

Unfortunately, the Vista fonts are tremendously small (think x-heights) in comparison to fonts that would ordinarily be used in font stacks with them, making it tough to design for them.

Or at least seven of them are; Segoe UI is larger than its seven siblings, and in its size, compares fairly well with fonts that it would likely be paired with, such as Verdana, Helvetica/Arial, and Tahoma.

Also, the size differential seems more pronounced on the "C" sans-serifs: Calibri, Candara, and Corbel. Some of the Vista fonts are so much smaller than their confreres that using them in front of your font stacks might throw off your design, especially if you’re designing a tightly structured, "count-the-pixels" layout.

You’ll probably find yourself compensating for their small sizes by increasing the font size of your designs, which may come back to bite you when your site displays on machines without these Vista fonts.

That’s a problem that has no real solution just yet, though it may be somewhat addressed when the @font-size-adjust property becomes more widespread.

Unfortunately, even @font-size-adjust won’t allow for adjustment for different fonts within a stack.

The guys at NeoSmart observe:

"They just don’t fit. The new fonts are mostly too small to be plugged right in to an existing CSS file. If you tweak the CSS so that it looks right for, say, Calibri; ten minutes later someone that doesn’t have that font is going to come around and ask your server for that CSS file — but since they don’t have Calibri installed, their browser will use the next one on the list, and unfortunately, your sizes are going to be all wrong."

They eventually did tweak some stylesheets to accept Vista fonts, but it took some time, some testing, and a willingness to compromise on font sizing. They do note that Consolas works nicely in their designs without a lot of tweaking.

Brownspank at SixThings observes: "It may seem trivial for some, but if you’re aiming for consistency within your font-family, or are relying on subtle font size differences to enforce hierarchy, Vista fonts may adversely affect your layouts."

McDermott notes: "It does make you wonder why this came about. Was it just ignorance on the part of their type designers? Negligence? Some underhanded way to make web pages look bad in other browsers so everyone has to use IE?"

Brownspank advises designers to set their font-size at a minimum of 14px or even 16px to ensure readability, and try to use Vista fonts that match their non-Vista cousins as closely as possible.

The ClearType Issue

Then there’s Microsoft’s ClearType. ClearType (CT for short) is an anti-aliasing (sometimes called font smoothing) utility first developed for Microsoft Reader in 2000, and is incorporated (turned off by default) in Windows XP.

It is enabled by default in Vista, Office 7, IE 7, and Windows Live Messenger. If you’re familiar with Adobe’s CoolType, Microsoft’s version is relatively similar.

Microsoft made the decision — foolishly, in my opinion — requiring ClearType to be enabled for these fonts to display properly, and designed them to CT specifications.

By doing so, they took 8 very usable fonts and made it much more difficult to justify using them in font stacks that are constructed to work on 99.9% of the browsers and displays out there.

Web designers, whether using Vista fonts or not, absolutely need to test their designs in Windows displays with ClearType enabled and again with it disabled.

Mac users have font smoothing operating all the time, so it will be less of an issue (or at least the same issue) for Mac folks. Mac font smoothing is pretty standard, with OS X using the Quartz anti-aliasing filter and Mac OS 8 and 9 systems using an older utility, QuickDraw[3]. Mac blogger Matt McErvin gives some more detailed information on both Quartz and QuickDraw’s anti-aliasing techniques.

The difference between fonts rendered in Quartz and ClearType. Source: Smashing Magazine.

ZDNet’s George Ou, writes that CT is superior to Quartz in rendering fonts on-screen. Blogger, Joel Spolsky, disagrees to an extent, positing that Quartz does a better job of rendering the typeface as it was originally designed, at the cost of a bit of blurriness. This debate addresses why some Safari for Mac users find the font displays unacceptably blurry.

Opinion is strongly split for and against anti-aliasing in general — and ClearType in particular. Personally, I like font smoothing because my eyes are bad and both my computer monitor and my glasses are old. I’ll take what I can get to help me see clearly.

Those with sharper vision and better monitors can, and do, disagree. Notable designer, Jon Tan, has a particularly acerbic take on ClearType, especially how it is implemented in IE 7. He concludes, "ClearType fails to deliver good anti-aliasing. In my view it is a backward step from the old Windows Standard rendering. I am at a complete loss to explain why it is allowed to persist."

I might agree with Tan if my eyes were better.

ClearType For Programmers

Blogger, Jeff Atwood at Coding Horror would love to use Consolas as his default fixed-width programming font, if it wasn’t for the ClearType issue. He writes, "I’ll definitely agree that Consolas is one of the best looking ClearType fonts I’ve ever seen. That’s probably because it is part of the first font family designed from scratch with ClearType hinting in mind. However, I prefer not to use font smoothing on my programming fonts. And Consolas looks like crap without ClearType! Consolas appears to lack any kind of hinting for reasonable display at small point sizes. Consolas isn’t just optimized for ClearType, it can barely be used without it."

Programmer Rick Stahl agrees with Atwood’s position, saying Consolas works for him only with ClearType enabled, and then only at 15pts.

However, programmer and math professor John Cook has a different view, saying that Consolas is his "favorite monospace font" in part "because it exaggerates the differences between some characters that may easily be confused." He does not address the ClearType issue; presumably he’s enabled it and moved on (or he doesn’t use Windows).

Tweaking ClearType For You

It’s worth mentioning that Microsoft has a "power toy" available to fine-tune ClearType for XP and Vista users. Windows 7 folks have the utility in their Control Panel’s Appearance and Personalization applet. XP users also have an online version of the CT Power Toy available for their use.

Not For Printing

With the possible exceptions of Constantia and Corbel, these fonts are designed for the screen, not for print. I wouldn’t run to change my print stylesheets to incorporate these fonts.

Using the "C" Fonts to Set the Theme of Your Designs

[W]rite down a general description of the qualities of the message you are trying to convey, and then look for typefaces that embody those qualities.

– Jason Santa Maria

Designers should also recognize their visitors’ perceptions of the fonts they select. Most designers and users agree that the font, Helvetica, projects a cool, somewhat detached, mood when used in designs while Times New Roman projects a solid, if perhaps a bit stodgy, feel.

A 2006 Microsoft-funded study by the Software Usability Research Laboratory had subjects detail their feelings about a list of 20 fonts, including all of the "C" fonts, with an eye to the implications towards their use in Web designs and other areas.

After sorting through the responses, the 6 fonts were classified as follows:

Calibri’s Usability

• An "all purpose" font.
• 70% of subjects said they would use this font on the Web.
• 70% said they would use this for texts.
• 64% said they would use this font in Instant Messaging software.
• 63% said they would use this font in emails.
• 62% said they would use this font in magazines.
• 54% said they would use this font in a PowerPoint presentation.
• 53% said they would use this in advertisements.
• None said they would avoid it entirely.

Cambria’s Usability

• A "traditional" font; "stable," "polite," "mature," and "practical."
• 76% said they would use this font for business purposes.
• 70% of subjects said they would use this font on the Web.
• 70% said they would use this for texts.
• 66% said they would use this font for their assignments.
• 65% said they would use this font in magazines.
• 64% said they would use this font in textbooks.
• 64% said they would use this for news articles.
• 63% said they would use this font in letters.
• 61% said they would use this for short stories.
• 61% said they would write tests with this font.
• 59% said they would use this in books.
• 59% said they would use this for scientific purposes.
• 53% said they would use this font in brochures.
• 45% said they would use this for math.
• 41% said they would use this font for computer programming.
• None said they would avoid it entirely.

Candara’s Usability

• An "all purpose" font.
• 61% said they would use this font in emails.
• 55% said they would use this in advertisements.
• None said they would avoid it entirely.

Consolas’ Usability

• A "plain" font; "unimaginative" and "dull."
• None said they would avoid it entirely.

Constantia’s Usability

• A "traditional" font.
• 59% said they would use this font in letters.
• 58% said they would use this for short stories.
• 55% said they would use this font in brochures.
• 54% said they would use this in books.
• None said they would avoid it entirely.

Corbel’s Usability

• An "all purpose" font.
• 61% said they would use this font in emails.
• 54% said they would use this font in IMs.
• None said they would avoid it entirely.

What This Means for the Usability of "C" Fonts

The researchers noted, "The results from the online survey resemble previous research based on print samples. Users consistently attributed personalities to fonts displayed onscreen."

For what it’s worth, my take on the data: All of the fonts — with the possible exception of the monospace font Consolas — came across as appealing to one degree or another.

Calibri, Constantia, and especially Cambria, are rated as useful for a wide variety of applications.

Calibri seems the most popular for electronic (screen) uses, while Constantia is more popular for print media. Cambria appeals to both electronic and print displays. Candara and Corbel made less of an impression.

Vista Fonts in the Wild

Screenshot of an Itst.org site using Cambria. Source: Sascha A. Carlin.

I was somewhat surprised to find very few sites using any of the Vista fonts as their primary font in their font stack. Here are a few sites that use Vista fonts. Because context matters in this case, I should say that I took these screenshots using Firefox on a Windows XP machine with ClearType enabled.

bright creative

Dave Shea’s site uses Candara in some of its headings. The h2 heading ("welcome") is set in Candara.

NeoSmart

Like Shea above, NeoSmart Technologies uses Candara as part of its logo font, in the "connecting ideas" text line. The secondary text line is set in Candara.

MSDN Blog

Microsoft project director Jensen Harris used Segoe UI and Constantia in a December 2005 Microsoft blog post touting the new fonts’ arrival on the scene.

Microsoft project manager Scott Hanselman used Consolas for some program code in a blog post. Not a great example, but as you might imagine, there aren’t a lot of sites using Consolas in their design at all.

HiTechy

Web designer Alex Dawson uses Constantia for his headers and Candara for his body text.

AriWriter

Social media marketer Ari Herzog uses Corbel as the font for the body text on his blog.

Stop Bullying Now

I’ve used Segoe UI as a text font in several of my own designs, including my redesign of the Stop Bullying Now site.

Other Uses in the Wild

Microsoft uses Segoe (a variant of Segoe UI) in its text font stack, behind Tahoma. With Tahoma’s 99%+ market penetration among Windows users, few, if any, Windows users will see Microsoft’s site displayed in Segoe.

According to Web designer Amrinder Sandhu’s February 2010 article on A Way Back, the typography site I Love Typography had Cambria in its font stack, behind Georgia, which means that with Georgia’s near-99% market penetration among Windows users, virtually all of them would see it in Georgia, not Cambria. However, a check in May 2010 shows Cambria no longer in the ILT font stack.

Obtaining Vista Fonts

As noted above, you have these fonts if you have Windows Vista, Windows 7, MS Office 7 for Windows, and/or MS Office 8 for Mac.

However, if you’re running a non-Vista Windows OS, you can still obtain the fonts in several ways.

You can get the 6 "C" fonts by downloading and installing the free Microsoft PowerPoint Viewer 2007.

You can obtain the other Vista font, Segoe UI — not available through most font providers, even those who make the other Vista fonts available — by installing the free Microsoft Word Viewer.

Mac users can obtain the Vista fonts freely and by installing the Open XML File Format Converter; Rémi Plourde tells how to do it.

Ubuntu Linux users can figure out how to install the fonts from this post. Fedora Linux users can install Vista fonts on their machines by following the instructions found here.

Pairing Off

If you do decide to bite the bullet and incorporate Vista fonts into your design, here are some suggested pairings.

These are just suggestions, subjective and idiosyncratic; you may find that different fonts, or different combinations, work better for your designs. Keep in mind the issues of size and anti-aliasing, and test, test, test.

Calibri + Arial or Helvetica

To my mind, this is the most drastic example of size differential. Calibri is small. Sandhu recommends using Gill Sans with Calibri.

Cambria + Times New Roman/Times and Georgia

Cambria pairs off well with Times New Roman, but is a bit narrower than Georgia. Also, it pairs off well with Linux’s Liberation Serif.

Candara + Trebuchet MS, Helvetica/Arial, Verdana, or Geneva

Canadara pairs fairly well with Linux’s Liberation Sans.

Consolas + Monaco, Andale Mono, or Lucida Console

Really, any monospace font could work with Consolas. Sizing is an issue, but not as much as with some of the others.

Constantia + Times New Roman/Times, Apple Garamond, or Georgia

Also pairs off well with Book Antiqua, the Palatino font family, and Linux’s Liberation Serif.

Patrick Hunlock provides an excellent comparison (in PDF format) between the 6 "C" fonts and their non-Vista cousins. Web designer Christian Montoya provides another such chart, also very good, and with the added bonus of some Linux fonts in the mix.

Advocating the Use of Vista Fonts in Designs

As noted above, most design-based criticisms of the use of Vista fonts center around the ClearType/anti-aliasing issue. But others don’t see that as a deal-breaker.

Christian Montoya is a strong advocate for using Vista fonts in design, explaining that he is tired of "star[ing] at the same ugly set of Windows fonts I’ve had to endure for years … as far as I’m concerned the new Windows Vista fonts are far better designed than their predecessors."

Stephen Coles, the co-editor of the influential typographical blog Typophile, wrote in 2008 why he believes Vista fonts aren’t being used more widely in site designs: "The Vista fonts are hampered by the anti-Microsoft sentiment common among designers. Perhaps there is also a segment of type users who see C[a]libri and the other C-fonts as made specifically for ClearType — for the screen — not for professional print design. Personally, I think the series is one of the brightest things Microsoft has done in years and they continue to school Apple on commitment to typography, but I haven’t seen much of the Vista fonts in offline use."

Typeface designer, James Arboghast, predicts that Vista fonts will become widely used "[a]bout a decade from now. These things take time to catch on."

References

1. Microsoft Windows – Versions – Wikipedia
2. OS Statistics – W3Schools
3. Daily Report – Jeffrey Zeldman Presents The Daily Report

Related Content

• The Essential Guide to @font-face
• A Basic Look at Typography in Web Design
• Comic Sans: The Font Everyone Loves to Hate
• Related categories: Web Design and Resources

About the Author

Michael Tuck is an educator, writer, and freelance web designer. He serves as an advisor to the Web Design forum on SitePoint. When he isn’t teaching or designing sites, he is doing research for the History Commons. You can contact him through his website, Black Max Web Design.

There’s a lot of buzz going around about HTML5. Big companies such as Apple are predicting that it’s the technology that will sign the death warrant of the popular Flash platform that powers a lot of rich internet apps and complex dynamic web components.

But what is HTML5, really? How will it change the jobs of web developers and web designers? Here are 15 web resources to help you on your quest in getting current about the impending technology that’s already being adopted by major web browsers and leveraged in large sites such as Google.

1. WTF is HTML5

For the visually-inclined and casual folks out there, here’s an interesting HTML5 infographic covering useful things such as a comparison of HTML5 and Flash, web browser support/readiness, and a highlight of some of the more popular and powerful modules in  HTML5.

2. Dive Into HTML 5

Software developer and popular blogger, Mark Pilgrim, has written an online book about HTML5. It’s a light — and often entertaining — read, focusing on the pragmatics of HTML5 and the capabilities it offers everyday developers.

3. HTML5 Doctor

HTML5 Doctor publishes articles related to HTML5, featuring practical information and ways we can use the technology right now. Some articles you’ll find on their site include an examination of the re-specification of the dl element, what the new article element is, and regular Q&As with their readers. It’s a collaboration between passionate developers who formulated the idea for the website in a meetup during a Future of Web Design conference.

4. When Can I Use…

This handy one-page crib sheet highlights current browser compatibilities of HTML5 elements and APIs among the five major browsers in the market (IE, Firefox, Safari, Chrome, and Opera).

5. HTML5 W3C Specifications (Editor’s Draft)

Straight from the horse’s mouth, this webpage is the most recent editor’s draft of HTML5 specifications by the leading international standards organization for open web technologies, W3C. It’s worth a read if you want to learn the ins and outs of HTML5 and to find out what browser vendors are (hopefully) basing their implementations on.

6. Yes, You Can Use HTML 5 Today!

SitePoint has a wonderful article about HTML5 that encourages the use of HTML5 elements and APIs right now, as well as how to write unobtrusive code to support browsers that do not currently have these HTML5 elements, such as IE8.

7. Coding A HTML 5 Layout from Scratch

As a proof of concept, Smashing Magazine explores HTML5 with a practical tutorial on building a webpage layout using some new HTML5 elements.

8. HTML5 presentation

This handy slideshow presentation — developed originally for Google Chrome users, so some may have issues viewing the presentation depending on their web browser — is a bleeding edge live demonstration and informational piece about HTML5.

9. HTML5 Gallery

This website showcase/gallery features real websites that use HTML5. It’s a valuable resource for seeing how developers are already leveraging the future specifications of HTML5.

10. A Web Developer’s Guide to HTML 5

This article from W3C is aimed at web developers, covering the need-to-knows, syntax, an overview of APIs, official vocabularies, and you know, all that geeky stuff that only we as web developers would get excited about.

11. HTML5 Demos and Examples

UK-based web developer, Remy Sharp, has compiled (or as he terms it, "hacked together") demos and experiments he’s created using HTML5. His demos include stuff like creating a simple browser-based chat system, geolocation, and more.

12. Web Designer’s Checklist: HTML5 Support Tables

This table-structured checklist features both CSS3 and HTML5 specifications; it has web browser support tables for the new HTML5 Audio API, Video API, Web Forms, and more.

13. HTML 5 differences from HTML 4

Want to know how HTML5 will change the way you’ve been doing things? This comparative analysis from W3C highlights syntactical differences, the new HTML elements, and the newly introduced APIs for working with web data.

14. HTML5 – Wikipedia

Our favorite user-generated and peer-reviewed content site, Wikipedia, has an article that covers the facts and dates related to HTML5. Besides the actual article itself, scrolling down to the References and External Links sections towards the bottom of the page will provide you with a swarm of other HTML5 resources to check out.

15. The HTML5 test

Want to test your own web browser’s HTML5 capabilities? This web tool will evaluate your web browser in terms of how much HTML5 stuff it currently is able to render, giving it a numerical score — with the meaning of the score broken down on the test page itself.

Related Content

• How to Make an HTML5 iPhone App
• The State of HTML5 Apps
• Five Things IE9 is (Actually) Doing Right
• Related categories: HTML and Web Development

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development, and a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Let us assume that, just like everyone else, you are building a website–after all, the Web is where it is all happening now. As soon as your website goes live–and especially while you are still in the design and development phase–you need to make sure your site’s content will be found through search engines such as Google, Yahoo!, and Bing where many people go to look for information.

Whether you’re starting a blog or deploying an e-commerce solution for your clients, it’s a good idea to keep in mind some good web development practices that will enhance your chances in search rankings.

This article follows up on a previous Six Revisions post called 9 Ways To Improve the SEO of Every Website You Design, sharing with you a few more tips for improving the search engine optimization, semantics, web accessibility, and interoperability of your web designs.

1. Use Flash Wisely

Don’t call me patronising–it goes without saying–but try not to use Flash when HTML/CSS should be used. Flash has its place on the Web: it’s great for interactive components such as sophisticated learning activity games with audio and video, and 3D animation. It’s better served as components of an HTML/CSS site than as the technology that powers the entire site. For example, check out Kongregate, a popular social Flash gaming site. Although Flash is their bread and butter, they still use HTML, CSS, and server-side scripting to power their site functionalities.

Flash can be SEO-friendly and web accessible, however, it’s more difficult when compared to using open web languages like HTML, CSS, and JavaScript.

2. Use Gracefully-Degrading JavaScript for Hidden Content

If you are hiding and showing content on a web page, it’s best to use JavaScript so that the content is still within the web page’s markup. This is not only good for web robots such as search engines, but also great for those that use screen readers.

A good test to see whether hidden content on a web page is viewable by web crawlers is temporarily disabling JavaScript and determining if you can read your hidden content. You can do this from within your browser settings, but more conveniently, you can use a browser plugin like Web Developer Toolbar.

3. Name Your Image File Names Accurately

It is easy to forget how important images can be for SEO and web design alike. Name the actual file correctly by giving it a key term (e.g. yellow-banana.jpg and not some random name like img2gtc92.jpg) because this gives your site assets extra context. Make sure that you give the alt property of the image similar key terms and a decent and succinct description–aim to keep it 10 words or fewer.

In addition, Google Images is another way to get traffic to your site, and if you name your image files well and give them excellent context through their alt property, you will improve your chances of showing up in Google Images results.

4. Don’t Drown Your Home Page with Links

Internal linking–hyperlinks that point to other web pages on your site–is important, so try not to have more than 150 links from page to page so that you don’t dilute your web pages’ rank.

Too many internal links can overcrowd the page and can also slow down your users’ ability to find the link they need.

5. Don’t Use Redundant Links

Some may think that increasing the value of a particular page involves repeatedly linking to the same page from another page. Search engines will only count the first instance of that link, so there is no need to repeat links. In addition, this is a poor practice that will confuse your users.

6. Deep Linking Can Improve Conversions

Deep linking are links that point to internal pages instead of the main/home page. It is a fantastic way for you to send power to pages deeper in your site outside of your home page. Deep linking also promotes the exploration of your site by visitors, providing additional points of conversions.

7. Have a Blog

Blogs are a great way to keep building fresh content on your site and targeting long-tailed key terms. A possible idea is to bring snippets of blog posts onto related pages for fresh content on these specific pages.

8. Make Your Brand Obvious

Make sure that your branding is very clear and that your brand name is obvious on your website. This makes for an easy way for people to remember who you are and augments the possibility of people searching for your brand name on search engines. Being searched by your brand’s name also means that you won’t compete with generic words that people often use in searches (i.e. "budwieser" versus "american beer").

9. Use an XML Sitemap

An XML Sitemap is a protocol that aids search engine crawlers gain contextual meaning about your site’s web page.

If you’re using a content management system, see if it has an XML Sitemap extension (or built-in feature) that will automatically generate the XML file for you. If not, you can use a tool like XML Sitemaps Generator.

10. Use Anchor Text Accurately for Deeper Pages

When linking through to your deeper pages, use your anchor text as precise and short pieces of information. It is important to use keywords that search engine bots can relate exactly to your page. For example, if you’re linking to a web page about Maldives holidays, your link should be <a href="/maldives-holidays.html">Maldives holidays</a>. This way people, as well as web robots, easily know what they are going to get.

Related Content

• Make the Most Out of Social Media
• Optimizing WordPress for Search Engines
• 15 Tools for Monitoring a Website’s Popularity
• Related categories: Website Management and Content Strategy

About the Author

Mark Cronin heads up the SEO team for a Safari holidays Tour Operator. Follow mark on Twitter as @MarcusSeo.

There is no doubt that WordPress is an awesome piece of open source application, and in addition, creating custom themes for it is very intuitive and relatively easy with the WordPress API.

With that said, creating your own custom themes from scratch can be very time-consuming, with plenty of unnecessarily repetitive tasks.

WordPress theme frameworks–which are themes that you can use as a foundation for the creation of your own themes–can drastically boost your performance and efficiency.

To help you learn about WordPress theme frameworks and make your job as developer a bit easier, we are going to review the best WordPress theme frameworks out there.

By the way, this article will not be covering WordPress theme frameworks that don’t use the General Public License that the WordPress core has, as this is the supported licensing type of WordPress.

Why Use a Framework?

In a web developer’s life, a framework helps the speed of production. Much like JavaScript frameworks like MooTools or jQuery, CSS frameworks like the 960 Grid System, or server-side scripting frameworks like Ruby on Rails or CakePHP, WordPress theme frameworks achieve the same sort of efficiency, reduction of errors through cross-browser compatibility, and the provision of useful and common functions.

Let’s draw out the pros and cons of using WordPress theme frameworks.

Pros

• Time savings
• Easier development
• Support via communities built around the WordPress theme frameworks
• Typically has optimized CSS, HTML, PHP functions, and SEO
• Typically has code that’s written with WordPress standards and best practices
• Ease of updating for future releases of WordPress

Cons

A disadvantage of using frameworks is at the beginning, where there is always going to be a learning curve as you adopt new stuff to your development workflow. Though the learning time is relatively short compared to, for example, a new server-side scripting language, you will still have to account for this time when considering the use of WordPress theme frameworks.

However, the best way to look at using any web development framework is that it will be a long-term investment. The time you spend learning the technology at the start pays off in the end in terms of development speed and efficiency.

Another possible disadvantage is that themes built on top of frameworks, depending on the skill of the web developer, could be slower in performance than building themes from scratch, since all frameworks, not just WordPress theme frameworks, provide an additional abstraction layer.

The Concept of Child Themes

Before we start reviewing each framework, it’s important that all of us understand what child themes are in the context of WordPress.

WordPress, by default, supports child themes. Child themes look exactly like their parent themes, unless you make modifications to them. Child themes inherit all the templates, functions, and CSS of parent themes. This compartmentalizes variations so that you can make changes without affecting the integrity of the parent theme.

A child theme is usually contained in a folder having a styles.css (required) and a functions.php file. functions.php is not mandatory, but you will need it if you want to include some custom functions on top of your parent theme (which, in this scenario, is the WordPress theme framework). Both the child theme and parent theme folders will be in the themes directory of your WordPress installation. You can override the inherited traits from its parent by modifying its own styles.css and functions.php files.

Here is how you declare a child theme (this goes inside styles.css, at the top).

/*   Theme Name: Child Theme Theme URI: http://sixrevisions.com Description: A child theme description. Author: Saad Bassi Author URI: http://addictivefonts.com/ Template: My Framework (e.g thematic or Hybrid) Version: 1.0 Tags: theme */

The Template attribute above instructs the WordPress core to inherit all the templates of "My Framework," which is the name of the parent theme in our hypothetical scenario.

WordPress Theme Frameworks

Now let’s review the five best WordPress theme frameworks that you should consider if you are planning to take advantage of them.

1. ThemeHybrid

ThemeHybrid is a popular, free framework developed by the equally popular WordPress developer, Justin Tadlock.

ThemeHybrid is free, but to get support on its forums, you need to sign up for an Exclusive Membership to their Theme Club, which is $25 per year.

With a massive community, you will never get stuck on an issue. ThemeHybrid has many child themes available for download on its website, which you can use to give your WordPress installation a new look without much coding.

ThemeHybrid comes with plenty of WordPress widgets and page templates.

Want to extend the framework? Sky’s the limit and your only real limitation is your imagination (and WordPress theme development skills, of course).

While many people say that frameworks are bloated and slow, ThemeHybrid will change their mind as it is lightning fast and optimized for high performance.

2. Thematic

Thematic is a theme framework by WordPress theme developer, Ian Stewart. Thematic is completely free; from forums to child themes, everything is free!

Though the documentation of this theme is not as comprehensive as ThemeHybrid, you can get insightful tips and tricks from its forum.

Thematic has 13 widget areas that are more than enough for most of your needs. With the WordPress theme framework’s many filters and actions, you can customize your child theme in any way that you want. Its out-of-the-box simple and clean look can even be used without any aesthetical modifications–and it will still look great.

3. Canvas

Canvas is a premium theme framework from WooThemes. As to be expected with any WooThemes product, it has a huge number of options and customization features.

Canvas is best for novice developers and those that don’t want to be bogged down by the ins and outs of coding, but still want to take advantage of the many benefits of using a theme framework.

You can style each element of Canvas differently from its Theme Options panel. The theme framework supports child themes and also has 5 built-in page templates for your home page, including a magazine-style layout and a business site template.

Canvas also supports 6 CSS layouts for your blog and even provides you an option for choosing distinctive layouts for each post and page.

If you are a web designer that doesn’t want to mess with code too much, Canvas should be your pick. To witness the real power of Canvas, watch this video.

4. Genesis

Genesis is a premium theme framework that was built by StudioPress. Genesis has a child theme marketplace where you can buy all additional child themes. Genesis has native support for search engine optimization (which it focuses on). You can set all the options in the Genesis backend panel, just like with most good WordPress theme frameworks.

Similar to the Canvas WordPress theme framework, Genesis gives you the option to select separate layouts for each post and page. Genesis is intended for developers, as opposed to designers, because you will have to learn its hooks and filters before getting started with it, and thus, will need some coding proficiency.

5. Elemental

Elemental is a product of ProThemeDesign. One of its unique features is that it comes bundled with an admin menu bar that stays on top of your WordPress web pages if you are logged in. The admin menu bar allows you to go to the most common places inside the WordPress admin dashboard. The framework comes with 12 page templates and 7 custom widgets by default.

Conclusion

After reviewing these five WordPress theme frameworks, I pick ThemeHybrid as my personal choice–the helpful community coupled with the excellent set of features make it a clear winner in my book.

For WordPress themers just starting out and those that would like to take advantage of WordPress theme frameworks without being bogged down by code, I highly recommend you to go for Canvas, which allows you to modify everything right from the Theme Options panel.

The other three frameworks are also awesome, and the final selection will depend upon your needs and tastes (and, hopefully, this guide will have made making that decision easier for you).

Related Content

• WordPress 3.0: Ultimate Guide to New Features
• 50 Beautiful Free WordPress Themes
• Optimizing WordPress for Search Engines
• Related categories: WordPress and Web Development

About the Author

Saad Bassi is a 20-year-old web developer from Pakistan. He is the Co-Editor at CrispyTech, and blogs about Windows at Windows8Geek. Don’t forget to give him a "hello" on Twitter. Last but not least, make sure that you check out hist latest project, Addictive Fonts which focuses on free high quality font downloads.

Last week, Next Day Flyers, an online printing company that delivers top-quality printed materials with one of the fastest turnaround times in the industry, teamed up with Six Revisions to give away $50 in credit to their online printing store to three winners. Many Six Revisions readers participated in the giveaway, and today I’m happy to announce the three winners.

The Winners

The three winners of the giveaway are:

• Rhett
• Simone D’Amico
• mastersson

Congratulations to the winners!

About Next Day Flyers

Next Day Flyers is an online printing company that specializes in printing promotional products that are great for both small and large print projects, offering some of the fastest turnaround times in the industry. Products they offer include postcards, online brochure printing, menus, greeting cards, bookmarks, business cards, cheap door hangers, promotional printing and more. Be sure to check out their blog and follow them on Twitter as @NextDayFlyers for great marketing ideas and tips.

Related Content

• Win $50 in Credits on Next Day Flyers
• Create a Slick Business Card Design with Stunning Typography
• 15 Excellent Logo Design Tutorials Using Illustrator
• Related categories: Graphic Design and Resources

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development, and a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

The amount of code that developers encounter regularly is staggering. At any one time, a single site can make use of over five different web languages (i.e. MySQL, PHP, JavaScript, CSS, HTML).

There are a number of lesser-known and underused ways to enhance your site with a few simple but powerful files. This article aims to highlight five of these unsung heroes that can assist your site. They’re pretty easy to use and understand, and thus, can be great additions to the websites you deploy or currently run.

An Overview

Which files are we going to be examining (and producing)? Deciding which files to cover was certainly not an easy task for me, and there are many other files (such as .htaccess which we won’t cover) you can implement that can provide your website a boost.

The files I’ll talk about here were chosen for their usefulness as well as their ease of implementation. Maximum bang for our buck.

We’re going to cover robots.txt, favicon.ico, sitemap.xml, dublin.rdf and opensearch.xml. Their purposes range from helping search engines index your site accurately, to acting as usability and interoperability aids.

Let’s start with the most familiar one: robots.txt.

Robots.txt

The primary function of a robots.txt file is to declare which parts of your site should be off-limits for crawling.

By definition, the use of this file acts as an opt-out process. If there are no robots.txt for a directory on your website, by default, it’s fair game for web robots such as search engine crawlers to access and index.

While you can state exclusion commands within an HTML document through the use of a meta tag (<meta name="robots" content="noindex" />), the benefits of controlling omitted pages through a single text file is the added ease of maintenance.

Note: It’s worth mentioning that obeying the robots.txt file isn’t mandatory, so it’s not a good privacy mechanism.

This is how the robots.txt file interacts between a search engine and your website.

Creating a Robots.txt File

To create a robots.txt file the first and most obvious thing you will need is a text editor. It’s also worth pointing out that the file should be called robots.txt (or it won’t work) and it needs to exist within the root directory of your website because by default, that’s where web robots look for the file.

The next thing we need to do is figure out a list of instructions for the search engine spiders to follow. In many ways, the robot.txt’s structure is similar to CSS in that it is comprised of attribute and value pairs that dictate rules.

Another thing to note is that you can include comments inside your robots.txt file using the # (hash) character before it. This is handy for documenting your work.

Here’s a basic example telling web robots not to crawl the /members/ and /private/ directory:

User-agent: * Disallow: /members/ Disallow: /private/

The robots.txt exclusion standard only has two directives (there are also a few non-standard directives like Crawl-delay, which we’ll cover shortly).

The first standard directive is User-agent. Each robots.txt file should begin by declaring a User-agent value that explains which web robots (i.e. search crawlers) the file applies to.

Using * for the value of User-agent indicates that all web robots should follow the directives within the file;  * represents a wildcard match.

The Disallow directive points to the folders on your server that shouldn’t be accessed. The directive can point to a directory (i.e. /myprivatefolder/) or a particular file (i.e. /myfolder/folder1/myprivatefile.html).

There is a specification for robots.txt, but the rules and syntax are exceptionally simple.

Robots.txt Non-Standard Directives

Of course, whilst having a list of search engines and files you want hidden is useful, there are a few non-standard extensions to the robots.txt specification that will further boost its value to you and your website. Although these are non-standard directives, all major search crawlers acknowledge and support them.

Some of these more popular non-standard directives are:

• Sitemap: where your Sitemap.xml file is
• Allow: opposite of Disallow
• Crawl-delay: sets the number of seconds between server requests that can be made by spiders

There are other less supported directives such as Visit-time, which restricts web robots to indexing your site only between certain hours of the day.

Here’s an example of a more complex robots.txt file using non-standard directives:

Allow: /private/public.html Comment: I love you Google, come on in! Crawl-delay: 10 Request-rate: 1/10m # one page every 10 minutes Robot-version: 2.0 Sitemap: /sitemap.xml Visit-time: 0500-1300 # military time format

Whilst not a standard, there is an extension for robots.txt which has mainstream support.

Favicon.ico

A favicon (short for "favourites icon") is a small image (like a desktop application’s shortcut) that represents a site.

Shown in the browser’s address bar, the favicon gives you a unique opportunity to stylise your site in a way that will add identity to browser favourites/bookmarks (both locally and through social networks).

The great thing about this file is that every major browser has built-in support for it, so it’s a solid extra file to provide.

This is how the favicon.ico file affects your site visually through the browser such as IE.

Creating a Favicon.ico file

To create a favicon, you’ll need an image or icon editor. I am a fan of Axialis IconWorkshop, but there are free editors like IcoFX that do the job well.

You can also find quite a few free online favicon tools by viewing this list of web-based favicon generators.

You need to have a 16×16px icon (or 32×32px, scaled down) that matches what you want to see in the browser.

Once you are done creating your icon’s design, save the file as "favicon.ico" in the root directory of your web server (that’s where browsers look for it by default).

Note: It’s a good idea to use the .ico file type, as some browsers don’t support PNG, GIF or JPEG file types.

To make this file work properly, refer to the location of your favicon in the <head> tags of all your HTML documents, as such:

<head> <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico" /> <head>

The rel attribute values of "shortcut icon" or "icon" are considered acceptable and the MIME type of "vnd.microsoft.icon" (as of 2003) replaced the older type ("image/x-icon") as the official standardized favicon MIME type for .ico files on the web.

Note: While Internet Explorer (and some other browsers) will actively seek out your favicon in the root directory of your site by default (which is why you should have it there), it’s worth adding the above code into the <head> of your HTML just to make it explicitly known by other types of browser agents.

There are multiple online tools which can create a favicon from existing images.

Favicons in Apple Devices

Another standard (of sorts) has appeared in light of Apple’s iPod, iPad, and iPhone. In this situation, you can offer a 57×57 PNG, ICO or GIF file (alpha transparency supported) that can be displayed on the devices’ Home screen using the web clip feature.

Apple also recommends that you use 90-degree corners (not rounded corners, which the devices will do for you automatically) to maintain the "feel" of such icons.

To make this file work properly, place the following code into every page within your <head> tags:

<head> <link rel="apple-touch-icon" href="images/icon.png" /> </head>

For users of Apple devices, a specially produced "favicon" can be produced.

Sitemap.xml

One thing website owners worry about is getting their website indexed correctly by the major search engines like Google.

While the robots.txt file explains what files you want excluded from results, the Sitemap.xml file lists the structure of your site and its pages. It gives search engine crawlers an idea of where things are on your site.

This is how the Sitemap.xml file interacts between a search engine and your website.

As always, the first recommended course of action to produce a Sitemap is to create the XML file that will contain its code. It’s recommended that you name the file as "sitemap.xml" and provide it within the root directory of your website (as some search engines automatically seek it there).

It’s also worth noting that while you can submit your Sitemap file location directly to search engines, adding the non-standard Sitemap directive to your robots.txt file can be useful as it’s widely supported and gives spiders a push in the right direction.

Below is a basic example of how a Sitemap looks like.

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url><loc>index.html</loc></url> <url><loc>contact.html</loc></url> </urlset>

Each Sitemap file begins with a Document Type Definition (DTD) that states that the file is UTF-8 encoded, written in XML, and uses the official Sitemap schema.

Following those formalities, you simply produce a list of your URLs that exist within your website’s structure.

Each URL must be contained within two elements: <url> and <loc>. This is a very simple specification to follow, so even less experienced developers should be able to replicate this basic mechanism with little effort.

To reference your Sitemap inside your HTML documents, place this code between the <head> tags:

<head> <link rel="sitemap" type="application/xml" title="Sitemap" href="sitemap.xml" /> <head>

Just like most XML-based schemas, there is a protocol and specification to follow.

Other Sitemap Tags

While you could limit yourself to simply listing every file, there are a number of other meta-information that can be included within the <url> tag to help further define how spiders deal with or treat each page in the site — and this is where the Sitemap’s true power lies.

You can use <lastmod>, for example, to state when the resource was last modified (formatted using YYYY-MM-DD). You can add the <changefreq> element, which uses values of always, hourly, daily, weekly, monthly, yearly, and never to suggest how often a web page changes (for example, the front page of Six Revisions has a value of daily).

There is also the <priority> tag, which uses a scale of 0.0 to 1.0 that you can utilize to indicate how important a web page is to a website.

Here’s an example of using the above tags:

<lastmod>2010-05-13</lastmod> <changefreq>monthly</changefreq> <priority>0.8</priority>

Google Webmaster Tools allows you to submit your Sitemap to initiate its analysis of your site structure.

Dublin.rdf

Ensuring you provide metadata has become big business among SEO professionals and semantics advocates. The appropriate use of HTML, metadata, microformats and well-written content improves the chances of appearing in the right search results. They also allow an increasing number of browsers and social networks to aggregate and filter the data so that they can accurately understand what your content represents.

The Dublin.rdf file acts as a container for officially recognised meta elements (provided by the DCMI specification) which can augment the semantic value of the media you provide.

If you’ve ever visited a library and tried to locate a book, you know that you will often have to flick through the library catalogs to find books based on their subject, their author, or perhaps even their title. The aim of the DCMI is to produce such a reference card for your website that will help search engines, social networks, web browsers, and other web technologies understand what your site is.

This is how the Dublin.rdf file interacts with supporting social networking mediums.

Creating a Dublin.rdf File

To begin, you need to produce the file itself (which we shall name "Dublin.rdf"). In order to maintain consistent meta details about the site (as opposed to individual DCMI meta tags for specific pages and resources), we shall create an RDF file (formatted as XML) with a reference within the HTML document to indicate that the information is available. While you can embed DCMI meta tags within HTML, RDF allows you to cache the data.

When a supporting spider or other resource that acknowledges the DCMI core sees the file, they can cache and directly relate to the information.

This doesn’t mean you shouldn’t use traditional meta tags, but the file can serve as a useful supplement.

<?xml version="1.0"?> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc= "http://purl.org/dc/elements/1.1/"> <rdf:Description rdf:about="http://www.yoursite.com/"> <dc:contributor>Your Name</dc:contributor> <dc:date>2008-07-26</dc:date> <dc:description>This is my website.</dc:description> <dc:language>EN</dc:language> <dc:publisher>Company</dc:publisher> <dc:source>http://www.yoursite.com/</dc:source> </rdf:Description> </rdf:RDF>

Like most XML files, this RDF document has a DTD — and within that, you have the description element (which links to the resource being referenced).

Within the description, as you can see from the above, there are several elements (beginning with the prefix of dc:) — these hold the metadata of the page.

There’s a whole range of terms you can add (see this list of DCMI metadata terms), it’s simply a case of adding the term’s name, then giving a value as denoted by the DCMI specification. You’ll end up with a library of useful data that can improve your site’s semantics and interoperability with other sites and applications!

To make this file work properly, place the following code into every HTML document within the <head> tags:

<head> <link rel="meta" type="application/rdf+xml" title="Dublin" href="dublin.rdf" /> <head>

The Dublin.rdf file makes use of the DCMI specification to provide meta information.

OpenSearch.xml

The ability to search a website is one of the most important ways people locate content.

The OpenSearch file allows you to add a custom search engine listing (on your own site) through the search feature that appears in all modern browsers. All of the major browsers can take advantage of OpenSearch; it’s pretty durable.

While you will still want to provide a search mechanism on your website, this core enhancement complements the user’s in-browser search capabilities.

This is how the OpenSearch file interacts with your site through the browser.

Like with all things we’ve discussed thus far, we need to produce the file for the code to be placed in.

As this particular type of file doesn’t have assumed name reservations like robots.txt or sitemap.xml, we could call the file whatever we like. However, the convention for OpenSearch files is to name the file, "opensearch.xml".

You’ll want to include the code below as your starting template, then proceed to customising the required tags such as <ShortName>, <Url> and <Description> (they are case-sensitive) to describe your site.

The example used below is for Six Revisions using Google Search.

<?xml version="1.0" encoding="UTF-8" ?> <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> <ShortName>Six Revisions</ShortName> <Description>Search this website.</Description> <Image>favicon.ico</Image> <Url type="text/html" template="http://www.google.com/search?sitesearch=http%3A%2F%2Fwww.sixrevisions.com%2F&amp;as_q={searchTerms}"/> </OpenSearchDescription>

The tags included above are:

• ShortName: the title you want for your search extension
• Description: explains the purpose of the search box
• Image: this isn’t required like the others, but I recommend referencing your Favicon with it so the search feature has a unique icon
• Url: requires a MIME type and a template attribute which links to the search terms

To make this file work properly, place the following code into every page within the <head> tag:

<link rel="search" type="application/opensearchdescription+xml" title="Website" href="opensearch.xml" />

Other OpenSearch Tags

There’s a range of additional tags we can provide. Among these are:

• AdultContent: if the site has adult material needing to be filtered, set to false
• Attribution: your copyright terms
• Contact: an email address for the point-of-contact of your site
• Developer: who made the site?
• InputEncoding and OutputEncoding: The MIME type used
• Language: i.e. EN for English
• Query: for more detailed search terms
• Tags: keywords, separated by a space
• SyndicationRight: The degree to which people can request, display or send results

Example usage of these other tags:

<AdultContent>false</AdultContent> <Attribution>Copyright, Your Name 2010, Some Rights Reserved.</Attribution> <Contact>None@none.com</Contact> <Developer>Your Name</Developer> <InputEncoding>UTF-8</InputEncoding> <Language>en-us</Language> <OutputEncoding>UTF-8</OutputEncoding> <Query role="example" searchTerms="terms" /> <Tags>Example Tags Element Website</Tags> <SyndicationRight>open</SyndicationRight>

Simple, Small and Effective

While this guide represents a crash course in producing these useful files, it’s worth pointing out that taking the time to understand the syntax of any language is important in order to determine what the impact of these files on your website.

These files represent a truth that there’s more to a website than HTML, CSS, and JavaScript, and while producing these files will certainly not act as a replacement for your existing code workflow, their inherent benefits make them worthy of consideration to supplement your projects. Give them a try for yourself!

Related Content

• The Top 15 Google Products for People Who Build Websites
• Performance Comparison of Major Web Browsers
• Five Ways to Speed Up Page Response Times
• Related categories: Web Development and Website Management

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

With the dominance of Apple’s iPhone in the recent years, Google’s Android OS seems to have been left in its shadows. However, this is only because the iPhone was released long before any Android device. Nevertheless, as the popularity of Android grows (and its growth is staggering) so does its range of apps.

In this article are the top 10 Android apps for people who make websites, enabling them to be productive whilst on the go.

1. AndFTP (free)

Do you need access to your web servers on your Android mobile device? AndFTP is just the app for the job. Capable of uploading, viewing, and updating files from anywhere, it can be a lifesaver if you need to edit your (or your client’s) site without a desktop/laptop handy. It also supports multiple domains from FTP, SFTP and FTPS connections and has an excellent user interface for a first-generation Android app.

2. SilverEdit (free)

A simple source code editor app, SilverEdit lets you code up full HTML, CSS, PHP files that you can save to your phone or send to your email account. Combined with AndFTP (above), you can build and push websites with your Android handheld device! At the moment, it still suffers from functionality problems on certain Android devices, but is getting more stable with each version release (version 3 is currently in development).

3. Photoshop (free)

Adobe brings the ever-popular Photoshop to the Android platform. Unfortunately–but as to be expected–it has limited functionality compared to its desktop counterpart, but does include the essential basic image processing functions such as crop, rotate, filters, and image saturation adjustments. It also allows you to share your work on Photoshop.com.

4. View Web Source (free)

If you come upon a mobile site that you want to study whilst you’re browsing the Mobile Web, View Web Source allows you to inspect and download the entire source code of the page to its text editor. It gives you the ability to edit and manipulate the code, make comments, and save the file on your phone (or send to your email account).

5. Mobile GA (free)

The trusty old analytics favourite–Google Analytics–is now available on the Android platform. Google Analytics is the best free web service (hands down) for studying your website traffic statistics. Mobile GA (Google Analytics) uses the Google Analytics API for securely transmitting your site data without the need for third-party intermediate servers, maintaining the privacy and safety of your data.

6. Dropbox (free)

A popular app for web designers and other creatives, Dropbox–the ubiquitous cloud-based file backup tool–allows you to access a remote folder with documents you have stored on the server. Simply save files on one computer and you’ll be able to access the saved files from any computer or mobile device. The free Android app gives you mobile access to your Dropbox account. It’s a must-have tool for those who work with files and documents that need to be shared across multiple computers and devices.

7. WordPress Mobile (free)

If you maintain a WordPress site, WordPress for Android is an open source app that allows you to write new posts, edit content and manage comments, all through the lovely WordPress UI. It’s great for blogging on the go.

8. Thinking Space (free)

As a web designer, you can’t turn off your magnificent creative brainpower and you’re always brewing up creative ideas for site designs wherever you are. Thinking Space is an Android app designed for recording brainstorms and for mapping out your garbled thoughts so that when an idea hits, you’ll have a structured medium to convey them in. An excellent feature of this app is the ability to sync with Google App Engine; this means you can upload your data to the cloud and access them from anywhere via your Android mobile device or through FreeMind (the open source desktop version of the app).

9. Typography Junkies (free)

Every designer should have a good typography source of inspiration; web typography is an important part of design. With Typography Junkies for Android, you can keep up-to-date with the very latest in font news by way of videos, images, social media and much more.

10. HTML Test (free)

Need to review your HTML prowess? HTML Test is a great Android app to have if you’re just starting out in this whole web design game. The app will test your knowledge about HTML, giving you multiple-choice questions that you have to answer within a predefined time.

If you’re an iPhone owner, be sure to check out a similar list called 10 iPhone Apps Every Web Designer Should Know About.

Related Content

• Getting Started with the iPhone SDK
• How to Make an HTML5 iPhone App
• Mobile Web Design: Is it Worth It?
• Related categories: Tools and Web Design

About the Author

Rob Thomas is head of photography for Designbysoap.co.uk, specialising in architectural and music photography. He’s also a search engine optimization engineer, often helps out with their digital marketing and loves graphic design. Follow him on Twitter: @designbysoap.

An important activity that all freelancers need to do–no matter what their freelancing field may be–is to read and educate ourselves. Reading is a great source for freelancers to get motivated, inspired, and learns tips and techniques for becoming a better professional.

There are many excellent resources on the web dedicated to the Freelancer. From getting inspiration to dealing with creativity burnout, you will find it all on the internet; there is a lot of information spread throughout the nooks and crannies of the online world, covering all the topics you could possibly think of concerning freelancing.

I have organized a list of great articles that will be very helpful to freelancers, containing hundreds of tips, tools, and lessons. This article could certainly be called the freelancing treasure box because every item shared here is a gem to read.

Starting as a Freelancer

The route to starting out as a freelancer is made easy with the great advice from these articles.

1. How to Start a Freelance Company

2. A Comprehensive Guide to Starting Your Freelance Career

3. 25 Awesome Tips to Become a Successful Freelancer

4. What I Wish Someone Had Told Me About Freelancing

5. Are You Just a Freelancer or a Successful One?

Freelancer Inspiration and Creativity

The essence of gathering inspiration and becoming creative could never be simpler with the tips shared below.

6. Ways for Freelancers to Get Inspiration for Design Work

7. 10 Ways to Stay Creative While Exhausted

8. 15 Ways to Improve Freelance Creativity

9. 10 Tips to Avoid a Creative Block

10. 25 Must Read Books for Designers and Freelancers

11. 33 Excellent "Out of the Box" Ways for Creatives to Find Inspiration

Freelancer Thoughts and Tips

What goes on in the mind of a freelancer? What are the best tips you can get from freelancers themselves? Check them out below!

12. Wise Words from Freelancer to Freelancer: 8 tips to Help You

13. 10 Blogs Every Freelancer Wish Existed

14. 20 Quick Tips for Aspiring Freelancers

15. How to Beef Up Your Freelancing Skills

16. Essential Habits of an Effective Professional Freelancer

17. Freelancing: How to Deal with Long Working Hours

18. 15 Tips for Freelancers: What to Do in Slow Days and Dry Times

19. Spring Cleanup: 30 Must Do Tasks for Freelancers and Creatives

Combating Freelancer Burnout

Feeling drained out? These great formulas will kick away your worst enemy: Fatigue!

20. Freelancer Burnout: 8 Great Tips to Overcome It

21. 10 Most Common Health Hazards of Freelancing

22. 30+ Things You Have to Know About Being a Freelancer

Freelancer’s Hunting Ground

Do you know where to get jobs? These are the places to get you started.

23. 50 Freelance Job Sites for Designers & Programmers: Best Of

24. Get Hired: 15 Best Job Boards for Freelancers

Promoting and Branding Yourself

Making yourself known is essential if you would like to gain more exposure and incoming business. Learn all about self-promotion in the articles below!

25. The Art of Branding Yourself and Your Freelancing Business

26. Marketing Rules and Principles for Freelancers

27. 15 Guerrilla Marketing Tips for Freelancers

Dealing with Clients

Is the client your best friend or worst enemy? Read about tips and ways on how you can better work with your clients.

28. Identifying and Dealing with Different Types of Clients

29. 12 Breeds of Client and How to Work with Them

30. How to Find Local Clients for Your Freelance Business

Freelancer’s Tools

Be more productive and make your life easier with these tools at hand!

31. Cool PC Apps: The Top 50 PC Applications for Freelancers

32. Ten Essential Items Every Freelance Office Needs

33. 90 Useful Freelance Tools

34. 14 Applications for Project Management and Collaboration

35. 30 Freelance Work Websites and Resources You Should Know

36. 5 Tools for Freelancers To Manage Their Time

Freelancer’s Failures

If all else fails, pick yourself up and learn from the mistakes you made. Better still, you can learn from other people’s mistakes without the need to go through them yourself.

37. Five Ways to Guarantee Your Failure as a Web Professional

38. 20 Reasons You Shouldn’t be a Freelancer

39. How to Overcome 20 Reasons Not to Become a Freelancer

40. Critical Mistakes Freelancers Make

Bonus: Freelancing-Related Articles on Six Revisions

Here are a few articles on Six Revisions not mentioned above that will be helpful to you in your journey into freelancing.

• A Beginner’s Guide to the Business Side of Freelancing
• Why Branding Yourself is Important
• 10 Ways Designers Can Earn More from Projects
• 20 Invoicing Tools for Web Designers
• Five Reasons Why You Shouldn’t Expand Your Design Business
• The Crowdsourcing Quagmire

Share Your Freelancing Wisdom!

Whether you are a seasoned freelancer or thinking of joining the ranks soon, these articles will surely give you all the motivation you need to start and remove any doubts you have about freelancing. Which gems have you particularly enjoyed above? Are you a seasoned freelancing pro with tips you can share with us? Are you starting your journey into freelancing? What important lessons have you learned?

Related Content

• Five Reasons Why You Shouldn’t Expand Your Design Business
• A Beginner’s Guide to the Business Side of Freelancing
• How to Start a Freelance Company
• Related categories: Resources and Project Management

About the Author

Aidan Huang is an editor at Onextrapixel. His newest project, InspireMonkey, is aimed at sharing exciting, inspirational, and noteworthy information with the community. You can subscribe to the RSS Feed of OXP and InspireMonkey and follow them on Twitter as @InspireMonkey and @onextrapixel for more exciting information.

The first time I discovered the 960 Grid System, I was immediately excited about the possibilities of implementing complex layouts so easily.

However, since I was fairly new to web design at the time, when I downloaded the files, I quickly became overwhelmed at how complicated the whole thing seemed.

With all this code, how could this be the easy way to create a layout?

This article is for web designers and front-end web developers who are interested in grid-based layout systems but are at a loss on how to decipher them.

We’ll focus specifically on the 960 Grid System, but after reading this guide, you’ll find that most of the other grid systems out there are similar and will make much more sense after you understand a few basic principles.

Grid-Based Design

Before we get into the specifics of the 960 Grid System, let’s briefly discuss grid-based design in general. The idea is certainly not something that originated on the Web. In fact, it stems from one of the oldest and most basic design principles: alignment.

Our brains like to simplify things to make them readily understandable. This is why we try to impose order on things that seem chaotic, like seeing a face in the craters on the moon.

Naturally, the easier it is to impose order, the quicker our brains can identify a pattern and move on. Grids are so organized and orderly that they require almost no interpretation our part.

Consider the two page layouts represented in the image below.

Though both of these images are simply a gathering of rectangles, the layout at the top seems fundamentally better than the one on the bottom. We can instantly recognize a pattern, accept it, and move on.

The image on the bottom, however, is visually unsettling by comparison. There’s no clear pattern, order, or goal–it’s just looks like a random assortment of shapes.

Our eyes have a tendency to frantically search for fractions of a second while we attempt to identify a trend, which increases the time necessary to take in the scene as a whole.

It’s interesting to note that random can still be beautiful. Random definitely has its place in nature, art, and even design, but it’s no way to logically organize information.

The point is that grids are among the simplest and strongest ways to create order on a page. They may seem cold and rigid, but remember that they are both extremely efficient and effective, and can even be quite flexible if you don’t let your imagination get bogged down by the necessary structure.

Why Do I Need a Grid System?

The 960 Grid System–and other tools and systems like it–provide a fast and easy way to create grid-based layouts using CSS. They do this by providing cross-browser-tested and optimized preset column widths for you to set your content into.

Before CSS3, it wasn’t exactly easy to break up a page into columns without getting into tedious math.

For instance, if you have a 1,000-pixel wide container and you want to split it up into three columns, that’s 333 and 1/3 pixel per column (not exactly a nice whole number). Further, columns broken up like this would crash into each other, so a margin must be added on each side. If we add a 10-pixel margin to each side of every column, we must also subtract that 20 pixels from the width of each column. This gives us 3 columns roughly 313 pixels wide each with a margin of 10 pixels on each side (even then you’re at 999px and not 1,000px).

Want 4 columns in a row below that? Then you have to start the process over and subtract 80px of margin from 1,000px for a total of 920px and divide that by 4 to get a column width of 230px.

Finally, if you want to add a sidebar that’s a third of the total width of the page, you have to create a column that’s 750px for the content and one that is 250px for the sidebar, then subtract 40px of margin to get one 730px column and one 230px column.

Confused yet?

Other web designers were too. It’s not exactly rocket science, but it’s also not something you want to go through again and again for each project that you create.

The solution? Find someone else to figure out all these crazy column widths, throw them into a CSS document, and let you download it free. (That person happens to be Nathan Smith, creator of the 960 Grid System).

The 960 Grid System

The 960 Grid System is simply a way to lay out websites using a grid that is 960 pixels wide.

The reason it’s 960 pixels wide is because the number 960 makes for a lot of clean divisions utilizing whole numbers when factoring in column widths and margins. And it fits nicely on the majority of screens.

The 960 GS comes in two primary variants: a 12-column grid and a 16-column grid (a 24-column version is included as well for those that really need extra control).

In the 12-column version, the narrowest column is 60 pixels wide. Each column after that increases by 80 pixels.

So the available column widths are: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 and 940.

Similarly, in the 16-column version, the narrowest column is 40 pixels wide and each column after that increases by 60 pixels.

So the available column widths are: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 and 940.

CSS Classes Now in Session

When you look at the diagrams above, consider each of the dark blue horizontal bars as a CSS class in the 960 Grid System.

To create an object in your layout that is the width of one of those bars, you simply assign the proper class to your div–that’s it!

The classes are conveniently named according to their size with the grid_1 CSS class being the narrowest and grid_12 CSS class being the widest (grid_16 is the widest in the 16-column version).

So to reuse our image from above, take a look at the available columns now, but this time, think about them using their respective CSS classes instead of pixel widths.

This naming system makes it incredibly easy to hash out complicated layouts in seconds flat. To fill a page’s width, the trick to keep in mind is that the numbers assigned to your selected classes must equal 12 in the 12-column version and 16 in the 16-column version.

For instance, using the 12-column version, if you have 3 divs of text that you want to be displayed side-by-side in a 3-column layout, simply assign the grid_4 class to each one to total 12 (4+4+4=12).

Similarly, assigning the grid_4 CSS class in the 16-column version makes it easy to create a 4-column layout (4+4+4+4=16).

To make sure you’re referring to the proper classes, be sure to place your 12-column elements inside a div with the class container_12 and your 16-column classes inside a div with the class called container_16.

If you’ve never worked with the 96 GS before, I hope you’re having your "aha" moment right now regarding just how easy it is to spec out a layout in no time at all using this system.

Push Me, Pull Me

The 960 Grid System allows you to reposition elements independently by pushing or pulling them horizontally along the page. This is accomplished by using the push and pull CSS classes.

For instance, consider the two examples in the image below. The first example is a basic 4-column layout using only the grid_3 class.

However, in the second version, I’ve pushed the first column and pulled the last column, resulting in their positions jumping over one column from where they would normally lie in the layout.

Keep in mind that you can push items as far as you want. If I had wanted to push an element two columns over, I would’ve implemented the class push_2, and so on.

The push/pull system has major implications for how you lay out a page in your HTML document.

For instance, in the example below, imagine the website’s name is typed out in a logo and placed as the first element on the page.

As the most important element on the page, you’d like to keep the logo as the first item in your HTML markup, but visually, you actually want it to appear in the center of the page.

Before pushing/pulling:

To visually position the logo element in between the two text columns, you would use the following HTML:

<div class="grid_6 push_3"> <p>logo</p> </div> <div class="grid_3 pull_6"> <p>text column</p> </div> <div class="grid_3"> <p>text column</p> </div> <div class="grid_12"> <p>big box</p> </div>

This results in the layout shown in the image below.

After pushing/pulling:

Despite the fact that the logo comes first in our markup, it will be visually positioned in the center of our page.

Wide Open Spaces

You’ll often find that you want to create empty space in a layout (negative space is a good design device). To accomplish this, apply the prefix and suffix classes to your divs. These are implemented very similar to the push and pull classes.

For instance, to leave a blank space that is the width of one column before an element, use prefix_1 class, or after an element using suffix_1 class.

As you can see, the example above uses a suffix_3 class to create an empty space the width of three columns after it.

The Beginning and The End

The final bit of knowledge you’ll need to know is that you are provided with the alpha ("first") and omega ("last") classes that must be applied to any grid units that are the children of other grids.

Obviously, the alpha class will be applied to the first child and the omega class to the last child.

Essentially, these classes provide a margin fix so that you can nest grid units inside of other grid units.

Let’s Review

Armed with this newfound knowledge, you should now be a 960 Grid System expert.

To review, there are basically only 5 concepts you need to remember:

1. Use the container_12 class for the 12-column version and the container_16 for the 16-column version.
2. Use the classes grid_1, grid_2, grid_3, etc. to set your column widths. If you want to fill a page horizontally, make sure the numbers add up to 12 or 16 (i.e. grid_4 + grid_2 + grid_6 = 12).
3. Use the push and pull classes to independently position items on the page, regardless of their position in your page’s markup.
4. Use the prefix and suffix classes to create empty spaces in your layout.
5. Use the alpha and omega to fix the margins for any nested grid units.

There is also a CSS reset included with the 960 Grid System. This is a completely optional file based on the ever popular Eric Meyer CSS reset. If you like it, keep it. If not, trash it!

960 Grid System Resources

Now that you’re an expert on grid-basedd web esign and the 960 Grid System, here are a few tools and resources to check out to further your understanding.

Fluid 960 Grid System

An awesome fluid version of 960 GS! Fluid web layouts readjust the layout to fit the page. This can make for some really complicated code, but using this system means that it will do all the heavy lifting for you.

The 1KB CSS Grid

An extremely lightweight grid system that is basic and easy to understand. It’s highly customizable but defaults to 960px.

Variable Grid System

A simple and flexible CSS grid builder based on the 960 Grid System.

Grid-Based Design Gallery

If you’re skeptical about the 960 Grid System and what grid-based design can offer you as a web designer, check out this design gallery. As you can see, with a little imagination and ingenuity, the possibilities are endless.

Typogridphy

From the site: "Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.”

Tiny Fluid Grid

This is a grid-builder for a fluid version of the 1KB Grid System above.

Off the Grid

Admittedly, even with all the possibilities and flexibility provided by a grid system like 960 GS, you’re still being placed under restrictive confines. No one is suggesting that all websites should be created on a grid–this would definitely lead to a widespread lack of creativity and lack of variation in page layouts.

Further, as you experiment with 960 GS, you’ll find that there are numerous ways to break the layout that will force you to rethink your designs.

The 960 Grid System–and others like it–merely provide a strong foundation for the numerous times you’ll find yourself building a site that doesn’t break the mold with innovation, but instead needs to convey information clearly and logically in a way that is familiar to a large number of users.

Your Thoughts on Grid Systems?

Leave a comment below and let us know what grid system you prefer and if the information above helped you in your quest to decipher the 960 Grid System. What’s good about grid systems? What’s bad about them? Share your thoughts an opinions below.

Related Content

• A Brief Look at Grid-Based Layouts in Web Design
• The Evolution of Web Design
• The Brads – Alignment in Design
• Related categories: Web Design and Web Development

About the Author

Joshua Johnson is a Graphic Designer/Web Designer with over six years of experience working with a major international marketing agency. He is also the Editor of Design Shack, a web design and development blog. Check out his recent work and follow him on Twitter: @secondfret.

This web design tutorial will show you the process of developing a PSD mockup of a clean and simple blog layout. We will be creating the design of the front page of the blog. The next part of this tutorial will walk you through coding the PSD to HTML/CSS.

Elegant and Simple Blog Web Layout Tutorial Series

This tutorial is the first part of a two-part tutorial series. This part (Part 1) deals with how to build the mockup in Photoshop, while in the next tutorial (Part 2) you will be shown how to create an HTML/CSS web template for the PSD design.

• Part 1: Make an Elegant and Simple Blog Web Layout Using Photoshop
• Part 2: PSD/HTML Conversion: Elegant and Simple Web Layout (*coming soon)

Final Result

Click on the image below to see the work in full scale.

Create a New Photoshop Document

1 Let’s get straight to work. First, open Adobe Photoshop (quite obviously). I’m using CS4, but other CS versions will work just fine. Begin by creating a new document (Ctrl/Cmd + N); make the document 1046px by 1630px with a white background.

Create the Background

2 The default Background layer of your new Photoshop document will be locked and un-editable; we need to do something about that. Double-click on the Background layer’s thumbnail in the Layers Panel; this will open the New Layer dialog window, just press the OK button to make the layer editable.

3 Now Ctrl/Cmd + click on the Background layer’s thumbnail (by default, Photoshop renames it to Layer 0) in the Layers Panel to place a selection around the canvas.

4 Set your Background color in the Tools panel to a blue color (#45a0ac) and press Ctrl/Cmd + Backspace, which is the keyboard shortcut for filling a selection with the Background color.

5 Your background layer should now be a dark shade of blue. Choose Filter > Noise > Add Noise while the Background layer is still selected. Change the Amount to 2% and then apply the filter.

Set Some Initial Photoshop Guides

6 To help keep our work aligned, set three vertical guides (View > New Guide) at the following locations: 60.5px, 505px and 955px.

Tip: Toggle the visibility of your Photoshop guides on and off by pressing Ctrl/Cmd + ;.

7 Also set a horizontal guide at 40px.

Add the Blog Name

8 Select the Horizontal Type Tool (T) in the Tools Panel, then type your blog’s name on the top left side. In this case, I used the Museo Slab 500 sized big at 65pt. The text color should be a dark gray (#252525) to create a good but subtle contrast with our dark blue background. By the way, you can set all these type options in the Options Bar when you have selected the Horizontal Type Tool.

9 Double-click on the type layer of your blog’s name in the Layers Panel to access the Layer Styles dialog window. Apply a Drop Shadow layer style and Inner Shadow layer style to give the text a letterpress/inset typography look.

Change the drop shadow’s color to light blue (#3f9cb0), the Blend Mode to Screen, and the Distance and Size to 1px.

Change the Inner Shadow’s Distance and Size to 2px.

10 Align the text to the guides as I have done using the Move Tool (V) to position your text.

Add Main Navigation Menu Links

11 Using the Horizontal Type Tool again, create four (separate) navigation bar links using the same font as before, but this time, reduce the font size to 20pt. Type them out in separate layers. In this tutorial, the menu items are "Home", "About", "Archives", and "Contact".

12 Align the 4th navigation bar link ("Contact") with the guide to the far right, and the first navigation bar link ("Home") with the guide right of the blog name. The other two links should be somewhere in between them.

13 To align them perfectly, select all 4 layers in the Layers Panel. Then choose Layer > Align > Vertical.

14 To make the navigation bar links have equal spacing in between them, select all 4 layers in the Layers Panel and then choose Layer > Distribute > Horizontal Centers.

15 Add a Horizontal guide (View > New Guide) at 88px and move the links with the Move Tool (V) so that the text rests on the guide.

Create the Active Navigation Menu Link Background

16 We will highlight the page the user is on with a different background, text color, and shape. The background will be shaped sort of like a "bookmark" (which gives our layout some form of visual semantics). I’ll show you how to create this "bookmark" shape. First, create a new layer (name the layer as "linkbg"). Select the Rectangular Marquee Tool (M) from the Tools Panel. In the Options Bar of the Rectangular Marquee Tool, change the Style option to Fixed Size and then set the Width option to 100px and Height option 148px. Place your marquee selection on the canvas somewhere around our navigation menu bar.

17 Change your Background color to our dark gray (#252525) and press Ctrl/Cmd + Backspace to fill the rectangular shape.

18 Now select the Custom Shape Tool (U) and set the Shape option in the Options Bar to Arrow 2 (which is a prepackaged custom shape that comes with Photoshop).

19 Draw the arrow on your canvas with the Custom Shape Tool and then select its layer in the Layers Panel so that you can rotate it to point up (Edit > Transform > 90o CCW).

20 Right-click on the arrow layer and choose Rasterize Layer to convert it to a normal layer.

21 In the Layers Panel, modify the layer stacking order and make sure that the arrow layer is above the gray "linkbg" layer.

22 Select both the arrow layer and "linkbg" layer in the Layers Panel, then choose Layer > Align > Horizontal Centers.

23 Ctrl/Cmd + click on the thumbnail of the arrow layer in the Layers Panel to place a selection around the arrow, switch to the "linkbg" layer, and then press Backspace or Delete to delete the area below the arrow selection.

After this, you don’t need the arrow layer anymore, so you can delete the layer.

24 Now what you should have is the background for the active navigation menu link, which looks sort of like a bookmark. Let us style this layer to match the look and feel of our logo by applying an Inner Glow, Color Overlay, and Stroke layer style.

The inner glow color should be a dark gray (#2e2e2e2).

The color overlay should be our dark gray again (#252525). You don’t necessarily need this layer style since we already filled it with this color earlier on.

The stroke color should be black (#000000).

This is how our "bookmark" active link indicator should look like now:

Stylize and Position the Navigation Menu Links

25 It’s time to give our menu bar links some styles. First, add a Drop Shadow layer style to the other three non-active links ("About", "Archives", and "Contact").

26 Next, change the text color of the first link ("Home") to white (#ffffff) using the Horizontal Type Tool (T).

27 Align the first link horizontally with the bookmark shape using Layer > Align > Horizontal Centers. I’ve added a little swoosh vector shape that I created in Adobe Illustrator just below the "Home" text, but feel free to skip that.

Create a Horizontal Inset Divider

28 Add another horizontal guide at 160px.

29 Select the Rectangular Marquee Tool (M) and create a 890×1px thin, rectangular selection.

30 Add a new layer (name it "dividertop"), and in the new layer, press Ctrl/Cmd + Backspace to fill the rectangle with any color.

31 Apply a Color Overlay layer style to the "dividertop" layer so that the rectangle is slightly lighter than our dark blue background’s color (#2c7c88).

32 Align the rectangle to the left and the top guide using the Move Tool (V).

33 Duplicate the layer and move it right below the original rectangle. Rename the layer to "dividerbottom".

34 Give it a light blue Color Overlay layer style (#4fbaca).

Link the "dividertop" and "dividerbottom" layers by selecting them simultaneously in the Layers Panel, right-clicking on one of them, and then choosing Link Layers from the contextual menu that shows up. This will keep them together so that if we need to move them, both layers will move together.

Designing the Post Date Background

35 We’re now finished with the header area of our layout. Let’s move on to the main content area, starting with the first blog post entry’s date. First thing’s first: we need to add another horizontal guide at 210px.

36 Select the Rounded Rectangle Tool (U) in the Tools Panel, and in its Option Bar, change the Radius to 10cm.

37 Create a 75×150px rounded rectangle with the Rounded Rectangle Tool.

38 Apply an Inner Shadow layer style to the rounded rectangle shape layer, with the inner shadow’s color set at blue color (#3793a0).

39 Apply a Color Overlay layer style as well that is set at a darker blue than the inner shadow (#2c788).

40 Give the shape a stroke by applying a Stroke layer style with a stroke color a darker blue (#1a5a64) than the inner shadow’s color.

41 Rename the shape layer to "datebg" (which stands for "date background") to keep your work organized, and then Rasterize the layer (right-click on it, then choose Rasterize Layer).

42 Using the Rectangular Marquee Tool, select about 1/3 of the right side of the shape, and then delete that selected area.

43 Still on the "datebg" layer, add a noise filter via Filter > Noise > Add Noise; use 2% for the Amount option.

Create the Vertical Shadow of the Post Date

44 Now create a new layer for the shadow of the date’s background. Using the Elliptical Marquee Tool (M), make an oval about 17px wide and 100px tall; the most accurate way of doing this is to use Fixed Size as the Elliptical Marquee Tool’s Style option and entering the dimensions for the Width and Height.

45 Place the selection on the right side of the date background. Fill the selection (Shift + F5) with black (#000000) and rename the layer to "shadow".

46 Apply a Gaussian blur (Filter > Blur > Gaussian Blur) onto the "shadow" layer, setting the Radius option to 3px.

47 Using the Rectangular Marquee Tool, select the right half of the blurred oval shadow, and then delete that half by pressing Backspace or Delete.

48 Finish off the shadow by lowering the layer’s Opacity to 55%.

Add the Date Text, Blog Post Title, and Metadata

49 With our date background finished, it’s time to add the date of when the blog entry was posted. Get the Horizontal Type Tool (T) from the Tools Panel and write your date using Museo Slab 500. The numerical day should be around 42pt font size, and the month–which is on a new line below the numerical day–should be at 20pt. I chose to write "13 APR" with APR on a new line.

50 Align the half-oval shadow ("shadow" layer), the date background ("datebg" layer) and the date type layer text correctly using the Move Tool and Layer Alignment commands we’ve used earlier on.

51 For the title of the post, I chose the Georgia typeface set at 35pt font size. For the meta data (author, number of comments), I used Trajan Pro at 20pt; you can find the middle dot/Georgian comma that I used to separate the author name and number of comments here–just copy and paste it into Photoshop. Also, adjust the leading/line-height of the text to 28px. You can do this in the Window > Character Panel.

Here’s our date, blog post title, and blog post metadata now.

52 Add a vertical guide at 165px. Align the text with the guide you just created and the date.

Add the Blog Post Lead-In Image

53 Using the Rectangular Marquee Tool (M), create a 480×150px rectangle (the height depends on the image size you will use, but our max width is 480px for this template).

54 Fill your selection with any color on a new layer and then apply a Stroke layer style that will represent our image’s border. The color of the border is a dark gray (#1b1b1b).

Add and Position the Content of the Blog Post Entry

55 Find an image of yours and paste it into your Photoshop document. I used a photo of a snowboarder, but it doesn’t really matter which image you choose; it’s just for eye candy in our PSD mockup. Adjust the size of your image with Free Transform (Ctrl/Cmd + T) so that it fits within our rectangle.

56 Switch to the Horizontal Type Tool (T) and paste in some text below the image. You can use a Lorem Ipsum generator tool like this one to generate some text in a jiffy, but it’s never a bad idea to use real web copy to make the mock-up look as accurate as possible. My font of choice for the text content is Trebuchet MS at 17pt font size and with the leading/line-height at 28pt.

57 Select all the blog post design elements in the Layers Panel and align it with the shadow using the guides we created as reference.

58 Add a new horizontal guide at 450px. Align the text with the left guide and the new guide.

59 Select all the blog post layers in the Layers Panel ("datebg", "shadow", "date",  the blog post title text, metadata text, the background of the image, the image, and the blog post text) and group them together by going to Layer > Group Layers (Ctrl/Cmd + G), which will place all of the layers in a folder. Name the layer group "Post 1".

Add an Inset Horizontal Divider at the Bottom of the Blog Post Entry

60 Add another horizontal guide at 700px. Duplicate the divider we created before and rename the layer to "dividerpost".

61 Resize the width of the divider with Free Transform so that it’s the same as the lead-in image’s width. Then move the divider using the Move Tool (V) so that it is placed on the horizontal guide we just created.

Add Anther Blog Post Entry

62 Duplicate the "Post 1" layer group and rename the duplicate as "Post 2".

63 Add a new horizontal guide at 720px and align the shadow of the date box (of Post 2) with the new guide.

64 Change the elements in the "Post 2" layer group so that it looks different from the first blog post; for example, the comment number, the date, and the blog post title can be changed.

Build the Sidebar’s Background

65 Create a 250×350px rectangle using the Rectangular Marquee Tool (fill the rectangular marquee selection with any color on a new layer called "sidebar"). This rectangle is our sidebar’s background.

66 Align the sidebar to the horizontal guide at 210px and the vertical guide at the far right that we created before.

67 Give the sidebar’s background a Color Overlay layer style; the color of the color overlay should be a dark blue (#2c7c88).

68 Also, give the sidebar background a Stroke layer style with the stroke color being a darker blue (#116678).

69 Set up a vertical guide at 730px and one at 930px; we will use these guides to make sure there is some padding inside our sidebar.

Create the Search Feature

70 Use the Rounded Rectangle Tool (U) to draw a rounded rectangle from the left vertical guide (at 730px) to the right vertical guide; the rounded rectangle should be around 25px high. Name this shape layer as "searchbar". Give the rounded rectangle a white (#ffffff) Color Overlay layer style.

71 Find a magnifying glass icon to represent the search button (you can use a web tool like IconFinder to find free icons).

72 Position the icon within the white rounded rectangle (towards its left).

73 Make a horizontal divider just like we’ve done before, spanning from the 730px vertical guide to the 930px vertical guide style. Add a little spacing between it and the search bar.

Add the Sidebar Text

74 Now to the text. I added a sidebar heading ("Recent Posts") using the Horizontal Type Tool (T) set at Georgia font and font-size of 23pt. I’ve listed three of the most recent blog posts using Trebuchet MS font at 17pt and leading/line-height, again, at 28pt. Call this text layer "recent posts".

75 Duplicate the horizontal divider from above and move it so it’s at the bottom of the "recent posts".

76 Create another text layer the same as before, but this time for the recent comments.

77 Align both text blocks to the left guide.

Design the Sidebar Ad Units

78 Draw a couple of 118×118px squares using the Rectangular Marquee Tool. Hold down Shift to keep your box proportionally equal in height and width.

79 Align one square on the right (to the right guide) and the other one on the left (to the left guide).

80 Fill both squares with a gray color (#f6f6f6) using a Color Overlay layer style. This gives us a place to add banner advertisements on our blog.

81 Duplicate the two gray boxes a couple of times or more depending on how much ad space you’d like.

Sidebar Housekeeping

82 Group all the sidebar element layers and name the layer group as "sidebar" to keep our mockup organized (if you work with a front-end developer who has to convert your PSD to HTML/CSS for you, he/she will love you for it).

Lay Out the Main Blog Footer

83 Make two new horizontal guides: one at 1220px and the other at 1550px.

84 Using the Rectangular Marquee Tool (M), draw a rectangle across the whole width of the web layout between the two new guides at the bottom of layout where our footer will be. Fill this rectangle with a dark gray (#2c7c88). This is our footer’s background.

85 Apply a noise filter on our footer’s background (Filter > Noise > Add Noise) using 1% for the Amount value.

86 Apply a black (#000000) Inner Shadow layer style to the footer’s background.

87 Now create three text columns of equal size, all with the same width. In this case, I copied some interesting text off Wikipedia to give me some real web copy for the footer text. The title ("Widget title") is set at 23pt Georgia and the normal text is Trebuchet MS at 17pt. Don’t forget to change the leading/line-height to 28pt!

Create the Main Blog Footer Column Dividers

88 For the white vertical dividers in between the footer text columns, we’ll use patterns. First step is to create a new Photoshop document (Ctrl/Cmd + N) with Width of 1px and Height of 3px.

89 Zoom in really close so you can see you work (using the Zoom Tool).

90 Color the first pixel (top) black (#000000) using the Rectangular Marquee Tool and Edit > Fill.

91 Select around the canvas (Ctrl/Cmd + A) and then choose Edit > Define Pattern. Name your pattern something logical like "Vertical Dots".

92 Switch back to our main Photoshop document.

93 Make vertical rectangular marquee selection (1×280px).

94 Add a new layer and press Shift + F5 to see the Fill dialog window. In the Use option drop-down menu, find the pattern we made ("Vertical Dots") from the list and press OK to fill our rectangular marquee selection with it.

95 Duplicate the layer with the dashed vertical divider and place them between the three footer columns.

96 Group the text columns in their own layer groups. Align the text column layer groups vertically.

97 Add a white Color Overlay layer style to both dashed vertical dividers so that they appear white.

Create the Secondary/Auxiliary Footer

98 Create a short rectangular marquee selection at the very bottom of the layout and fill it with a dark gray (#1f2024).

99 Apply a Noise filter with the Amount set at 1%.

100 Type some text such as your copyright information using the Trebuchet MS font at 17pt font size. Align the text horizontally with the background place it on the far left guide.

Finished!

We’re done! Wasn’t that easy?

Elegant and Simple Blog Web Layout Tutorial Series

• Part 1: Make an Elegant and Simple Blog Web Layout Using Photoshop
• Part 2: PSD/HTML Conversion: Elegant and Simple Web Layout (*coming soon)

Download Source Files

• simple_elegant_bloglayout-psd (ZIP, 1.61 MB)

Related Content

• How to Design a Clean Business Website with Photoshop
• PSD/HTML Conversion: Code a Clean Business Website Design
• Create a Clean and Professional Web Design in Photoshop
• Related categories: Tutorials and Web Design

About the Author

Eric Hoffman is a young American freelance web and brand identity designer based in Switzerland, working under the brand, Hatcher Graphics. He enjoys reading, playing basketball, and getting plenty of sleep. If you’d like to connect with him, you should follow him on as @hatchergraphics.