Be An Employable Web Designer

In The Employable Web Designer, Andy Rutledge gives his take on how you can be ready for a real web design job coming out of college.

Now more than ever, it is a student’s responsibility to craft his or her own career preparedness in addition to, even in spite of, the plans and curricula defined by schools. This fact is especially true for aspiring Web designers, for every indication is that most higher education institutions don’t have the first clue about the interactive professions or how to prepare future professionals.

As a web craftsman, I think even seasoned web designers could take a look at this list of skills and traits that make a truly employable web professional. Pay close attention to the “Technology and Web Craft Skills” section since those items require constant reading, learning, and exploration.

I hope that this list and my suggestions help aspiring web designers to better craft their own preparedness and, if necessary, adjust their degree plans toward a more effective and responsible result.

Andy’s list is not only a great resource for aspiring web designers and developers, but I see it serving as a standard for all web professionals to live up to.

(Also, see my take on preparing for a career in web design, Learning Web Design, from 2006.)

SEO Guide for Designers

I field a lot of questions about search engines and SEO (search engine optimization), so I’d like to point to a great resource for understanding SEO basics: SEO Guide for Designers. When I found this on Nick La’s Web Designer Wall, I realized it was a great resource for basic SEO learning—even for non-designers.

Many of the tips should be obvious to you if you maintain websites on a regular basis, but if you are a non-technical website owner or maintainer, bookmark the article and reference it when you are working on your website marketing and optimization.

(Also see my 2006 post Search Engine Rankings for Your Site.)

Benefits of Plain English URLs

In Benefits of Plain English URLs, the folks at Gadgetopia have added more fuel for the fire of why you should use beautiful URLs. For me, any two of the many reasons should enough to convince the maker or your CMS or weblog software to make nice URLs a default in their setup.

When picking URLs, we envison [sic] someone at the client’s firm reading the URL to someone over the phone. How easy is it going to be?

I especially like this idea of reading someone the URL over the phone and asking them to write it down, remember it, or type as you read. Great URL design and implementation makes this interaction painless and pleasant.

Summit Hut Realign 2008

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.

View screenshots, visit the live site, or for more details on the part I played in the realign, continue reading.

example screenshot 1

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.

Visual

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.

Code

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.

Interaction

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.

example screenshot 2

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.

There were many, many, more improvements to Summit Hut website; I can’t list them all here, but you can view the old site on archive.org and then browse the current site to see for yourself.

Self-Updating Copyright Dates

In “10 complaints the customers have about the design of corporate web sites“, Luke Manion mentions having current date information on your website. His tenth pet peeve is “Out of Date Information.”

An outdated copyright date or an expired offering calls all the information on a website into question as to its correctness.

I agree with Manion—I find it to be a big turn-off when a website doesn’t have a current date listed. It tells me that the site owner or maintainer doesn’t care about keeping the site up, or doesn’t know how to set it automatically.

While this concept may be a no-brainer for many webmasters and website owners, other owners and maintainers seem to ignore the easy fix — let the copyright date update itself.

At the very least, the outdated copyright date screams, “We don’t update our site. You can’t trust any of the content here.”

Of course, there are some exceptions like the homespun websites that are just flat HTML files with no scripting support. But come on—if you use any of the popular hosting services out there, whether it is a Windows, Linux, or Apple server environment, you probably have access to at least one of the common scripting languages such as PHP, ASP, or Coldfusion.

If you have an out-of-date copyright in your website footer, go fix it today. It will add credibility to your website and give the impression that you care about what your visitors see and read. Your visitors will be impressed at the turn of the year when your site date automatically changes. As a plus on the technical side, you will have one less thing to worry about when January 1st rolls around.

Here are some code samples for adding a dynamic date to your website page or blog template1 (line wraps marked »). The output desired is:

Copyright 2008 My Company.

PHP

Copyright <?= date('Y') ?> My Company.

VBScript (ASP)

Copyright <%= now(yyyy) %> My Company.

CFML (Coldfusion)

Copyright <cfoutput>#DateFormat(now(), "yyyy")#</cfoutput> My Company.

JSP (Java)

Copyright <%= new java.text.SimpleDateFormat("yyyy"). »
format(new java.util.Date()) %> My Company.

RHTML (Ruby)

Copyright <%= "#{Date.today.year}" %> My Company.

Note: I do not guarantee that these code samples will work with your server and website setup. These snippets are here to show you how easy it can be to output a dynamic date in the most common scripting languages. Please use with caution and test thoroughly before using on a production website.

Beautiful URLs

In URLs Can Be Beautiful, Chris Shiflett explains how he built beautiful URLs for OmniTI.

I agree whole-heartedly that URLs can and should be beautiful, and I firmly believe they should not only look good, but should also be useful, meaningful, and “discoverable.” In the case of OmniTI, the first subcategory in the URL is based on an action verb, like “is”, “helps”, or “thinks.” This gives the URL a powerful mnemonic quality, since it reads like a sentence. It also describes the content of the page it represents, which is awesome.

The only downside I can see is the “discoverability” for common URLs like “about” and “contact”. A lot of people are used to finding those URLs the same on most sites, especially typical brochure-type business websites. But, you can always have a redirect rule for those if it’s important. The creativity and unique design of OmniTI’s URL scheme might just make up for the loss of predictability.

I’m glad to see a great example of a beautiful and semantic URL scheme to use as inspiration for my own projects.

UPDATE: As a nice follow-up, Nate Abele explains how to set up nice URLs in the CakePHP framework by defining custom routes: Advanced URL Routing and SEO Techniques with CakePHP.

Suckerfish Dropdowns and CSS Menus

Can you refer me to a tutorial for making CSS-based dropdown menus similar to what’s found on this site?

First of all, I must admit I am not a big fan of dropdown menus. They can be a usability nightmare when not done right, and all too often they mask a poorly developed site architecture.

That said, if you feel the need to incorporate them for your site (or a client insists you do it on their site), there is a right and a wrong way to it.

Make sure the solution you choose uses well-structure HTML markup and lightweight CSS/JavaScript. Secondly, judge the size of your navigation to make sure a dropdown makes sense. If you have 5—7 links, you probably don’t need it. If you have 5—7 site sections that all have 5 or more subsections then it might make sense to incorporate a dropdown menu. Lastly, plan for what will happen if your visitors don’t have JavaScript enabled. Does the menu work with CSS only? Does it work without styles at all?

Probably the best implementation out there is Son of Suckerfish Dropdowns. It’s accessible, lightweight, and works well across modern browsers. It does use a small bit of JavaScript, but that is a necessary evil in order to support older versions of IE/Windows. I’ve used a version of Suckerfish called Superfish as a jQuery plugin with great success (check it out live on the new Summit Hut site).

The cthsu.com site uses a product called “CSS Express Drop-Down Menus” from ProjectSeven. It’s another good implementation aimed specially at single-level CSS dropdown menus.

I hope that helps you. For more on dropdowns and how they affect website user interfaces, read these articles:

Prologue Theme for WordPress

If you like Twitter and the idea that you can easily follow along with what your friends and colleagues are doing all day, you might like the new Prologue WordPress Theme.

The theme skins your blog to look like a set of Twitter updates, and the “what are you doing now?” form for posting an update is conveniently located on the top of the home page.

This setup would be perfect for small groups or distributed teams who want to keep track of each other. You could password-protect the blog if you want to limit who can view the posts. In the same way, you limit those that could post updates by having only registered users be able to post updates.

The Prologue team has already released an update that improves the layout of the updates and includes Gravatar support.

Give it a try on your own by downloading the theme, or open a free WordPress.com account and give it a spin there.

Wufoo Form Gallery

Coding web forms in static HTML can be a royal pain, especially with super-long option and select groups for choosing countries and state/provinces.

Wufoo makes form design and coding easy as pie. I’ve been using their form building application since it launched—mostly for prototyping and brainstorming. This newly-launched gallery is great for trying out your ideas and viewing prototypes that are already built out for you.

If you aren’t the HTML/CSS type you can still find this gallery useful — browse the forms and then download the code for use in your projects.

Go: Wufoo Form Gallery: Free HTML Form and CSS Templates.

Clean and Simple WordPress Themes

At the Tucson Geek Meet for November 2007 we talked about good WordPress themes, especially ones that are clean and simply designed.

Here is a short list of WordPress themes that I like. Technical note: I haven’t checked the HTML/CSS source on all the themes, so while they may be visually appealing I can’t promise that they are well-built under the hood.

  • Cutline: From Chris Pearson, Cutline is an elegant design that works well for blogs and business sites. It’s available in two- and three-column versions. Pearson has three other great WordPress themes as well.
  • DePo: Designed by Derek Powazek, the DePo theme is minimal and graceful. The footer is a nice touch.
  • Hemingway: A long-time favorite on WordPress.com, this clean design is available in a light or dark flavor.
  • K2: Kubrick’s big brother — this is one theme that combines both clean design and a workhorse of a theme: sidebar modules, admin improvements, custom headers, live search, and more.
  • Simplicity: Very similar to Hemingway — simple, two-column design. (Site is in German, but English theme is available there for download).
  • And finally, for the very best in minimalist WordPress themes, check out Plaintxt.org’s The Best Minimalist WordPress Themes. I especially like Hemingway Reloaded.