Today we present some useful free CSS/(X)HTML templates which are available for free download and use. You may want to consider using them for your next projects or build upon them, creating more advanced themes from these basic templates.

Free CSS/(X)HTML Templates

Blue Jeans (Demo | Download)
Stand out from the crowd with this cool, free template for a portfolio website based on blue jeans texture.

Portfolio (Demo | Download)
An HTML 5 and CSS based website template suitable for businesses. It has a jQuery slide show in the home page header for displaying your latest work, featured contents or can also be used to tell your visitor what your web site is all about.

High Five (Demo | Download)
It can be useful if you need to show case your work / portfolio. Most of the style elements are in the CSS including styles for Blog, Comment Template etc.

AppCloud (Demo | Download)
It has been designed with tones of blue, white and a bit grey to point out the gadgets and provide more usability that you can obtain information you need faster and more easily. You can display all gadgets you are selling.

RS 18 (Demo | Download)
This blue colored well designed template can be used by people doing business.

Dandoot (Demo | Download)
It has been designed so that it is suitable mostly for major/indie music recording companies, bands, musicians, music products affiliates, music event organizers or simply online music stores.

Bamboo (Demo | Download)
This template will go extrremly well with suitable Blogs, Small Websites etc.

Acallia (Demo | Download)
A smart template, it can be used by service sector industries and persons like event management compnies or graphic designer firm.

Reinvent (Demo | Download)
It features a narrow, one column layout with minimum graphics, clean and legible typography.

Alexx C (Demo | Download)
This template gels well with person/firm in service sector.

RealOne (Demo | Download)
This template is created keeping in mind property selling/buying sites and its quite neet.

The Radio Station (Demo | Download)
As the name suggest, this can be used by FM or radio stations.

CSS Heaven 1 (Demo | Download)
This template can be used for some design or lifestyle related website and it gives a contemporary look.

Turrion (Demo | Download)
A blue colored template, it tends to give all the necessary information to clients at one go.

Zen Design (Demo | Download)
This template can be used for websites with loads of information or which issuing articles/tutorials on regular basis.

Urban Gear (Demo | Download)
Great free html template for on-line shop dedicated to the urban fashion industry. Remove the slider area and use this template as a start point for your on line business.

ubly (Demo | Download)
This format is most suitable for blogs related web sites.

beSMART (Demo | Download)
Simple corporate CSS/XHTML template ready to meet wide range of requirements for effective on line performance.

CSS Heaven 2 (Demo | Download)
CSS Heaven 2 is a free CSS Template suitable for small business websites and blogs

Easy Slide (Demo | Download)
Easy Slide is a simple but cool css template based on the famous Coda Slider.

StudioClick (Demo | Download)
Studio Click is a simple, well-structured portfolio theme that focuses on one thing: gorgeous photos, screenshots, and content. It displays works easily and stylishly using large images of your products.

Bizgroup (Demo | Download)
Simple corporate CSS/XHTML template ready to meet wide range of requirements for effective on line performance.

Photo Pro (Demo | Download)
Photo Pro is a simple css template for portfolios and photo sites and it’s very easy to edit.

Treasure hunters (Demo | Download)
This facinating template can be used by blogs and or some stock photo sites.

Shop Around (Demo | Download)
Great free html template for on-line shop. Use it as a start point for your on line business.

Free Nova Studio (Demo | Download)
The Blog page features a simple blog design, easy on the eyes, allowing you to express your thoughts freely and in a stylish way!

Mondays (Demo | Download)
This template gives us a break from usual design and cn be used by service industries providing 24*7 supprts.

OWMX 1 (Demo | Download)
Color of this template is easy on eyes and is stylish.

Simple Solution (Demo | Download)
This template can be used by business sites and it is very attractive.

Classic Luxury (Demo | Download)
It is clean and has a lot of whitespace and nice typography. The code is well-organized and uses standards-based HTML and CSS.

Outliers (Demo | Download)
This template can be best used to showcase your idea and ideation process.

Portfolio Template (Demo | Download)
This is a clean and professional looking template for small portfolios or business sites. Very easy to edit if you have a basic understanding of html and css.

Market Leader (Demo | Download)
It can be used to showcase the reasons to prospective clients to choose you.

clean-white (Demo | Download)
This is a simple but beautiful css template with lots of whitespace and a professional look. Perfect as a frontpage for small businesses or photographers.

Ninja Assassin (Demo | Download)
Impress visitors to your site with a high-quality one-page portfolio site inspired by the Japanese ninja culture.

Kelontong (Demo | Download)
You can use use Kelontong WordPress e-commerce theme to modify your store and sell more of your products.

Small Business (Demo | Download)
This is suitable for small scale business websites that don’t need a lot of pages.

RS 19 (Demo | Download)
Its a attractive template using combination of white & bright colors and css techniques like Box Shadows and text shadows.

  

By Cameron Chapman

Tables have been part of HTML almost since HTML began. As the internet progressed and as people started doing more things online, designers started using tables to create multi-column website layouts. This was never the intention of those who created HTML standards, but it quickly caught on and table-based layouts became the norm online.

When CSS became standard and table-based design was made obsolete, a lot of designers shunned them all together. Using tables in your websites, no matter what they were used for, became akin to using animated GIFs in some circles.

The problem with that is that tables are a vital part of good UI design. Tables have a purpose, and unfortunately they’ve been given a bad name that is neither deserved nor entirely accurate.

The Purpose of Tables

Tables were meant for displaying data. That’s it. When they were made part of the HTML standard, the idea was to make it possible to display tabular data, equivalent to a spreadsheet.

That purpose is still valid. Using tables for tabular data is perfectly standards-compliant and makes a lot of sense from an accessibility standpoint. Unfortunately, many designers have shunned tables to the point that they won’t even use them for their intended purpose, which brings us to our next point:

Don’t Use Faux Tables!

I don’t know how many websites I’ve seen that have created mock-ups of data tables using countless DIVs and CSS styles, rather than actual HTML tables. This is a bad idea for a couple of reasons: First of all, HTML tables are infinitely more accessible for those people who are using screen readers. Screen readers understand data arranged into tables. They don’t understand data arranged to look like a table when in fact it’s just a bunch of DIVs.

The second reason is that it’s just a lot more work, especially if your table is large, and you’re very limited in how you can manipulate the data inside a bunch of DIVs, compared to an actual table. There are scripts out there, already in existence, that allow you (or your visitors) to reorganize the data in your tables. Of course, most of these won’t work properly with DIVs.

Of course, you will want to use CSS to style your tables, but that’ll be covered below. The main thing you need to remember is that CSS should not be used to organize the data (that’s where HTML tables come in), only to style the data once it’s organized. Tables might seem like presentation (which, according to web standards, should always be done with CSS, not HTML), but in reality they’re organization. Organization of content is still part of content.

Still not convinced? Think of it this way: no one would propose you create faux-paragraphs with DIVs, would they? Paragraph tags exist to enclose paragraphs. So why wouldn’t you put tabular data within tags that exist specifically to enclose tabular data?

When to Use Tables

Tables should be used whenever you have tabular data to display. This could include charts of data or statistics, as well as things like price charts, product lists, or similar data that is logically arranged into a table format.

A general rule of thumb is that if it’s something you would put into a spreadsheet, you’ll probably want to put it into a table. If you would use a text document instead, then put it in a list or paragraph format.

Tables Should Be Filterable & Sortable

If the tables you’ve created have more than a handful of rows and columns, usability will be greatly improved by making the data in them filterable and/or sortable. Since a table’s purpose is to lend meaning to a set of data, allowing visitors to reogranize that data based on their own parameters increases the potential meaning of that data.

There are a number of plugins and scripts out there that let you make your tables sortable or filterable without having to hand-code them that way yourself. There are a number of jQuery plugins for manipulating data tables. Here are a few:

• DataTablesA powerful plugin that lets you filter and sort your data, and includes a number of other powerful features.
• uiTableFilterA table filtering plugin.
• Tablesorter 2.0Tablesorter lets your visitors sort tabular data by any column, in either ascending or descending order.
• Table Drag and DropThis plugin lets users drag and drop rows to reorganize data in any way they want.

How to Style Your Tables

Hopefully by now you’re convinced that tabular data should be displayed in HTML tables, not forced into CSS DIVs. But that still doesn’t cover how best to present those tables. After all, the standard HTML table is a pretty ugly beast.

Styling tables is done like any other CSS styling of content. But there are a few things you should keep in mind for better usability of tables. Here they are:

Use <caption> for Your Table’s Title

Most designers put the title of their table (if it needs one) in an H1 or other heading tag before starting the table data. Instead, use the <caption> tag. By default, this will put the table’s title centered just above the table itself, though it can be styled like any other element. The advantage to using <caption> instead of an H1 or other heading tag is that it adds context to the table. This is another accessibility issue, but if you can take the time to use a heading tag, you can take the time to use the more-accessible <caption> tag instead.

Style Your Rows

In most tables, data is viewed row-by-row. Columns give context to the data, but rows give meaning. For this reason, the way you style your rows is vital. Each row needs to stand out from the ones to either side. To this end, you’ll see many tables use shaded backgrounds behind every other row. This makes it easy to scan across the various columns without inadvertently skipping from one row to the next. It’s vital that tables can easily be read, so make sure there’s good contrast between your text color and row backgrounds (which means you’ll generally want to avoid brightly colored backgrounds).

Borders and Padding

Borders and padding are another way to keep your columns and rows easily distinguishable from each other. As a general rule, the larger your padding, the less necessary a border becomes, and vice versa. Also, if you’re opting not to use shaded backgrounds for alternating rows, you’ll almost certainly want to use a border between your rows, regardless of how small your table is.

Using padding and borders between columns is also vital. Unless there’s a lot of padding between columns, you’ll want to use at least a faint border to keep things straight. This becomes more important as a table grows longer.

Tooltips and Modal Windows

Adding tooltips and modal windows to data tables can be a great idea if you want to add more context to the data contained without having to put a huge explanation at the end of the table. These are a huge usability booster and make your table more interactive and interesting to visitors. Just make sure you’re using them to actually add value, and not just as a gimmick.

Conclusion

Despite the hesitation many designers have when it comes to using tables, they have a place and a purpose in website design, and should be used when appropriate. Just make sure you leave the table styling up to the CSS!

Further Resources

• Data Tables in Modern Web Design
• 15 Great jQuery Plugins For Better Table Manipulation
• Designing Data Tables
• Accessible Data Tables
• Ultimate Guide to Table UI Patterns

  

When it comes to online tutorials and articles, you have to be very careful in choosing the right one from tens of thousands of articles you find as you are seeking help in the Web. So today we present nice articles and tutorials which are easy to understand and will surely add to your knowledge.

Web Development

The Principle of Contrast in Web Design
A web design is made of many different elements, each having varying levels of importance and some demanding prominence over others. Some elements share a relationship, while others are not related at all. Author will share these principles.

Personal Branding for Web Designers
In this article, author will tell web designers that their self- branding strategies should be equally creative as their designs are.

Redesign vs. Realign
Many designers are still approaching website changes as redesigns, with little thought to whether they should be redesigning or realigning the site for their clients. This article states their comparision and differences.

The Current State of Web Design: Trends 2010
In this article, we present some observations on the current state of Web design. We describe existing and upcoming trends and explain how Web design might evolve in the coming months and years. We’ll also touch on what we as Web designers should be ready for to keep abreast of new challenges and opportunities.

Applications of AIDA In Website Designing
Marketing is a very broad term and holds a lot of importance in this cut-throat competition of online business. It deals with the familiar, therefore, it generates the need to come up with a systemic way and a lot of creativity.

New WordPress Keyboard Shortcuts
WordPress Keyboard shortcuts are a good option to save your time by allowing you to perform your actions quickly. These shortcuts make job of administration a lot easier and more user friendly.

Web Performant WordPress
In this article, author will share some tips about Web Performant WordPress

HTML5 Versus Flash — Is It Really So?
It has become pretty fashionable to refer to HTML5 and the web stack as a “Flash killer”. The e-world is full of rumors that Flash is being kicked off the battle between web standards and pragmatism.

Keep the File Size Down and Spice-up our Vectors with Bitmap Textures
In this tutorial author will outline the process of creating and using bitmap textures. This will help you cut the file sizes down without compromising your image.

How to Make a Screencast for Your Website
Having a video on your website can vastly improve your conversion rate. Whether the goal is for users to sign up for your web application or simply to get users to contact you via a web form, a video improves the likelihood of this happening.

Fundamentals for a Kick-Ass Creative Company
In this article, author will tell you about the fundamentals of a creative company.

CSS/Typography

The Future Of CSS Typography
In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text.

Spice Up Your Web Typography with @Font-Face
Author will tell us about the option of embedding a whole new range of fonts into our designs. Let’s look at how the CSS @font-face rule allows us to get fancy with our future website projects.

Grid-Based Web Design, Simplified
If you want to reap the benefits of grids on your next project but are unsure of the specifics, this article is for you.

Super Cool CSS Flip Effect with Webkit Animation
In this tutorial, author will tell how the rotateY property can produce a flip effect, and how it can be used to create a super cool Transformers themed top trumps design.

Quick Tip: Multiple Borders with Simple CSS
In this tutorial, author will show you how to add more depth to your designs, without images, in just a few minutes.

Different Stylesheets for Differently Sized Browser Windows
Otherwise known as “resolution dependent layouts”. Single website, different CSS files for rearranging a website to take advantage of the size available.

Designing an Infographic with HTML, CSS & jQuery
In this tutorial, author will take you through the walkthrough of the project, showing how resources like Cufon and jQuery’s ScrollTo plugin were used to add some flair and interactivity to the design.

Efficiently Rendering CSS
This is definitely something that browser vendors care about (the faster pages load the happier people are using their products).So today author will share with you how to Efficiently Render CSS.

Flexible Color Schemes in Layouts with RGB
In this tutorial, author will show you how to use Flexible Color Schemes in Layouts with RGB

How to Create a Cool Anaglyphic Text Effect with CSS
In this tutorial, you will learn how Anaglyph can be created for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup.

How to Make a CSS Sprite Powered Menu
In this tutorial, you will learn how to make bright and colourful retro futuristic poster in Photoshop, using dynamic lines, vibrant gradients and rough textures to build up the design layer after layer.

CSS DIY Organization
In this aticle, author will share how he writes and organizes his CSS.

The New Hotness: Using CSS3 Visual Effects
In this article, how to use CSS3 visual effects to push the envelope

Design a Prettier Web Form with CSS 3
In this tutorial, author will show you how to use advanced CSS properties, such as gradients and shadows, to turn a dull web form into something beautiful – with minimal effort.

Design & Code a Cool iPhone App Website in HTML5
In this tutorial, author will give you a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.

Quick Tip: Google Fonts API: You’re Going to Love This
In this article you will learn that how by linking to a particular font, stored on Google’s servers (save on bandwidth + caching benefits), we now have access to a wide array of custom fonts. Quite literally, you can integrate these fonts into your project in about 20 seconds.

Tutorials

A Roundup of Mobile Web Design Tutorials
In recent years there has been a massive increase in mobile web use, with the development of the iPhone and similar devices driving a huge demand for Internet access on the go.

15 Useful HTML5 Tutorials and Cheat Sheets
In an effort to prepare you for the future, author has rounded up 15 useful HTML5 tutorials and cheat sheets.

A Roundup of 22 Cutting Edge PSD to HTML Tutorials
Designing a web layout in Photoshop or Fireworks is only half of the process. Web-designers and developers need to be able to convert those PSD layouts into valid CSS and HTML.

Getting Started with Tumblr & Custom Theme Design
In this article, author will tell the basics of what Tumblr is, and how to get a tumblelog of your own up and running.

Using Twitter’s @Anywhere Service in 6 Steps
In this tutorial, you will learn how to use twitter’s @Anywhere, which, with only a few added lines in your code, can bring all of Twitter’s platform functionalities into your website. @Anywhere can allow for anything, ranging from converting a simple @username into a clickable link, to even creating new tweets directly from your personal site. I’ll show you exactly how to do so in this tutorial!

Share Feedback with Twitter and the Bit.ly API
In this article, author will show you that Sharing links to content is just one piece of the social media equation. Capturing the response to it is quite another.

Quick Tip: How to Create a Theme-Switcher in 200 Seconds
In this tutorial, you will learn how to do “color-switcher” within the header section.

Build a Simple Image Slideshow with jQuery Cycle
Image slideshows are a popular method of displaying numerous sequential photographs in web design.In this tutorial, author will show you one

How to Create a Simple iTunes-like Slider
In this tutorial, author will tell us how to create a slider similar to the one used in the iTunes store.

Others

Powerful Time-Savers For Web Designers
Be it a handy checklist, batch installer, dummy image generator or converter from Excel spreadsheet to HTML — all these things can save us a couple of minutes every day, making our work easier and more efficient.

Rare WordPress Themes
Over the past few years with the influence of premium themes, High quality free WordPress Themes have become harder and harder to find.

A Designer’s Guide To Effective Proposals And Invoices
In this article, author will tell you how important it is to make effective proposals and invoices both for your and client’s comfort.

The 10 HTML Tags Beginners Aren’t Using
In this article, this author will tell us The 10 HTML Tags Beginners Aren’t Using.

HTML Color Code Chart and Names
Having different background and border colors adds a spice and a new identity to any specific element or even a site. Sometimes its very difficult to find a appropriate and nice color and also the hex code of that color.

10 Features to Look Forward to in WordPress 3.0
In this article, author will tell you 10 Features to Look Forward to in WordPress 3.0

Top 5 Web Design Debates That Cause the Most Riots
In this article, author will tell you the five most popular debates; the ones that often end up developing into digital riots with opinions flying like arrows across the vast no-man’s land known as the comments section.

Top 8 Dreaded Favors Asked of Web Designers
In this article, author will discuss with you different favors your family & friends ask from you like requests for one page flyers, t-shirt designs, logos, and company websites.

Tips for Designing Unique and Attractive Blog Posts
In this article, author will share some Tips for Designing Unique and Attractive Blog Posts.

jQuery Animations: A 7-Step Program
In this tutorial, you’ll learn how do animations right way with jQuery.

5 SEO Tactics That Make You Look Like a Douche
In this tutorial, author will share his five SEO hates, that inhibit the general performance of your site more than they benefit your precious Google ranking.

  

By Robert Bowen

Even in today’s fluctuating job market, one rule that still remains constant and true is to always play to your strengths. Part of this comes from having a complete and firm grasp of your own capabilities and limitations, while part of it also comes from knowing the same about those you are working with. However, as we grow in our abilities we may begin entering a comfort zone wherein wearing every hat and attempting to take on the entire task by ourselves becomes more of a viable reality. And one that we may decide to run with.

Not saying that this is necessarily a bad thing, but there are benefits to come from specialising and allowing certain elements to be handled by others who have specialised in those areas. This dynamic is easily demonstrated with a look at the Designer and Developer. Two areas that go hand in hand, and that can be handled either as a solo effort or by pairing up with another and each taking charge of your individual roles. So if you do decide that it is in the best interests of the project to work with another in this area, then there are a few things to bare in mind so that the working relationship goes as smoothly as possible.

Consider some of our previous posts:

• How To Effectively Communicate With Developers
  Offers communication advice.
• Clear And Effective Communication In Web Design
  Examines the communication aspect of the user experience.
• Better User Experience With Storytelling, Part One
  One more from the Smashing vaults on creating a better UX.

Getting Started: Pick Your Partners Wisely

As with any work situation, there is always a certain amount of setup required to get things started and the Designer Developer partnership is not immune to this either. There are a couple of areas that will need to be addressed in order to get the project off on the right, hopefully most productive, foot. This brings us back to that old rule of thumb about playing to your strengths, and knowing those of the person or persons that you are teaming up with. If you have the say in the person you will end up tackling the project with, then you are going to want to choose them wisely to ensure the most compatible experience for you both and the overall project itself.

Not only does compatibility of character play a big part in the working relationship, but compatibility of skills also heavily ways in on the project. You want to choose this partner with great care so that both of your expectations are met and the project can have the greatest chance of success. If you are working with someone who cannot effectively accomplish through code what it is you have designed, or who cannot reasonably design a workable template to code from then the project is destined for failure. Not only that, but chances are there will be a headache or two in store for you both as well. So as you get started in this working relationship know where you are both coming from to keep the expectations reasonable and make sure they are met.

Communication Is Key

Overall, in any relationship in order for it to be sustainable and properly function, communication is beyond vital, and the Developer Designer ship is no exception here either. In order for it to sail correctly, the communication between the players is pivotal, and special attention should be paid to how well you are both engaging this tool. This is a make or break element in the working relationship and when speaking of the expectation levels being set and met, this element’s importance rears its head. If you are not effectively communicating with each other, then there are likely details that will be falling through the proverbial cracks before long.

Lots of developers believe that designers should have a basic understanding of code in order to keep things realistic, in fact, many believe that if you call yourself a web designer, you should know at least HTML and CSS, possibly even javascript. Thinking that at the end of the designer’s part they will be handing over completed PSD, HTML and CSS files. On the flip side, most designers expect that developers will have some basic knowledge of design theory so that when changes need to be made, they can clearly communicate them. So there is a give and take with regards to the expectations on both sides, and without being able to convey them on both sides, there is bound to be some ball droppage.

Tips for Effective Communication

• Always be as concise as possible, so as to not confuse the issue.
• Know the terminology from the opposite field, so neither of you is talking over the other’s head.
• Always check that you are both on the same page about an issue before you move on to discussing something else. Never take understanding for granted.
• Always be patient.
• If you have questions, then ask them. Do not worry about how you may look asking for clarification. Better to know up front and do it right the first time.

Have A Grasp Of UX

When speaking of expectations, there is another important group who will also be placing a certain number of them on the project as well, beyond any client, and that is the end user. It is important that both the Designer and Developer have an understanding of UX, and keep that experience in mind as you proceed with your project. Those who will be interacting with the completed product and their satisfaction with the project are what matter most afterall. It is the feedback from this end of the experience that tends to determine the success or failure status of the project.

The users are the ones that the product is essentially being designed and developed for, so in the end, it is their experience that you are working to create and crafting so losing focus on this endgame for one moment during the process can have negative and lasting impacts. Beyond anything else, the UX is what will win the game or lose it for you, so when you partner with someone you will want to be sure that this understanding is part of their collective knowledge base as well. If this is not affixed to their arsenal or yours, then there are definitely some more prepatory steps that need to be taken before any serious work on the project begins.

UX Tips From the Blogosphere

Here are a few links to help you further your base on UX matters:

• 52 Weeks of UX
  A great blog with loads of helpful hints and tips about creating a quality user experience.
• UX Magazine
  An online magazine that fully focuses on the User Experience field offering the community tons of useful insights.
• UX Matters
  Another great cyberspace place to stop if you are looking for more on all things dealing with User Experience.
• 10 Most Common Misconceptions About User Experience Design
  A wonderful article on Mashable from Whitney Hess that can help firm up your grip on UX.
• Information Architecture: Enhancing the User Experience
  Another fantastic post about building a great user experience from Rick Sloboda and Web Designer Depot.

Learn The Value Of Compromise

Another thing to keep in focus when working with someone in this capacity is that the project, end user, and client are what ends up mattering over either the Designer or Developer and the potential ego that may be associated with them. Ego is not necessary in this process, and can act as a hindrance rather than a helper so as you take on a task with another you will want to check your ego at the door. This is not to say that you have to become any sort of doormat and allow your partner to walk all over you, making every critical call in the project, just that you should learn the value of compromise.

When you are working alone, compromise is generally not something we are used to until we show the project to the client. However, when you are working as a part of a team, the steps leading up the presentation to the client may be paved with compromises all along the way. If you are not great at handling them then there is a chance that things can sour early on, and the relationship will suffer, hence the project will in turn suffer. When we deal with the client, making that compromise is easier because they pay the bills, but still we make the case for why the client should bend to our will. So making that compromise in the Designer Developer relationship can be trickier to manage.

Compromising Tips

Even subtle concessions can go a long way in showing a willingness to work together, so below are a couple of ways that you can work at the compromsing element of the Designer Development relationship.

• Keep the goal in mind as you work together to hammer out the details. If any questionable element does not recognizably serve the goal let it go.
• Make sure that when choosing your project partner that it is someone who knows how to, not only compromise, but to approach the issue respectfully and tactfully. You should reciprocate this behavior.
• Try to find a way to frame every compromise as a win/win scenario for the end product so it is less like someone is giving in and more like you are working together to raise the bar.
• Be sure that you are open to the criticisms offered and compromises asked of you, and never let them put you in a defensive place, because then dialogs tend to degrade from there.

Final Thoughts

We will not always get to choose our coworkers, but when we can we should aim in these directions to make sure that our partner turns out to be as compatible as possible. We also want to be sure that we make adjustments to any lone wolf mentalities that we are bringing into the working relationship so that we are not the proverbial wrench gumming up the works.

Some Final Tips for the Road

• Designers should use a wireframe to get going and then be sure to consult with the developer before moving on.
• Designers need to be sure to create clean and organized PSD files so that the developer does not have to clean up your work before they can begin.

Further Resources

Below are some articles for further reading on the working relationships between developers and designers for your consideration.

• 6 Reasons Why Designers Should Code
  Another great post from Webdesigner Depot on designers understanding the other side.
• Developers are from Mars, Designers from Venus: A Question of Metaphors
  The title of this whimsically wonderful post says it all.
• Left-Brained vs. Right-Brained: The Developer/Designer Paradox
  A brilliant and thoughtful post over at My Ink Blog.
• 5 Pet Peeves Developers Have With Designers (and How to Avoid Them)
  A final post from the Webdesigner Depot crew that we are featuring which offers some hints to designers on ways to improve the partnership.
• Collaboration Tips for Designers Working with Developers
  An awesome article about how to make this relationship work out on Six Revisions.
• Designers and Developers, Why Can’t We All Just Get Along?
  Another thoughtful post that looks at this working partnership from the Carsonified blog.

  

By Cameron Chapman

FAQ pages are a vital part of many websites. While not every site needs one, if you’re selling something, providing a service, or giving information about a complex subject, an FAQ can make life much easier for your visitors.

The format of an FAQ varies consdirably from site to site, so there’s not really one “right” design method. But there are some key things to remember, and to keep it simple, just remember F.A.Q.: Focus on information, Assist visitors through interaction, and Question the status quo. Read on for an explanation of each and ideas for how to implement them. We’ve also covered three examples of FAQ pages for reference.

Focus on Information

We all know content is king. But when it comes to FAQ pages, the information you’re presenting really is the absolute most important thing. You have to make sure the content you’re presenting is done so in the most efficient and effective way possible.

Information Comes First

The entire point of an FAQ page is to provide information to your visitors. When you’re designing these pages, make sure you put the information first. In other words, don’t let your design decisions overshadow the content.

The Lulu website offers a straight-forward, content-focused design for their FAQ pages.

Avoid flashy designs, gimmicky layouts, and other design elements that detract from your page’s content. Stick with an easy-to-read typeface, appropriate contrast, and a fairly simple layout.

While Amazon’s dual sidebars make the page feel a little cluttered, they still focus on the content within the center column.

Organizing Longer FAQs

Think about how best to organize your FAQ page. The longer your FAQ page is, the more care you need to take to make sure visitors can find the answers they’re looking for.

Lulu organizes their FAQ by category and subcategory in the sidebar, making each FAQ category accessible from every other category.

Categories are the best way to organize a longer FAQ. Of course, how you define your categories is entirely up to you, and should be dependent on the specific site. The goal of categories is to make it easier for your visitors to find the information they’re looking for, so make sure the categories are logical and don’t have too many questions within them. But you also don’t want to have more categories than are necessary.

The full FAQ for Creative Commons uses a table of contents to outline and link to all the questions and answers in their FAQ. It’s a bit long, but still a reasonable way to organize this type of FAQ page.

Remember, anything you do with regards to organization in your FAQ should be done with your end-user in mind. You want to make it easier for your visitors to find what they’re looking for. By making the information easier to find, you increase the likelihood that they’ll do business with you.

Make It Easy to Find

What’s the point of having a Frequently Asked Questions section if your visitors can’t find it? The answer: there isn’t one. Your FAQ page has to be easy for your visitors to find, or you might as well not even include one.

Creative Commons includes a link in their top navigation directly to their abbreviated FAQ, and from there a link to the full FAQ is available.

There are a few logical places to put your FAQ. The first logical location is in your main navigation. Some sites use a FAQ link rather than a “help” or “about” link, depending on the nature of their site.

Amazon links their most popular FAQ topics from their main help page.

The next logical place to put it is as a subsection of your help or about pages. If someone has a question about your site or your company, the help or about sections are the first places they’re likely to look.

Assist Visitors through Interaction

The way your users interact with your FAQs is of vital importance. Think through the way your visitors will actually use the information you present, and make it as easy as possible for them.

Clickable Questions

If you have more than eight or ten questions in your FAQ, or if the answers to those questions are more than a paragraph each, it’s a good idea to list your questions without showing the answers directly under them, to make the content more scannable.

Lulu lists questions at the top of each of their category pages, linked to the relevant answer below.

There are two ways to go about making clickable questions. The first is to list your questions at the top, and place your answers separately at the end, with anchor links to connect the questions to their corresponding answers. This is a great method to use if you don’t want to deal with JavaScript.

The other method is to use JavaScript to hide the answers. With this method, when a visitor clicks on a question, the answer will appear immediately below that question. Some designers animate this (with an accordian or slider effect), while others just have the answer appear, making the other questions jump down.

Make It Easy to Ask a New Question

If someone can’t find the answer to their question within your FAQ, it’s likely they’ll want to ask you directly. Make sure you include a question form or a contact form that’s easily accessible from your FAQ page.

Amazon places their support contact methods prominently on their FAQ pages.

Question the Status Quo

While FAQ pages need to maintain focus on providing information to visitors, there’s no reason you can’t get creative in the way your FAQ pages look and act. There are a number of different ways you can make your FAQ page stand out from the crowd, and it’s an area many designers overlook and don’t dedicate much time to.

Here are some ideas for unique FAQ interfaces. While I can’t guarantee they haven’t been used before, I’m sure I haven’t seen them used on any FAQ pages. Yet.

Modal Windows

Modal windows are used for all sorts of things, so why not FAQ pages? Modal windows, if designed and implemented well, can add an extra layer of refinement to a site, and really set it apart from its competition. Some specific ideas for implementing modal windows:

• When a visitor clicks on a category, have the questions and answers for that category appear in a modal window.
• If you don’t have a huge number of questions, consider having their answers open in modal windows. This can be particularly useful if you want to keep the question page in line with your overall (text-unfriendly) site design, but want the answers to be easier to read.
• Another idea is to use modal windows to integrate your FAQ with the rest of your site. Link to FAQ topics within your other pages and have them appear in modal windows directly on the page. This makes it easier to find information on the particular topics without having to leave the page a visitor is on.

Apple uses modal windows for explanations on certain things within their store. The same could easily be used to display FAQ information on topics.

Column View

Probably not the best name for this layout, but the name does fit. Basically, with this design, you’d have all your questions in one column, and when someone clicks on a question, the answer would appear in an adjacent column. You could make the columns scroll independently of each other or together. This is a pretty basic modification, but would work really well integrated with a minimalist site design.

Horizontal Scroll

I have yet to see a website that makes use of horizontal scroll within their FAQ page. With widescreen monitors becoming more and more common, horizontal scroll is only going to get more popular. Why not try it out on a FAQ page?

Tabbed FAQ

If you don’t have too many categories, why not used a tabbed interface for your FAQ? This would be particularly useful if you use AJAX tabs to make transitions between categories seamless.

Tag Clouds

If you have a very large FAQ, consider organizing with a tag cloud rather than standard categories. People are becoming more and more familiar with tag clouds, and they provide a great way to find information while remaining a bit less formal than regular categories.

Summary

FAQ pages can be one of the most useful parts of any website, but without proper thought put into the user interface, they can also be a black hole of information. Make sure you think about how your visitors will actually use your FAQs, and make sure you consider their needs throughout the design process. And don’t forget to test your FAQ page along with the rest of your site’s interface!

Further Resources

• The Perfect FAQ Page!
  A post from Thierry Koblentz that digs into the coding aspects of designing a great FAQ page.
• How to Write an Effective FAQ Page
  A post from Web Hosting Geeks that focuses on the content a FAQ page should include.
• Designing Your FAQ Page to Presale
  A post from The Dabbling Mum that talks about the information architecture of FAQ pages.
• Common Pages – FAQ Design
  A very short page from the COI Usability Toolkit that provides some very valuable information on making more usable FAQ pages.