Aarron Walter » Tools & Utilities

Findability/SEO Cheat Sheet: Guide to Web Standards SEO

Aarron — Mon, 28 Jul 2008 22:48:08 +0000

free findability strategy cheat sheet [PDF 200k]

When I was researching my book, I asked a group of my students at The Art Institute of Atlanta what sorts of content they’d hope to find in a book exploring findability and SEO through web standards. Thinking like students with limited time to work on their projects, they all agreed that “the book should include coverage of what needs to be prioritized, and what can be done later if you run out of time”. Brilliant idea! I never would have thought of that. Well it’s covered in chapter 9 thanks to them.

As I was running through my table of contents with them, they pointed out that it’s all useful info, but it would be nice if there were a quick reference that you could just print out and keep nearby as you start new projects. That way you don’t miss any of the important stuff you should be doing to make your site findable.

I’ve created what I think is a pretty comprehensive findability strategy cheat sheet that will guide you through all of the stuff you should be doing when creating new websites or even redesign existing ones. All of the advice follows industry best practices and web standards, and have references to the places in my book or in the 5 free online chapters where you’ll find detailed explanation and examples of how to do this stuff.

I hope you find it useful!

download free findability strategy cheatsheet [PDF 200k]

Blueprint: A Practical CSS Framework

Aarron — Sat, 11 Aug 2007 13:48:32 +0000

There’s a fair bit of tedium and redundancy that goes into the set up of a new site. Most web designers start with the same tasks like reseting all default margins, padding, and other values to a common baseline for cross-browser support, you define your layout, wrestle with type, maybe even set up a print style sheet. We often find ourselves repeating what we’ve already done many times over on other projects. Blueprint, a recently released CSS framework created by Norwegian student Olav Frihagen Bjorkoy, seeks to eliminate this common tedium by providing a concise set of style sheets that make setup and design quick and easy.

If you are unfamiliar with the concept of a framework, you can think of it as a base structure of prefabricated code utilities that function both as a toolbox and a skeletal structure for a project. Many great frameworks have been created for both client-side (Prototype, Dojo, JQuery) and server-side development (Ruby on Rails, CakePHP, Code Igniter), and have revolutionized the way web applications are built. The goal of a framework is to allow you to concentrate more on the project concept and mission rather than micro-focusing on the details of the inner pinnings of the code.

That’s exactly what Blueprint delivers for CSS design. It brings together the solutions from many recent articles on grid-based layout, page rhythm, print style sheets, and typography and packages them neatly into a practical system with a low learning curve. By default, Blueprint creates a flexible 14 column grid to guide your layout. Using very simple class combinations, you can define the size of a div to span any number of horizontal units in the grid. For example, a div like the following will span 5 units of the grid and will sit on the right side of the layout.

...

Blueprint also creates flowlines that define the type baseline, and create a uniform rhythm to the page. Background images can be turned on to draw out the grid columns and flowlines as guides while refining your layout.

Although still undergoing refinements to create consistent cross-browser support, Blueprint is in a relatively stable state for project development. If you’re curious about the story behind the project, check out Khoi Vinh’s recent blog post on the subject, which includes an interview with Olav Bjorkoy, Blueprint’s creator.

The Ultimate Web Designer's Resource

Aarron — Fri, 02 Feb 2007 01:33:29 +0000

Whether you are looking for high quality free fonts, indespensible CSS techniques, tutorials on development topics ranging from Ajax to XHTML, you will find the ultimate resource to nearly every facet of web design at Smashing Magazine. The breadth and depth of resources this site offers is staggering. They choose a topic, then find everything on the web that is worth reading about it. It’s not the indiscriminate list of everything, its the list of everything useful. Another site that is equally as useful to any web designer is Web Design From Scratch. This site touches on each major topic of the planning, design, and development process of a professional web site, offering clear explanations and real world examples that make each point clear.

Compressed Versions of Popular JavaScript Libraries

Aarron — Thu, 01 Feb 2007 15:57:35 +0000

I ran across a very useful collection of compressed versions of popular JavaScript libraries today, including Scriptaculous, and Prototype. The Prototype library compresses down from 70k to 30k, which is pretty impressive. I’m becoming more persuaded daily that MooTools is a better option, though, as it offers you the ability to pick and choose which pieces of the library you wish to download, and offers compression on your custom built package resulting in vastly smaller file sizes than the Scriptaculous/Prototype combo. If you want to compress your own JavaScript or CSS, there are a host of utilities out there for just this task. See comments on this blog post for a laundry list of options.

Running Two Domains On One Shared Hosting Server

Aarron — Mon, 15 Jan 2007 14:10:52 +0000

Most people run their web sites on one of the many inexpensive shared hosting servers running a LAMP environment. If you are like me, you probably have a number of domain names registered, perhaps all parked on the same server pointing to the same site. It would be great to split things up, though, to point one domain to a particular site on your server, and other domains to their own site. Apache lets you do this using a special .htaccess file, which configures the server software on the fly. You can set up unique sites in their own directory on your server, and then direct Apache to point requests for a particular domain to that folder. Let’s assume the domain you want to redirect is called “somedomain.com”, and the folder on your server where the site files reside is called “somedomain”. Create a plain text file with a text editor and add the following to it:

RewriteEngine On
Options +FollowSymlinks
RewriteBase /
RewriteCond %{HTTP_HOST} somedomain.com
RewriteCond %{REQUEST_URI} !somedomain/
RewriteRule ^(.*)$ somedomain/$1 [L]

If you are on a Mac or Linux machine, you will need to save the file as something like htaccess.txt so the operating system does not hide the file (.htaccess is a special name the operating system recognizes, and will try to interpret the commands within). Upload the file to the root directory on your server (sometimes called, htdocs, public_html, or www among other names). Rename it .htaccess, then try accessing somedomain.com in a browser. It should direct your request to the files within the somedomain folder transparently, giving the effect of multiple domains with their own site running on the same shared hosting environment.

Making a WordPress Blog More Search Engine Friendly Part II

Aarron — Thu, 11 Jan 2007 22:41:24 +0000

Properly notifying the major search engines of the various pages on your site can further improve the organic search engine traffic to your site. A common XML standard has been adopted by Google, Yahoo!, and MSN that makes mapping your site and getting the word out quick and convenient. There are a number of ways to build your XML sitemap, the most tedious of which is by hand. Mac users can use the Rage Google Sitemap Automator, which can not only generate the file for you just by providing the URL to your site, but it can even upload the file to your server and ping Google to let them know where the file is. Notifying Yahoo! has to be done manually via their Site Explorer tool, but the file doesn’t need to change at all. MSN is running behind trying to get a submission site set up, so although they are 100% behind the sitemap protocol, there is no means to submit your file.

WordPress users will be happy to know that an amazing Google Sitemap Generator plugin exists to create and submit your sitemap.xml to Google directly from your admin panel. Installation is simple, but a video tutorial has been created to walk your through the process should you get confused. The file it creates is also fine to submit to Yahoo! for indexing, making publicizing the structure of your site effortless.

Transforming Unwieldy URLs into Something Better

Aarron — Tue, 12 Dec 2006 16:26:46 +0000

It’s Christmas time, and you are probably compiling your lengthy wish list of stuff you want from Amazon.com, or other popular web sites. The problem is when you try to share links with your family/friends to the must have things on your list the URLs are usually a cumbersomely long length, and not very convenient for sharing. There’s a simple solution, and it’s called Tiny URL. This handy little utility will convert the massive URL you paste into it to a short URL that is easier to work with. They even have a bookmarklet you can add to your browser’s bookmark tool bar to make converting URLs fast and easy.

Moving Towards Accessible Development

Aarron — Fri, 08 Dec 2006 14:14:37 +0000

Recently I’ve been talking a bit with my students about the role of accessibility in their internships/jobs in the web world, and many have said that their employers don’t see a lot of value in it for their site. I found that a bit surprising as so many evangelists have been actively promoting the benefits (a broader audience, search engine optimization, increased support for PDAs/phone display, usability conveniences for all) and ease of writing accessible code. As a teacher of Interactive Design, I have some power to change this thinking by teaching my students the value of accessibility and how to build it into their projects. Below is a bit of an accessibility round up of a few useful tools, articles, sites, and informative podcasts about the topic that may help inform/convince you about the importance of accessibility.

Web Accessibility: Web Standards and Regulatory Compliance, a great book from the Friends of Ed with a host of authors who are authoritative on the subject of accessibility. This book has everything you need to know to get started on accessible web design.
Zeldman on Accessibility: Zeldman does a great job of presenting and counter arguing the major complaints you’ll hear when you bring up the topic of accessibility with you boss. My favorite quote from this presentation: “Google is the biggest blind user on the web”
Accessify.com tools and wizards for building accessible forms, tables, popup windows, and more. These tools are awesome!!
Ajax and Screen Readers: When Can it Work? Although web standards are being rapidly adopted by modern browsers today, many screen reader manufacturers have yet to jump on the band wagon. Subsequently, there are no solid solutions for how linearized pages in a screen reader can inform a user when the page has been updated by Ajax. If the reader has passed the area where Ajax will post a response, the browser will never notify the reader of the new content. James Edwards exposes the real issues with Ajax and accessibility in this article.
Patrick H. Lauke of the Web Standards Project interviewed on Web Axe podcast. Lauke is a brilliant guy who is championing the cause to get screen reader manufacturers on board with web standards. He has some great observations in this podcast including how Flash can actually fill some accessibility needs! You may also want to check out the main Web Axe site and podcast.
Paul Boag of Boagworld.com has a number of podcasts on the topic of accessibility: Understanding Accessibility Guidelines, Pragmatic Accessibility, Web Accessibility
It’s no surprise that A List Apart has a host of wonderful articles that explore the big picture and intimate details of accessible web design
Adobe has a resource center with articles, templates, and other stuff to help you develop accessible content using Flash, Dreamweaver and the rest of their software.
Dive Into Accessibility is a wonderful site with clear explanations of what accessibility is, what it can do for you and your users, and how to build accessible content.
Now that you are on board with accessibility, how the hell do you “sell” it to your clients or boss?
Validate your pages against accessibility guidelines at Bobby Watchfire or Cynthia Says. You can validate against WCAG or Section 508 receiving a priority 1, 2, or 3 seal of approval.
Joe Clark, ~~a member of the Web Standards Project~~, is one of the top evangelists of web accessibility, and his site has some great information on the subject. You may also be interested in what he has to say about the WCAG 2.0 guidelines.

Adobe Kuler: Color Palette Generation

Aarron — Sat, 25 Nov 2006 22:36:34 +0000

Adobe has recently introduced Labs.Adobe.com where they introduce valuable tools and get feedback from users about their initial releases of some of their products. I recently wrote about their handy Spry Framework, which looks like the easiest to learn JavaScript framework on the market. They have also released one of the best color palette generation utilities I have seen to date entitled kuler. Kuler takes cues from many other popular color palette utilities, and in many ways ups the ante. It emulates the community sharing of palettes seen at Colour Lovers (by the way, they have a new site), offers all of the palette options for analogous, monochromatic, complimentary, and triadic systems seen on Color Scheme Generator 2, and allows you to mix and copy RGB, Hex and CMYK values like Color Mixers. Kuler displays swatches in large areas on a dark background allowing you to see them much better than its competitors. It’s a beautiful system, and a great asset to any designer operating in any medium. As a bonus, they also offer some useful links to color theory resources in the links section.

Microformats Cheat Sheet

Aarron — Sat, 25 Nov 2006 13:52:58 +0000

Now that you are getting interested in implementing Microformats on your sites, you may find a cheat sheet of all major Microformats for fast reference a handy tool. Brian Suda, the author of this useful cheat sheet also wrote a book on Microformats, published by O’reilly. Think Vitamin reviewed the 45 page PDF book favorably.