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

CSS3 is a hot topic these days. Designers and developers are starting to widely utilize CSS3 and new tutorials are popping up nearly everyday. As a designer it is an exciting time to be at the forefront of it’s development. There are, however, many designers and developers that see browser support for CSS3 as insufficient. In their defense, not all clients are open to letting their websites look moderately different from browser to browser.

Thankfully Faruk Ateş, Paul Irish and Alex Sexton have developed a script, Modernizr, that detects CSS3, as well as HTML5, browser support and allows us to take advantage of CSS3 in compatible browsers while providing alternative fallbacks to incompatible browsers. The script adds a unique class to the html element of a page specific to each CSS3 property supported. As an example, in browsers that support CSS3 border radius a class of borderradius will be added to the html element, while in browsers without support for CSS3 border radius a class of no-borderradius will be added to the html element. This opens up a world of opportunities, giving us just what we need to fully implement CSS3 without worrying about incompatible browsers.

Best viewed in Safari or Chrome.

Putting Modernizr and CSS3 to Use

I built the following sample navigation to demonstrate how Modernizr works with CSS3 and how to build out fallbacks for incompatible browsers. With the help of Modernizr, the benefits of this navigation include:

• 100% compatible with all browsers
• No images and no flash for modern browsers with CSS3 support
• One image for depreciated browsers without CSS3 support

The Code

Step 1: The HTML Structure

<!DOCTYPE HTML>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<title>CSS3 Navigation</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

<h1>Sample Navigation</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Services</a></li>
<li class="last"><a href="#">Contact Us</a></li>
</ul>

<script src="modernizr-1.7.min.js"></script>
</body>
</html>

The HTML here is pretty cut and dry. We have the basic structure of an HTML5 document, including a heading and an unordered list with a set of links. A few things to note here:

• The no-js class on the html element
• The last class on the last li element within the unordered list
• The Modernizr script included at the bottom of the document

Once we include the Modernizr script at the bottom of the document we need to set it into action with adding the no-js class to the html element. The last class on the last li element is in place for older browsers which do no support the :last-child pseudo-class.

Step 2: Adding General Styles to the Heading

h1 { 
color: #222;
font-size: 15px; 
line-height: 36px; 
margin: 0;
padding: 0 10px; }

Before we jump into the CSS3 and specific property support we declare the general styles for the heading.

Step 3: Declaring Heading Styles for Browsers with CSS3 Support

.cssgradients h1 { 
background: -moz-linear-gradient(#f5f5f5, #d9d9d9);
background: -webkit-gradient(linear, left top, left bottom,
	    from(#f5f5f5), to(#d9d9d9));
border: 1px solid #bbb;
-moz-border-radius: 4px 4px 0 0; 
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-moz-box-shadow: inset 0 1px 0 #fff; 
-webkit-box-shadow: inset 0 1px 0 #fff;
box-shadow: inset 0 1px 0 #fff;
height: 34px;
width: 198px; }

First up we use the Modernizr class of cssgradients to target browsers who specifically support this CSS3 property. Equally, we could use a borderradius or boxshadow class since we will be using these properties as well. We will be using CSS3 gradients later on so we will choose the cssgradients class to keep everything consistent.

Within this CSS3 please note that we are using the old WebKit gradient syntax. The new WebKit gradient syntax will mirror that of the Mozilla syntax however at the time of publish the new syntax is only viewable within the WebKit Nightly builds.

Step 4: Declaring Heading Styles for Browsers without CSS3 Support

.no-cssgradients h1 { 
background: url("bg.png") 0 0 no-repeat;
height: 36px;
width: 200px; }

To target browsers without CSS3 gradient support we use the no-cssgradients class. In place of all of the CSS3 declarations we used before we now use a background image instead.

Step 5: Adding General Styles to the Unordered List and Links

ul { 
list-style: none;
margin: 0;
padding: 0;
width: 220px; }

a {
border: 1px solid #bbb; 
border-bottom: 1px solid #ccc;
border-width: 0 1px 1px 1px;
color: #3690cf;
display: block; 
font-weight: bold; 
line-height: 30px; 
padding: 0 10px; 
text-decoration: none;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out; }

a:hover {
background: #fff;
color: #222;
padding: 0 10px 0 18px; }

As with our heading before, we will declare all of the general styles for the unordered list and links. These styles apply to all browsers and are unspecific to browsers with or witout CSS3 support.

Within the a element CSS rule set we use the CSS3 transition property. This property will be ignored by browsers that do not support it however using it here will prevent us from having to use another CSS rule set specific for CSS3 links. Additionally it is worth noting that the transition value is set to all, which will transition all of our priorities including color, background-color, padding, opacity, and more.

Step 6: Declaring Unordered List and Link Styles for Browsers with CSS3 Support

.cssgradients li {
background: -moz-linear-gradient(#fff, #f2f5f5);
background: -webkit-gradient(linear, left top, left bottom,
	    from(#fff), to(#f2f5f5));
position: relative; }

.cssgradients a:before {
border-bottom: 4px solid transparent;
border-left: 4px solid #666;
border-top: 4px solid transparent;
content: "";
display: block;
height: 0;
left: 10px;
opacity: 0;
position: absolute;
top: 11px;
width: 0; }

.cssgradients a:hover::before {
opacity: 1; }

.cssgradients li:last-child a {
border: 1px solid #bbb;
border-width: 0 1px 1px 1px;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px; }

Keeping in pace with our cssgradients class for CSS3 support we declare all of our styles for the unordered list and links. Here we kick things up a bit with different pseudo classes and elements, along with a combining the :before pseudo-element with the :hover pseudo-class.

We start this block of code by declaring our styles for the li element, including a CSS3 gradient and a position of relative. You may wonder why we are declaring a gradient background on the li element and not the a element. The reason for this is because CSS3 background gradients are seen as background images and we are currently unable to transition a background image within CSS3. What we have done is declared a background gradient on the li element and then declared a solid background color to the a element upon hover. This way the a elements background will transition on top of the li elements background gradient giving the impression that the gradient is smoothly transitioning into a solid white. The relative position on the li element is necessary to properly position our arrow, which we will build next with all CSS.

We use the :before pseudo-element to attach the arrow to the beginning of all of the links. Building the arrow using CSS borders is not too difficult and is actually pretty fascinating. We do set an opacity of 0 to the arrow to hide it until hovered upon. We then combine the :before pseudo-element with the :hover pseudo-class to display arrow when a link is hovered over by setting the opacity to 1. Right now we could technically combine the two rule sets into one under the .cssgradients a:hover::before selector and omit the opacity property altogether since the transition property does not yet apply contents of the :before pseudo-element. However we have left them separate because transition support for the :before pseudo-element is coming and when available the opacity property will provide the perfect transition.

Lastly, we use the :last-child pseudo-class to select the last li element and round the bottom corners and change the border.

Step 7: Declaring Unordered List and Link Styles for Browsers without CSS3 Support

.no-cssgradients a {
background: url("bg.png") 0 -36px no-repeat;
height: 30px; }

.no-cssgradients a:hover {
background: url("bg.png") 0 -66px no-repeat; }

.no-cssgradients li.last a {
background: url("bg.png") 0 -96px no-repeat;
border: none;
height: 31px; }

.no-cssgradients li.last a:hover {
background: url("bg.png") 0 -127px no-repeat; }

Finally to wrap everything up, and to provide a fallback for browsers without CSS3 support, we use the no-cssgradients class. Using this class we use a background image fallback for the CSS3 gradients, border radius, and pseudo classes and elements.

Wrapping Up

Best viewed in Safari or Chrome.

Hopefully this short tutorial has opened you up on how to use CSS3 while still providing support for older browsers. Modernizr is a fantastic tool and can be used far wider than what has been outlined here.

Related posts:

1. CSS3 Animated Owl Tutorial
2. HTML5 & CSS3 Development Talks
3. Hyperlink CSS Attribute Selectors

Recently I had the chance to ask Chris Coyier some quick questions, get his take on a few things within the web design industry, and see what he has been up to lately. Chris, as you may already know, is an extremely talented man who wears a number of different hats and has his hands in many different projects. Perhaps most notably, Chris is the curator behind one of the most well known web design communities CSS-Tricks. It was a pleasure to get to speak with Chris and I thank him for opportunity.

The Quick Six

Shay: You are a very talented man. You are able to design and develop websites while also having a strong understanding of how to do so. A lot of your articles lean more on development side, whether it be CSS, JavaScript, or so forth. Do you prefer development over design at all? If so, is there any special reason as to why?

Chris: I actually don’t consider myself much of a developer. I guess it depends on how you view and define that term. CSS is a purely front end technology. Ninety percent of what I do with JavaScript is front-end related as well. I think of those technologies as design tools as they deal with how websites look and how users interact with them. As a designer, I think it’s my responsibility to know those technologies as well as I can. “Developers” I consider server-side people dealing literally with servers and making websites store and serve up information. I am very limited in my developer skills.

I do tend to be a web-tech-minded designer though. I like working in Photoshop, but just as much I like getting into the HTML/CSS/JavaScript and making things happen with the “final product.”

Shay: Your a big fan of WordPress, and have even written a book on it. Have you ever thought about releasing any WordPress themes? Perhaps selling them?

Chris: Between me and Jeff Starr, my co-author on Digging Into WordPress, we’ve done a number of themes at the Theme Clubhouse. Most of them are free, a few come with the book. None of them are super duper complex or amazingly designed. They all have some sort of niche purpose. I could see possibly doing more themes in the future, but honestly, I generally prefer working on projects that have some specific purpose beyond “this is a cool looking theme.” If I ever did spend a bunch of time on a new theme intended for public use, it’s hard to say if it would be a freebie or for sale. There is a lot of benefit to either way!

Shay: You recently left your day job to venture out on your own. Shortly after you were hired by Wufoo, a company you have grown quite fond of over the years. What has the process been like, heading out on your own and then being offered a job you could not refuse? What is your position over at Wufoo, is anything in particular that you will be doing?

Chris: Wufoo has been great. It’s a real honor to get to work for a company like this. When I did decide to leave my last job, it was in knowing that I needed a change and that I had the luxury of just doing nothing for a while if I wanted to. The only thing that was going to break that plan was a job offer that was really perfect for me. I turned down some pretty dream-level jobs just because they weren’t a good match for what I wanted my life to be like. Wufoo is a perfect match for me in that the job matches my life and that the product is one that I love.

My job title at Wufoo is Lead Hucklebucker. We basically have joke titles because what is in title anyway? We all work to improve the Wufoo application itself, improve awareness of the Wufoo, and to improve the experience and community of Wufoo. Specifically, lately I’ve been working on some industry-specific landing pages, rethinking our forums, our API contest (August 2010), and researching HTML5 forms.

Shay: You have built quite a few web apps over time, one being Are My Sites Up? Do these ideas stem from some of your basic needs or are they something you generally feel would be useful? If needed, how do you go about finding the right help to build out the app?

Chris: It’s a combination of building something that will be useful and that has a decent chance of “making it” because there is enough of a market for it that you can charge for it and make money. I would never want to be working on something that I didn’t personally find useful, but there are things that you personally would find useful but have no chance in the market. In the case of Are My Sites Up?, I was working at a design agency at the time and we would promise our clients that we would monitor their websites. I thought the world could really use a super simple service for that. I have a friend who is really into building apps and was down with the idea. We both thought there was room in the market for this (we actually had no idea how many competitors there were until we were out the door with it). I’m no longer involved with AMSU (just got too busy, needed to cut some things), but there was absolutely room in the market for it and it did pretty well.

I’ve fortunately never been in the position where I had a great idea but nowhere to turn to get it built. My ideas usually stem from things I already know how to do myself or that I currently have people around me who I know can do it. A friend of mine once had an idea to build a site where it would analyze a picture of your face and tell you what celebrities you look like. I basically shrugged it off because even though I thought it was kind of a fun idea, I know that I don’t have those kind of skills or know anybody who does.

Shay: One of the best resources for us web designs and developers are books thanks to some tremendous authors, yourself included. Do you have any favorite web design and development books you would recommend? How about any books unrelated to web design and development?

Chris: If you are into learning straight up CSS, CSS Mastery and Handcrafted CSS are the ones you want. If you are starting with jQuery get Learning jQuery, let that sink in about 6 months, then do a comprehensive review with jQuery Enlightenment. If you are just interested in design theory, I think you should go to college and get a degree in Art! You have to learn design by designing a lot of stuff, you can’t learn that in a book.

Shay: You have your time wrapped in quite a few different websites and projects. Outside of work, what do you enjoy doing? Any particular activities that help keep you refreshed and relaxed?

Chris: I love playing music. I can play a variety of acoustic instruments and I’m finally at the point where doing that is relaxing instead of frustrating (as it is when you are just starting to learn and can’t do much). Otherwise I like a lot of normal people things like live music, good TV, good movies, sporting events, good food, etc.

Related posts:

1. 10 Quick E-Commerce Tips
2. Hyperlink CSS Attribute Selectors
3. 6 Visual Optimization Mistakes

Where to Submit Your Web Design and Development News

One of the most popular lines from the 1989 film Field of Dreams is “If you build it, he will come.” A great quote from an excellent movie. Sadly, this quote does not hold true to that of web design. Building a website will not get you visitors and writing in a blog will not get you readers. You must advertise and promote your website accordingly. Today, with the help of social media, gaining publicity has become increasingly easier. There are however many outlets that are often quickly overlooked. One of these outlets being user submitted community news.

User submitted community news is one of the hidden gems within the web design and development community. Websites featuring community news allow users to submit their content and then have that content linked to if determined appropriate. In doing so, users are able to build links to their content and get it out in front of a larger audience that they would have not been able to reach otherwise. As a return, websites offering community news will continue to get traffic from users submitting their own content as well as from users looking for the latest and greatest articles.

Getting your content accepted on community news websites is neither easy nor guaranteed. Your content has to be original, of high quality, and beneficial to readers in order to be accepted. It is hard work and can take time before you see any results. When your content is accepted, however, the results can be significant. The exposure and boost in traffic will prove to be well worth the effort.

Non-Account Based

The following is a list of websites that offer web design and development user submitted community news without the need of an account. Simply enough, all you need to do to submit your content is complete a quick and easy contact form. The websites are listed in order of page rank (highest to lowest) as well as alphabetized.

Last updated April 14, 2010

Account Based

The following is a list of websites that require an account in order to submit your content. Many of these websites also cover a large variety of topics rather than strictly web design and development related news. While the range of topics may be larger than you would prefer the out reach and pay off can often be larger as well. As with the non-account based list, these websites are listed in order of page rank (highest to lowest) as well as alphabetized.

Last updated April 14, 2010

Download Bookmarks

Download all of the websites, both non-account and account based, listed above in one simple HTML bookmark file. The bookmarks may then be imported into your web browser of choice.

(Right/Control Click Save As)

Was Any Website Missed?

There are dozens upon dozens of websites featuring community news, did you notice any that were left out? Particularly, was any website specific to web design and development left out? Please leave your contributions in the comments below.

Related posts:

1. Checkout Process Design
2. Website Form Design
3. Web Design 101 – The Basics

Document Links Styled with CSS Attribute Selectors

With CSS3 gaining popularity so are CSS attribute selectors. CSS attribute selectors have been around for some time however CSS3 adds more selectors to the mix bringing new light to subject. Increased browser support, with nearly every major browser currently supporting attribute selectors (Internet Explorer 6 still struggles), has also added to the popularity.

So what benefit do CSS attribute selectors have to adding style to document links? CSS attribute selectors allow you to quickly and easily add styles to document links while keeping your code clean and clutter free. Ultimately, the more attractive looking your links are the more clicks they will receive.

PDF Hyperlink Example

HTML Code

<a href="#.pdf" title="PDF File Link">PDF File</a>

CSS Code

a[href$=".pdf"] {
	background: url(acrobat.gif) no-repeat left center;
	padding-left: 20px;
}

Output

PDF File

Breaking Down the Attribute Selector

You start your CSS just as if your were to style any other hyperlink. Directly following the a element comes the attribute selector, in this case [href$=".pdf"]. The attribute selector will always be wrapped in [] brackets and will always sit right next to the element to which it applies to without any spaces in-between the two.

Within the [] brackets the href attribute is declared as we are specifically targeting hyperlinks. Next we insert the $= selector, which specifies that we only want to target hyperlinks ending with the file format value to follow. For this example we are using a PDF document making the value .pdf, which is wrapped in "" quotations.

To target any other type of document just change the value to what ever file extension you wish. As an example, to target Microsoft Word documents just change the .pdf value to .doc.

Taking It a Step Further

Chris Coyier from CSS-Tricks has put together and outstanding resource on CSS attribute selectors in his article “The Skinny on CSS Attribute Selectors”. To learn the full potential of CSS attribute selectors this article is a must read as it does a great job of breaking them down for you.

If you are worried about the lack of support for Internet Explorer 6 you can, with a some additional work, use CSS attribute selectors via jQuery. Zac Gordon has written a great tutorial, “Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery”, on how to do so.

Adding an icon to your document links is a great way to quickly draw more attention to the link. InstantShift has put together an article packed full of icons. If you would like some to use on your website check out the article at “75 Free Useful Icon Sets for Web Designers and Developers”.

Related posts:

1. CSS3 Support with Modernizr
2. 6 Visual Optimization Mistakes
3. Top 10 Keyword Research Tips

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

Smashing Magazine is one of the largest web design and development blogs online. They publish high quality content on a regular basis and are often seen as one of the most reliable sources within the industry. When they started kicking around the idea of creating a book the community widely encouraged it. After much talk the idea of creating a book, The Smashing Book, became a reality and Smashing Magazine went to work. To say that it was a difficult process for Smashing Magazine would be an understatement. As with every project they had their fair amount of roadblocks and then some. Regardless of what was put in from of them Smashing Magazine managed to release a book filled with excellent content written by none other than their own community.

Each chapter is written by a different author or authors, of which has appeared on Smashing Magazine before. Perhaps they have written an article for the blog before or maybe they have appeared within the articles themselves. The authors of the book are well established within the community and are experts in their line of work. Each chapter is well crafted to the personal style of the author(s) and is packed with valued content. Let’s start from the beginning, shall we.

In Review

Opening/Preface

The preface to The Smashing Book was very short and there was no introduction chapter disclaiming who the book is or is not for. The book does not waste anytime and quickly gets right to the content. I loved the fact that I did not have to wade through a chapter with an unnecessary introduction. Perfect!

Chapter 1 – User Interface Design in Modern Web Applications by Dmitry Fadeyev

The first chapter, User Interface Design in Modern Web Applications, written by Dmitry Fadeyev was a great opening to the book. Dmitry starts out by giving us an overview of the building blocks of visual interface design and how they relate to developing a quality application. In doing so, he covers things such as layout and positioning, size and shape, as well as color, contrast, and texture. Moving from building blocks into the practical techniques Dmitry discusses how different elements of a user interface can play a large part in the success of a web application. A few of the design techniques he mentions include whitespace, rounded corners, color, shadows, and more. He also touches on other elements outside of design including using verbs as field labels, auto focusing inputs, using help messages, and so forth. I won’t give all of Dmitry’s techniques away as this is definitely a chapter worth your while.

“Even if someone uses an interface for the first time, certain elements can still be familiar.” Excerpt from Chapter 1

Chapter 2 – The Art and Science of CSS-Layouts by Jacob Gube and Kayla Knight

Jacob Gube and Kayla Knight tackle The Art and Science of CSS-Layouts in the second chapter of the book. They explain the differences between fixed-width, fluid, elastic, and hybrid CSS-layouts. The chapter gives a detailed explanation of each layout type along with the pros and cons behind each. Their explanations include the basic principles behind each layout type as well as where each layout type is most commonly suitable. Apart from the solid explanations the chapter also provides a few CSS examples to get you started. Some people may argue against different types of CSS-layouts but after giving this chapter a read I believe you may be more open minded to giving other layout types a try.

“The question of optimal layout doesn’t have a single answer. Depending on the context, the time constraints and designer’s skills, each layout type has its purpose.” Excerpt from Chapter 2

Chapter 3 – Web Typography: Rules, Guidelines, and Common Mistakes by Alessandro Cattaneo, Yves Peters and Jon Tan

Web typography has been a hot topic as of lately, so it is no surprise that the third chapter, Web Typography: Rules, Guidelines, and Common Mistakes, was a massive one. I understand the idea of covering a different aspect of web design and development in each chapter, but I feel like this chapter could have been split into two as it is nearly twice as big as all of the other chapters. That being said the content of this chapter was superb.

When it comes to web typography there is a lot to talk about and Alessandro Cattaneo, Yves Peters and Jon Tan leave no stone unturned. They discuss different elements of typography such as legibility, readability, measure, tracking, and leading, as well as giving us an overview of all of the different typography terms and what they actually mean. Beyond this they also talk about the different techniques used within typography to really add value to the content. They do so by talking about font sizes, white space, building a grid, vertical rhythm, hierarchy, typesetting, paying attention to details, and so forth. It is obvious the authors of this chapter know what they are talking about and whether you are a seasoned typographer or a beginner there is something to learn from within this chapter.

“In its essence, typography is a powerful medium that allows for precise, effective communication. On the Web, typography can be used to enhance content, turning lifeless chunks of data into vivid, elegant conversations.” Excerpt from Chapter 3

Chapter 4 – Usability Principles for Modern Websites by Andrew Maier and David Leggett

Chapter four, Usability Principles for Modern Websites, comes from some of the good folks over at UX Booth, Andrew Maier and David Leggett. Really breaking down the core elements for usability within modern websites is a challenge. Doing it within one chapter is an even bigger challenge, kudos to Andrew and David for pulling it off successfully. The chapter covers everything from how users think to how important user testing is. Along the way you learn about some of the core usability rules and principles including putting content first, honoring standard usability conventions, and how to really plan out and design your interface. This chapter is jammed packed with information, worthy of a second read to pick up on things missed the first time around.

“Creating a great user experience takes a little bit of skill, a little bit of luck and a lot of detailed work.” Excerpt from Chapter 4

Chapter 5 – The Ultimate Guide to Fantastic Color Usage in Web Design, Usability, and Experience by Darius A Monsef IV

Color just may be the most under rated element when it comes to web design. All too often designers are given a logo and from that they pick a few complimentary colors and run with it. Darius A Monsef IV explains how to pick great colors in chapter five, The Ultimate Guide to Fantastic Color Usage in Web Design, Usability, and Experience. Darius give us the basics on color theory and explains the different color models commonly used today. From there he quickly moves on to providing fantastic examples of different color schemes and palettes used within modern websites today. The examples are amazing and it is obvious that quite a bit of time went into finding the examples. Furthermore, Darius finished the chapter by explaining how different colors can relate to usability, engagement, and experience. It is difficult to say, but this chapter just might be my favorite.

“Even when your website has a lot of colors, you can draw users to a certain element by giving that element a color unique to the page.” Excerpt from Chapter 5

Chapter 6 – Performance Optimization for Websites by Rene Schmidt

Rene Schmidt does a great job explaining helpful ways in which we can optimize the performance of our websites in chapter six, Performance Optimization for Websites. The chapter starts by laying out a few simple suggestions that almost any web designer and developer could implement. A few of these suggestions include paying attention to your file and image sizes, using CSS sprites, potentially using a content delivery network, using only external CSS and JavaScript (no inline styling or scripting), validating your pages, and so forth. After this Rene gets into the more technical side of performance optimization providing ways to tweak and speed up your server by directly modifying the server. This part of the chapter is not applicable to everyone, however it is very informational. The best part about this chapter is that after each tip or suggestion given Rene highlights exactly why it is helpful and why you should take it into consideration.

“Slow and unresponsive web sites are annoying. And if your website is annoying, your visitors are unlikely to buy goods or contact you.” Excerpt from Chapter 6

Chapter 7 – Design to Sell: Increasing Conversion Rates by Dmitry Fadeyev

Dmitry Fadeyev, whom also wrote the first chapter, tackles how to increase your conversion rates online in chapter seven, Design to Sell: Increasing Conversion Rates. Dmitry talks about the 4 principles needed to increase conversions, attention, interest, desire, action, or AIDA for short. In doing so he outlines quite a few recommendations including really showing the product (possibly using video to do so) to users, provide users with comprehensible lists, give back to users who convert, add testimonials and product recommendations, always provide the next requested action, drive demand with limited time offers, promote money back guarantees, provide shipping cost, and most importantly make your interface instinctual and easy to use. Dmitry does a great job explaining his recommendations and the benefits behind them, making this chapter especially educational.

“You need to break down the barriers that customers will put up when evaluating how valuable your product is to them.” Excerpt from Chapter 7

Chapter 8 – How to Turn a Site into a Remarkable Brand by Chris Spooner

Inside chapter eight, How to Turn a Site into a Remarkable Brand, Chris Spooner gives readers 5 guidelines or tips on how to make your website memorable and your brand stand out. The first guideline covered is to produce a unique design by using stunning visuals and breaking the mold while still following universal design principles. The next guideline is based on producing quality content that is not only interesting, but useful as well. The third guideline focuses on exploring new concepts, being unique, and making your brand entertaining. The fourth guideline is something we can all agree with, become part of the community. Last, Chris talks about building a buzz around your brand by advertising, creating link bait, and really getting inside people’s heads. Chris has created a solid brand for himself and within this chapter he does a great job of sharing how he built his brand, allowing us to learn from him.

“Building a remarkable brand takes constant and daily effort and attention. Be confident in your content, help others, spread the word and you’ll be on your way to a remarkable high-profile brand of your own.” Excerpt from Chapter 8

Chapter 9 – Learning from Experts: Interviews and Insights by Steven Snell

Chapter nine, Learning from Experts: Interviews and Insights, by Steven Snell is kind of an odd chapter, however very helpful. The chapter basically breaks down into a question and answer with some of the top designers and developers in the industry including Jason Santa Maria, Paul Boag, Andy Budd, Elliot Jay Stocks, Chris Coyier, Dave Shea, Nick La, and more. The questions are broken into 4 categories: Designing and Development, The Design Process, Self-Improvement and Skill Development, and Business and Freelancing. The questions and answers are both well thought out and descriptive. While this chapter is not the most exciting chapter in the book it is very interesting and a great way to bring together what has been talked about in all of the previous chapters.

“Web design is still relatively new when compared to the rest of the disciplines in the ‘big d’ design field.” Excerpt from Chapter 9

Chapter 10 – Behind the Curtains: The Smashing Magazine Story

The final chapter, Behind the Curtains: The Smashing Magazine Story, is an excellent way to close the book. For those strictly reading the book to learn about web design and development this chapter probably is not for you, but those who are genuinely interested in Smashing Magazine and would like to learn about them this is the time. This chapter covers it all including how Smashing Magazine started, exactly how they got to be as successful as they are and how they stay successful, as well as what happens behind the scenes. Last, Smashing Magazine thanks everyone within the web design community, stating if it was not for us they would not be where they are today. I would personally like to say the same. I would not be where I am today if it was not for the help of Smashing Magazine, thank you Smashing Magazine.

“Our job is not only to contribute to the design community but to help maintain this fertile environment in which ideas are born, insights are exchanged and discussions take place, making the lives of designers and developers easier and richer.” Excerpt from Chapter 10

9 Stars Out of 10

The content of the book is next to none. All of the chapters are greatly detailed and well written. I cannot say enough about the authors and content of the book. My problem with the book is the amount of time it took to release as well as the physical quality of the book. I pre-ordered the book on August 5, 2009 and did not receive it until January 2, 2010, almost five months later. Smashing Magazine has been admirably honest and admits they had numerous setbacks while publishing the book. I also recognize that I did pre-order the book, at which time the release date was not set.

As for the physical quality of the book, the binding on the book fell apart. During the course of reading the book the binding began to split and pages started to fall out. Luckily, Smashing Magazine has recognized the bad binding and have stopped shipping this version of the book. They have fixed the binding and are now strictly shipping the second, fixed binding, edition of the book. Smashing Magazine was nice enough to send me a copy of the new edition of the book upon hearing my troubles.

In all, the book is outstanding and I highly recommend picking it up! It does not matter if you’re a veteran designer or new to the scene, you can definitely benefit from purchasing this book. Thank you Smashing Magazine for yet another satisfying experience.

You may view the all of the links and resources included within the book over at Smashing Magazines list of links.

Related posts:

1. Universal Website Usability Rules
2. Defining A Multivariate Test
3. Web Design 101 – The Basics

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