Why does the ContentRobot site look like this? ... Click here to find out.

Welcome to the evolution of the ContentRobot blog-powered website! We invite you to watch, as we convert our site to a new design and focus. We're even blogging the process, too.

Blog Design

What Year is It on Your Blog?

Are you still writing 2007 on your checks (if you are still writing them)? Even tho we are over two weeks into the new year, are you still struggling to say this is 2008?

Now … what does your blog’s copyright date say? Scroll down to see your footer, do you see © Copyright 2007 Your Blog Name?

While it’s a little mistake, it may be big and glaring in the eyes of any unforgiving readers. Don’t give them any reason to question why they should stay on your blog.

If you are on a PHP-driven blog (such as WordPress), you can fix it now and forever. In your footer, merely put the following code to display the year: <?php echo date(’Y'); ?>

For those of you who want to include your starting the copyright date (example: 1998-2008), just code it as follows: 1998-<?php echo date(’Y'); ?>

Not on WordPress? For hosted solutions and other blog platforms, we suggest that you check out your user guides - but get that timestamp automated.

Now, go out there and show ‘em what year we are living in!

Add Some Holiday Spirit To Your Blog With Our Animated Snow For WordPress

To help spread holiday cheer, ContentRobot has created an animated header with falling snow for the WordPress default (Kubrick) theme. You can easily add this Flash-based header to your site and it will overlay falling snow on top of your existing header graphic. No fiddling with Flash necessary, simply upload a few files to your server and the snow automatically appears!

You can view an animated example here.

The “Snowified” header is easily customized via a simple text file.

  • Choose from three different snowflake styles.
  • Customizable flake fall speed and rotation amount.
  • Choose to display the blog’s title and description within the Flash file (or hide it if your logo is part of your header image).
  • Dynamically loads external header JPEG behind falling snow.
  • Chose to display snow within the rounded area of the header or have the snow fill the full header.

Read the Entire Post >

Tips & Tricks to Improve Blog Accessibility

w3c logoIn the final post of our Blog Accessibility Series, ContentRobot provides some tips to helping your design your blog for a wider audience.

1. Use Relative Font Sizes
Express font sizes in percentages or ems, rather than absolute font sizes expressed in points or pixels. The allows users to make the text larger or smaller as they wish.

2. Design & Label Your Forms Properly
Lay out your forms logically and consistently, make proper use of labels, and avoid client-side scripts and radio buttons will make your web forms much more accessible to users who are visually impaired.

3. Write Effective Alt-Text
Think about the difference between “Click Here” verses “Download the ContentRobot WordPress Theme” when creating your alt tags. More tips:

  • Brief is better.
  • Put the most essential information first.
  • Meaningless graphics, such as spacers, do not need meaningful text.
  • Maintain the alt-text. If your navigation was rearranged, don’t forget to move the alt-text, too. Otherwise, users may get lost.
  • Spell words correctly.

4. Test and Validate

  • Check out the free W3C Markup Validation Service.
  • Validate syntax (e.g., HTML, XML, etc.) and style sheets (e.g., CSS).
  • Test using a text-only browser or emulator.
  • Test for these conditions: sounds and graphics loaded, graphics not loaded, sounds not loaded, no mouse, frames, scripts, style sheets, and applets not loaded
  • View your site in several browsers, old and new, and on different platforms, Mac and PC.
  • Use a self-voicing browser, a screen reader, magnification software, a small display, etc.
  • Use spell and grammar checkers. A person reading a page with a speech synthesizer may not be able to decipher the synthesizer’s best guess for a word with a spelling error.

5. Invite People with Disabilities to Review Documents
Expert and novice users with disabilities will provide valuable feedback about accessibility or usability problems and their severity.

For More Information About Creating Accessible Web Sites
Explore the Web Accessibility area of the American Foundation for the Blind site, or visit the World Wide Web Consortium’s Web Content Accessibility Guidelines.

Related Posts: Is Your Blog Accessible to People With Disabilities? and Design Your Blog to Be More Accessible to a Wider Audience

Design Your Blog to Be More Accessible to a Wider Audience

html code imageThe World Web Web Consortium has published guidelines to help designers make their sites more accessible. ContentRobot has summarized some key points below.

  • Make multimedia content (images, video, and audio) more accessible to a wide audience. This can be done using text equivalents (often rendered with Alt tags within HTML documents). Text can be rendered in ways that are available to almost all browsing devices and accessible to almost all users.
  • Provide non-text equivalents (e.g., pictures, videos, and pre-recorded audio) for text to offer visual cues that convey the same information. This can be beneficial non-readers or people who have difficulty reading.
  • Ensure that text and graphics are understandable when viewed without color. Some people cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information.
  • Separate structure from presentation and content by ensuring that HTML and CSS markup is coded properly. Mark up documents with the proper structural elements and control presentation with style sheets rather than with presentation elements and attributes. Misusing markup for a presentation effect (e.g., using a table for layout or a header to change the font size) makes it difficult for some users to understand the organization of the page or navigate through it.
  • Ensure that pages are accessible even when newer technologies (using Flash or Javascript, for example) are not supported or are turned off. Some users still work with older browsers and some choose to turn off newer features. Finally, if the interface of the embedded object cannot be made accessible, an alternative accessible solution must be provided.
  • Create documents that do not rely on one type of hardware. Pages should be usable by people without mice, with small screens, low resolution screens, black and white screens, no screens, with only voice or text output, etc.
  • Provide a clear and consistent navigation, including orientation information, navigation bars, a site map, etc. This increases the likelihood that a person of any ability will find what they are looking for at a site.
  • Provide a consistent page layout, recognizable graphics, and easy-to-understand language benefits all users as it promotes effective communication.

In sum
There are a variety of simple guidelines that designers, developers, and content providers can do to make their blog pages more accessible to persons of all abilities. We’ll even delve deeper with more accessibility tips in our next post.

Related Posts: Is Your Blog Accessible to People With Disabilities? and Tips & Tricks to Improve Blog Accessibility

Is Your Blog Accessible to People With Disabilities?

braille screen reader imageBlog designers should consider ways to make Web content more available to all users, and help people find information more quickly.

Consider that many users may be operating in contexts very different from your own. Have you thought about these issues while designing your blog?

Web Surfing Devices
Websites can be viewed from a desktop or laptop browser, voice browser, mobile phone, automobile-based personal computer, etc. Can your users connect to your blog using all these devices?

Hardware Constraints
Users may only have access to a text-only screen, a small screen, or even a slow Internet connection. While broadband is more available, there are some users who do not have it.

Browser Versions
Users may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system. Have you designed for the more popular browsers on the Mac, PC, and Linux platforms?

Language Barriers
Users may not speak or understand fluently the language in which the document is written. It may be necessary to consider linking to online translators (like Bablefish).

Environmental Issues
Noisy surroundings, under- or over-illuminated rooms, in a hands-free environment, for example, may all be valid issues for a difficult surfing experience.

Physical or Developmental Disabilities
There are many issues that fall under this category. Some to consider are:

  • Users may not be able to see, hear, move.
  • They may not be able to process some types of information easily or at all, including difficulty reading or comprehending text.
  • Not all users can make use of visual clues such as image maps, proportional scroll bars, side-by-side frames, or graphics that guide sighted users of graphical desktop browsers.
  • Users also lose contextual information when they can only view a portion of a page, either because they are accessing the page one word at a time (speech synthesis or braille display), or one section at a time (small display, or a magnified display).
  • Without better orientation information, users may not be able to understand very large tables, lists, menus, etc.
  • Some users might not have or not be able to use a keyboard or mouse.

Related Posts: Design Your Blog to Be More Accessible to a Wider Audience and Tips & Tricks to Improve Blog Accessibility

Add Visual Interest to Your Blogs With Inexpensive Royalty Free Images

One of the cool things about blogging is the ability to include photos within posts. While blog editors are really not that great at image placement and editing, its great when you can put some visual interest into your entries.

Then how do we find inexpensive, but compelling stock photos? Here are some sites that offer some nice royalty free images:

Hunting for the right photo can be downright addictive. Have fun!
Read the Entire Post >

Add a Tag Cloud to Your Blog - It’s Easy!

Tag clouds visually depict the contents of a web site or blog. The first tag cloud appeared on Flickr (the photo sharing site) and was based on Jim Flanagan’s Search Referral Zeitgeist, which visualized web site referrers.

These weighted lists show the most popular categorizes in an emphasized manner while displaying them alphabetically. Larger fonts often indicate a higher prevalence for an individual keyword.

You’ll notice that ContentRobot’s blog topic cloud reveals that business blogging and blogging basics are among the biggest areas that we write about.

Check out some more tag cloud examples:

Want your own tag cloud? Check out these links:

Or use these plug-ins on your specific type of blog:

One of the coolest implementations of a tag cloud has to go to Snapshirts, who can customize your web site or blog and put it right on a shirt. Go check it out.

Blog Design & Spring Cleaning

If you have been managing your blog for a while, you might notice that things have been getting cluttered as you’ve added new features, buttons and widgets - it’s time for spring cleaning!

Blog Design

  • Even if you feel you haven’t done alot of modifications to your blog’s design, be sure to take the time to validate your home page, blog templates, and CSS files at http://validator.w3.org and reduce all errors.
  • Check your blog in multiple browsers and multiple plaforms. Viewing IE 6, Firefox, and Safari on PCs and Macs can help you to iron out the bugs.
  • Play with the increase and decrease font features in any browser to see if the design still holds up.
  • Turn off stylesheets in your browser. Does the blog’s structure still make sense?
  • Turn off images in your browser. Is everything still understandable? Is the text still readable?
  • Resizing your screen’s resolution to 800 x 600 pixels and then to 1024 x 768 pixels. How does it look?
  • Use the Google Mobilizer to view your blog the way mobile users will see it.

Read the Entire Post >

Designing for Blogs

Design can add tremendous value to a blog, as a compelling design can make a huge impact on your bottom line.

Remember design is not just about making things pretty - it’s about making things work to their best ability. But what is the process a designer goes through to create a great blog look?

1. Have a Great Toolset
What designers should minimally have at their disposal:

  • a graphics editor (such as Photoshop, Illustrator, Freehand, etc.)
  • some good inspiration
  • lots of creative vision

Read the Entire Post >

What’s In Your Blog’s Sidebar?

Don’t underestimate the power of your sidebar - it is among the hottest areas on your blog. Here are some elements that can be helpful to include in it:

Site Search
Allows allows your faithful, long-time visitors easily find information they have seen in the past. It can also function as a link-building aid, bringing back old posts to life.

Site Introduction
This will allow you to personalize your blog up-front, but don’t forget to include an expanded About Us section.

Contact Information
Because blogging is all about building relationships, don’t hide who you are. This also lets visitors know how to easily reach you (consider adding a contact form to make it even easier).

Blog Categories
Blog categories help to relate what your blog is all about. And as more and more articles get created, it can help to establishes credibility.

Popular / Recent Posts and/or Comments
These lists can show off creativity and promote linkabait. They are great, especially for the first time visitor, and help with internal exploring and keeping the conversation going.

RSS Buttons
RSS buttons help visitors to add your blog to their feeds. A steady increase of RSS readers is a good indicator of success.

Other Projects/Blogs
Enntrepreneurs can take advantage of a sidebar to link to other projects, as it can be a good way to quickly promote your secondary or primary businesses.

Fun elements

  • Polls
  • Newsletter Signup
  • Reading Lists
  • Store Link

Other Possible Additions
While these have their supporters and detractors, they may help with search engine / site navigation and we list them as ideas.

  • Blogrolls
    Not perhaps for corporate blogs, yet they provide a great way for readers visiting related sites. It can serve as an excellent link-building strategy as referred traffic is always encouraged. You can also be liberal with your outward links in your posts and/or have a links page to create a similar effect without a list that may become unwieldy or outdated.
  • Archives
    While date based archives are not the best way for visitors to explore your site, they allow search engines to find every page on your blog quickly. You can also achieve a similar effect with a sitemap or with categories.
  • Advertising
    Done tastefully, ads in the sidebars can be a nice way to add contextual advertising or affiliate programs here.

Remember to re-evaluate your side bar every few months, if it is cluttering your site - it’s time to cut some elements.