Here is an example list of the various ways a person can subscribe to your site’s posts.

• Email Subscription: Readers sign up for an email notification when new content is published on the website.
• Follow: There are many times of follows, adding the site’s activity to your social media stream. WordPress.com offers Follows with the option to get email notifications as well as the site streamed in your Blog Follows stream.
• Feeds: Feeds are the syndicated and distributable version of your content. People use feed readers to keep up with the latest activity on their favorite sites.

A subscription is different from a share. Sharing is a one-time event. The shared article information is not an act of subscribing to or adding the site to your social web stream of information. A subscription is not just support but a choice by the reader to keep up with that site’s activities.

Subscribers are your site’s fan club.

This tutorial will focus on the three types of subscriptions, email, follow, and feeds, to help you promote these subscription options on your WordPress site.

As you add subscription options to your site, check out what your site looks like through email notifications, follows, and feeds. When you design a WordPress Theme, it is important to design for all the ways a site will be viewed and accessed.

For example, the image to the right in this article is a screenshot of a post article on Mashable, a popular online magazine featuring tech news. The designer has incorporated social media sharing, sharing stats, and encouragement of social sharing and subscriptions into the design of the site title area. The little worm-like line to the right of the sharing icons is a trending chart. It shows the popularity of the article based upon the social sharing, showing you the possible creative options.

As you go through this tutorial, examine the traditional examples used to promote sharing and subscription options, but consider how to creatively incorporate sharing and subscriptions into the design of the WordPress Theme. If you are designing for the public with a WordPress Theme, remember that users will customize menus and widgetized areas with their own ideas on where and how to place these icons and links. Give them options but have fun with these as well.

Let’s go through each to look at how they work and some suggestions on how to feature them. At the bottom of the article is a short tutorial on how to create a Subscription Page to bring home all the site’s subscription options into one place.

Email Subscriptions

An email subscription is not a newsletter subscription. In WordPress, it is a subscription for a notification to automatically be sent to all subscribers when you publish a new post. Posts not Pages trigger an email notification, and only when the post is published not edited or updated.

There are a variety of email subscription WordPress Plugins such as the email subscription featured in the JetPack WordPress Plugin. These add a subscription option to your site’s design, typically in the header, sidebar, or footer areas. You may also create a subscription Page in WordPress with the registration form.

I will cover the specifics of creating a Subscription Page further on in this tutorial, however you may create a Page in WordPress specifically for email subscription registration and sign-ups in addition to a Subscribe Page.

To create a Page for email subscription registration only:

1. Go to Add > New Page.
2. Title the Page appropriate such as Subscribe by Email or Email Subscriptions.
3. Write an introduction explaining the purpose of the form, that by subscribing the user will get an email notification every time the site is updated.
4. If you are using WordPress.com, add the Blog Subscription Form shortcode: [blog_subscription_form] in the Editor. If using a WordPress Plugin, following the Plugin instructions for adding the email subscription form to the Page.
5. Save or Publish the Page and Preview it. Edit it as needed.

This creates an email subscription Page you can use to link to when promoting your email subscription.

To add an email subscription to a Widget-enabled area of your WordPress Theme:

1. Go to Appearance > Widgets.
2. Look for Follow Blog via Email and drag it to the sidebar.
3. Customize the form according to your needs.
4. Save the form.
5. Preview the form in your site’s front end view.
6. Edit as necessary.

Note that there are three views for the WordPress Email Subscription Widget. There is the view of someone not logged into your site or WordPress.com, the view of a logged in member, and the view of the Widget when the visitor is logged in and subscribed to the site. Depending upon the WordPress Plugin features, these may look different or the same, and may or may not be customizable.

Please note that WordPress.com confuses things by mixing up Follow and Email Subscription. They call email subscriptions Follow Blog via Email and Follow as Follow, then mixes the two up with different features. I’ve asked them to clarify this and hopefully an upcoming release of WordPress will do so.

Until then, when you Follow a WordPress.com site, that site will be listed on the Reader > Blogs I Follow web page within the global dashboard of WordPress.com. The latest updates from the blogs you follow come from their site feeds. If you would like email notification from these sites when they are updated, set your Manage Delivery Settings accordingly, turning your WordPress.com follows into email subscriptions.

Also note that currently WordPress.com members cannot change or remove subscribers to their sites. Their current policy is that if your site is public, email subscriptions and followers are free to register for notification when your site is updated. While WordPress.com takes step to prevent spammy subscriptions, they may still get in your list. For now, ignore them. There is nothing you can do to remove them and it does not hurt your site or SEO ranking.

If someone wishes to change their email notification settings and discontinue their subscription to your site, they will need to access their own Email Delivery Settings.

For more information on email subscription basics in WordPress.com, see:

• Email Subscriptions — Blog — WordPress.com
• Support — WordPress.com
• Following Blogs — Support — WordPress.com
• Follow Blog Widget — Support — WordPress.com
• WordPress.com Support – Manage Delivery Settings

Follow

There are many ways to Follow a site.

On Facebook, Twitter, and other social networking channels, a follow adds that user to your social stream so you may follow their updates and posts. You may add such follow opportunities on your own site. Remember, following is different from sharing. Sharing is a single action of helping to spread the word about a web page or topic. Following is a form of subscription, adding their publishing stream to yours to monitor.

Through the use of WordPress Plugins or the WordPress.com Publicize feature, when you publish a post on your site, Facebook, Twitter, LinkedIn, and other social media sites are automatically notified with an excerpt announcement of your post with a link to it. Your followers on those services will see the announcement in their stream and hopefully share it with others, thus encouraging others to subscribe to your social stream.

If you have a Facebook, Twitter, LinkedIn, Tumblr, or other social media account, you may add links to those accounts to encourage people to subscribe to them. These may be text links or links wrapped around social media icons and graphics within the design and layout of your site. You may add these in a Text Widget in the sidebar, footer, or other widgetized area of your WordPress Theme.

WordPress.com members can add WordPress.com sites to their Reader > Blogs I Follow web page within the global dashboard of WordPress.com. The latest updates from the blogs you follow come from WordPress.com site feeds the member has followed.

To add a WordPress.com Follow feature to your WordPress site (see email subscription section of this article for a graphic of this Widget):

1. Go to Appearance > Widgets.
2. Add the Follow Blog (not via email) Widget to the sidebar or other area of your site.
3. Customize it.
4. Save it.
5. Preview the front end of your site to see the Follow Widget.
6. Edit if necessary.

The WordPress.com Follow feature has the option to add an email notification from these sites when they are updated. Set your Manage Delivery Settings accordingly, turning your WordPress.com follows into email subscriptions.

Feed Subscriptions

Feeds are the contextual or text-like version of your website content. Wikipedia defines feeds as “a data format used for providing users with frequently updated content” available by subscription. Feeds are often referred to as RSS or aggregation but RSS (Really Simple Syndication) is one of several types of feeds which include Atom and other XML code formats.

The best way to think of a feed is that it is syndicated or distributed versions of your content. Your content is not restricted to viewing only on your site from within a web browser. The feed allows it to be viewed in feed readers (aka news readers), aggregators, web apps, and mobile apps – anywhere the user wishes to consume your content in a format of their choosing.

Popular feed readers included Google Reader until Google officially announced it would be closing the Google Reader service as of July 1, 2013. Alternatives include Feedly, The Old Reader, Pulse, TinyTinyRSS, Reeder (Mac/iPhone), NetNewsWire, NetVibes, Flipboard (mobile), Google Currents (mobile), Zite (Mobile), Rolio, FeedReader, RSSOwl, GreatNews, Vienna, and Taptu (mobile). So far, Feedly is winning the race as most popular but Flipboard, Google Currents, Taptu, and other mobile-friendly, magazine style feed readers are gaining ground as we become more mobile in our information collection and monitoring.

Example of Feed Preview in web browser.

Example of site feed in Google Reader.

On WordPress, feeds are automatically generated. There is no need to promote them or add a third-party feed generator unless you have a specific reason and purpose. Fans may just add your basic site address to their feed reader and the feed will be automatically added.

If you wish to promote your site’s feeds, you may use the RSS Links Widget (not RSS Widget) and add it to your sidebar or other widgetized area on your site.

You may also wish to create your own feed logo or icon, designing it to fit into the site’s design. Many professionally designed sites feature customized graphics representing the various feed and subscription options. The HTML with the images and links around them may be added easily to the Text Widget and placed in the sidebar or footer area, or even added to the navigation menu.

WordPress Feeds

By default, WordPress includes feeds. Rarely is a third-party feed package necessary, though some use them to more accurate monitor subscriptions and feed access stats.

The default WordPress feeds (for WordPress.com and the self-hosted or managed version of WordPress) are:

• Posts (site wide) http://example.wordpress.com/feed/
• Comments (site wide) http://example.wordpress.com/comments/feed/
• Per Post Comments http://example.wordpress.com/2012/01/17/post-title/feed/
• Category http://example.wordpress.com/category/category-name/feed/
• Tag http://example.wordpress.com/tag/tag-name/feed/
• Author http://example.wordpress.com/author/author-username/feed/ such as http://example.wordpress.com/author/lorelle/feed/

The pattern of the link followed by /feed/ at the end of the link is fairly obvious and consistent throughout all default WordPress feeds.

Site Wide Post Feeds are the most commonly used, updating a feed reader with the latest posts (not Pages) on your site.

Site Wide Comments are rarely used as they generate a feed for all the comments on all the posts (not Pages) on your site. Some people like to monitor all the activity on their site through their feed reader, a form of one-stop information monitoring, thus add this to their reader. I’ve heard from some government agency representatives that they use this to monitor a site’s overall activity when it is under suspicion of illegal or suspicious activity.

Per Post Comments are popular with feed reader fans as they can follow the activity on a post they are interested in or waiting for an answer to their question.

Category and tag feeds allow a user to follow a specific topic of interest on a site. The New York Times is a good example of this as they offer a full feed for a specific area of interest (think category) as well as feed from specific areas of interest within that category (think subcategories) to help readers keep up with the information they need and not everything else going on within the site.

Author feeds are a great way for fans of a specific author on a multiple-contributor site to keep up with the latest updates from them.

Using Feeds Within Your WordPress Site

Feeds may also be incorporated into your WordPress site in a variety of ways.

Feeds in the sidebar or footer areas of a site can be used to feature your other sites or related or favorite and recommended sites, giving your readers the chance to explore related content beyond your site.

Your site’s category feeds may be included in a Widget to promote the most recent articles within each category or a specific category you wish to promote, acting like a mini table of contents to your latest posts by category in the sidebar.

Incoming feeds may be added via the RSS Widget on WordPress.com and all WordPress sites. To do so:

• Go to Appearance > Widgets.
• Add the RSS Widget (not RSS Links) to the sidebar or other widgetized area.
• Customize it by setting the color of the RSS logo and other customization options.
• You may choose from all posts and all comments. If you choose both, chose the option to show text and images or text only as images only does not distinguish between the two feed types visually.
• Save the Widget.
• View the front end of your site to check placement. Edit if necessary.

Feeds can be embedded into posts and Pages with third-party programs only on self-hosted or managed versions of WordPress. While there some ways to incorporate feeds into WordPress.com posts and Pages, it is the official policy of WordPress.com and their WordPress.com Terms of Service that feed streams are not permitted on posts and Pages due to the tendency for abuse. They are restricted only to WordPress Widgets.

With Google Reader ending their reign on feed readers, and many feed readers using their API to maintain their own third-party news feed readers, it will be interesting to see the future of feeds, so stay tuned.

For more information on WordPress and feeds, see:

• Understanding, Using, and Customizing WordPress Blog Feeds
• WordPress Feeds « WordPress Codex
• Feeds — Support — WordPress.com
• What is My WordPress Feed URL? – Perishable Press
• WordPress Plugins for Feeds « Lorelle on WordPress
• Do You Need Permission to Use Feeds
• Don’t You Know What a Feed Is Yet? Get To Know Your Feeds!
• Blog Exercises: Feed Readers « Lorelle on WordPress
• Benefits and Uses of Website Feeds
• Adding RSS Feeds to WordPress
• Playing with WordPress.com New Sidebar Widgets
• One Year Anniversary Review: What are Feeds?

How to Create a Subscription Page

We’ve explored all the different ways to subscribe to your WordPress site. Many of these involve cluttering up your sidebar with subscription links and images. In addition or replacing these, you may wish to create a Subscribe Page for yourself or a client.

A Subscribe Page features all the various ways people can subscribe and follow your site, keeping updated with the latest posts. The Subscribe Page may be featured in your main navigation and in a “button” on the sidebar, a call to action to motivate people to click through and explore the site’s subscription options.

To create the Subscribe Page:

1. Go to Pages > Add New.
2. Title the Page “Subscribe” or “Subscriptions” if you have enough space within your menu.

Add links or forms to your follow and email subscription options.

If you have a separate newsletter you send out regular to announce activities, products, sales, news, and updates to your site, consider adding the sign-up form here as well.

Find your feeds and add them in a list to help readers subscribe to the feed option of their choice.

To find your various feeds, go through this article to help you find all the various subscription options and make a list of them in a text editor.

For example, the standard format for a category link is http://example.wordpress.com/category/category-name/feed/. Change the domain name to your site and set the category name to match your categories. Category names with more than one word have a hyphen (dash) between the words such as web-publishing-tips.

Put these in a list. Consider grouping the various options with headings and text to explain them such as your entire site feed in one section, all your category feeds in another, and your most popular site tag feeds in another list.

If you would like to put the orange RSS logo next to your feed links, create one or find one from the many RSS/Feed images on the web. Ensure the image you are using is not copyrighted and is available for public use. The orange rounded-corner square has been accepted as the standard image representing most feeds. You may use that or be more creative by changing the color or shape while still maintaining the look and feel of the intention of the graphic.

There are many feed icon image packs you can download and experiment with for free. Here are some common and standard example images that are royalty free for usage on your site.

To create a text link to the feed, use the following example.

<a href="http://example.com/category/wordpress-tips/feed/" 
title="Link to WordPress Tips Category Feed">
WordPress Tips Category Feed</a>

To include an image with the text such as in a list of links featuring your various feeds:

<a href="http://example.com/category/wordpress-tips/feed/" 
title="Link to WordPress Tips Category Feed">
<img src="http://example.com/uploads/2013/03/feed.gif" 
title="Feed Image" class="alignnone wp-smiley" />
WordPress Tips Category Feed</a>

To feature a feed graphic alone linking to your feeds, use the following code example:

<a href="http://example.com/category/wordpress-tips/feed/" 
title="Link to WordPress Tips Category Feed">
<img src="http://example.com/uploads/2013/03/feed.gif" 
title="Feed Image" class="alignnone wp-smiley" /></a>

If you copy the above code, please remove the line breaks so the code is all on one line.

Note that many WordPress Themes feature a border or margins around images which can distort images within text. To set the margins to zero with no border, use the wp-smiley CSS class which should be included in all WordPress Themes by default to allow smilies or emoticons to be used within the text and not distort the text. The Theme designer may have used something else so create a smiley in a post and preview it, checking the source code of the web page for the class used to style the smiley.

Experiment with the look and feel of your Subscribe Page. Add images and graphics to spice it up beyond just feed icons. Keep the look and feel clean and easy for the user to find the subscription option they prefer to access your site.

Links tie the web together, linking one site to another, one web page to another. They are critical to helping us find information and understand what is being written.

In “What You Must Know About Writing on the Web,” I describe a link dump:

Ugly is as ugly does. Don’t clutter up your site with ugly link dumps.

A link dump is when the blogger is lazy and just pastes the link into their post such as http://lorelleteaches.com/2012/10/14/what-you-must-know-about-writing-on-the-web/ instead of the properly formed What You Must Know About Writing on the Web.

Which is easier to read?

A properly formed link makes it not just easier to read the post, it is clean and presents professional looking content. It invites the reader to click.

To create a properly formed link, you may use the Visual Editor toolbar button called link or Hypertext Link, the proper name.

Type the words or phrases you wish to use as the link anchor text.

1. Select them.
2. Click the link button.
3. Paste in the address.
4. Type in the link description (title) which is required by web accessibility laws in most countries for commercial or public websites – it’s a good habit to learn.
5. Click OK to complete the steps.

The text should appear in a link.

In the HTML or Text Editor, you may use the same link button, or type it in manually.

The HTML link tag is called the Anchor and begins with an A.

<a href="http://lorelle.wordpress.com/" title="Lorelle on WordPress site covering WordPress and blogging.">Lorelle on WordPress</a> 

The “href” is the hypertext reference link followed by the link in quote marks.

The “title” is the title of the site. It may be the same as the anchor text or it might be different, as shown in the above example. If the anchor text is “great article on how to blog,” the title might be “How to Write Well on a Blog by Lorelle on WordPress.” It should be in a proper sentence format, starting with a capital letter and ending with a period, though that is not always required.

The anchor text in the above example is “Lorelle on WordPress” followed by the closing anchor HTML tag.

Types of Links

There are many types of links.

A traditional link is any link that connects the reader to an external site. This is also often called an external link or outgoing link.

A link to another web page on your site is called an internal link or intrasite link.

An incoming link is any link from another site to yours, however it is most commonly referred to as a link to the root domain address, the dot com, for example, often called the “front page” of the site.

A link to an external site directly to an article on that site will generate a trackback link and comment if both sites have trackbacks enabled. The link on your site is an external site, but the link in the comments of the referenced site is a trackback link. These are also known as referrer links as you are referring someone to another site.

An image link is a link wrapped around an image. Embed the image into your post or Page and wrap a link around it. Affiliate links are often used this way to turn an image into an advertisement.

An affiliate link is a link to an ad or a paid link. Many bloggers earn extra money by providing affiliate links to sponsors and advertisers.

A link list is a list of links. The list maybe set as a bullet or numbered list, or feature the content in a list format with explanations, reviews, and recommendations with the links, helping to educate the reader about the linked content. Some link lists feature the links wrapped around images such as the articles commonly found on Smashing Magazine. Many people create their top 10 list of links on a subject or their recently bookmarked or discovered web pages and resources.

A blogroll or link list is a list of links to external sites or resources. These were popular in the beginning of the web in blogrolls, sidebar lists of links. They are now out of fashion and not appreciated by search engines in SEO as they have been long abused. It is highly recommended that you create a resource list of links on a Page on your site, or write about each reference or resource individually on posts.

There are also many types of links specific to your site, using their description to designate the type of link rather than a unique form of link. These including author links, tag links, category links, title links, archive links, permalinks, comment links, etc.

Link Format Guidelines

Now that you are familiar with what a properly formed HTML link is, it’s time to go over some linking guidelines.

1. Do Not Click Here: The old days on the web, everything had to be explained. “Click here” was developed as an instruction to teach people where to click to access more information. It is no longer necessary, and when encountered, tends to appear condescending to the reader. Incorporate the links naturally into the text. If you must guide them, use “visit this site for more information” or “you may find more information about this here.”
2. Link to one or more words: It is highly recommended that you link to more than one word to give the reader more area to click through to the article. While it might be interesting to link to many articles with every word, it’s old fashioned, cumbersome for the blogger as well as the reader, so use it rarely and judiciously.
3. Links are Recommendations – Tell Readers Why: When you link to a site, you are recommending your readers leave your site to go elsewhere. This used to scare people, but the web is a strange business. In a regular store, if someone tells you to go away, you may leave and never come back. On the web, you tell people to go away and they not only go away happy, the often come back and bring their friends. Don’t just link without reason. Tell your readers why you recommend they leave your site for this new site, and they will trust you and come back for more.
4. Tell Them Where You Are Sending Them: Use words within the context of the article and in the Anchor Text of the link to let the reader know where you are sending them. If the link is to an external site, make sure they understand that clearly or add a reference such as with this example (external site). If the link is to a PDF or other type of file or downloadable file, add (PDF) or (text file), or some other text that indicates what the destination is for the link.
5. NEVER Force a Link to Open in a New Window: There was a myth going around that no one would come back to your site if you sent them away with a link. Or that people should click an external site link and force it to open in a new window or tab so the reader could keep reading. This has not only proven to not be true, it violates web standards for accessibility and many federal laws for doing so without warning. People now know how to use the back button and how to open links in tabs. Let them control their experience. If you must use this feature, warn the reader with (opens in new window) in the link.
6. Punctuation INSIDE the link: Quote marks are always outside of the punctuation and the link, as explained in “What You Must Know About Writing on the Web,” on Lorelle Teaches. Put periods at the end of sentences outside of the link.
7. Learn How to Cite Properly: Giving credit where credit is deserved is not just right, it’s proper manners. In “Copyright: How to Quote and Cite Sources” I go into details about how to use blockquotes and how to properly cite (link) to sources. Learn how to give credit to the brilliance of others, and you will be rewarded by the generation of a trackback, an invite for the referenced person to check out what you have to say.
8. Design Links for Readability: Links are to be designed to stand out from the text, be underlined, and not to interfere with the readability of the text. The underline is so strongly associated with links, if you underline text within an article, people will often click it. Designing for links does not mean you must underline the link in your design, but consider adding underline when the mouse hovers over the link to reinforce the concept of a link. Choose colors carefully so the link is visible but also easy to read.

Links change lives, I know by experience. The simple act of linking to someone’s site, specifically something they’ve published, sends your readers there to visit with your letter of recommendation. Link wisely and carefully. Honor the power of the link to connect the web as well as people together.

Here is a link list of resources and articles to help you learn more about how linking works, and how to link better.

• Linkability – Link Popularity
• The Power of the Link « Lorelle on WordPress
• The 10 HTML Tags You Must Know to Blog | Learning from Lorelle
• Copyright: How to Quote and Cite Sources
• Changing a Life With a Link – – Blog Herald
• When Your Comment Inspires Posts – Blog Herald
• Site Optimization: Checking Loose Links
• Tracing Your Blog Links
• Dear Blog Emperors: A Link Relevancy Test
• Feeds Change How You Write Links
• The Magic and Fun of Incoming Links
• The Agony of Link Hunting
• Why A Link Post Should Be Like Mingling at a Party
• Why You Want To Link To Other Blogs
• Why Writing a Link Post Should Be Like Planning a Party
• How Do You Find Relevant Blog Posts To Link Too?
• Why Writing a Link Post May Be Less Like Partying and More Like Work
• WordPress Tip: Writing Customized Post Headlines, Title Tags, And Permalinks
• The Dos and Don’ts of Blogging
• Caring About the Little Links on Your Blog
• WordPress Tips: Exploring the WordPress Text Widget (See sectons on adding links to sidebars)
• 7 Blogging Steps Even Veteran Bloggers Forget

The skills mentioned include persistence, ability to keep up with trends and changes in the fast pace of technology, testing to the extreme, and the understanding that this is a new and evolving industry and be ready for the shifting terrain in and around you.

I’d like to add two big skills missing from this list, without which makes the difference between a savvy developer and programmer and a mediocre one. It is the ability to pay attention to details and not make excuses.

It is always the details that bite you back. A missed semi-colon, a misnamed variable, a loop that doesn’t close right, validation errors, little simple things that should be a part of the testing environment but slip by.

I’ve seen many programmers and designers, including myself, blaming the software, the code, everyone else except the person who screwed up and missed the detail that caused the issue. Then the excuses start coming out. Not enough sleep, too much pressure, too many interruptions, trouble at home, traffic jam driving into work, family problems…the list is long and all of these can get in the way of your work.

When we let the excuses consume us, we negative the good work we’ve done. A lot of successes happened in the code before the mistake. Yet we spend a lot of energy on the excuses for that mistake instead of recognizing it as something fixable, a lesson learned or relearned, and move on.

We all have the same excuses. We’d all like them to go away so we could have a perfect working environment. They won’t go away so our ability to handle them must improve.

The first step is to acknowledge that we all have interference in our lives, so let them not interfere.

Let the Worries of Home Stay at Home, and the Worries of Work Stay at Work

Jews have a long standing tradition of the Mezuzah. It is a decorative prayer container on the door frame of homes and offices (and even individual rooms). When you step up to a door with the mezuzah, you pay it tribute and acknowledge the symbolism, each person and religious sect in their own way.

Discussing the mezuzah with a Rabi while I was living in Israel, he explained that part of the task of the mezuzah was to not just remind the person of the blessing upon the home or office, but to remind them that each is a scared space. Before entering the home, leave all the pain and suffering and worries of work outside so you bring yourself completely into your home with your family, giving them the attention and respect they deserve. Before entering the office, do the same, leaving all the worries of family outside, focusing completely on the work at hand which helps to provide for that family.

I liked that notion and began to practice it. When I find that my home life and work life are becoming disruptive to each other, I stop, reconsider, take a deep breath, and compartmentalize the worries of each. I separate what are my work worries that I’m bring home and disrupting my personal life with. I look at the issues in my personal life and notice how they are impacting my work. Understand that they are related and yet separated, I figure out what needs the most attention, give it, fix it, and get my brain back on focus, giving the work or my family the attention and respect they deserve without the distractions of the other.

So pay close attention to detail and don’t let the excuses get in your way. Be proud of your successes as well as your failures as they are both learning experiences.

I wish these were really jokes.

Clients From Hell from ClientsFromHell on Vimeo.

Hattip: Philip Dews

A website, or site, is a collection of web pages.

A site is designated by its domain name, the part of the address or URL that defines the site such as WordPress.com, WordPress.org, or lorelle.wordpress.com.

A web page is any page on the web, usually found within a website.

A web page’s address is an extension of the domain name such as example.com/article-title.

A blog is a site with content displayed in reverse chronological order.

These are the facts. A site can be a blog and a blog is a site.

However, there are the myths that we have to deal with.

The term “blog” has been used derisively as a description of a personal blog, one filled with personal and sometimes private “babbling and rattling,” as one newspaper described it.

Today, when people refer to their blog, they usually mean their own personal site. The content with it could be highly personal or very professional, showcasing their expertise.

As of 2010, WordPress and WordPressMU merged and the multi-site version became known as WordPress MS (multi-site). The user decides which one they wish to install during the installation.

With companies using WordPress MS for their corporate sites and intra-networks, calling every WordPress site a blog became impractical. The WordPress Codex, the online manual for WordPress Users, and all help and support documentation began a transition to change the word “blog” to “site,” fairly representing all types of possible uses for WordPress.

Next time the discussion comes up at a party or social event on the difference between a site and a blog, you’ll have the answer. A blog is a site with the content displayed in reverse chronological order.

When it comes to choosing colors for your website, it can be as easy as planning the colors to paint the rooms in your house. It begins with some color theory, then pull out your old color wheel and give it a spin. Right?

Well, it would if colors on the web were that easy.

In order to understand how colors work in web design, you need to know some important concepts.

• Web colors have three naming conventions.
• Web safe colors are colors that will work across the most common machines and access devices for web viewing and usage.
• Web accessibility influences colors based upon readability with tests for contrast and emotional response.
• Colors stimulate emotional and reactive responses, making it critical to understand the theory and psychology of color choices.

I’ve put together this summary of resources to support these and included many online free tools, color charts, color wheels, and more to help you learn more about how web colors work and how to choose colors for your web design or WordPress Theme.

Number Your Colors

Another thing you need to know about colors on the web is that there are different ways to present them in CSS.

Colors can be by the word: red, green, blue, aqua, pink, purple, white, black….

So you choose red for your background color. What color red do you want? The colors for these names are set by the browser. The red in Firefox might be slightly different than the red in Internet Explorer. If you are picky about your reds, you need to be picky about naming them so they present the exact color you desire.

By using Hexadecimal HTML color codes, you can narrow down that red to #990000, #ff0000, or #cc0000, among many others.

Hexadecimal HTML colors are a combination of the hashtag (pound) symbol and a six digital alphanumeric combination.

Today, RGB (Red Green Blue) colors are also accepted by most modern web browsers, giving an even more precise color choice. RBG is a process of mixing the three colors together to represent all the colors, like mixing paints together.

What does this all mean?

The hexadecimal method represents the three base colors, red, green, and blue based upon Greek and Latin representing a numbering system which uses 16 as the base, instead of 10, which is what decimal systems are based. The first two characters represent red, two for green, and two for blue. The highest value, white, is represented by #ffffff, a mix of all the colors. Black is the lowest, thus the “absence” of color, represented by #000000. As the letters go from aa to ff and the numbers from 00-99, the intensity of that red, green, and blue change to change the resulting color.

The RGB color model is basically the same with red, green, and blue represented by three numbers, with (255,255,255) as white and (0,0,0) is black. The resulting color is a combination of the three colors and their mix.

The proper structure of the color options are as follows:

• blue, green, red, yellow, black, aqua (note there is no symbol preceding the color name)
• #30AA3C, #AAF745, #003091, #B33B00 (note the hashtag (pound) number symbol is required. They may in caps or lowercase.)
• (173,255,47), (255,0,0), (199,21,133), (0,128,128), (0,0,139)

Wikipedia has a good sampling of the three color naming conventions, and below is a list of more.

If you wish to convert your colors from one system to another or know the difference names for each color. Here are some color conversion free online programs.

• Forret Color conversion
• EasyRGB
• Color Name & Hue
• Convert to Hex/RGB – Color Conversion Tool
• Splintered – Hexadecimal Colour Calculation

Web Safe Colors

Since the very beginning in 1993, the first browser, Mosaic, used blue text with an underline to represent a link. Purple was the default for indicating the link had been visited. These color and formatting styles have persisted in the memory of web users, thus tend to be confined to only those purposes even though there are millions of colors to choose from. Avoid using blue and purple on anything other than links, and underline nothing except links to prevent people from clicking where no click is found.

Colors on the web begin with understanding Web Safe Colors. In the “old days” of computing, there were 256 colors deemed web safe. As computer graphic cards and monitors improved, color tones and depth radiates in the millions, yet it wasn’t always that way. Web safe colors are colors that stay basically the same no matter what the user is using to view your web page. The History of the Browser-Safe Palette from Lynda.com is an excellent article on how web safe or browser safe colors evolved.

Colors selected for key color areas on a web page such as navigation and titles should be as close to web safe colors as possible, but the palette is wide open for all the rest of the colors of your website – as long as they don’t offend, annoy, distract, or not meet web accessibility standards for vision.

Sources for web safe and basic web colors include:

• 0to255 Color Chart
• Name that Color – Chirag Mehta : chir.ag
• 500+ Named Colours with rgb and hex values
• Color-book.org – The color encyclopedia
• color chart @ Gotomy.com | html color chart
• HexHues Where You Name the Colors
• 6X6X6 Netscape Color Palette Map
• 100 Random Colors
• HTML Color Chart BROBSTSYSTEMS
• Colorizer – A color picker and converter
• Websafe Color Chart – ColorTools.net
• Websafe Color Picker Tool – ColorTools.net
• HTML Colour Names
• About Web Color Definitions
• Background Color Gallery
• HTML named colours chart with comparison colour text
• Web Design: Web safe colors palette
• Sortable Color Table | UIZE JavaScript Framework
• VisiBone
• Color Picker – HTML Color Code Picker
• Non-dithering Colours by HTML Source

Colors and Web Accessibility

With the US federal law for web accessibility in place as of March 2012, it is more important than ever for web professionals to design to meet those standards and guidelines, making color decisions for readability and usability even more important.

The Accessibility Color Wheel by Altervista is of note as it has several algorithms incorporated into its system to help judge the “accessibility” level of color usage, covering a wide range of the most common vision issues. As you move over the color prism, the type on the page changes to those colors to show you how someone with Deuteranope, Protanope, and Tritanope color blindness would see the results compared to normal vision.

Do2Learn’s Emotions Color Wheel is a fascinating perspective on the influence of color on emotions, generating feelings by their usage. “Seeing red” holds up as red represents anger. A reddish peach tone is considered “aggravated.” Lean towards purple in the same ton and you get cranky, then bored, distracted, and disappointed as you move around to blue. It’s fascinating to see the perception of color on emotions and might influence your next color decisions on your web design or WordPress Theme.

Cymbolism | Words & Colors is similar. It basically asks what color you think of for a term or phrase to quantify the association between colors and words.

One of the biggest challenges of choosing colors for your web design or WordPress Theme is determining font colors and background colors. Black on white or white on black are common, but what if you want to move away from those standards?

Yellow on white is unreadable. Yellow on a black background is painful. How do you determine which is the right combination?

UXMatters has a good article on applying color theory to digital displays, which include web pages. They offer extensive explains and explain:

Before designing an application or Web site, establish design guidelines, including conventions for the use of color. These conventions should dictate all purposes for which you use color, what colors apply to specific types of elements, and the meanings associated with specific colors. Use these color conventions consistently throughout an application or Web site. Once users interpret the meanings of colors, they will apply those meanings wherever they encounter the colors. If your use of color is inconsistent, users will be unable to build a mental model of color usage or to reliably interpret the meanings of specific colors.

Choosing the foreground and background color of a website is a mix of color theory (discussed below), web accessibility, contrast, and readability. After all, your content must be read and seen, so you need the background to not overwhelm the foreground content, and vice versa.

There are a variety of tools that will help you determine a good fit for choosing colored text on background colors. Once you have narrowed them down, run them through web accessibility testers to ensure there is enough contrast between the two colors to make it readable.

• Text on Background Tool – ColorTools.net
• Technicolor – The Man in Blue
• Check My Colours
• Gray Bit
• Colorbrewer: Color Advice for Maps
• Colorblind Web Page Filter
• Color Scheme Designer (Use the vision options)

Other web accessibility tools for color include:

• Dasplankton
• Coblis–Color Blindness Simulator
• Computerized Simulation of Colour Blindness
• WebAIM Color Contrast Checker
• Colorblind Web Page Filter
• Color Oracle
• Juicy Studio: CSS Analyser
• Juicy Studio: Luminosity Colour Contrast Ratio Analyser
• Colour Contrast Check – snook.ca
• Colour Blindness Check – Etre
• Colour Check – Etre
• Firelily Designs – Color Vision, Color Deficiency
• Contrast Analyser for Windows and Mac | The Paciello Group
• Colour Contrast Check – snook.ca
• Colour Contrast Visualiser | stainlessvision
• Colour Contrast Analyser for Web Pages – Vision Australia Website

Also check out Complete List of Web Accessibility Evaluation Tools from the W3C.

Articles worth reading to learn more about color contrast, readability, vision impairment, and usability when it comes to choosing colors in your web designs include:

• A List Apart: Articles: Contrast is King
• Applying Color Theory to Digital Displays – UXmatters
• Lighthouse International – Effective Color Contrast
• Effective design principles for web designers: Contrast | TechRepublic
• Readability and Backgrounds – Tips for Your Web Site
• Applying Color Schemes Requires Seeing Them Anew | Webdesigner Depot
• Background Color for Your Typography – Typecast
• Accessible Web Design: Colour on the Web Basic Theory – The Guild of Accessible Web Designers

Color Theory

There has been a lot of research on color theory, analyzing the emotional impact of colors and influence, as well as web accessibility, determining the colors that are viewable across a wide spectrum of vision issues.

In the section on web accessibility, I point to Cymbolism – Words & Colors and the Accessibility Color Wheel, representing the emotional context associated with color.

There is philosophy, psychology, cultural influences, and more associated with colors. There is also basic color theory, how colors work, and how they work together as well as influence humans.

The following are articles on color theory and basic techniques.

• Basics Behind Color Theory for Web Designer
• Color Theory for Designers, Part 1: The Meaning of Color | Smashing Magazine
• Natural Selections: Colors Found in Nature and Interface Design – Boxes and Arrows
• Color Theory Tutorial by Worqx
• Basic Color Theory
• Color Theory, Color Wheel and Combining Colors, Colors on the Web
• Color Theory 101: Creating the “Mood” of Your Website | Intuit Websites
• Color Theory and The Color Wheel

Online Color Wheels and Charts

There are many color wheels and tools on the web to help you find complementary colors for web design and WordPress Themes.

ColorSchemer and Color Scheme Designer are long time favorites of mine. You can pick a color and it shows you a color palette of colors that complement it, then you can lighten and darken the tones quickly to find the right combination. Color Scheme Designer has an option to test the colors under various vision impairment scenarios.

The following are color wheels and charts to help you choose colors for the web. (Note: Some of these were created with Adobe Flash and may not work on your system.)

• Color Scheme Designer
• Web Color Chart – Hexadecimal – by VisiBone
• Interactive Color Wheel
• Color Wheel – Colors on the Web
• Color Wizard
• Online RGB Color Wheel
• 4096 Color Wheel
• moreCrayons
• Colour Contrast Check – snook.ca
• Color Wheel for Web Designers

ColorTools.Net has a large collection of color tools, pickers, comparisons, matchers, and combiners. They include:

• Close Colors Tool
• Combine Colors Tool
• Compare Colors Tool
• Opposite Color Tool
• Make Websafe Colors
• Color Matcher Tool
• Create Colors by RGB Values
• Color Mixer Tool
• Color Picker Tool
• Websafe Color Picker Tool
• Random Color Tool
• Full Color Spectrum

Matching Colors, Color Themes, Color Palettes, and Color Schemes

There are times when you need to match colors to a specific photograph, header art, logo, or client choice. Or when the client has a range of colors or palette to choose from and you need help picking the right color theme or blend.

The first set of tools dealing with creating color schemes and matching colors focuses on finding a specific palette that works for your site’s goals.

Peter Piper’s Color Palette Picker from Worqx is a fascinating palette picker and scheme generator. It helps you to visualize what the colors will look like next to each other as well as in combination. The Palette Picker offers seven web page block elements, allowing you to color each one to visualize the end result on your own page. Colour Expanda/Comparitor is much the same, helping you to find complementary colors as well as analogous colors and variations thereof.

Technicolor – The Man in Blue allows you to really see what your site would look like in various color schemes. Click color options, then click the part of the demo web page you wish to change. You can choose the font colors as well as background colors, mixing and matching to find your color palette. I highly recommend this one for those new to designing websites and WordPress Themes.

Slayeroffice is a fascinating color generator. You enter a color and it generates 10 shades of that color to show you the tonal range you may choose from.

One of the oldest color blenders and schemers is by Eric Meyer, one of the leaders in CSS and web design development. Color Blender can set the colors by hexadecimal, RGB and RBG percentage. You can choose two colors then blend them with a variety of midpoints, the shifts in tone between the lightest and darkest. The resulting palette gives you something similar to Slayeroffice with specific color names of each tone.

mooColorfinder Website color finder evaluates a web page and reports on all the colors used within it.

KrazyDad Color Fields Colr Pickr (Flash) takes the color picking and palette process into the modern era. The color wheel is easily changed, shifting colors around, and brings in thumbnail photographs from flickr of photographic subjects matching those colors. The author, Jim Bumgardner, takes these even further with variations on the theme with color types and formats such as Flowers, Crayon Box, Squared Circle, Urban Decay, Graffiti, and more based upon flickr tags and categories.

TinEye Labs – Multicolr Search Lab is similar, expanding even further to allow you to choose up to five colors and find images with those colors in flickr for inspiration and color theme ideas.

The following are tools for matching colors. (Note: Some of these were created with Adobe Flash and may not work on your system.) Some of these are simple and easy to use, others are quite sophisticated, offering you a full range of information upon which to make your color decisions.

• colorspeak
• ColorExplorer
• ColorMatch Remix
• Color Scheme Designer 3
• GenoPal – Harmonious Color Schemes
• Infohound Color Schemer
• Color Harmonizer – Interactive Earth
• Kuler by Adobe
• Web 2.0 Colour Palette
• colordb – the color database
• ColorBlender
• ColorCombos
• ColorHunter
• ColoRotate 3D Colors
• ColorPicker.com
• Create Color Schemes, Test Color Combinations – Colorspire
• Color Trends + Palettes :: COLOURlovers
• COPASO – Pro Color Palette Software
• Color Palette Generator
• DeGraeve Color Palette Generator
• DeGraeve Color Picker
• Color Schemer by DHTMLGoodies
• Peters Instant Color Schemes
• HYperGurl Color Match
• Kolur
• The Color Tool

Color Palettes from Images and Photographs

The above color tools help you to match colors or find specific color schemes. This next set takes graphics, images, or photographs and generates a web color scheme from them.

The colors may or may not complement each other, but it is a great way to pull colors from logos or specific photographs you wish to use within the design such as in the header art or background design.

• GenoPal – Harmonious Color Schemes
• Name that Color – Chirag Mehta : chir.ag
• Color Palette Generator from photographs or graphics
• Pictaculous
• ColRD Art and Inspiration
• ColourGrab.com – Colouring The World.

Color pickers are tools you can use to literally pick out colors from web pages, images, etc. If you would like to add a color picker to your web browser of computer, check out this extensive list from Hongkiat, Best Of Useful Eyedroppers (Color Pickers) For Designers.

I Want More Color

Personally, I can’t do my work daily without ColorZilla in my Firefox web browser and ColorSchemer and Color Scheme Designer in permanent tabs. When doing larger projects for clients, I call upon many of the above tools to help layout color choices.

There is a lot to learn about color on the web and in the world. This is just a sampling to introduce you to the possibilities.

To learn more about color in general and find more useful information and tools:

• Are you struggling to choose a great color scheme for your website? | Blue Owl Web Design
• About Web Colors – ColorTools.net
• saila.com: Using Colour on the Web – MMXII beta edition
• Color Theory, Color Wheel and Combining Colors, Colors on the Web
• Color Wheel Artist, Color Theory, Tips, Palettes and Art
• Color Combinations | Color Schemes | Color Palettes
• Improved Color for the World Wide Web: A Case Study in Color Management for Distributed Digital Media

Well you can.

HongKait offers “Top Web Annotation and Markup Tools,” a huge list of tools that allow you to annotate – write on – web pages. You can highlight sections, draw on them, doodle, whatever.

You can instantly share or save your annotations.

Think of the possibilities. You are working on a WordPress Theme with a client. They can scribble on the page making notes while you are chatting about it on the page at the same time.

Developing a WordPress Plugin? Imagine running tests with this with this level of collaboration. “What if I over it over here? How does this look to you?”

In one example, Layers, the tool allows you to add sticky notes, tweets, maps, videos, and images on web pages. Comments can be public or private. You can invite others to participate in an ongoing discussion of the web page to make it highly collaborative. Oh, this so is going to work out nice for students and clients.

Some of these are online apps, some are downloadable programs, and others are web browser extensions and add-ons. There are tons to choose from.

I’m going to use some of these in future classes to markup homework assignments, labs, etc. And what until my clients see these. Wow!

First, let’s look at what people look for and what influences them in the decision process with a WordPress Theme, and the myths of their reasoning.

The default WordPress 2011 Theme has two versions, dark and light. By changing the background image, these two sites on the same Theme are completely different.

How much does it cost?

First of all, the majority of WordPress Themes in the WordPress Theme Directory are free. Before you start investing in a WordPress Theme, stick with free Themes so you can test drive them.

If you fall in love with one and lack the web design experience or time to modify it, contact the author and hire them to fix this to your liking.

A paid or premium WordPress Theme is no better or worse than a free Theme. Don’t believe the hype. You are usually paying for support or additional features you may or may not need. Price does not dictate quality.

Does it feature full customization?

Almost all WordPress Themes offer customization of the header art, background colors or images, and a few other options.

What do you need customized?

If the WordPress Theme has all the features you need, then consider it customized to your needs. If you need more functionality, consider adding a WordPress Plugin with the features you need.

If you adore a specific WordPress Theme, contact the author. They will be willing to make modifications for a fee.

Can you change the layout?

How many ways do you want to change the layout? Put the sidebar on the right or the left? Have two sidebars on the right or left and none on the other side?

Pick a Theme with the sidebar placement you want to see if that is the layout you really need.

If you need to move things around, consider one of the modular WordPress Themes that allow you to shift areas around within the site design and layout.

Does it match your business or content?

Did you buy or rent your home because of the wallpaper or paint color on the wall? No. You chose it because it had the number of rooms you needed, the location was right, and it fit your budget.

Choose a WordPress Theme accordingly. Is the sidebar where you want it. The header tall enough or narrow enough to meet your needs? What about the footer?

Then look at the colors and artwork. You can easily change all that, redecorate the whole thing to meet the needs of your business or content.

Always look for the architecture first. The paint job and wallpaper can be changed later.

Will it grow with your business?

I have a WordPress site with over 3,000 articles and growing. I’ve seen WordPress sites with no posts just Pages or Custom Post Types (like Pages). You can do anything you wish with your WordPress site, and most Themes will handle it, if you choose wisely. Or you can change the Theme design or structure at any time, or totally switch Themes.

Think of the big companies that use WordPress. Here’s a list to remind you.

• 24/7 Wall St. – Analysis and Commentary for U.S. and Global Equity Investors
• New York Times – Blogs
• Moms & Babies – People.com
• LOL Celebrity Pictures – ROFLrazzi
• CBS Chicago
• College Candy
• Epic Fail Funny Videos and Funny Pictures
• GigaOM – Technology News, Analysis and Trends
• GraphJam: Music and Pop Culture in Charts and Graphs.
• Hack a Day
• Hip-Hop Wired
• Lolcats Cats – I Can Has Cheezburger?
• Exclusive TV News and Scoop | Inside TV | EW.com
• All Your Memes Are In Our Base
• TIME NewsFeed – Breaking News and Updates
• CBS New York
• Guy Fawkes
• CNN Political Ticker – CNN.com Blogs
• Entertainment Weekly – PopWatch
• Daily Squee – Cute Baby Animals
• StyleWatch – People.com
• TechCrunch
• theBRIGADE, The World’s First Military Entertainment Site
• There, I Fixed It – Redneck Repairs
• Number 10 Downing – British Prime Minister

If their sites and companies are growing with WordPress, so will yours.

Is it SEO friendly?

There is a lot of confusion over WordPress and SEO. We often forget that SEO has nothing to do with the Theme and everything to do with the content.

Write clear, understandable, and keyword rich content, title your posts and Pages with purposeful titles, and your SEO issues will be taken care of.

Don’t believe the myth that the right WordPress Theme will make all your SEO woes disappear. Without quality content, no Theme will help.

Does it include tracking and analytic features?

Few WordPress Themes including tracking and analytic features. These are added with WordPress Plugins.

If a WordPress Theme is promoted as having these features built in, they are Plugins. And they may not be the right programs for your site’s needs. Choose your own.

Can you monetize it?

Some WordPress Themes are promoted as being particularly adaptable to monetization. That is true, but what do you mean by monetization?

For some, it means selling books or products. For others, it is services. For others, it is offering advertising.

Think about where and how you wish to promote your wares, offer your services, or feature ads. Check the specifics of the Theme to see what it offers compared to your specific needs.

Most WordPress Themes can handle general marketing and promotion without special features. There are also many WordPress Plugins that will add these features.

How many others are using that Theme?

Just because everyone is using that Theme, doesn’t mean it is right for you.

Just because millions are using that Theme, maybe you should use something else. If we’ve seen it once, we’ve seen it a thousand times dressed in different clothes.

While the number of users for a particular WordPress Theme might indicate its popularity, it doesn’t mean it is the right Theme for your needs.

What to Consider When Choosing a WordPress Theme

When it comes to choosing your WordPress Theme, think of it like you are building a custom home.

You don’t go to the architect holding up paint swatches and insist that the bedroom must be this exact color green.

The questions you would get back are how many rooms, how many floors, what size do you want the rooms, where do you want which rooms, and so on.

They don’t care about the paint job.

By choosing a WordPress Theme because you like the header art, the blue border, the font, or some other interior design feature, you are building a home with paint.

Here are my tips for choosing a WordPress Theme.

Will it hold what you create?

What content will you be publishing?

Creating a travel or photo blog? Will you be featuring photographs as your primary content? Consider choosing a WordPress Theme with a wide content area, possibly even without a sidebar. Let your photographs be held like a picture in a matted frame, with room to breath.

Will you just be using words, occasionally images? Then a narrower content area might be in order.

Will you be promoting or announcing many events and wish to feature them prominently in the sidebar? A wider sidebar might be a good start.

Do you want to promote the various categories of topics on your site, breaking things down by Tutorials, Resources, and News? Will the site’s design, navigation, and sidebar make it easy or difficult to do so?

Look at all of your needs for content and promotion, navigation and links, and determine where they need to fit into the architecture of the site.

Look at the bones of a site like you would the blueprint of a house. Is there enough space in each room? Is the layout conducive to traffic flow? Is there enough bathrooms for each resident in the house?

By studying the bones and framework of the site, ask yourself it if will hold everything you wish to fill it with.

Will it complement what you create?

It’s difficult to ignore the paint job and art work when exploring WordPress Themes.

Find one that intrigues you? Print it out in black and white. Cover up the graphics with sticky notes.

Look at the bones and see if this site will allow you to set the frame for your content and complement it.

Just as you explored whether or not the Theme would hold what you create, will the Theme’s design compete or complement your content?

Will you be sharing video and other multimedia? Video and images tend to clutter up a site in the content area, so a simplistic or minimalist style WordPress Theme design and layout might be perfect for the busy content.

Will you be showing off photographs, artwork, or graphic images? Will the design complement or compete?

If you are just publishing words, your stories and expertise, then the site design elements may stand out even more as they frame the content.

If you need special features or accessories, check the options to see if they are available for that Theme.

Is it easy to understand and navigate?

Look at your needs for your site through a visitor’s eyes, not yours. What will they be looking for first? Next? The most? How will they find what they need?

Make a list of what are the most important things a visitor must know or find within your site. How will these be featured?

Will you have many Pages? Is there enough room in the header and sidebar navigation areas to highlight those navigation links?

How will you promote and feature those links? Is there room for lists, badges, icons, or other graphics to direct the visitor’s eye to the information they need?

How will the visitor move through the site? How will they know how to use the categories, tags, archive, and search features?

Test it out and see if the site is clear and easy to understand and navigate.

How easy is it to make it do what you want?

Know what you want to do on your site? Can you do it easily or will it require some work or extra education to figure out how to make it work?

The goal is to have a site that is easy to use. While you are constrained by WordPress default features, what features do you need and does the WordPress Theme make it easy to accomplish these?

Some WordPress Themes offer customization of every aspect of the Theme. Some make this easy, others make this complex. If you are setting these elements once, once might be enough, but what if there is an area of the Theme you will need to update regularly, like an announcement or feature area. Can you access this easily?

Some Themes feature a slider or featured post option. How hard is that to use?

If you have to jump through hoops to get something done, consider looking for a Theme that might make this easier. There may not be one, but if there is, or a WordPress Plugin that will do the job, it could be worth the hunt to save time and confusion in the long run.

Does it do what you need?

Buyer’s Regret is normal. “If only I could…”

Avoid the “If only” regrets by planning thoroughly what you want before you begin your hunt.

And if it ends up not being what you need, switch Themes.

Again, I strongly recommend beginning with the free WordPress Themes in the WordPress Theme Directory. This will give you a chance to experiment and test what it can do before you become invested in the Theme. WordPress makes it easy to switch.

Are people using it happy or complaining?

Check the WordPress Theme Directory reviews of the Theme. Search for reviews of the Theme on the web. What are people saying?

While we tend to hear more from the complainers than the praisers, evaluate their comments carefully. If they are complaining about a specific feature, and that is a feature you need…gather what information you can so you are making an informed decision.

How to Test a WordPress Theme

Once you have picked out a few Themes and installed them, it is time to test them.

To test a WordPress Theme:

1. Get the WordPress Theme Post Sandbox Content and paste it into a test post.
2. Activate each Theme one at a time in the Appearance > Themes panel.
3. Look at each pageview to see how the post and the other contents are displayed. Note how the content is displayed and look for what changes or stays the same. Check the:
   • Front Pageview
   • Single Post Pageview
   • Page Pageview
   • Category Pageview
   • Tag Pageview
   • Search Pageview
   • Author Pageview
   • Look at the top, sides, and bottom carefully.
4. Go into the Administration Panels and look for the Theme options, typically under Appearance, though some Themes will feature their own main Panel for options.
5. What is customizable? Are they easy to change?

Go through each Theme and make notes answer the above questions to see if it holds your content, complements it, and does what you need it to do.

The 2011 WordPress Theme front and single post pageviews. Notice the front page has a sidebar and the single post does not.

You will soon feel more confident about what you are really looking for in a Theme, which will speed up the hunt. It will be slow going at first, but soon you will know exactly what you want, thus your search will go much faster.

What You Need to Know About WordPress Themes

There are a few things you need to know about WordPress Themes.

• Every WordPress Theme is different from another, even if they look the same.
• Most WordPress Themes are actually rebuilds, based upon the different default WordPress Themes that come with the default installation of WordPress.
• If a specific functionality is built-into a WordPress Theme, it will not be there if you switch Themes. This is why many promote the use of WordPress Plugins which work in spite of the Theme.
• All WordPress Themes may be edited and changed. To protect your editing and personal customization, it is highly recommended that you create a Child Theme, a duplicate copy of the Parent Theme that imposes its will (design will) upon the Parent Theme to overwrite design elements and functionality. This will protect you from losing your customization when the Parent Theme is updated.
• If there is something really bothering you about a WordPress Theme, change it. If it is not important to your readers and a little thing, live with it. Rarely will you find the perfect Theme, just as you will never really get the perfect house.
• If the WordPress Administration Panels notify you that a Theme has an update, do not wait. Update immediately. While some updates may add functionality, most updates bring fixes and resolve security issues. Keeping a Theme regularly updated will usually cause no harm to your design or complicate things.
• If you really love a WordPress Theme and your business site is dependent upon it, donate some money to the designer and developer or hire them to improve it. Share the wealth.

Call to action in web design — and in user experience (UX) in particular — is a term used for elements in a web page that solicit an action from the user. The most popular manifestation of call to action in web interfaces comes in the form of clickable buttons that when clicked, perform an action (e.g. “Buy this now!”) or lead to a web page with additional information (e.g. “Learn more…”) that asks the user to take action.
Call to Action Buttons: Examples and Best Practices by Smashing Magazine

It is literally a visual hint (or shout) that encourages a user to click or take some form of action.

Calls to action are used to:

• Direct a visitor’s eyes to a specific area of the web page.
• Encourage the visitor to click.
• Encourage the visitor to respond (comment, contact, submit, interact).
• Showcase information the visitor needs to know.
• Motivates action (promotes features, reasons to trust or purchase).

Examples of calls to action include images, links, and visual guides to:

• The contact form
• A survey
• Subscription
• Comment
• Join (membership)
• Sign up/Register
• Switch to a page with more information
• Watch a demo
• Purchase
• Alert or Warn
• Download
• Submit
• Save money (deals, coupons, etc.)
• Phone number, location, email, maps
• Words, not images, that instruct or pitch

Successful calls to action are measurable. Using web analytics, the site administrator can measure the clicks and responses to see if the call to action is working. If not, changes can be quickly made to improve it, testing as you go.

The following are articles to help you learn more about website and web design calls to action.

• Call to Action Buttons: Examples and Best Practices by Smashing Magazine
• Blogosphere Trends + Effective Calls to Action : @ProBlogger
• 15 Great Examples of Calls-to-Action for Lead Generation
• Google Analytics Event Tracking – Measure Calls to Action – Eugen Oprea
• 10 techniques for an effective ‘call to action’ | Boagworld
• 6 Tips for Creating a Good Call To Action – Blogging with Amy
• 7 Tips for Effective Calls to Action
• How to Create a Blog Sidebar That Converts Visitors Into Revenue
• 60 Effective Examples of Call to Action Buttons – DesignModo

Colorful brain scan of a mouse.

Just because you select a filter for public domain and royalty free images on a Google Image search does not mean these images are actually public domain and royalty free. Check. Ask first, they might say yes.

Flickr is a major resource for images, but many of these have restricted use. Not every image on Flickr or the web is free to use. Check thoroughly for usage rights, and if in doubt, get permission or don’t use the image. Check out Flickr’s Public Domain Photos’ Photostream for images specifically marked as public domain.

The images featured range from people, places, wildlife, and space, as well as textures, patterns, and artistic graphic images. These free photos sites listed may have nude or violent images, though I did my best to exclude image sites which specialize in those.

One of the best, kept up-to-date lists for images and graphics in the public domain for free use is Wikipedia:Public domain image resources. I usually start my search from their list, which includes government collections and resources, special subject-based collections, and more.

morgueFile, FreeImages.co.uk, Public Domain Pictures, Image After, Stockvault, and Stock.XCHNG are the ones I usually use the most, though Stock.XCHNG is not always free, depending upon the image you seek.

General Photography Images

Monet – The Japanese Footbridge

• Aarin Free Photo
• Getty Images – Royalty Free Images
• Cromavista
• Image Base
• Free Stock Photos
• PDPhoto
• Creative Commons Image Search
• DeviantArt
• Stock Exchange
• tOfz
• AboutPixel
• A Digital Dreamer
• Bajstock
• Barry’s Free Photos
• Big Foto
• Cepolina
• Design Packs Photos
• Flickr
• Fontplay Free Photos
• Fotodatebank
• Fotolia
• Free Digital Photos Net
• Free Foto
• Free Images UK
• Free Images
• Free Photographs Net
• FreePhotos.com
• Freewebpics
• Image After
• ImageTemple
• iStockphoto
  

  Hurricane Katrina 2005 – USGS satellite view.

• Lightmatter
• LogoDesignweb
• Mayang
• Morgue File
• NWYH Stock Images
• Open Photo
• Our Media
• PhotoCase
• Picture Station
• Pixel Perfect Digital
• Pixelquelle
• PD Photo
• Picdrome Public Domain Copyright-Free Pictures
• Stock Vault
• Stock.Xchng
• Triparalbum
• Unprofound
• WorldImages
• Woophy

Government, Political, Historical, etc. Images

Mount St. Helens after volcanic explosion 1980

• U.S. Government Photos and Images | USA.gov
• NASA Images
• Gimp-Savvy – Images from NASA, NOAA, and US FWS
• US Fish and Wildlife Photos: FWS2 and/or FWS1
• US National Park Service Royalty Free Photographs
• Earth from Space
• NOAA Photographs and Images

Nature and Science Photographs

• Insect Images
• USDA Images

Patterns, Texture, and Art Design Photographs

The Rings of Saturn – NASA

• Amazing Textures
• Four Bees
• Mandragora
• Creativity 103
• ArtFavor
• Texture Warehouse

More information on Finding Free Images and Photographs on the Web

• Master New Media – Where to find free images
• Google Answers – Finding Free Images on the Web
• Graphics and Graphic Design – Free Stock Photos List
• Finding and using public domain photographs

A well designed pattern or texture that is seamless and tiles well is one that repeats gracefully in the background, complementing the purpose of the site and not distracting. A non-distracting background is one that is literally seamless, no distinction between the edges of the graphic. It doesn’t look like a bunch of repeating blocks. It is one smooth, evenly repeating pattern that is flexible, stretching into the background no matter what the width or length of the web page.

The process involves developing graphics that, when tiled together, appear as one single image, or a gentle repeating pattern. This is often done by selecting simple graphics and blurring the edge or positioning the elements to they bookend to each other, repeating the pattern over and over again.

You can make your own or find free seamless patterns to use for your own projects.
One of the fastest tools to accomplish this is with GIMP, a popular free graphic program. Creating Seamless Backgrounds with the GIMP from Gimp Tips lists the specific steps.

To make your own, you will need a graphics program. I’ve included a list of instructions for Photoshop, PaintShop Pro (Corel), GIMP, and other graphics programs.

• Creating Seamless Backgrounds with the GIMP | Gimp Tips
• How to Turn a Texture into a Seamlessly Tiled Background | Psdtuts+
• Creating Seamless Textures Without Even Leaving Your Browser with Avairy – online photo editing tool) – DesignFestival
• Create Seamless Web Background Textures in Minutes in Photoshop | Design Shack
• How to Make a Seamless Tile – Examples and Instructions
• Make Repeating Seamless Tile Backgrounds with Photoshop
• Tile Repeated Background Image Photoshop Step 4
• Make A Seamless Tiling Background for Webpages In About Ten Seconds – How-To Geek
• Creating Seamless Tiled Wallpaper by Instructables (with images you create yourself)
• PSPUG Tutorial – Making Seamless Backgrounds in Paint Shop Pro (old but still works)

If you wish to take the easy way out and find a seamless pattern all ready to go, check out these resources for free seamless patterns. Some of these are pattern generators, too, so you can use their online tools to make your own quickly.

• 100+ Seamless Patterns Great for Creating Website Backgrounds | WebDesignLedger
• Citrus Moon Patterns: Archives
• everyday icons – Patterns
• Fractured Sanity[Dot]Org – Vers. 09 – Brushes, Patterns, Art …
• Free Seamless Patterns in PNG Format
• liajedi’s deviantART gallery
• Free High Resolution Textures – Lost and Taken – 30 Free Seamless Background Textures
• Download Free Repeat Patterns
• ava7 patterns /// 1707 free seamless background patterns
• Patterns- Patterrific
• SHIZOO DESIGN… your daily websource drug.
• Free seamless background tile image picture of nature, forest, wood, flower, tree, leaf, rose, fern and more by StarFields
• AppendixSquared V.5 || Homecoming
• BgPatterns — Background Patterns Maker
• Browse Patterns :: COLOURlovers
• DinPattern – Free seamless patterns » Patterns
• Tiles & Patterns
• Background Textures and Images Library, Free Download – GRSites
• Freebies | Hybrid Genesis (includes more than just tile patterns)
• Free Background Patterns
• Dromoscopio – Libreria di Background Pattern / Background Pattern Library
• 50 Useful and Free Seamless Pattern Sets
• Seamless Pattern Background Designs
• Free vector patterns | Illustrator patterns | Free patterns from Patternhead
• Squidfingers / Patterns
• Stripe Generator – ajax diagonal stripes background designer
• Stripemania – Striped background generator
• Tartan Designer – Tartan Maker – Tartan Background pattern generator

Hat Tip to Fractured Sanity for the free pattern.

The first one deals with the most common programming mistakes, a few I’ve done myself. UI craziness and variable naming inconsistencies will often eat up my time as I resolve their issues.

The second article on database development mistakes addresses many of the issues I and others have with dealing with other people’s work. A missing mistake that should be on the list is a lack of inline documentation, the notes a developer should leave to not only remind them of what happened here and why choices were made, but informs future fixers of what is going on. Without these, we have to read the code like a book, and not everyone writes based upon readable standards. We spend too much time playing detective for the simplest of fixes.

A comment in the first article really caught my eye and sums up so much of what causes problems with the code.

This isn’t the tool’s fault — the error is between the keyboard and the chair. On the one hand, it speaks volumes about the quality of these tools that I trust them so much that I lost a lot of my vigilance; on the other hand, it is still my fault that I allow convenience to turn my brain off entirely. I have learned to slow myself down when using code completion and take the extra second or two to ensure that I have made the right choice.

The biggest problem is what is sitting in the chair – remember that next time you start blaming.

Most browser-integration tools are browser specific, compared to online tools which sit in web pages, accessible through any browser. Browser-integration tools include extensions, add-ons, and bookmarklets.

How to Add an Extension or Add-on to Your Web Browser

To add an extension or add-on tool to your browser:

• Go to the page or site for your browser’s extensions or add-ons:
  • Add-ons for Firefox
  • Chrome Web Store – Extensions
  • Internet Explorer Browser Extensions
  • Safari Extensions Gallery
  • Extensions – Opera add-ons
• Follow the instructions.

How to Add a Browser Bookmarklet to Your Web Browser

Typically, browser bookmarklets are not browser specific and can be used on any browser supporting JavaScript. Sometimes called "favelets," a bookmarklet is a script that takes action on the page you are viewing. The most common bookmarklets allow you to save a site to your online bookmarks site or share a web page with a social network. Many bookmarklets are tools to help you view the underlying code and technologies of a web page as well as to test and evaluate it.

Browser bookmarklets are stored in your browser bookmark toolbar or collection. To add a bookmarklet to your bookmark toolbar:

1. Click and drag the indicated button or link to your browser toolbar.
2. To activate the bookmarklet, click the button or link on your browser toolbar and follow its instructions.
3. To quit/turn off the bookmarklet, refresh the page or follow the instructions.

Browser Add-ons and Extensions for Evaluating, Inspecting, and Testing Web Pages

• Firebug
• Firefox Web Developer Toolbar
• Google Chrome Developer Tools
• Internet Explorer Web Developer Toolbar

Online Web Testing, Evaluation, and Validation Tools

• The W3C Markup Validation Service
• The W3C CSS Validation Service
• WAVE – Web Accessibility Evaluation Tool
• BuiltWith Technology Lookup
• The HTML5 test – How well does your browser support HTML5?
• Juicy Studio: CSS Analyser
• WDG HTML Validator
• Web Page Analyzer

Validating and Testing for Web Accessibility

As of March 2012, it is federal law that web pages meet federal laws for Equal Access and the Americans With Disabilities Act.

• IDI Web Accessibility Checker : Web Accessibility Checker
• Functional Accessibility Evaluator – University of Iowa
• Dr. Watson
• WAVE – Web Accessibility Evaluation Tool
• Web Accessibility: AccessColor Tool- free online color contrast analyser
• Welcome to the HiSoftware Cynthia Says Portal
• Pink Juice Reports
• HERA – Testing Accessibility with Style

Bookmarklets for Evaluating and Testing Web Pages

• Resizer – Codebomber
• Firebug Lite : Firebug
• Aardvark Firefox Extension
• maki : a free web design mock-up tool for pixel perfect layouts
• slayeroffice – Favelet Suite
• 32 Indispensable Bookmarklets for Web Developers and Designers – Speckyboy Design Magazine
• Favelets For The W3C Markup Validation Service
• Implementing WAVE into web pages, browsers, or other tools
• MRI – inspects CSS selectors on a web page
• XRAY – explores the "bones" of the web page
• Quick Page Accessibility Tester – Accessibility-Checking Favelets – Accessify
• Firefox Resize Bookmarklet: Now With Re-positioning
• Allan Jardine – Reflections – Design
• Wirify – The web as wireframes
• Web Development Bookmarklets Collection

Browser Testing

Browser compatibility doesn’t start and stop with testing to see if your web pages work in Internet Explorer. They must be tested across a variety of browsers as well as web viewing environments such as Web television, mobile, tablets, etc.

• Check Browser Compatibility, Cross Platform Browser Test – Browsershots
• iPad Peek – What does your web page look like on iPad
• IE NetRenderer – Browser Compatibility Check -
• mobiReady – dotMobi compliance & mobileOK checker
• resizeMyBrowser
• Support Details tests yhour browser – Imulus Tech Support Management
• Pingdom Tools
• Browser testing | Adobe BrowserLab

Collection of Lorelle’s Favorite Bookmarks and Bookmarklets for Web Development

I’ve put together a web page with my favorite web design and web development bookmarks and bookmarklets for you to see and use. These have been collected from around the web and are shared for educational purposes only with students of Lorelle VanFossen.

To use these, click and drag the link to your browser toolbar or view the source code and save this list as an html file and use the bookmark import feature of your browser to import the file.

• View the source code of a web page.
• How to save a web page to your computer
• How to view a saved web page on your computer
• How to open a web page in your text editor
• How to view the CSS/Stylesheet for a web page
• How to inspect the HTML and CSS of a web page
• How to view and edit a web page at the same time

To begin this tutorial, have your web browser and text editor open on your computer. It does not matter which browser or text editor you are using. The process is basically the same.

How to view the source code of a web page

1. Go to a web page such as the test page for the class, Welcome to Lorelle VanFossen CTEC 122 HTML Fundamentals Class on the Clark Web Server.
2. Right click on an empty space on the web page and choose View Page Source or View Source.
3. The resulting popup window (or tab) will show you the underlying HTML structure of the page.
4. You may save this to your hard drive or go back and save the entire web page to your computer.

How to save a web page to your computer

1. Go to a web page such as the test page for the class, Welcome to Lorelle VanFossen CTEC 122 HTML Fundamentals Class on the Clark Web Server.
2. Right click on an empty space on the web page and choose Save Page As or Save As.
3. Choose a file name to remind you of the purpose or content of the page.
4. Save the web page to an appropriate spot on your computer’s hard drive, such as with the rest of your class materials.

How to view a saved web page on your computer

1. In a file manager, locate the HTML version of the page in the folder where you saved it.
2. You will find the HTML page file and a folder with the same name as the web page you saved. Images and supporting code and content are found in that folder.
3. Double click on the HTML page.
4. The page will appear in your browser tabs.

How to open a web page in your text editor

1. From within the Text Editor, choose File > Open, just as you would with a word processor.
2. In the file window, locate the HTML version of the page in the folder where you saved it.
3. Choose the file and click Open or Okay.
4. The result will not be the pretty web page but the HTML source code for the web page.
5. NOTE: If you choose to experiment and edit the web page, please save it with a different name or version number.

How to view the CSS/Stylesheet for a web page

1. From within the Text Editor, choose File > Open, just as you would with a word processor.
2. In the file window, locate the HTML version of the page in the folder where you saved it.
3. In the same folder or in the accompanying folder, look for a file with the extension .css. There may be multiple CSS files. Choose the one named styles.css, stylesheet.css, or another similar name.
4. Choose the file and click Open or Okay.
5. The result will be the CSS styles for the web page.
6. NOTE: If you choose to experiment and edit the stylesheet, please save it with a different name or version number.

How to inspect the HTML and CSS of a web page

Most web browsers come with some form of web developer tool built-in. You may also add web browser extensions to inspect the HTML, CSS, and underlying technologies of a web page. Check the browser documentation as well as the source documentation from the list below.

• Firebug
• Web Developer
• Google Chrome Web Developer Tools
• Internet Explorer Web Developer Toolbar

You can find more "secret" web development tools in an article by Andi Smith with tips on which ones are built-in and how to use them. Also check out 15 Helpful In-Browser Web Development Tools from Smashing Magazine.

How to view and edit a web page at the same time

1. Open your web browser and text editor.
   • If you have a large screen or more than one screen, move the web browser to one and the text editor to another.
   • If you do not have a large screen, use a keyboard shortcut like ALT+TAB or Command+TAB to quickly switch between them, or position the windows next to each other so they split the screen.
2. Open the file you wish to edit in the text editor and in the web browser (File > Open).
3. Make edits to the file in the text editor and save them.
4. Switch focus to the web browser and reload/refresh the web page (F5).
5. Continue making edits and switching to the browser to check your results.

Want to make this process even easier? 

In this tutorial on setting the text editor default in Firefox by SpiceWorks, you can view the page source and edit it in your text editor quickly and easily.

1. Open Firefox and type in about:config into the address bar.
2. Click that you will be careful
3. In the Filter or Search, type view_source.editor. Three items will be in the results.
4. Double click view_source.editor.external.
5. Change the value to TRUE by double clicking it or choosing to edit.
6. Double click view_source.editor.path
7. Change the path to that of your editor. If you are using Notepad++, it would be c:\Program%20Files%20(x86)\Notepad++\notepad++.exe. NOTE: Firefox does not like the spaces in between the letters. Use %20 instead of spaces. It may take some playing around with the link, but it does work.
8. Close Firefox and reload it.

Firefox should now be configured to open the page source in your text editor.

To use this feature, you can copy the HTML or CSS you wish to experiment with and paste it into your web page or a test page, or you can save it to your computer along with the web page to edit and experiment with it there. Or, if it is your own web page, make the appropriate changes and upload it to your server.

Other tutorials on how to do this include:

• View Webpage Source Code in Your Favorite Text Editor – Firefox – How-To Geek
• Tip: Change Default Text Editor in Fx | Firefox Extension Guru’s Blog

There are five basic forms of links on a web page.

1. External Links
2. Internal Links
3. Jump Links
4. Image/Multimedia Links
5. Email Links

Link Basics

Links are the gateway to the web, the interconnected parts of the web that allows a web user to easily move from document to document.

A link consists of the following HTML tag structure.

<a title="Link to article title." href="http://example.com/article.html">Anchor Text</a>

1. a: The HTML Anchor tag.
2. title: It is required by US federal law and international law that all links have a descriptive title property. The value text must describe the destination link in a way that will inform the user of what the destination material is about and help them decide to click through. It should be no more than a few words and written in sentence form, a simple instructional form such as “Link to article on links.” This is read out loud by screen readers.
3. href: The Hypertext Reference is the destination link. In general, it is typically an absolute link written with the full http: address such as http//example.com/article.html.
4. Anchor Text: This is the text which the HTML Anchor tag wraps around. It is the visible element of the tag on the web page.

A link has five states:

1. Link – Unvisited link – a:link
2. Active – The user clicked the link – a:active
3. Hover – The user hovers their mouse over the link – a:hover
4. Visited – The user visited the link – a:visited
5. Focus – Visible when the user uses the Tab key to navigate the web page – a:focus

For the most part, most web designs only include the first four states.

Each of these states, called pseudo-classes, may be styled with CSS for the following:

• Underline – text-decoration: underline;
• Color – color: #ff123;
• Background – background-color: #d0d0d0;
• Border – border-bottom: 2px solid #a979c3;
• Font-weight – font-weight:normal;
• Margins and Padding – margin: 10px; padding: 5px; (used when links are design elements not article content)

An example of styling links in a CSS stylesheet might be:

a:link { color:#CC33FF; }
a:active { color:#FF33CC; border: 1px dashed #A3A3A3; }
a:hover { color:#B3002D; text-decoration: underline; }
a:visited { color:#003CF0; }

In the past, link targets were acceptable, the process of adding code to a link to force its behavior upon the user. This technique is now deprecated (not used). For history, however, the four link targets were:

• _blank – Opened link in a new window or tab
  <a title="Link" href="http://example.com/" target="_blank">link
• _self – Loaded the link in the current page (window or tab)
  <a title="Link" href="http://example.com/" target="_self">link
• _parent – Loaded the page into a parent frame (a deprecated division of the page)
  <a title="Link" href="http://example.com/" target="_parent">link
• _top – Loaded the page into the current window or tab, removing all frames (page divisions)
  <a title="Link" href="http://example.com/" target="_top">link

While there is still some debate about the blank target, it is a deprecated form, breaks web accessibility standards (and laws in some countries), and takes control away from the user. It should not be used unless absolutely necessary. A necessary usage would be for a web page tutorial with the demo forced open in a tab or window so the user could compare the two pieces of information. A warning is required as noted under External Links.

Things you should know about styling links:

• By default, links are blue and underlined. Links should be the only thing underlined on a web page. Text should not be underlined or blue as users expect these to be links.
• It is required that all links to the root domain of a web address, such as http://example.com, end with a forward slash such as http://example.com/. This does not apply to a web page address as the domain address is already closed, such as http://example.com/article.html.
• While it is considered acceptable to link to a single word, consider two to six words (not counting articles like to, it, they, etc.) in the anchor text to help the user find the link.
• Keep link styles simple and clean to improve readability of text.
• Keep link styles consistent throughout the website to help visitors recognize a link in your design.
• When using a link in a sentence, make sure to exclude punctuation.
• Link dumps are the equivalent of pooping on your web page. When you leave a link such as http://www.useit.com/alertbox/20040510.html on a web page, it is ugly and hard to read. A properly formed HTML link must be in the form of linked text such as this article, The Definitive Guide To Styling Web Links from Smashing Magazine.
• Tests should be done with colors to ensure the link colors have enough color contrast against the background colors to be clearly visible.
• Take care in adding padding, margins, backgrounds, and other design elements to links in the different states. If padding is added to the hover state but not the link state, the link will shift and move on the page. The same applies to making the hover state bold when the link is not. Keep the styles consistent through the various states.
• It is acceptable to use a bottom border or the underline text-decoration to create the underline on a link.
• It is acceptable that the underline appears only when the user hovers over the link, not in the link state.
• If a link design element is not specified, most browsers will add design defaults such as a border or underline.
• Links can be anywhere, not just in the content. They are in link lists, menus, navigation, headers, footers, images, call-to-action buttons – anywhere. Design them accordingly with the pseudo classes.

For more information on links, see the Link References and Resources section at the bottom of this document.

Return to the top ↑

External Links

External links are links to other websites and web pages.

While most people assume that a link inside the content area of a web page links to an external link, it is not always clear. Some web page designs incorporate a visual clue that the link leaves the site, giving users a choice to keep reading or visiting the site and returning.

Examples of visual clues of an external link include a link like this (external site), or a visual graphic↑ created as an HTML Character Entity or background image.

Links to files must feature words or symbols to denote that the link does not behave normally but is actually a download link such as our class syllabus (PDF).

As noted in the introduction, link targets are deprecated, therefore not an acceptable form in this class.

Return to the top ↑

Internal Links

Internal links, commonly called intrasite links, are links that link to web pages within the same site domain.

In the past, it was acceptable to use a link format called relative links. Absolute links are written with the full http:// URL structure. Relative links are written in “relationship” to the current location of the web page in relationship to the directories above and below it.

This technique hearkens back to traditional static web page structures when web pages were sorted into folders and shortcuts were made to the URL path. Here are some examples:

• http://example.com/ – Absolute link to the root domain name.
• http://example.com/web/article.html – Absolute link to the article from the root domain name and the “web” subdirectory or subfolder.
• /web/article.html – Relative link to the “article” web page below the “web” directory.
• /web/services/article.html – Relative link from the current web page to the “article” web page under the “services” subdirectory of “web.”
• article.html – Relative link to the “article” web page in the same directory as the web page.
• ../article.html – Relative link to a directory one up from where the current web page resides.
• ../web/article.html – Relative link to a directory one up from where the current web page resides and one down (the “web” directory).
• ../../article.html – Relative link two directories up from where the current web page resides.

As you can see, this structure is hard to read and harder to remember. With the arrival of dynamic websites where programming replaces static old fashioned static HTML directories, most internal links are now absolute. We will use absolute links in the class unless specifically assigned.

Internal Links to Downloadable Files

In addition to linking web pages within a website, internal links are used to link to files for downloading. All linked files must have a recognizable file extension such as jpg, gif, doc, pdf, etc. File names should not have periods, commas, slashes, or other punctuation. They may have dashes, underlines, tildes (squiggles ~), and spaces (though spaces are considered bad form for older browsers).

The format for linking to a downloadable file is the same as creating a web page links.

<a title="Link to article title." href="http://example.com/story.pdf">Anchor Text (PDF)</a>

Per the examples in External Links, downloadable file links must have an indication that the link will behave differently from a typical web page link.

Return to the top ↑

Jump Links

Jump Links are links that jump the user within a document or to a specific place within that document. This document features many jump links such as a jump link to the External Links section of the document.

The format for a jump link is as follows:

<a href="#external" title="Jump to External Link section.">External Links</a>

Note that the link is a relative link with the # (pound or number sign) as the “address” of the link followed by the identifier.

There are two ways to create a jump link within a document. For the same above link example, you could use either of the following two examples as the destination for that link.

The Anchor HTML tag has a property called name, designating the name of a position or element on the page. Rarely used but not yet deprecated, it is usually placed on a line above where you wish the user to land.

<a name="external"></a>

Current HTML versions honor the ID property of any HTML tag as a jump link “name” position, the preferred method for creating a jump link destination.

<h2 id="external">External Links</h2>

The anchor name (aka ID) must have a value that is unique and not repeated elsewhere on the page, and must start with a letter of the alphabet, not a number. It may contain a number such as header-2 or header_2, but it cannot have a space in the name.

A jump link to a link on another web page marked with the property ID would look like this:

<a href="http://example.com/article.html#external" title="Jump to External Link section on article.">External Links</a>

Another common link jump feature is to jump back to the top of the current web page, a welcome jump link on especially long web pages with table of contents at the top or some other key information. Using either the Anchor HTML name destination or ID property is acceptable, but using the ID is preferred such as this jump to the top link where you will find a table of contents list featuring jump links to the different sections of this document. Check the source code to see how those are formatted.

Return to the top ↑

Image and Multimedia Links

Images feature a “link” to their destination on the web server or web to where they are stored. They can also feature a link around them to click to a larger view of the image or to a destination represented by the image. Let’s start with the latter.

<a href="http://example.com/ballarticle.html" title="Article about red balls.">

The image is wrapped by an Anchor tag. If the user clicks on the image, they would open the article about red balls.

The image HTML tag also contains a link to the image, set by <img src>, representing image source.

Video, audio, and other multimedia also contains links within their HTML tags such as <object and <video>. We will be discussing these later when we work on embedding multimedia.

Return to the top ↑

Email Links

Email links are links to email addresses which trigger the default email program when clicked.

<a href="mailto:lorelleonwordpress@gmail.com" title="Email Lorelle.">Email me</a>

The mailto: replaces http:// as the protocol for the email address.

Unfortunately, placing your email address on a web page risks exposure to email scrapers and harvesters, bots that search the web collecting email addresses for spam (bad) purposes such as junk email. It is traditional that the email address is obfuscated, hidden in plain sight.

Once obfuscated, the above code would look like this:

<a href="mailto:lorelleonwordpress@gmail.com" title="Email Lorelle.">Email me</a>

These are HTML Character Entities, code that the web browser recognizes and converts into readable context, in this case, English. See Email Obfuscation Tools and Scripts on Lorelle Teaches WordPress and More for details and examples of obfuscation tools.

Return to the top ↑

Link References and Resources

• Links in HTML documents – W3C
• The Definitive Guide To Styling Web Links | Smashing Magazine
• Designing Hyperlinks: Tips and Best Practices
• Styling weblinks with CSS – t3node
• Visualizing Links: 7 Design Guidelines (Jakob Nielsen’s Alertbox)
• learn web standards – styling links
• Absolute vs. Relative Paths/Links | CoffeeCup Software
• Relative URLs – WebReference

In “What Beautiful HTML Code Looks Like,” Chris shares a beautiful cheat sheet for what beautiful HTML really does look like.

It includes HTML5, JavaScript references, and everything you need to know to make beautiful music with your web page code.

Selection of Lorem Ipsum types can be tricky. If you are working on a project for fun, you can use anything that tickles your fancy. If you are building a wireframe or prototype for a client, while Lorem Ipsum might be appropriate and professional, choosing dummy content that matches the intent and purpose of the site might be wiser, such as using the Cupcake Ipsum for a food site, a Lorem Ipsum alternative that features names of deserts with Latin, Pasta Ipsum – for all your macaroni product lorem ipsum needs for pasta lovers, or Veggie Ipsum – the vegetarian lorem ipsum generator for an organic restaurant or farmers market seller.

Mustard salsify welsh onion cucumber earthnut pea okra brussels sprout. Yarrow green bean gumbo garlic welsh onion wakame pumpkin wattle seed yarrow sierra leone bologi taro gram. Catsear amaranth celery wattle seed sorrel shallot pumpkin.

Onion wattle seed quandong parsley fava bean rutabaga courgette cucumber. Celery potato melon bok choy epazote zucchini artichoke fava bean beetroot groundnut desert raisin onion black-eyed pea jícama coriander celery. Lotus root spring onion endive arugula tomatillo sorrel pea dulse chickweed turnip gourd plantain cauliflower tatsoi bush tomato komatsuna rutabaga. Water chestnut endive pea sprouts gram lentil spinach chicory lettuce soybean melon turnip greens celery parsnip artichoke okra swiss chard eggplant aubergine. Water spinach garlic tomatillo tigernut catsear peanut amaranth melon garlic.

Consider Bacon Ipsum for carnivores or Cheese Ipsum for cheese lovers.

Cheese slices lancashire jarlsberg. Monterey jack fromage say cheese pepper jack fondue cheese strings blue castello cheese triangles. Cheesecake squirty cheese cheesecake fromage frais mascarpone cheese and wine edam cheesecake. Stinking bishop stinking bishop.

Manchego rubber cheese cheesy grin. Fromage frais port-salut camembert de normandie port-salut port-salut manchego camembert de normandie cheese triangles. Bocconcini bocconcini cheesy feet cheese triangles macaroni cheese cheese slices paneer cut the cheese. Edam.

Cheese on toast who moved my cheese the big cheese. Queso cheddar pecorino fromage frais parmesan mozzarella brie lancashire. Jarlsberg smelly cheese lancashire cheddar stinking bishop roquefort port-salut cheesecake. Cheese and wine fondue blue castello smelly cheese emmental pecorino parmesan.

For serious sites and clients, the traditional Lorem Ipsum is a wise choice, but like the food versions of Lorem Ipsum, there are more content specific alternatives such as Corporate Ipsum for corporate speak, and Not Lorem Ipsum for industry based Lorem Ipsum generator. These create dummy content based upon the specific industry of the company such as app development, advertising, banking, cafes, restaurants, accounting, car sales, dentists, and more.

Check out this dentist version of Lorem Ipsum.

We are a friendly team of dentists, hygienists and receptionists who work together to ensure that you receive the best treatment that you require at a time that suits you. All of our dentists are accredited by The British Dental Association Good Practice Scheme, so you can rest assured that your smile really is in good hands.

We offer NHS dental treatment to children and have a very easy private payment scheme for our adult patients. We encourage everyone to visit the dentist regularly so that we can prevent any problems from occurring and the more you visit the less likely it is that we will have to do anything “scary!”

If you are working on a static HTML site, <html>ipsum is Lorem Ipsum set within HTML tags for paragraphs, lists, forms, tables, and more. Several alternative Lorem Ipsum generators offer the option for HTML including One-Click Lorem Ipsum Generator and Loripsum.net.

Web 2.0 Ipsumr is a popular alternative Lorem Ipsum generator using nonsensical Web 2.0 startup names in keeping with the naming of things like Google, Woopra, Orkut, Zynga, Squidoo, Meebo, etc. Hipster Ipsum is for the younger generation with lines such as:

Sriracha tofu ethical, cardigan wayfarers bushwick butcher kale chips scenester mcsweeney’s sustainable jean shorts Austin. Gastropub VHS farm-to-table, lomo whatever authentic thundercats street art. Iphone gentrify pour-over street art, small batch food truck keffiyeh DIY american apparel artisan high life cray twee fingerstache. Forage mumblecore readymade next level, single-origin coffee keytar swag cliche mcsweeney’s american apparel squid chambray. Occupy vice whatever forage, brooklyn next level direct trade messenger bag pitchfork.

Why stop with clever nonsense Web 2.0 names. Use Twipsum to generate your own Twitterverse originals in Lorem Ipsum fashion.

Following someone on Twitter and complaining about what they tweet about is like phoning someone to tell them you don’t want to talk to them.

Me regalaron un Twitter! .

I mean it’s even hard to get noticed by them when you mention their twitter names.

love this twitter showing dj white shadow’s tweets on my timeline.

Lorem Ipsum 2.0 does much the same thing but pulls content from Twitter, Digg, Delicious, Last.fm, Friendfeed, and Reddit, creating real social media dummy content.

Need a fake Twitter stream for your project? Try @Tweepsum on Twitter. It is a daily tweet in Lorem Ipsum.

A personal favorite of mine is the Fillerama: A Filler Text Generator. Designed and developed by Chris Valleskey and Matt Sauter, it uses television and movie classics to create custom Ipsum Lorem in easy to use HTML with headings and lists. This is a highlight of the Doctor Who version:

Vincent and the Doctor

They’re not aliens, they’re Earth…liens! They’re not aliens, they’re Earth…liens! You hate me; you want to kill me! Well, go on! Kill me! KILL ME! No… It’s a thing; it’s like a plan, but with more greatness.

Cold Blood

You’ve swallowed a planet! Did I mention we have comfy chairs? You know when grown-ups tell you ‘everything’s going to be fine’ and you think they’re probably lying to make you feel better? You know how I sometimes have really brilliant ideas?

1. The way I see it, every life is a pile of good things and bad things.…hey.…the good things don’t always soften the bad things; but vice-versa the bad things don’t necessarily spoil the good things and make them unimportant.
2. I’m the Doctor. Well, they call me the Doctor. I don’t know why. I call me the Doctor too. I still don’t know why.
3. Did I mention we have comfy chairs?

Victory of the Daleks

I’m nobody’s taxi service; I’m not gonna be there to catch you every time you feel like jumping out of a spaceship. I’m the Doctor. Well, they call me the Doctor. I don’t know why. I call me the Doctor too. I still don’t know why. No… It’s a thing; it’s like a plan, but with more greatness.

As a fan of science and space, both fiction and non-fiction, I’m also partial to the Space Ipsum.

Look again at that dot. That’s here. That’s home. That’s us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every “superstar,” every “supreme leader,” every saint and sinner in the history of our species lived there–on a mote of dust suspended in a sunbeam.

A good rule for rocket experimenters to follow is this: always assume that it will explode.

Need some political flare in your Lorem Ipsum dummy content? Try United Ipsums of America or Obama Ipsum. Here’s a sample from Obama Ipsum’s “oratory” paragraphs.

A nation of whiners? Tell that to the proud auto workers at a Michigan plant who, after they found out it was closing, kept showing up every day and working as hard as ever, because they knew there were people who counted on the brakes that they made. It is easy to point fingers – for Palestinians to point to the displacement brought by Israel’s founding, and for Israelis to point to the constant hostility and attacks throughout its history from within its borders as well as beyond.

Trollem Ipsum is supposed to be the answer to those having “trouble finding the right words.” Options include Apple, Android, Paul Therott, John Gruber, and a marketing analyst, among others. The Android Geek says:

Fanboi, generally you suck, not only Apple copied Android’s notifications at the beginning Apple are nothing without Steve Jobs, afterwards Android is better because it’s open.

Crap, who you’d buy sh*t if Apple sold it despite locked down, which fanboi so as to you suck, personally notifications are way better on Android, another point is that Flash.

It didn’t even have copy and paste, in order that you don’t know anything to sum up fact is, I can get a better laptop for less not enough professional fanboy, suddenly overpriced, for one thing fact is, Apple are going down so that blah, blah, blah why cult of Jobs.

Fan of the television show Arrested Development which is soon returning from the TV land cemetery for another round? Try It’s Arrested Lorem Ipsum:

The only thing I found in the fridge was a dead dove in a bag. WHY was this show cancelled? I mean, COME ON.

George Michael may be suffering from what we in the soft-sciences call Obsessive Compulsive Disorder, or the “OC Disorder.” It’s as Ann as the nose on Plain’s face. Yeah, like I’m going to spill coffee all over this $3,000 suit? Come on! Well, I spent so much time making sweet love on my wife that it’s hard to hear anything over the clatter of her breasts. When a.. man.. needs to prove to a woman that he’s actually.. [pause].. When a man loves a woman..

I’m gonna build me an airport, put my name on it. Why, Michael? So you can fly away from your feelings? Touché, Pandora. Look at us, crying like a couple of girls on the last day of camp. Michael, I’m your older brother. I’ll never be proud of you. Family Love Michael. Michael, you are not quite the ladies man I had pictured. Hopefully, we will remedy that when we are in the spa spreading body chocolate on each other.

Or maybe you are a fan of the Simpsons, thus will thoroughly enjoy Simpson Ipsum.

How is education supposed to make me feel smarter? Besides, every time I learn something new, it pushes some old stuff out of my brain. Remember when I took that home winemaking course, and I forgot how to drive? I hope this has taught you kids a lesson: kids never learn. I’ve had it with this school, Skinner. Low test scores, class after class of ugly, ugly children…

Want some manliness to your Ipsum Lorem? Try Hairy Lipsum Generator.

Basil fawlty testosterone trophy tony stark stache inspector clouseau, tony stark testosterone trophy Droopy tache I drink your milkshake basil fawlty inspector clouseau stache?

Clive dunn en time-warped cabbie casual style glorious facial hair tache cream bun disaster, cream bun disaster en time-warped cabbie tache clive dunn hairy kid at school glorious facial hair casual style cream bun disaster stache? Droopy brandy knavish rogue Refined gentlemen don’t panic.

Landed gentry dali comb id tricky sneezes dis erudite headmaster, what a bounder id frightfully nice dali hulk hogan super mario erudite headmaster comb tricky sneezes yeoman farmer dis landed gentry tip top old bean I drink your milkshake boogie nights?

Gunslinger borat robot moustache rugged et super mario, robot moustache super mario tony stark gunslinger nuremberg rally borat rugged et robot moustache basil fawlty?

Movember bad guy waxy gurn got milk goose.

Not manly enough, try these versions. The first is from Chuck Norris Ipsum.

When a director once said he couldn’t, he replied, “Of course I can, I’m Chuck Norris,” and roundhouse kicked him in the face. Chuck Norris is what Willis was talking about. Chuck Norris drinks napalm to quell his heartburn. Chuck Norris is a man of few words. Chuck Norris is not a man of few roundhouse kicks to the face. Chuck Norris once kicked a baby elephant into puberty. Ironically, Chuck Norris’ hidden talent is invisibility.

Or this example from Arnold Ipsum featuring quotes from Arnold Schwarzenegger movies.

Arnold ipsum. You are mine now. You belong to me. You should not drink and bake. When the governor get’s here, call me. Frosty. Stop being such a pussy. Remember Sully when I promised to kill you last? I lied! Well that hit the spot. Get down or I’ll put you down. Shutup. You are terminated. You got what you want. Give these people air. Get to the choppa. You set us up. Well then God shouldn’t have cloned my dog. This is war.

If you wish for some true nonsense when it comes to your dummy text, consider Blippity Fling-Flang.

Zap tang hum jingle blappity bleewhack, bam dingle abracadabra dee bleepity wuggleshnozzle wubble. Zip loo woggle ting blangity blippity rizzle dongleslap? Shnozzle floo hum crungle roo slap?

Weeble! Bam zunkity flee shnizzle shnoz bam blap. Bluppity slop blung!

Bam shnazzy zingle blop zung zap tingle. Ha dang Moe…flupping blobbing bladong. Dizzle slop flangity ho blobdabba???

When it comes to fake and dummy content, some people have a serious sense of humor.

Homophonic translations are words that sound like they make sense, but don’t. Developed by Howard L. Chace in 1940, they work best when read aloud. Here are some examples you can use Crockford’s Anguish Languish and others.

• Frey Mouse Tells
• Center Alley
• Guilty Looks Enter Tree Beers
• Ladle Rat Rotten Hut: Exploratorium Exhibit.

Dummy Lipsum is a Firefox Add-on that helps you generate Lorem Ipsum on the spot, and there is also one for Chrome called the Lorem Ipsum Generator.

The following is a list of various alternative Lorem Ipsum generators, sorted by type.

Traditional Lorem Ipsum Alternative Generators

• Lorem Ipsum (Greeking) Generator
• Lorem Ipsum and Gibberish Dummy Text Generator
• Blind Text Generator
• Random text generator
• Dummy Text Generator
• Lorem 2
• Lorem Ipsum Generator (Perbang)
• Lorem Ipsum Generator (Subterrane)

Lorem Ipsum HTML Generators

• Loripsum.net – lorem ipsum’ generator with HTML
• <html>ipsum
• One-Click Lorem Ipsum Generator

WordPress Specific Lorem Ipsum Alternative Generators

• jHTML-Ipsum – jQuery Plugin
• WP Dummy Content WordPress Plugin
• WordPress Filler Content for Theme Testing – WP FILL ME
• Lorem Ipsum Post Generator WordPress Plugin
• The Dummy Content File (XML File for Importing into WordPress

Industry Specific Lorem Ipsum Alternative Generators

• Not Lorem Ipsum – Industry Based Copy for the Web
• Journo Ipsum: A lorem ipsum generator for future-of-news nerds
• Baseball Ipsum
• Space Ipsum
• Corporate Ipsum
• adhesiontext™ – A Dynamic Dummy Text Generator
• Skate Ipsum. A gnarlier lorem ipsum generator.
• Fashion Ipsum

Social Media and Web 2.0 Speak Lorem Ipsum Alternative Generators

• Web 2.0 Ipsum – The Web 2.0 Lorem Ipsum Generator
• Twipsum – the fresh/relevant/inappropriate dummy text generator
• Lorem Ipsum 2.0 – get your dummy text from twitter/digg/reddit
• Tweepsum (tweepsum) on Twitter (Lorem Ipsum Twitter Stream)

Food and Drink Lorem Ipsum Alternative Generators

• Cupcake Ipsum – Sugar-coated Lorem Ipsum Generator
• Veggie Ipsum – the vegetarian lorem ipsum generator
• Beer Lorum Ipsum Generator
• Bacon Ipsum – A Meatier Lorem Ipsum Generator
• GAG IPSUM – Generate lorem ipsum like a sir
• Liquor Ipsum – A Stiffer Lorem Ipsum Generator
• Tuna Ipsum – A Fishier Lorem Ipsum Generator
• Cheese Ipsum
• Pasta Ipsum – for all your macaroni product lorem ipsum needs
• Générateur Lorem Ipsum en alsacien – Alsacreations (French food)

Foriegn and International Language Lorem Ipsum Alternative Generators

• Quijotipsum – Lorem Ipsum in Espanol
• adhesiontext™ – A Dynamic Dummy Text Generator
• T’Lipsum – Yorkshire Lorem Ipsum Generator
• makeTEXT Multilingual Lorem Ipsum
• Lorem ipsum avec accents et Caractères spéciaux français
• Pseudo-Czech Dummy Text Generator

Movie, Television, Books, and Genre Specific Lorem Ipsum Alternative Generators

• Fillerama: A Filler Text Generator
• Fillerati – Faux Latin is a Dead Language
• Zombie Ipsum: Frightful Filler for Your Damned Designs
• Lebowski Ipsum: Filler text that ties the room together (based on the Lebowski Brothers movie)
• Chuck Norris Ipsum
• Arnold Ipsum
• TV Ipsum – A Unique Ipsum Text Generator Using TV Theme Lyrics
• Comic Ipsum – dummy text generator for comic lovers
• It’s Arrested Lorem Ipsum – Bluth Ipsum
• Vatican Assassin: Charlie Sheen Lorem Ipsum Generator
• Lauren Ipsum (based upon a children’s story)
• Schmipsum – Lorem Ipsum from real sources like the bible, novels, Shakespeare, US patents, and more
• malevole – Text Generator
• Simpson Ipsum – The Lorem Ipsum generator for Homer
• Noah Chomsky random text generator
• Cthuvian Ipsum Generator (Lovecraft)
• Wordum
• Skyrim Ipsum (for gamers)
• Love & Valentine Poems – Festisite
• Adventure Time Filler Text
• The Postmodernism Generator

Trendy, Fad, Fascinating, and Adult Language Lorem Ipsum Alternative Generators

• Gangsta Lorem Ipsum dummy text generator
• Duck Island Geeking Machine for Classic, Hillbilly, Matrix, Marketing, Techno Babble, Pseudo German, and more alternative Lorem Ipsum
• Lorem Ipsum Generator – Samuel L Ipsum (adult language)
• F*CK LOREM IPSUM (adult language)
• Douchebag ipsum
• Blippity Fling-Flang
• Bogan Ipsum
• Hipster Ipsum – Artisanal filler text
• Hairy Lipsum Generator
• Skate Ipsum. A gnarlier lorem ipsum generator.
• United Ipsums of America » A Purely Presidential Lorem Ipsum Generator
• Obama Ipsum
• Trollem Ipsum
• Swearem Ipsum – the sweary placeholder text generator

Dummy text is not the only thing people use in websites for prototypes and wireframes. Coding Horror’s article, “The Eternal Lorem Ipsum”, lists image sources that could be considered the Lorem Ipsum of graphics. The list includes Creative Commons images, FlickrHoldr, Dummy Image with plain blocks of specific sizes, colors, text, and many other resources worth exploring for the graphic designer, web designer, web developer, and student exploring these subjects. Also experiment with Lorempixum, Placehold.it,

It’s All Greek To Me: 15 Lorem Ipsum Resources from Gigaom describes many of the alternative Lorem Ipsum generators including browser and dashboard widgets for Mac, and a handy keyboard shortcut for TextMate users. Other text editors which include the ability to quickly generate Lorem Ipsum include Notepad++, Scribus, and JC Text Editor, just to name a few. Text Editors with macro or program script capabilities can easily be programmed for quick keyboard shortcuts to generate Lorem Ipsum such as with NoteTab Pro.

You can use Microsoft Word to generate a few paragraphs of Lorem Ipsum. See Generate Lorem Ipsum Text in Microsoft Word from Labnon and Professional lorem ipsum generator for typographers for details, instructions, scripts and add-ons for Dreamweaver, Open Office, Windows and Linux Plugins, and more.

I’m sharing a lot of the tutorials and guides I created for the class here which you can find in various categories but specifically under the HTML tag.

I’d like to share with you one of the great tools I uncovered. It’s called Dirty Markup and describes itself as the “Tidy and Beautify your HTML, CSS, and JavaScript code tool.”

Dirty Markup cleans up your markup. It’s that simple, but it is more than simple.

There are a lot of TiDY programs and HTML and CSS cleaners out there. What makes Dirty Markup distinctive is the ease of use and clean interface. It also cleans up HTML, CSS, and JavaScript, whereas others do only one or two things.

What it does not do is “clean” the CSS up to alphabetize it, order it, or optimize it for style grouping and shorthand. It just makes it easy to read.

Cleaning Up Your Code

When it comes to code, there is cleaning and optimization.

Cleaning your HTML and CSS involves several tasks:

• Tidying up your code so it is properly formatted with indention.
• Removing unnecessary and unwanted spaces and lines.
• Fixing up small coding mistakes such as forgotten or unnecessary semi-colons or empty containers {}, or identifying those errors to help you fix them.
• Grouping the same CSS styles into a single declaration.
• Using CSS shorthand to combine multiple lines of related styles.

The last two are rarely done by CSS cleaners, though some claim the feature. They only look for margin and padding, sometimes border, styles to consolidate. The programs will not sort through the styles and group all selectors with the same style together. That’s part of the manual labor of CSS.

If you have ever run into a client who insists upon writing content or creating web pages in Word or another word processor, WordOff is a savior. It strips away all of the unnecessary HTML and styles from Word documents and leaves them fairly well cleaned up and ready to work with in clean HTML.

HTML and CSS optimization is a form of cleaning, but its goal is to strip out EVERYTHING unwanted and unnecessary. In extreme optimization, all spaces and line breaks are removed to reduce the file sizes. Every character and space adds up. The theory is that if you remove all of the excess, it will shrink down the file size.

While this is true, few web pages today need this extreme optimization. Most web pages today are dynamically generated with content from databases, thus the size of the actual files being used is small, holding the HTML framework and database requests. However, if you are running a large and active site, HTML and CSS optimization might be a good idea to save space and speed everywhere.

Here are some reference articles to help you with cleaning, sorting, grouping, and using shorthand with your CSS.

• CSS Shorthand Guide
• CSS Property Ordering: Group Similar? Or Alphabetical? | Impressive Webs
• 7 Principles Of Clean And Optimized CSS Code | Smashing Coding
• Efficient CSS with shorthand properties

The following are more resource and reference articles to help you learn more about CSS and the tools that are available to help clean it up, along with your HTML.

• List of CSS Tools | Smashing Coding
• 18 CSS Compression Tools and Techniques | Design Shack
• 10 Tips for Writing Better CSS | Tips
• Clean CSS – A Resource for Web Designers – Optimize and Format your CSS
• 15 CSS Habits to Develop for Frustration-Free Coding – Noupe
• CSS3 Exciting Functions and Features: 30+ Useful Tutorials – Noupe
• Ten CSS tricks you may not know
• 250+ Resources to Help You Become a CSS Expert | Webdesigner Depot
• 12 Principles For Keeping Your Code Clean | Smashing Coding
• What Beautiful HTML Code Looks Like | CSS-Tricks
• Fix My HTML
• WordOff (Cleans MS Word-generated HTML Pages)

There programs designed to "tidy" your HTML and CSS into a format that meets typical standards for code layout. These take hard-to-read markup (code) and clean them up into a consistent format.

These tidy programs will not fix your broken code, but they may identify errors to help you fix it yourself.

Tidy programs were originally created by Dave Raggett to help clean up the HTML code. HTML TIDY now supports HTML5 and HTML exported from Google Docs, Word, and other publishing programs.

There is now a community supporting TIDY and you can learn more on TIDY Sourceforge Project.

There are also CSS TIDY programs. These work the same as the HTML versions. They include: CSSTidy and CSS Formatter and Optimiser/Optimizer (Online).

TIDY is available for cleaning up online or offline, and is incorporated into many text editors and programming editors. it is available for a variety of operating systems and in different programming languages such as Java, Perl, and Python.

To use these, follow the instructions provided by the developer. Always save a backup of the original file, called "about.bak" or something similar, just in case.

For online versions, it is as simple as uploading the file to be cleaned or pasting the file contents into the form. Copy the cleaned code and paste it into a copy of the file name or create a new version of the file and rename it to the desired name.

• Downloadable Versions:
  • Download TIDY for Windows, Mac, and Linux
  • HTML Tidy for Windows – HTML Tidy for Windows
  • TidyGUI (Windows)
  • Balthisar Tidy (MAC OS X)
• Online Versions:
  • HTML tidy service – W3
  • HTML Tidy Online – Infohound
  • The Dumb Terminal TIDY and HTML Validation
  • Tidy Online
• Browser Add-ons:
  • Html Validator :: Add-ons for Firefox
  • Chrome – HTML Validator
  • Chrome – HTML Tidy Browser Extension

Learn More About TIDY

• Dave Raggett’s Introduction to HTML
• HTML Slidy – Tutorial on creating Slide Shows in XHTML by Dave Raggett
• HTML Tidy – Frequently Asked Questions
• Clean up your Web pages with HTML TIDY
• CSE HTML Validator Help

The following are helpful HTML and CSS references and resources.

W3C Guidelines and Standards

• CSS current work & how to participate
• CSS Flexible Box Layout Module
• CSS3 Template Layout Module – W3C

Basic HTML and CSS Resources and References

• Basic Structure of a Web Page » HTML Elements| Learn HTML – Tags – Tutorials – HTML Cheat Sheet
• CSS Reference | Mozilla Developer Network
• The Shapes of CSS – CSS Tricks
• CSS Structure and Rules
• Terminology, Syntax, & Introduction – A Beginner’s Guide to HTML & CSS
• CSS Examples – Sitepoint
• CSS Portal – Templates, Tutorials, Books, Software, Code Examples
• CSS layouts – Max Design
• CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices – Noupe
• Selectors Level 3 – W3C
• Why Percentage-Based Designs Don’t Work in Every Browser
• Tips, Tricks and Best Practices for Responsive Design – Webmonkey
• Conversation With X/HTML 5 Team
• An Inside View of the CSS Working Group at W3C

Official HTML5 Resources

• CSS3 Media Queries – W3C
• HTML5 Spec Sheet
• HTML5 — Edition for Web Developers
• How Did We Get Here? – Dive Into HTML5
• Move The Web Forward – Guide to getting involved with standards and browser development

CSS3 Resources and References

• Eric Meyer’s Archived Thoughts: CSS Reset Reloaded
• Normalize.css: Make browsers render all elements more consistently
• Progressive Enhancement with CSS 3: A better experience for modern browsers – Dev.Opera
• In defense of CSS hacks — introducing “safe CSS hacks” · Mathias Bynens
• The fundamental problems with CSS3 – Matt Wilcox
• Structural Tags in HTML5 – HTML & CSS – Resources – Ordered List
• Overview of CSS3 Structural pseudo-classes
• CSS ‘Paged Media’ Brings Book Smarts to the Web

CSS3 Tutorials

• Push Your Web Design Into The Future With CSS3 – Smashing Coding
• Coding a CSS3 & HTML5 One-Page Website Template – Tutorialzine

HTML5 Resources and References

• HTML 5 pocket book
• HTML5 Canvas Cheat Sheet – Nihilogic
• Review: The Truth About HTML5 For Web Designers – HTML5 Doctor
• HTML5 Visual Cheat Sheet
• A List Apart: Articles: Semantics in HTML 5
• HTML5 Canvas Cheat Sheet v1.1 (PDF)
• HTML 5 Cheat Sheet (PDF) – Smashing Magazine
• Amazon Embraces HTML5 for New E-Book Format

HTML5 Tutorials

• 24 ways: Have a Field Day with HTML5 Forms
• Responsive News – Fluid grids, orientation & resolution independence
• Coding An HTML 5 Layout From Scratch – Smashing Coding
• What is HTML5? (Infographic)
• HTML5 Boilerplate – A rock-solid default template for HTML5 awesome.
• Designing a blog with html5 – HTML5 Doctor
• Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 – Inspect Element
• 28 HTML5 Features, Tips, and Techniques you Must Know – Nettuts+
• How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6 – Nettuts+
• HTML 5 and CSS 3: The Techniques You’ll Soon Be Using – Nettuts+
• HTML5 Presentation – HTML5 Rocks
• How We’ll Lay Out Websites In 2016 – Broken Links
• Quick hits with the Flexible Box Model – HTML5 Rocks
• 28 HTML5 Features, Tips, and Techniques you Must Know – Nettuts+
• Building Web Pages With HTML 5 – Webmonkey – Wired.com
• The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks

HTML5 and CSS3 Tools

• GRIDINATOR – All your CSS grid are belong to us.
• HTML5 Readiness Encyclopedia for HTML5 features across browsers
• Welcome to Treehouse, Start Learning Web Design and Structure Today

HTML and CSS Structure, Layout, Frameworks, and Wireframe Articles

• Make Your Mockup in Markup – 24 Ways
• A List Apart: Articles: Fluid Grids – A List Apart
• Web Design Iterations And Algorithms – Design Informer
• HTML5 Front End Development Framework – G5 Framework
• HTML5 Gallery – A showcase of sites using HTML5 markup
• p.erkins CSS3 LESS Framework
• HTML5 Starter Pack by Radu Chelariu – Sickdesigner.com
• HTML 5 – Working Draft
• 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials
• 20+ Useful CSS3 and HTML5 Frameworks, Tools and Templates
• Pros And Cons Of Using Frameworks
• 52framework – The framework from the future, HTML5, CSS3, and more!
• Blueprint CSS Framework
• Modernizr JavaScript Library for HTML5 and CSS3
• 10 Pixel Grid System — Visual28
• Grid Style In Modern Web Design: Showcase and Resources