Unicorn is the newly minted Unified Validator from W3C. One-stop shop for CSS, HTML, and RSS feed validation.
I recently came across a wonderfully rich resource on search engine optimization (SEO) called Google’s Search Engine Optimization Starter Guide. Originally written by Google for their internal teams, they decided to generalize the recommendations so that it would be useful to any website author or owner.
While the recommendations might already be known to you, they are still worth reviewing. Among Google’s tips for good organic SEO:
- Create unique, accurate page titles
- Make use of the “description” meta tag
- Use appropriate URL structure
- Make your site easier to navigate
- Offer quality content and services
One notable omission is the recommendation to use the “keywords”
meta tag. That’s because Google does not use the “keywords”
meta tag in web ranking, and has in fact ignored it for years due to abuse.
Our web search (the well-known search at Google.com that hundreds of millions of people use each day) disregards keyword metatags completely. They simply don’t have any effect in our search ranking at present.
For more on the “keywords”
meta tag see Google does not use the keywords meta tag in web ranking from the Google Webmaster Central blog (posted Monday, September 21, 2009).
If you are a web designer or web developer with clients who look to you for SEO-related advice, consider giving them a copy of the Search Engine Optimization Starter Guide—it’s a great summary of how to optimize websites for search engines, and it’s available for reuse under the Creative Commons Attribution 3.0 License.
Update: Summit Hut did some redesigning this week, including a new logo, new color scheme, and some layout changes. I was not involved in these updates. Please see the screenshots below and on Flickr for a reference to the the site design before these changes.
—Lance, June 16, 2008
From the Recent Client Projects and I Should Have Blogged This Months Ago departments, I present a brief report on a website realign for Summit Hut.
I was fortunate to work with my great friend and mentor Aaron and several former coworkers from my days at the Hut (I worked there 2001–2005). The subject matter was close to my heart, and having worked on the website for a short period of time before leaving the company, I was thrilled to help with the task of realigning and recoding Summit Hut’s flagship website.
Disclaimer: Please note, I am not involved in the upkeep and production of code or graphics for Summit Hut; my role was to build a solid foundation for future development and visual merchandising. I did produce the first home page graphic (view screenshot), but the home page graphics and various and sundry sidebar callouts throughout the site have changed since the site launch in February 2008.
Notes and technical details
I was in charge of visual look-and-feel, basic interaction design, and coding the HTML and CSS for the page templates.
My goal was to create a mood that was simple, clean, and sophisticated with a subtle regional feel for Summit Hut’s location in the Southwest.
The visual tone took cues from Summit Hut’s in-store merchandising and signage. The chosen color palette, typography, and imagery were all tailored to match the wonderful feeling one gets when stepping into the company’s high-end retail shops. I intended visual chrome such as icons and buttons to produce a clean and professional look to match the company identity as a premier outdoor retailer.
Considerations included better readability, clearer navigation, enhancements to the display of vendor brands and product images, and improved product merchandising.
Merchandising an online store can be quite challenging, especially if you want to reflect how the real-life store works. There are really two parts to it: decorative and organizational. The first is extremely important since it conveys value and desirability to the products; the second provides a clear arrangement for easy searching, browsing, and choosing. My goal here was to remove obstacles and let customers figure things out easily while providing a pleasant, easy, and fun shopping experience.
The recoded page templates were probably the most urgent need; the former summithut.com sported a table-based layout, spacer GIFs, and other typical markup-cluttering artifacts. Valid XHTML and CSS to the rescue! Building on Aaron’s solid programming and site framework, we worked together on producing lightweight and reusable HTML chunks (by reusable chunks I mean in the spirit of microformats). For the style sheets (CSS) I used principles of grid-based layouts and the excellent Blueprint CSS framework as a starting point for resetting and standardizing the layout, text treatment, and interaction messages.
All the benefits of standards-based development apply to the updated pages: faster loading times, code that is easier to read and update, improved usability and accessibility for traditional and non-traditional devices, as well as flexibility for future website features and visual changes.
Interactive design tasks for the realigned site centered on product browsing, selection, and the checkout process.
For purposes of keeping this report as brief as I can, let’s take the example of the product browsing and navigation. The previous product navigation involved a clunky accordion-style navigation on the left of every page. The new site splits the top-level navigation into a horizontal dropdown menu on every page, improves the search tool, and provides multiple ways to visually scroll through products. Product browsing can be in a list view or thumb view, and the sidebar menus allow you to drill down and refine the offerings easily.
The dropdown navigation for products was an important piece of this realign (view screenshot). The amount of products and product categories in Summit Hut’s online store makes the product navigation interaction a complex and difficult one. The information architecture is based on the store’s internal organization, which doesn’t always mimic how customers shop. The dropdowns provided a great way to simplify the complexity, and with Aaron’s excellent choice of jQuery (with the Superfish plugin), this interaction works wonderfully.