Code Academy recently asked me to come in give a workshop on the basics of HTML and CSS to their students. The workshop started with a presentation outlining the different structures of HTML and CSS, along with some common terms to be familiar with. After a collective understanding of HTML and CSS a deeper dive was taken into the box model and how to work with floats.

Following the presentation was a workshop to provide practical examples of using HTML and CSS. The workshop included cleaning up a web page by improving the user interface and design solely using HTML and CSS. With a few quick changes the web page changed shape and came to life.

Overall the students were bright and very receptive making for an excellent workshop. You can checkout the slides from my presentation above and a link to the demo page below.

Related posts:

1. HTML5 & CSS3 Development Talks
2. CSS3 Animated Owl Tutorial
3. Designing A Non-Profit Website

Over the summer I have had the opportunity to speak at some terrific conferences, the last two being ChicagoWebConf and Omni Technical Conference. At these two conferences I spoke specifically about HTML5 and CSS3 and it's roll within quality front-end design and development. Please feel free to check out my slides from these talks below and let me know if you have any questions.

Quality Development with HTML5

September 2011

Work on HTML5 began in 2004 to improve the existing markup language which has been in place for the past decade. In this decade the web has grown and evolved quite a bit, leaving web designers and developers much to ask for. HTML5 responds to those request and helps pave the way for a new frontier in front-end development. HTML5 introduces new elements, a more semantic structure, improved form functionality, better media control and more for the growing web.

Quality Development with CSS3

September 2011

There is no better time to be a front-end web designer and developer than now and CSS3 proves it. What used to take a handful of images and nested elements now only takes one element with just a few CSS3 properties. Not only has development speed increased but so has the potential to stretch boundaries within web design. Thanks to CSS3 we now how the ability to embed fonts, create rounded corners, add shadows and gradients, build responsive design and more all without breaking a sweat.

Best viewed in Chrome.

Related posts:

1. CSS3 Support with Modernizr
2. CSS3 Animated Owl Tutorial
3. An Intro to HTML & CSS

Building a website is an exciting time! Everyone is firing on all cylinders and eager to get started. The mood is high and the room is full of great ideas. Putting the correct process in place will help grow the excitement and craft ideas into executable goals.

The Web Design Process: A Strategy for Success presented by Shay Howe

TechWeek, July 2011

Discovery

Project Definition & Brief

The first step in building a website, discovery, is often the hardest. It is critical to make sure everyone is on the same page and expectations are in place. Gathering information and doing a deep analytical dive isn’t easy but getting genuine information will pay dividends down the road.

Have a Purpose

To get started you need to identify the purpose of a new website. One of the best ways to do so is to cover the five Ws and one H. The who, what, when, where, why and how. It’s impossible to build a new website without knowing the purpose and having defined objectives.

Set Goals

Forecast where you want to be and how you would like your website to perform by setting goals. Goals give you something to work towards and provide a defined metric for success. Goals are important for both the short term and long term, modeling what you want to get done this week as well as in the following months.

Evaluate Existing Website

Your current website can be the best research tool available. Take a look and see what is working well on the current website and what needs the most work. Help ensure your new website is indeed an improvement and not a step in the wrong direction. Dive into analytics, set benchmarks and measure room for improvement.

Find What Users Want

Websites rely on users and users rely on websites. Stop guessing what users want and go directly to the source. Find out exactly what users enjoy about your website and what they strive to need.

Research the Competition

See what you are missing by researching the competition and analysing market trends. Chances are your competitors have been down this road before, take the opportunity to learn from them and see what is proven to work.

Interview Stakeholders

A great way to fully understand a websites is to speak with those who work with it directly. A customer service agent might have a slightly different opinion than a content strategist. Understanding every one’s perspective will help you make better, informed decisions. Additionally, the website needs to have support from the entire company for them to fully back it.

Outline Initial Tech Specs

Do your best to research and understand what will be required for the website from a technical standpoint. Does the current server have the capability to host the new website or will a upgraded server be required? Before building a new website ensure all of the correct technical specifications are in place.

Collaborate and Listen

Start the design process by listening and end the design process by listening, especially within the discovery phase. Hear everyone out and collaborate together. When everything is on the table and everyone is working together the most intuitive decisions are made for the benefit of the project.

Plan

Information Architecture & Strategy

A strategy needs to be put in place based off all of the information outline within the discovery phase. Decisions made at this stage can, and will, affect the bottom line of a website. Having a plan of action is key to success and it will help dictate decisions moving on.

Define a Timeline

Set dates and define a timeline for the expected duration of a project. Doing so will help ensure everything runs smoothly and the design process does not get stalled. A timeline also helps set expectations and keep everyone on track.

Outline Responsibilities

Know exactly who is responsible for what. Who is in charge of the design? Who is required to sign off on the design? How is the design handed off to the developer? Going over these questions up front will eliminate the guess work down the road and help speed up the process. Outline all of the members of the team, what they are responsible for and what deliverables they will produce.

Determine the Structure

Outline all of the different pages and their hierarchy within the website. Getting an understanding of what pages are needed and where they will live within the website will assist with content creation and building out a site diagram.

Diagram Page Flows

Each page can have it’s own flow, specifying how the content on the page should relate to other elements on the page. Determine the content necessary for each page and the priority with the content. Arrange the page to place emphasis on the primary content and keep a user focused moving down the page.

Make Content Relationships

The sooner you can define content needs the better. Summarize what specific content and messaging is needed for each page and how it will relate to other items on the page, as well as other pages in general. Design needs to work for and fit around the content properly. Content should not be worked to fit within the design. Start writing early and as soon as possible.

Prototype Wireframes

Before jumping into the detailed design, build and prototype different wireframes. Wireframes allow you to get a quick idea of how the website will look and function without all of the embellishments, putting the focus on usability. Furthermore, wireframes allow you to produce designs much faster, saving time and energy.

Perform Usability Test

Review case studies and perform usability test on your wireframes. The quicker you can acknowledge any flaws within the design the easier they will be to fix. Follow the best practices and continually refine your wireframes.

Set a Maintenance Plan

Once a website is launched it needs to continually be nurtured in order to grow. Take the proper steps and outline an ongoing maintenance plan. Once the website is launched this plan will need to be put into effect to keep the website up to date and in alignment with the overall strategy.

Design

Web & User Interface Design

Once the overall architecture and plan of the website is in place it is time to get moving with the web and user interface design. At this stage you will see all of your ideas come to life. By the end you should have a finalized layout and design, along with a handful of other brand and design elements to utilize.

Brainstorm Creative Concepts

Before jumping into the layout and visual design you want to make sure everyone is on the same page concerning the look and feel of the website. The best way to do this is to put together a mood board consisting of different visual references to use during the design phase. These references may include other websites, pictures, colors or any other artistic inspiration. A mood board doesn't need to be set in stone but should be used as a tool to align ideas and spark inspiration.

Design the Visual Layout

Using the wireframes and mood board in hand, begin the visual design of the website. Taking the wireframes, design a full fledged layout complete with poise and polish. Remember to reference the site diagrams, page flows and other information architecture documents for additional support.

Follow Design Principles

Working on the design and visual layout can be quite difficult. There are numerous items to take into consideration, all for the greater good of the website, and often the most important design principles can be forgotten. Remember to follow and reference different design principles while working on the layout and design.

Keep Brand Identity

Often a new website commissions a refresh within the brand identity as well. Ensure the brand identity is properly carried out and developed throughout the new website. It can be easy to get carried away and stray from the core brand personality, remember to stay on track.

Remember Asset Creation

The design phase is not complete with the layout and visual design of the website. Remember to cover design for all of the different assets going to be needed during the life of the website, including different sub page layouts, different emails and other elements requiring design.

Obtain Feedback and Revise

As within the discovery phase, it is beneficial to check back with all of the different stakeholders involved with the website and see what they think about the layout and design. Chances are that they may pick up on something initially missed. They’re additional support encourages them and lets them know that their input is appreciated. Taking what these different stakeholders have suggested revisit the layout and design, revising it with the updated recommendations.

Perform Usability Test

Very similar to the usability testing completed with the wireframes, run the layout and designs by a select group to see what thoughts they may have. See if they understand the flow of the pages and the overall hierarchy of the website. The more problems you can recognize and address now the better.

Create a Style Guide

One of the final parts of the design phase is create a style guide. This guide will serve as a reference for updating and managing the website once launched. The guide will also insure that the website keeps a consistent tone and feel.

Develop

Coding & Development

Once the design concept is finalized it is time to start programming. If there are quite a few components to the project the development phase could take quite a while. Remember to stay focused, make logical decisions and write the cleanest code possible. Writing quality code the first time around will save hours upon hours of headaches later down the road.

Code HTML/CSS Markup

Start the development by coding the general premise of the design in HTML and CSS. This will provide you with a strong base to work from and the ability to grow it into an application or CMS if needed. Keep your code well organized so that it may be scaled and maintained easily.

Develop Any Applications

Behind most websites there is some heavy lifting involved to get everything working properly. Developing an application, setting up a CMS or e-commerce platform can often be that heavy lifting. This step can be quite complex and often begins even before the design phase. Stay agile and deploy often to keep everything aligned and on track.

Add 3rd Party Integration

If your website will be using any 3rd party integration now is the time to get it properly installed. Make all of the proper connections and run vigorous test to make sure everything is working accurately. Make sure to especially test any part of the process that you may have personally customized. Remember to also run more test over time as the 3rd party will make updates of their own.

Support Responsive Design

Surfing the web from a mobile device is getting more popular as time goes on. Mobile browsers are getting much better at displaying websites however they have not completely figured it out. Make sure that your website has mobile compatibility for a variety of screen sizes and displays content largely relevant to a user on the go.

Test and Validate Code

After all of the development is wrapped up you need to double back and review the code, test it for for errors and make sure that it properly validates. This steps can often be a breeze or very frustrating. Either way, the important thing to remember is not to ship any faulty code. You may only get one shot with a user and if that experience is anything but enjoyable it is likely you will never get them back.

Set Up Hosting and Launch

At last, it is time to launch the website. Hopefully you covered all of the hosting and server needs in the discovery phase and are ready for launch. Upon launch do not forget to test and retest all of the functionality that was working on the development server, you never know what will happen when making re final migration. Additionally, don’t forget to make any last minute updates, configuring the proper analytics for example.

Launch

Deploy & Grow

Think of your website as an evolution not a revolution. Once a website is launched it needs to evolve and grow with time, not sit inactive waiting for the next uprising. Stay on top of your website and provide it with the support it needs. You have put all this time and effort into launching it, why stop now?

Train Website Managers

More times than not once the website is launched you will be handing it over to a set of employees to manage. Train these employees and managers on how to use and update the website. Make sure they thoroughly understand the CMS

Maintain the Website

Take the maintenance plan established within the planning phase and put it to use. If unattended your website can become dormant fairly quickly. Update and maintain the website to keep it relevant and inline with your overall strategy.

Start Marketing

The phrase “If you built it, they will come” doesn’t apply to most websites. You need to market and promote your website to drive traffic. There are a million different ways to do so including social, search engine marketing and search engine optimization to name a few. Find the right advertising medium for you and work to acquire users.

Measure Progress

Continually measure your website progress and work to improve it’s overall performance. Learn from what you have completed so far and find ways to grow based on these experiences. Over time you will get to know your users better and better, finding out exactly what they desire. Do your best to give them what they want.

Related posts:

1. Checkout Process Design
2. Web Design 101 – The Basics
3. Home Page Design

Multivariate testing (MVT), testing multiple elements of a live web page at a time, is becoming more and more popular amongst the web design and development community. Understandably so, multivariate testing allows you to test a large amount of combinations and see exactly how those combinations stack up against one another. You will quickly find out that the smallest changes can produce the biggest results.

What elements should you test?

When deciding exactly what elements to test within a multivariate test you are going to focus on the call to action. Determine what you want users to do upon landing on a page and then outline all of the key elements in and around the desired call to action. Any element a user will have to interact with to complete this action is an element you are going to want to run the multivariate test with. A few of these elements may include:

Brand Awareness

Depending on how popular, or unpopular, your brand is may impact conversions. If you have a well-known brand it may help encourage conversions where an unknown brand would not. On the other hand, having too much brand presence on a page may get in the way of users trying to complete a conversion. Figure out what you would like to accomplish with your brand awareness and then test it.

Headings

Headings are the first section of text a user will read on a page and if they like it they will continue on. Perhaps they will continue reading, maybe they will scan the rest of the elements surrounding the call to action, or if you’re lucky they just might jump straight to completing the desired call to action. Either way, testing different headings will allow you to determine which has the best positive outcome. Not too sure headings can make that big of difference? You do not have to take my word for it; 37signals have had significant results all from testing headings.

Text Content

Not every user is going to read the text content surrounding a call to action, however those who do are only going to be interested in helpful and useful content. Creating a few different blocks of text to test against one another can give you an insight as to how your users think and what will work best with them moving forward. While you may not see a very sizable difference in your conversion rate from testing text content you will gain a tremendous amount of awareness.

Images

The eye is naturally drawn to images on a page, especially striking images. How you present your call to action can be dramatically affected by the images used around it. As an example, if you are selling an e-book that is to be downloaded, try using an image of an actual book against an image of a PDF icon. You may be surprised to find that your users like to see a tangible product over a file icon. The right image or images can work wonders on your conversion rate.

Buttons

Buttons may very well be the most important part in completing a call to action. Simply put, buttons are one of the easiest ways for users to take action, an action that is often important in determining the overall success of a website. Does your button actually look like a button? Is it instinctive and easily recognizable? Put together multiple button combinations and test them against one another. It may take a few different tests, but soon enough you will have a shinning star.

How should you test these elements?

Within a multivariate test you will need to visually design multiple combinations of the elements surrounding a desired call to action. I recently wrote an article, 4 Simple Design Elements Behind a Good Call to Action, which goes into great detail on how to visually craft a strong call to action using size, shape, color, and position. Using size, shape, and color, you are able to create an extensive array of elements to test, all of which will help lead you to the preferred conversion rate.

Size

The larger you make your call to action, the easier it is to recognize. Furthermore, the larger an element is the more importance it will signify. You want to find a good balance between how large your headings and images are as compared to your button. Headings should not be so small that they do not stand out over the other copy, meanwhile a button should not be so large that it is the only item on the page.

Shape

A good call to action will use shape to its benefit. Make the corners on your button rounded so that it looks more like a button and instinctively clickable. Use an arrow or another object to draw attention to the button. Do not be afraid to break a grid in order to make a call to action stand out. On a page full of straight lines the curved one is sure to stick out so use shape to your advantage.

Color

Every color is going to catch a user’s attention a little differently. Additionally, each color is going to provoke a different emotion for each user. One of the biggest things you can test, and continually test, is the color of your headings, buttons, text, and so forth. Honestly, the options are endless! Test and work with colors that will standout, provide a high contrast, and encourage users.

Position

Logos are commonly found at the top left of a page for a reason, it is where they are most easily recognized and successful. Position plays a very important role in gaining conversions. How does your call to action perform placed within the left side of the page as compared to the right side? In addition to that, how does your button perform on the top of your call to action as compared to the bottom, left, or right? The position of your call to action needs to be in an instinctive location and clearly obvious to your users.

Multivariate Testing Example: Smashing Magazine

I recently wrote a review on The Smashing Book and in doing so I was visiting the Smashing Magazine website quite a bit. I started to notice that they are running a multivariate test on how they advertise the book to their visitors. Outlined below are a few of the different examples and combinations I was able to identify. I do not know how well each of these is performing, nor do I know anything about the parameters of the test. I would love to hear more about the test if Smashing Magazine was to share. Maybe they will release a post about it sometime in the future (wink wink)?

Variable: Text – Simple enough, these two combinations are strictly comparing the call to action text.

Variables: Text and Button – These combinations are slightly different from the first set. Here the call to action text is different as they have added a button into the mix, and the Smashing brand is down played a little from the previous examples.

Variable: Color – Here is a new set of combinations, of which the strong variable is the colors of the buttons. The color of the buttons changes along with the text within the buttons as necessary. Also notable, the color of the text “Smashing” within the bottom two examples changes to emphasize the brand within the bottom right example.

Variables: Position and Size – Within these two examples Smashing Magazine mixes testing position along with size. The image of the book switches from the right hand side to the left of the call to action. Additionally, the size of the button is increased within the example on the right.

Variables: Text, Size, and Color – Paying attention to the small details, this example tests the effectiveness of different context. In doing so, they slightly change the size of the text. Notice the text on the right example is just a tad larger than the left. In addition, the color of the pricing is different from one example to the next.

Variables: Random – These are just a few of the additional examples I found thrown into the mix, each of which is testing a random combination of elements.

The multivariate test by Smashing Magazine is a great example of a multivariate test as it is testing a wide array of elements. The test does a fantastic job at testing the brand, headings, text, images, and buttons. In doing so, they often change the size, shape, color, and position of different elements. There was a decent amount of planning put into this test and it is obvious that Smashing Magazine knows what they are doing.

Related posts:

1. Designing a Strong Call to Action
2. 10 Quick E-Commerce Tips
3. Landing Page Design

When it comes to designing a website, content is often overlooked, but why? Very rarely do users browse the web looking for a good design or decent experience. Users come for the content. Not giving them what they want with poorly written content will frustrate users. Not only does it waste their time, but your time as well.

Writing for the Web: The Right Strategy presented by Shay Howe

Refresh Chicago, January 12th, 2010

The Problem

Online content is bad. Real bad.

Generally speaking, the Internet is lacking when it comes to quality content. People are not properly taking advantage of the opportunity in front of them and commonly fall short with insufficient content.

Content is low priority.

All too often we get caught up in the design and development of a website to pay attention to the content. We understand that the website will have a blog, about page, and contact page, but that is as far as we get. From the introduction of a project content takes a low priority.

Content is last minute.

Some people do not even think about content until the day that the website is completely designed, developed, and ready to be rolled out. The wireframe, site map, and graphics are all water under the bridge by now. The only thing missing at this point is the content. All too often the content has not even been assigned or allocated to anyone at this point.

Users notice bad content.

If your copy is updated, cheerful, and friendly users will not notice. If your content is sterile and resembling a textbook, users will notice and you will hear about it. The second your product description starts to drag users will jump ship.

Mint – Mint has welcoming copy that often goes unnoticed because it is good, friendly content.

Make your content work.

The only way to overcome this horrid content is to make your content work harder. Before you begin any wire frames or development sit down as a whole and put together a content strategy. Initiate a strategy that will outline the metrics needed to keep your content moving forward.

Developing a Strategy

Kristina Halvorson has written an amazing book, “Content Strategy for the Web”, which goes into great detail on how to create a content strategy for the web. The following section summarizes some of her most important points. Please support her and purchase her book for more information.

Create, publish, and govern.

When putting together a content strategy it is important to understand that your strategy needs to cover not only creating and publishing the content, but governing the content as well. Once a website is live and time passes by content will become obsolete and need to be updated. This includes images and videos as well as the text itself.

Think “lifecycle” not “launch”.

Typically a website is launched everyone involved moves on to bigger and better things. We need to break the “launch” mindset and focus on the “lifecycle” of a website rather than the initial lift off. Plan to have an individual or team in charge of occasionally updating and checking the content.

Stop the separation.

Who is really in charge of creating the content? Designers and developers? The client? Marketing and research? Information architects? Truth be told, we all are in charge. Bring everyone together to work on the content strategy as a whole and the content will take life.

Stop using lorem ipsum.

Lorem ipsum will not, at all, resemble your actual content. Stop using it as a placeholder within your design or wireframe as it will be mismatched to the real content that will be delivered. While you are all together initiating a content strategy think through the content and any implications you may encounter. Know how to handle multiple levels of headings, ordered list, blockquotes, and other situations a head of time.

Answer more than just what.

If all your content does is tell what the website is about you’re missing the point. Quality content will answer the what, why, when, where, how, and who. Go over the website inside and out and cover your tracks. Make sure any possible questions a user may have are answered upfront.

Set goals.

Measuring your success can be difficult if you do not set goals. Figure out what you are looking to achieve with your website and exactly how your content can play a role in helping. Outline your goals and use them as motivation moving forward.

Determine accomplishments.

Figure out exactly what you want to accomplish with your content. Maybe it is to help sell a specific product, to build brand recognition, or to drive form conversions. Whatever you are looking to accomplish, define it now and then, work towards accomplishing it within your content. Knowing what you need to accomplish is easier than taking a stab in the dark.

Recognize risk.

Try to recognize any potential risk involved with developing content. Are you worried about being too edgy or too dull? Figure out exactly what your pressure points are and then plan on how to overcome the risk.

Flickr – Flickr avoids being dull by welcoming users in a different language every time they visit their profile.

Outline content structure.

All websites need to have a structure to their content and this structure needs to be carried out through every single page on the site. Outline a content structure that covers your headings, body text, linking between pages, as well as your narrative, tense, and flow. Really go over your content structure and determine how you will stay consistent throughout the entire website.

Identify roadblocks.

As with every other part of the project you are bound and determined to run into a few roadblocks when creating content. Is user research going to hold you up from getting a proper start on the content? Is marketing going to come down on you when they feel that the brand is not properly being carried out? Or, is legal going to tell you to completely scrap entire sections of the content? Identify what roadblocks you may encounter and figure out how you will move around them.

Determine overall messaging.

When putting together the content strategy this is the best time to determine the overall messaging of the website. This is a hard question to tackle so getting a head start on it now makes all the difference. Put together some recommendations for the overall messaging and tone of the website and how it should be conveyed. Chances are you will not completely iron out the messaging and that is fine, but getting a head start is crucial.

GIANT Creative – GIANT Creative has a great overall messaging that is carried out through the entire website.

Assign launch priorities.

Since the website will be a work in progress and you plan to continually make updates to the content, figure out where you want the content to be at launch. A lot of projects are time sensitive and getting off the ground is very important. Decide what needs to be completed before launch and what can be incorporated after launch. Do not, I repeat, do not launch a website for the sake of getting it live with the mindset that you will review the content later. This happens all too common and the content is never defined after launch.

Decide content hierarchy.

Now is also the time to decide your content hierarchy, meaning in what order do you want to present your messaging to users. Put your most important messaging first then move users back within the site for more information if they wish. Throwing all the content you can at users all at once will not work. Decide in what order you wish to present the content to the users.

Prepare sub page recommendations.

A content strategy should include recommendations for the home page all the way down to sub pages. Outline if some sub pages will receive specific templates to better convey messaging. Also determine how the sub pages will carry out the top level messaging, stay consistent from one page to another, and how they will all link and interlace.

In general, your strategy needs to provide all information needed to make any decisions when producing and creating the content. While developing the strategy you need to reach out to all of those whom may have some input. Gathering their input now, rather than later, will hopefully help prevent any roadblocks from occurring later on. Furthermore, use this time to set guidelines on to how the content will be maintained and updated moving forward.

Writing Quality Content

There are many different factors that all play into writing quality content. Many of which I addressed in my article “Writing User Friendly Content”, including:

• Give users a summary.
• Get to the point quickly.
• Use small sentences.
• Limit one thought per paragraph.
• Use bullet points.
• Use sub headings.
• Do not over use exclamations!!!
• Drive emphasis with repetition.
• Drop unnecessary adjectives.
• Use details, be specific.
• Use hyperlinks.
• Use a personal tone.
• Be unique.
• Escape content overload.

These are just to name a few. Please refer to the article for further details and complete explanations. In addition to these points I would also like to add:

Forget the sales pitch.

Online users are used to the typical sales pitch and can spot it from a mile away. It is commonly tasteless and users hate it. Instead, present them the facts in a friendly manner and let users decide for themselves.

Keep content understandable.

Having clear and understandable content is easier said than done. What may be understandable to you may not be to someone else. If a user struggles to find what they are looking for or to understand any of the content they will pounce on the back button like no tomorrow.

Communicate conversationally.

Communicate conversationally with a more casual tone and voice to allow for a friendlier and easier reading experience. Users will be extremely happy with content they can understand and you can rest assured you avoided them any frustration.

Carrot Creative – Carrot Creative uses a friendly tone and characteristic content to provide for very enjoyable reading.

Do not brag.

No one likes a showoff and the same goes online. Do not brag or boast about how popular you are or how well you did last year. You must earn your users trust and any pompous language will not sit well.

Avoid industry slang.

I could ramble all day about front-end and back-end development along with different content management systems, but would my audience understand me? No. Speak in terms that everyone will understand.

Bringing Content to Life

Apply your hierarchy.

Take the hierarchy you decided on within your strategy and apply it using different headings, text sizes, and typefaces. As before, put your most important messaging first and show users where to begin. From there guide them through the rest of the website.

37signals – 37signals uses a creative design to apply their hierarchy and to guide users down the page.

Make content able to be scanned.

One of the most important things to take into consideration when creating and stylizing your content is to make sure that it can be scanned. Users do not read content online, they scan it. Make sure you break up your text using multiple headlines, bullet points, short paragraphs, and descriptive links.

HUGE – Huge adheres to all reading types by breaking up their content with paragraphs, list, and other grid based elements.

Stylize your text.

Make use of common text styling elements like bold, italics, shadows, and so forth as they help to bring life to your content. A little bit of an added touch can go a long way so be sure not to overdo it. Too much style and your content can start to look gaudy.

N.Design Studio – N.Design Studio uses a variety of text effects including multiple typefaces, colors, sizes, strokes, and more.

Play with different fonts.

Online we are commonly limited to a specific number of web friendly fonts. However with the improvements of @font-face and services like Typekit the number of fonts is quickly growing. Use different fonts to help deliver your content in a more aesthetic manner. As with adding stylization to your text, be sure to pick a font that will compliment your design.

Viget Inspire – The Viget Inspire blog uses multiple different typefaces for an added touch, easily taking the design to the next level.

Use contrasting colors.

Using black text on a black background probably is not a good idea. Pick colors that fit well with your layout and design. A bright contrasting color has the ability to really draw a user’s attention. Use colors within your content to your advantage.

Friendly Duck – The contrasting orange color on Friendly Duck sticks out amongst the dark background and really draws users attention.

Apply clean rags.

Each line of unjustified text should be as close as possible to the same length as the other lines above and below it. Any large spaces at the end of a line will create a large gap that is hard to follow when reading. Further more, having text hanging out on the end of a section of text within the last line creates an unpleasing arrangement and is often over looked.

Happy Cog – Happy Cog is aware of their rags and has taken the additional effort to make them as pleasing as possible.

Exercise white space.

A fair amount of white space in a design allows the content to breathe and makes it easier for users to read and follow. White space can also be used to build a grid within your layout and design. Which, in return, may help your content establish a rhythm for easier reading.

Elliot Jay Stocks – Elliot Jay Stocks uses white space to help sculpt his layout while allowing users to easily read and follow the content.

Make graphics and text coincide.

Excellent text and a strong graphic can communicate a powerful message, a message that has the ability to leave a lasting impact on users. Use graphics that work well with your text. Simply adding graphics to a page for no apparent purpose is distracting and aggravating for users.

Housing Works – Housing Works makes use of emotional images to add a powerful impact to their messaging.

Take advantage of CSS.

Cascading style sheets give you the potential to not only add outstanding effects to your text, but to also set a content standard for text across an entire website. Setting standards in CSS ensures the consistency of your typography across an entire website.

You Need Excellent Content

Developing a strategy, writing quality content, and bringing that content to life take a tremendous amount of energy. The majority of companies do not have the resources, let alone the time and effort needed to develop great web content. Quality content requires a detailed procedure and hard work which will end up being worth it.

Having a content strategy along with quality content in place allows for a strong user’s experience, better brand regularity, up to date working efficiency, improved risk management, more powerful search engine optimization, and more advantageous personality and targeting.

Stop acting like content is secondary nature, of which can be touched up at a later date. Start your projects with creating quality content and start today!

Very special thanks to Kristina Halvorson on her amazing contributions to educating the importance of web content. Please visit her at Brain Traffic or purchase her book “Content Strategy for the Web”.

Related posts:

1. Writing User Friendly Content
2. Content Optimization Guidelines
3. The Web Design Process

It is not uncommon for companies to sink large amounts of money into obtaining traffic to their websites in an attempt to increase conversions. Some of their money might go towards search engine optimization and some might go towards pay per click or search engine marketing. Little do they know their problem might not be about getting more traffic. The real problem could be that they have a poor call to action.

A plain “Click Here” link buried underneath a wall of text is not going to yield very good results. Driving traffic to your website is important, however what good is the traffic if the primary call to action is nearly invisible? Having a well-designed call to action could be all the difference needed to rocket conversions sky high. The design of a call to action can be broken down into 4 simple elements, size, shape, color, and position.

Design Elements

Size

Make your call to action large enough that it stands out on top of everything else on the page. It is your primary focus, right? Generally speaking, the larger an element is on a page the more noticeable it will be, thus the more importance it should hold. A good call to action is large enough so that it is easily recognized without being tacky in the process.

Before going off the deep end realize that it is possible to create a call to action that is too large. If you create too large of a call to action users may not understand that it is clickable and will miss the call to action altogether. Create a call to action that is large in relation to other elements on the page, but not over done.

Alternatively, if you have more than one call to action, size them in relation to their importance. The primary call to action should be larger than the secondary call to action.

Sortfolio – The “get listed” call to action stands tall above the rest of the navigation as the primary call to action.

MailChimp – The home page over at MailChimp features two large call to action buttons that ensure they are not missed.

Shape

The best calls to action are most commonly shaped like buttons as they attract attention and are instantly identified as clickable. Use rounded or circular corners on the ends of your call to action to give it the shape of an ordinary button. Square corners do work as well, however some users may misinterpret your call to action for an ad or banner and steer clear from it. Feel free to use square corners, just do so with a bit of caution in mind.

On top of shaping your call to action to that similar of a button it is also beneficial to use a unique font from the rest of the page for your call to action. The difference in the shape of the font will help attract attention to the call to action and draw users in. As always, choose a font that is distinctive yet complimentary to the other fonts on the page as well.

Apple – Apple uses multiple rounded corners to enforce that the element is indeed clickable. They also make use of a “+” circle on the top left corner to help draw users attention.

Authentic Jobs – Authentic Jobs uses a dominant button with an accent below it to guide users eye path.

Color

To say that any of the 4 elements being outlined here has more importance than the other is too close to call, however the color of your call to action is right at the top. One of the quickest ways to grab a user’s attention is by using a bright, contrasting color right within your call to action. Choosing a color that stands out from the rest of the colors used within the page will enforce its significance.

Pick a color that is specifically unique to your call to action and is not used anywhere else on the page. For example, if all of your text is black and all of your links and buttons are blue you should use a different color than black or blue for your call to action. Instead, use a brighter contrasting color such as orange. By using orange the call to action will not fade in with the rest of the blue and black and will stand atop of all the other elements on the page.

It is also recommended that you need to practice using colors appropriately. By all means pick colors that are bright and contrasting, however make sure you pick colors that fit the overall color scheme of the page. Throwing in random colors in order to get a call to action to stand out will look unprofessional and perhaps worse, untrustworthy. Additionally, be careful when using more than one call to action on a page. Too many colors can quickly turn your page into a rainbow, draining the impact of the primary call to action, and pushing users to an unresponsive state.

h2desk – h2desk uses a beautiful bright red call to action on top of a dark background.

Less Time Spent – The bright green button on Less Time Spent is a high contrast of the other colors used on the home page.

Position

Positioning your call to action instinctively within the eye path of users is incredibly important. No matter how large, oddly shaped, or brightly colored your call to action is users will never see it unless it is placed within an intuitive position. The exact position for your call to action will depend on the page layout itself, however the best practice is to keep the call to action above the fold and in a prominent area with plenty of breathing room.

You are able to prioritize the elements on a page simply by the order in which they are placed. Keeping the call to action toward of the top of a page, not requiring users to scroll down to find it, places more value on the call to action and allows it to receive more impressions. Leaving the call to action in an instinctive position allows users to also come back to it after browsing other parts of the website.

Leaving a fair amount of white space around the call to action prevents other elements of the page from interfering with the importance needing to be placed on it. Positioning the call to action in an intuitive position without any clutter in the way will reward the highest amount of conversions.

Textpattern – Textpattern places their primary call to action right underneath the logo ensuring it is going to be seen.

Notable – Notable positions their call to action above the fold with plenty of whitespace surrounding it.

Examples of Great Calls to Action

BuySellAds

VideoTeaching.com

Site Remark

CoTweet

File Share HQ

Catch Mail

Templatic

Pulse

Campaign Monitor

Home Theater Forum

Healogix

Livestream

Donor Tools

WebNotes

TrackMyPeople

FreeAgent

SugarSync

1Password

Pastebot

MemberFuse

Droplr

Zaplee

Xpelo

HelpSpot

EnStore

Jolicloud

Xero

POP Creative Group

Glasscubes

Planning Center

Bidsketch

Virb

WWF

LemonStand

Crush It! Book

Matthew Henry

Shopify

Medical Licensure Group

Halogy

LightCMS

International ArtExpo New York 2010

Osmond Interactive

Magntize

Mobile Roadie

Microsoft MIX10

Art in My Coffee

Onehub

Sprouter

SliceMyDesign

Essay Academia

Ambition WordPress Edition

Brite Revolution

StreetMavens

Vuu Media

Message Stream

Additional Information

• Smashing Magazine – “Call to Action Buttons: Examples and Best Practices”
• Boagworld – “10 Techniques for an Effective ‘Call to Action’”
• UX Booth – “Good Call-To-Action Buttons”

Putting it all Together

At the end of the day creating a good call to action is all about getting users to convert. No matter how you go about getting conversions you cannot ignore the design of your call to action. The 4 simple elements outlined here may not seem like much, but can work wonders on your conversion rate. Take a look at your website and reevaluate your call to action. Could it use a little work? Would any of these 4 elements help give it a boost? Please let me know about it in the comments below. Maybe I can give you a hand or lend you some advice?

Related posts:

1. Defining A Multivariate Test
2. Designing A Non-Profit Website
3. Landing Page Design

Online sales are growing rapidly year over year and now more than ever is a great time to have an e-commerce website. While maintaining and optimizing an e-commerce website may be quite the assignment, taking little steps in the right direction will greatly help the overall improvement. Begin with small improvements you can tackle quickly. Then move on to more complex tasks that may require extra effort. Slowly, but surely, you will fine tune your website into an outstanding website. Outlined here are 10 quick e-commerce tips to get you on your way.

Start Your E-commerce Optimization

1. Accommodate All Users Types

When a user visits your website it is virtually impossible to know where they stand within the purchase process. Some users are just browsing around gathering information for a future purchase while other users may be in a dead heat to make a purchase as quickly and easily as possible. Take note of all the potential user types and try to accommodate them all equally.

2. Use Captivating and Compelling Copy

Users browse e-commerce websites as if they are on a hunt. Hunting for a desired product and the moment the hunt goes cold they fall off track and disappear. Write strong impact copy that keeps users on the hunt. If a landing page or paid search ad is promoting "Affordable Baking Accessories" you better be sure the corresponding page on your website uses this same copy.

3. Use Headings with a Punch

Headings are the main place where you can persuade users to stay on your website for another few seconds. If your heading is too informational or puts them to sleep you have missed your chance. Use clear, descriptive headings that get to the point and provide users with a source of relevancy. For example, "Pet Safe Wireless Containment System PIF-300 Including Lifetime Manufacturer's Warranty" has less of an impact than "Pet Safe Wireless Pet Fence - Lifetime Warranty Included".

4. Take Advantage of Good Calls to Action

As a child when your mother told you to clean your room, did you? No. When you tell a user to "Click Here" are they going to? No. Give users a reason to proceed and to follow through. Using a call to action like "See Our Lowest Priced Bikes" is much more appealing than "Click Here" or "Learn More".

5. Provide Multiple Professional Product Images

One of the best parts about walking into a brick and mortar store to make a purchase is that you are physically able to pick up and examine a product. By giving users multiple images online allows us to overcome this barrier. On top of giving users multiple images, give them professional images from different angles and in different environments. Show them a shirt from the front, back, side, as well as on a model.

6. Allow Users to Read and Leave Product Reviews

User reviews, both good and bad, are proven to increase your conversions. Studies show that 77% of users look at reviews and ratings. Of them, 63% admit that they are more likely to make a purchase from a website with reviews and ratings. (Jupiter Research, August 2006, and Comp USA & iPerceptions) Furthermore, negative reviews allow users to see that the ratings are concrete and the product is in fact real with flaws. If you receive too many negative reviews and you may consider discontinuing the product offering.

7. Lead Users through the Checkout Process

Getting users into the checkout process is an accomplishment in itself; do not ruin it with poor user experience. Give users an overview detailing how many steps are involved and where they currently stand. Additionally do not promote any products or try to sell additional products within the checkout process. Keep the process to a minimum and as intuitive as possible.

8. Develop Clean Easy to Use Forms

For many websites forms act as the plague. Design and develop your forms in a clean easy to use manner. A few best practices include:

• Require only necessary information. Do not go data happy.
• Provide security assurance ensuring personal information is safe and secure.
• Use descriptive buttons like "Continue to Shipping and Billing" rather than "Submit".
• Assist users with error handling on incorrectly completed fields.

9. Provide Help and Support

The first thing a majority of users are going to do before making a purchase is to make sure that you are willing, and able, to help them after a purchase is made. The quickest way to insure your support is to provide users with a phone number at all times. Furthermore you should also supply a mailing address and email address. On top of contact information you should also provide a privacy policy, return policy, shipping policy, and so forth. Providing all of this information upfront will help reassure users.

10. Test Then Test and Test Some More

These days testing is inexpensive, potentially free, and will warrant substantial benefits. The only excuse not to test is the matter of time it takes, however with Google's Website Optimizer this excuse is no longer valid. You can be up and running a test within the hour. Make a list of 3 things that bother you about your website, things you think could be improved. Then set out to test them. Once you have finished your initial test, rinse and repeat.

Related posts:

1. Checkout Process Design
2. Top 10 Keyword Research Tips
3. The Quick Six with Chris Coyier

Part 1: Content

One of the goals behind a non-profit website should be to inform visitors and provide them with valued content, ultimately motivating them to take action or to be encouraged by your undertaking, accomplishments, and possibilities.

Does the website:

1. Provide a mission statement that is easily accessible.
2. Provide an inspiring statement from executive director, president, or person in charge.
3. Provide a featured organization importance on the home page.
4. Provide a who, what, why, when, and where behind the organization.
5. Provide a history and origin behind the organization.
6. Provide informative material related to the organization.
7. Provide a list of board members and their positions.
8. Provide a list of principal staff members and their roles.
9. Provide a date of the most recent update to the website.
10. Provide a calendar and/or news to highlight time-sensitive material.
11. Provide a list of recent updates to the website.
12. Provide the most recent annual reports.

Part 2: Dependability

Upon visiting the website visitors should feel that the organization is attentive, perceptive, proficient, virtuous, and responsible.

Does the website:

1. Have correctly functioning internal and external links.
2. Have routinely fresh content.
3. Contain only correct and proper spellings.
4. Have appropriate and functioning pictures.
5. Supply a "Privacy Policy" for individual information.
6. Display the non-profit position of the organization.

Part 3: Interaction

An essential behind a non-profit website is providing a strong call to action or form of interaction for visitors to help support and promote the organization's mission.

Does the website:

1. Provide an address and phone number for the organization.
2. Allow visitors to filter their contact request to the correct person.
3. Ask for visitors email addresses.
4. Allow visitors to contribute by commenting or emailing.
5. Allow visitors to contribute by a form of social media. (Facebook, Twitter, etc.)
6. Provide a list and explanation of positions for volunteers.
7. Describe how and where funds will be used.
8. All for visitors to make donations online.
9. Explain if any donations may or may not be tad deductible.
10. Provide visitors' ways of how to help outside of donating.
11. Provide any success stories from those helped by the organization.
12. Clearly outline the services and goods provided by the organization.

Part 4: Visibility

An organization's website needs to be visible to all visitors regardless of their physical or mental abilities.

Does the website:

1. Pass accessibility standards.
2. Use valid HTML/XHTML code.
3. Look and function correctly across all major web browsers.
4. Perform correctly when being accessed by screen reading programs.
5. Have appropriately written content for the intended skill level of the audience.

Part 5: Interface

A good interface can dramatically improve the production and presentation of an organization.

Does the website:

1. Load without showing a splash page or advertisement.
2. Load swiftly for those with a broadband connection.
3. Perform correctly on an array of different screen resolutions.
4. Have a clean and friendly layout and design.
5. Prohibit pop-up windows on the home page.
6. Have a comprehensive and eligible navigation.
7. Provide all content within three or less clicks from the main navigation.
8. Provide a site map or search feature for large websites.
9. Have the logo or organization name on all pages.
10. Use proper titles and headings for all pages.
11. Use suitable named URLs.
12. Provide pertinent content without having to sign-up or register.
13. Allow a printer-friendly option for longer pages.
14. Use web friendly content. (Short paragraphs, bulleted list, etc.)
15. Use an appropriate contrast in order to read text (even when projected).
16. Visually separate hyperlinks from regularly styled content.
17. Use email addresses as links.
18. State the type and size of a file before being downloaded.
19. Use authentic graphics and images of which support the content.

Additional Resources

You may also find the following resources beneficial. Please enjoy!

• Non Profit Website Design: Examples and Best Practices
• 40+ Inspirational Non-Profit Website Designs

Related posts:

1. Website Form Design
2. Universal Website Usability Rules
3. Home Page Design

Google does a lot of interesting things, of which one of the most popular being periodically changing their logo to reflect current events. In the past 10 years we have had the pleasure of seeing quite a few fascinating and delightful logo designs. Most often we see these imaginative logos around holidays, including Christmas, Thanksgiving, Halloween, and other popular holidays. We are often surprised to see new logos unexpectedly, most recently for the 40th anniversary of Comic-Con. Outlined here are over 300 of the most brilliantly designed Google logos.

2009

40th Anniversary of Comic-Con – July 23, 2009

Historically Long Solar Eclipse – July 22, 2009

Apollo 11 Lunar Landing Anniversary – July 20, 2009

Nikola Tesla's Birthday – July 10, 2009

Igor Stravinsky Birthday – June 17, 2009

Philippines Independence Day – June 12, 2009

Mary Cassatt's Birthday – May 22, 2009

Missing Link Fossil Discovery – May 20, 2009

Mother's Day – May 10, 2009

Samuel Morse's Birthday – April 27, 2009

Anzac Day In Australia and New Zealand – April 25, 2009

Girl's Day in Germany – April 23, 2009

Turkey National Sovereignty & Children's Day – April 23, 2009

St. George's Day & Shakespeare's Birthday – April 23, 2009

Earth Day – April 22, 2009

Kartini Day in Indonesia – April 21, 2009

Zu Chongzhi's Birthday – April 20, 2009

Christiaan Huygens' Birthday – April 16, 2009

Thailand New Year – April 13, 2009

1st Day Fall/Spring – March 20, 2009

St. Patrick's Day – March 17, 2009

Giovanni Schiaparelli's Birthday – March 14, 2009

Dr. Seuss' Birthday – March 2, 2009

Valentine's Day – February 14, 2009

Unix 1234567890 – February 13, 2009

Charles Darwin's Birthday – February 12, 2009

Jackson Pollock's Birthday – January 28, 2009

Martin Luther King Day – January 19, 2009

New Years – January 1, 2009

2008

Holiday Doodle – December, 2008

Thanksgiving – November 27, 2008

Rene Magritte's Birthday – November 21, 2008

Veteran's Day – November 11, 2008

U.S. Presidential Election – November 4, 2008

Halloween – October 31, 2008

Google's 10th Birthday – September 27, 2008

1st Day of Fall – September 22, 2008

Large Hadron Collider – September 10, 2008

Summer Olympic Games Doodle, Beijing – August, 2008

50th Anniversary of Nasa – July 29, 2008

Marc Chagall's Birthday – July 7, 2008

4th of July – July 4, 2008

1st Day of Summer – June 20, 2008

Father's Day – June 15, 2008

Diego Velazquez's Birthday – June 6, 2008

1st Hot Air Balloon Launch Anniversary – June 4, 2008

Anniversary of the 1st Ascent of Mount Everest – May 29, 2008

Up in the Clouds – May 22, 2008

Walter Gropius' Birthday – May 18, 2008

1st Demonstrated Laser Anniversary – May 16, 2008

Florence Nightingale's Birthday – May 12, 2008

Mother's Day – May 11, 2008

St. George's Day – April 23, 2008

Earth Day – April 22, 2008

Mother's Day in the Middle East – March 21, 2008

1st Day of Spring – March 20, 2008

Persian New Year – March 20, 2008

St. Patrick's Day – March 17, 2008

Alexander Graham Bell's Birthday – March 3, 2008

Leap Year – February 29, 2008

Valentine's Day – February 14, 2008

Chinese New Year – February 7, 2008

50th Anniversary of the LEGO – January 28, 2008

Martin Luther King Day – January 21, 2008

New Years – January 1, 2008

2007

Holiday Doodle – December, 2007

Thanksgiving – November 22, 2007

"My Future" UK – November 20, 2007

Veteran's Day – November 11, 2007

Halloween – October 31, 2007

Luciano Pavarotti's Birthday – October 12, 2007

International Sputnik Day – October 4, 2007

Google's 9th Birthday – September 28, 2007

Roald Dahl's Birthday – September 13, 2007

4th of July – July 4, 2007

Father's Day – June 17, 2007

Mother's Day – May 13, 2007

Earth Day – April 22, 2007

Yuri Gagarin – April 12, 2007

Persian New Year – March 21, 2007

St. Patrick's Day – March 17, 2007

Chinese New Year – February 18, 2007

Valentine's Day – February 14, 2007

Martin Luther King Day – January 15, 2007

New Years – January 1, 2007

2006

Holiday Doodle – December, 2006

Edvard Munch's Birthday – December 12, 2006

Thanksgiving – November 23, 2006

Remembrance Day – November 11, 2006

Halloween – October 31, 2006

Canadian Thanksgiving Day – October 9, 2006

Mid-Autumn Festival – October 6, 2006

Harvest Day – October 3, 2006

German Reunification Day – October 3, 2006

Google's 8th Birthday – September, 2006

Rosh Hashana – September 22, 2006

Chinese Teachers Day – September 10, 2006

Google U.S. Government Search – 2006

4th of July – July 4, 2006

Father's Day – June 18, 2006

Football World Cup – June 9, 2006

Sir Arthur Conan Doyle's Birthday – May 22, 2006

Mother's Day – May 14, 2006

Earth Day – April 22, 2006

Joan Miro's Birthday – April 20, 2006

Persian New Year – March 21, 2006

St. Patrick's Day – March 17, 2006

Percival Lowell's Day – March 13, 2006

Winter Olympic Games Doodle, Torino – February, 2006

Chinese New Year – January 29, 2006

Wolfgang Amadeus Mozart's Birthday – January 27, 2006

Martin Luther King Day – January 16, 2006

Louis Braille's Birthday – January 4, 2006

New Years – January 1, 2006

2005

Holiday Doodle – December, 2005

Thanksgiving – November 24, 2005

Halloween – October 31, 2005

Google's 7th Birthday – September, 2005

Lunar Landing Anniversary – July 20, 2005

4th of July – July 4, 2005

Father's Day – June 19, 2005

Frank Lloyd Wright's Birthday – June 8, 2005

Mother's Day – May 8, 2005

National Teacher Day – May 3, 2005

Earth Day – April 22, 2005

Leonardo da Vinci's Birthday – April 15, 2005

National Library Week – April 10, 2005

Vincent van Gogh's Birthday – March 30, 2005

World Water Day – March 22, 2005

Persian New Year – March 20, 2005

St. Patrick's Day – March 17, 2005

International Women's Day – March 8, 2005

Valentine's Day – February 14, 2005

Chinese New Year – February 9, 2005

New Years – January 1, 2005

2004

Holiday Doodle – December, 2004

Thanksgiving – November 25, 2004

U.S. Presidential Election – November 2, 2004

Halloween – October 31, 2004

Space Ship One – October 4, 2004

Google's 6th Birthday – September, 2004

Ray Charles' Birthday – September 23, 2004

Summer Olympic Games Doodle, Athens – August, 2004

4th of July – July 4, 2004

Father's Day – June 20, 2004

James Joyce Bloomsday – June 16, 2004

Venus Transit – June 8, 2004

Mother's Day – May 9, 2004

Earth Day – April 22, 2004

Persian New Year – March 20, 2004

St. Patrick's Day – March 17, 2004

Leap Year – February 29, 2004

Valentine's Day – February 14, 2004

Gaston Julia's Birthday – February 3, 2004

Chinese New Year – January 22, 2004

Spirit on Mars – January 15, 2004

New Years – January 1, 2004

2003

Holiday Doodle – December, 2003

100th Anniversary of Flight – December 17, 2003

Thanksgiving – November 27, 2003

Halloween – October 31, 2003

Google's 5th Birthday – September, 2003

Alfred Hitchcock's Birthday – August 13, 2003

4th of July – July 4, 2003

MC Escher's Birthday – June 16, 2003

Father's Day – June 15, 2003

Mother's Day – May 11, 2003

50th Anniversary of Understanding DNA – April 25, 2003

Earth Day – April 22, 2003

Einstein's Birthday – March 14, 2003

Michelangelo's Birthday – March 6, 2003

Valentine's Day – February 14, 2003

Chinese New Year – February 1, 2003

Martin Luther King Day – January 20, 2003

New Years – January 1, 2003

2002

Holiday Doodle – December, 2002

Thanksgiving – November 28, 2002

Halloween – October 31, 2002

Pablo Picasso's Birthday – October 25, 2002

Google's 4th Birthday – September, 2002

Andy Warhol's Birthday – August 6, 2002

Bastille Day, France – July 14, 2002

4th of July – July 4, 2002

Canada Day – July 1, 2002

La FÃate de la Musique, France – June 21, 2002

Father's Day – June 16, 2002

Dragon Boat Festival, China – June 15, 2002

World Cup – May 31, 2002

Dilbert Google Doodle – May 20, 2002

Mother's Day – May 12, 2002

Children's Day, Japan – May 5, 2002

St. George's Day, UK – April 23, 2002

Earth Day – April 22, 2002

April Fool's Day – April 1, 2002

St. Patrick's Day – March 17, 2002

Piet Mondrian's Birthday – March 7, 2002

Winter Olympic Games Doodle, Salt Lake City – February, 2002

New Years – January 1, 2002

2001

Holiday Doodle – December, 2001

Nobel Prize Centennial Award Ceremony – December 10, 2001

Thanksgiving – November 22, 2001

Claude Monet's Birthday – November 14, 2001

Halloween – October 31, 2001

Korean Liberation Day – August 15, 2001

Swiss National Day – August 1, 2001

Bastille Day – July 14, 2001

4th of July – July 4, 2001

Canada Day – July 1, 2001

Father's Day – June 17, 2001

Mother's Day – May 13, 2001

Earth Day – April 22, 2001

St. Patrick's Day – March 17, 2001

Indian Color Festival – March 9, 2001

Valentine's Day – February 14, 2001

Lunar New Year – January 24, 2001

New Years – January 1, 2001

2000

Holiday – December, 2000

Thanksgiving – November 23, 2000

Japanese Children's Holiday – November 15, 2000

U.S. Presidential Election – November 7, 2000

Halloween – October 31, 2000

Summer Olympic Games Doodle, Sydney – September, 2000

Bastille Day – July 14, 2000

4th of July Doodle – July 4, 2000

Father's Day – June 18, 2000

Mother's Day – May 14, 2000

1st Google Doodle – May, 2000

Easter – April 23, 2000

St. Patrick's Day – March 17, 2000

Valentine's Day – February 14, 2000

Groundhog's Day – February 2, 2000

New Years – January 1, 2000

1999

Holiday – December, 1999

Thanksgiving – November 25, 1999

Halloween – October 31, 1999

1998

Thanksgiving – November 26, 1998

Burning Man Festival – 1998

Google U.S. Government Search – 1998

Google Beta – 1998

What Do You Think?

What do you think is the best Google logo? Did I leave out one of your favorite logos? Please leave a comment, I would love to hear your thoughts!

Related posts:

1. Web Design Community News
2. HTML5 & CSS3 Development Talks

Present Information and Media in a Recognizable Manner

Provide Text Alternatives – Any images, videos, or non-text based media presented to the user must have a text alternative or accompanying text.

Make Content Adaptable – Today information is spread across a wide spectrum including computers, mobile devices, and so forth. Make sure your content is adaptable to all of these spectrums without losing information or composition.

Make Content Distinguishable – Your content should be recognizable to users and provided in a way that makes it easier for them to see and hear. The best way to accomplish this is by using color (more importantly contrast), size, and other stylizing elements. For any audio, video, or active media make sure to provide controls to start and stop the media.

Present an Operational Interface and Navigation

Use Keyboard Shortcuts – Many users prefer not to use a mouse, in which case they browse the web using their keyboard. Allow your website to fully function from a keyboard and provide shortcuts where possible.

Give Users Time – If you are using any videos or animations on your website that contain text or comprehensible parts give users enough time to read or take in these elements. Moving too fast will frustrate users and in retaliation they will leave your website.

Do Not Use Annoying Media – Anything that blinks, flashes, or may produce anxiety will frustrate users. General rule, anything that blinks or flashes more than 3 times a second can be considered annoying.

Provide Multiple Ways to Navigate – Give users complete control of your website by allowing them to navigate located information and direct where they are at all times. To do so provide users with internal links, titles and headings, breadcrumb navigation, search features, and other navigation components.

Present Information and Media in an Understandable Manner

Use Readable Text – Make your text readable and understandable by using correct grammar and pronunciation. Present your content in a manner that would be understandable to a third grader.

Be Predictable – The layout and design of your website should be consistent throughout and the way information is presented should be predictable by users. The easier it is to access information the better.

Provide Assistance – Help users stay away from any potential errors and fix any mistakes that they may have made. Do so by providing tool tips, automatic spell checking, and providing descriptive error messages when feasible.

Related posts:

1. Website Form Design
2. Designing A Non-Profit Website
3. Home Page Design