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.

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.

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

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

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.

• 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

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

Basic Web Browser Tips by Lorelle VanFossen for Clark College from Lorelle VanFossen

Please note that the video refers to the Windows keyboard shortcuts using the CTRL key. This is the equivalent to the CMD key on Mac.

For mobile devices, long presses usually activate the equivalent of keyboard shortcuts and right clicks, though not all of them may be available in the apps you are using.

Here are some of the specific tips covered in the video.

• Editing (just like in a word processor)
  • CTRL+C = Copy
  • CTRL+X = Cut
  • CTRL+V = Paste
  • CTRL+Z = Undo
• CTRL+T = Open New Tab
• F5 = Reload/Refresh Page
• Zoom in and out of a web page (magnify): CTRL+Plus and CTRL+Minus
• Right click on links on the page brings up the right click menu to access link specific options and features.
• Right click on blank or empty spaces on a web page brings up the right click menu for page specific options and features.
• Learn to open web pages in tabs not windows. This saves on computer memory issues and speeds up your browser process.
  • Use Mouse and Keyboard shortcuts: CTRL + Left Click on Link = Opens Linked Page in New Tab
• Fast Navigation through Browser Tabs
  • CTRL+T = Opens New Tab
  • CTRL+1 = Goes to Tab #1
  • CTRL+ 2, 3, 4, etc. goes to that tab number
  • CTRL+Arrow = moves focus to next and previous tab
• Working on web page design or WordPress? Refresh and you don’t see changes? You need to clear the cache and do a "hard" clearing page reload. F5 or SHIFT+F5 OR do a Cache Refresh
  • CTRL+F5 (Firefox and Chrome)
  • CTRL+Shift+R (Firefox)
  • CTRL + R (Chrome)
  • (You may have to repeat a couple times)
• To view the source code of a web page: Right Click > View Page Source
• Web Developer Tools
  • Use Built-in Web Developer Tools plus Firebug:
  • Measure It: Measure It for Firefox or Measure It for Chrome
  • Color Pickers: Colorzilla for Firefox and Chrome
  • Copy Link as Proper HTML Link: CoLT for Firefox or Chrome Create Link or Chrome Copy Link Text
  • For preserving and sharing code snippets on your site, in comments, forums, and social media use PasteBin: Pastebin for Firefox and Chrome

• WordPress Theme customization: Twenty-Eleven Theme analyzed
• Child Themes

Homework

• Update WordPress from within Instant WP on your thumb drive.
• Create a Child Theme for 2011
  • Customize Widgets, Header, etc., from Administration Panels
  • Customize CSS with Child Theme stylesheet
• Prepare article with screenshots of your Child Theme published on your blog by Tuesday with explanation

Reading

• Creating a Simple Child Theme Using Twenty Eleven | Wptuts+

• The Twenty Eleven Theme | Just another WordPress.com site
• Featured Images — Support — WordPress.com
• Conditional Tags « WordPress Codex
• Everything you need to know about WordPress 2.9 post image feature
• Tutorials For Creating WordPress Themes | Top Design Magazine
• How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial | ThemeShaper
• How to Build A WordPress Theme From Scratch Part One | Developer Drive

Your Blog So Far

The following must be on your blog by now. Nothing new has been added, just ensure everything is done.

• Pages
  • About Page
  • Contact Page
  • Policies Page
  • Copyright
  • Comments Policy/Guidelines
  • Privacy Policy
  • Subscription Page
  • Editorial Calendar (in subPage)
• Blog Posts (NOTE: Homework assignments MUST be in “assignments” or “class assignments” category. They may also be in other categories.)
  • Multimedia
    • Post with three images with text wrapped around them.
    • Post with one video and text.
    • 2 posts featuring multimedia, your choice.
    • A post featuring a gallery of images.
    • A post featuring an audio or video of yourself.
  • A List Post.
  • A PollDaddy Poll.
  • The Post Sandbox Text in a post for testing Themes.
  • A post about searching for WordPress Themes and why you’ve chosen the one you have.
  • A Private post with the password ctec280 with something to make the students laugh.
  • Three different Post Format posts (Aside, Status, Link, Photo, etc.) NOTE: Not all Themes recognize Post Formats.
  • A WordPress tip article with screenshots or examples of code.
  • A 3 Post article series on any topic.
  • Core categories visible with 3-5 blog posts under each one which can be filled through above post content. (Should have no more than 5-7 categories.)
• Comments
  • At least three comments from every student in class on your blog.
• Widgets
  • Link List of fellow students
  • Search Widget
  • Pages Widget
  • Categories Widget
  • Tag Cloud
  • Recent Posts Widget
  • Subscribe by Email Widget
  • Subscribe by Follow Widget/option
  • Feed Links Widget
  • Social Media Widgets for Twitter, Facebook, etc.
• WordPress Administration Panels
  • Profile completed and Gravatar set.
  • Share button on posts
  • Like to posts
  • Publicize share features with social networks you belong to (LinkedIn at minimum)

I recently learned the true definition of the word “guru.” It means to lift someone up through knowledge and wisdom. It means to teach, to impart wisdom, “to dispel the darkness of ignorance” so that those who go after you will be better for it.

Too often the label is used with arrogance. It doesn’t mean to lord over others as an expert. A true guru probably wouldn’t call themselves a guru. Others would honor them with the title.

After years of being called a guru in WordPress, blogging, and multimedia web publishing and being embarrassed by it, I realized there was more to being a guru than a line on a promotional ad. It’s time to reconsider such self-proclamations without anything to show for it. It’s time to call myself on the carpet to prove my worth, and for others to step up to the plate and prove it themselves.

Here is the article series so far which focuses on proving your personal expertise and experience to back up what you blog about. I just published the last article which includes research on what elements of a website design and content inspire trust in their readers.

• Campaign 2011: Prove It!
• Prove It: It’s Starts With Defining Who You Are
• Prove It: Kym Huynh Exposed
• Prove It: What Makes You Trust a Website?

Future articles will focus on specific design and content elements with recommendations on WordPress Theme and Plugins to help “prove it” on WordPress sites. I’ll be writing about how to prove it through accuracy in writing, publishing, and interaction with readers, and how to measure the proof of your success through analytics and feedback. I’ll add more articles to this post as the series continues throughout the year.

Most WordPress designers and developers either create their own WordPress Theme frameworks or use one already created for every WordPress site they develop. It’s important for them to be familiar with all the HTML and CSS design elements so they can quickly apply the design elements, whether from scratch, wireframe, or from a Photoshop to WordPress conversion. The more you understand how a Theme framework functions, the faster the design work can be applied.

Basic information on frameworks for WordPress Themes is found in the WordPress Codex article on Theme Frameworks, but it does little more than link to free WordPress Theme frameworks and a few articles and references. While the volunteer documentation team on the WordPress Codex works to improve the article, here are some resources that might help you understand how WordPress Theme frameworks work, how to build one yourself, or how to choose one upon which to build your WordPress site. Below that is a list of free WordPress Theme frameworks for you to experiment with.

• Why I created a WordPress theme framework – Justin Tadlock
• WordPress Theme Development Frameworks – Smashing WordPress
• The Top 10 WordPress Theme Frameworks | Wptuts+
• 15 Responsive CSS Frameworks Worth Considering – Specky Boy
• WordPress Theme Frameworks: Options You Should Consider – Six Revisions
• 10 HTML5-Ready Blank, Bare-Bones and Naked Themes for WordPress – Specky Boy
• 15 Free WordPress Themes with a Responsive Layout – Specky Boy
• Top 10 Preferred WordPress Theme Development Frameworks | inspirationfeed.com
• Build WordPress themes smarter: 23 theme frameworks compared | WPCandy
• 20 Free HTML5 WordPress Themes and Theme Frameworks – WPLift
• 20 WordPress Theme Frameworks And Starting Resources – 1st Web Designer
• Top 10 Free WordPress Frameworks for Designers | Most Inspired: Design Inspiration Blog

The following are free WordPress Theme frameworks available for downloading and designing with. Each one offers a variety of features so explore their feature sets thoroughly. Some of the articles above offer comparisons between the different Theme frameworks and tips for working with each one. Some of these are especially designed for HTML5 and/or CSS3. Most typically are cross-browser and mobile friendly.

• Ashford WordPress Theme
• Carrington
• onepress WordPress Theme Framework supporting phpBB
• The 1140px CSS Grid System
• inuit.css—cooler
• BluCSS
• H5 WordPress Framework
• BLANK WordPress Theme
• Fluid Baseline Grid (HTML5/CSS3)
• Foundation
• Frameless
• Golden Grid System
• The Goldilocks Approach to Responsive Web Design
• HTML5 WordPress Shell
• HTML5 Reset
• Less Framework 4
• MQFramework
• Brave New World WordPress theme
• Handcrafted WP Starter Theme
• The Semantic Grid System
• Simon WP Framework
• Starkers
• 320 and up
• Gridless (HTML5/CSS3)
• Bones (HTML5)
• Reverie (HTML5)
• Hybrid theme framework
• Toolbox (HTML5)
• Thematic
• Whiteboard Framework for WordPress
• Biblioteca
• Amazium
• Columnal
• Skeleton
• Roots WordPress Theme (HTML5)
• The Buffet Framework

Simply described, each core design element such as the header, background, and design details are segmented into graphics and then used as background images or direct images where appropriate on a WordPress frameworks, a WordPress Theme with the core design elements you need to flesh the site out with a strong stylesheet.

A Photoshop (PSD) Plugin, Divine, is very popular and available for a thirty day trial. Add it to Photoshop and it will automatically help you export the graphic elements for a WordPress site. Familiarity with WordPress functions, features, and Theme structures and styles are required to complete the process, but it does help with the export of the graphics for the Theme. It works with Windows XP, Vista, and 7. Currently, there are no free programs for the Mac, but some alternatives are available with free, limited trials. [NOTE: Since 2009, all marketing about the Divine Photoshop Plugin explicitly says it is "absolutely free." I just learned it has a thirty day trial and then it is expensive to purchase. While it might seem to be the ideal thing to try, unless you are making a living as a web designer, it's not worth the cost.]

In general, while the Divine Photoshop Plugin is helpful, you can generate the graphics yourself. For more information on how to take a wireframe Photoshop image and convert it to a WordPress Theme, try these resources.

• From PSD to HTML: Building a Set of Website Designs Step by Step – Nettuts+
• WordPress Theme from Scratch – Day 3: HTML to WordPress – AEXT.NET MAGAZINE
• How to Convert a PSD Web Design to HTML and CSS – Nettuts+
• Photoshop to WordPress: A Basic Guide – Randa Clay Design
• 30+ Best PSD to HTML/CSS Conversion Tutorials
• Divine Elemente (plugin for photoshop). PSD to WordPress theme converter.
• From Photoshop to WordPress – Part I – Design – The Web Squeeze
• Design Web Layout with Photoshop and Convert to WordPress Theme (Video Tutorial) – WebStockBox

Wireframes are essential in the process of getting ideas down and the site design fleshed out. They are also critical for working with clients to ensure the designer/developer and the client are on the same page.

However you make your wireframes, make sure they are flexible and easily altered as your site evolves.

A Google search for WordPress and wireframe images turns up some excellent examples.

Here are some articles featuring wireframe tips and resources.

• 10 Completely Free Wireframing and Mockup Tools – Specky Boy
• 10 Completely Free Wireframe and Mockup Applications – Specky Boy
• Ultimate Guide to Website Wireframing – Six RevisionsWireframe and mockup tools, best examples – Web Design Shock
• 35 Excellent Wireframing Resources – Smashing Magazine
• Keynote as a collaborative wireframing tool – Web Designer Depot
• Sticks and Stones Break My Bones, Wireframes Excite Me – Web Savvy Marketing
• Creating Web Design Wireframes: Tools, Resources, and Best Practices – Onextrapixel
• 18 Great Examples of Sketched UI Wireframes and Mockups – Inspiration – Web Design Ledger
• Developing a WordPress Wireframe – Theme Remodel, WordPress – AbleReach

Alex Ferguson came up with a way to help us align videos with the text, floating them to the left or right of the post content area so the text will wrap around the video.

Let’s see if this works.

It does, but the technique is a little trickier than you might thing. Remember, this is for within a WordPress.com blog, thus we have to work around some of their limitations.

The code involves creating a DIV with the alignment class for left, right, or center, plus the WordPress.com Youtube shortcode with the width and possibly height set.

<div class="alignright">

</div>

In the link to the Youtube video you should see &w=400&h=450. This sets the width of the video to 400 pixels, narrower than the typical 500 or so, and the height to 350 pixels. Every Theme has a different column width so you will need to play around with these to get them the right size for your WordPress.com site.

This is what we call a “hack,” a way around the typical way of doing things. I recommend you save this in a reference text file so you can copy and paste in the video link next time you try this in a post.

Thanks, Alex, for experimenting with this!