Don't Work on Spec

From the Important Topics in Running a Web Design Business Dept. I’d like to share a recent conversation with a colleague about whether or not it’s a good practice to include mockups in a possibly unpaid bid for a project. I’m posting it here for reference and to continue the conversation.

Colleague: I’ve seen on Twitter… times where you said that you’d finished a mockup for a client. And by that, I’m assuming you mean a mockup of a website that you’re proposing to build for them…

Lance: My situation might be different than other web professionals in that I generally work with the same clients over and over (my last “new” client was Summit Hut in September 2007). So, the mockups I do now are for paid projects that have budgets and buy-in from clients. And, these projects aren’t typically new websites; although in one case that I talked about on Twitter the mockups I presented were for a complete overhaul of a web application’s user interface.

In the “real world” of trying to land gigs or client projects, mockups and prototypes can play a part, but be very careful when people ask for that type of work without pay.

If that’s the case, when you do your mockups, do you just do straight HTML (so the look is there, but not the functionality), build it in Photoshop (or something similar) or something else?

As far as the “how” of mockups, I almost always jump from paper sketches and basic ideas into HTML and CSS. That is my strength, and I am very fast from concept to working website, so it’s my best use of time and energy. I use Photoshop and Illustrator for design elements such as backgrounds, buttons, and icons with an occasional—but rare—entire mockup in Photoshop that I then flatten as a PNG and use as a mockup or starting point for coding.

Skipping Photoshop doesn’t work for everyone, but it can be a timesaver if you are more comfortable working with other tools. Check out Why we skip Photoshop, a great take on this by 37signals. Most “graphic” web designers take offense to this type of approach, since they say that those kinds of designs tend to look alike in their boxiness, and that you are constrained by CSS basics, etc. I don’t agree—I think creative and good design work can happen in non-visual tools. Overall, I think you should do your work where it is fastest and more efficient for you; for me that is coding HTML/CSS and tweaking the display right in the browser, not in an image editor.

The big advantage for me for moving from paper and ideas directly to code is that I can get a working demo up faster and into my clients’ hands that much quicker.

And also, if you’re doing a proposal for a client (bidding on a project and/or expanding upon a bid you already sent), do you generally give them a mockup of what you’re proposing and do you charge for your time to build that mockup and the bid?

My advice, and the standard industry practice, is to never do work “on spec,” meaning those design mockups should never be for free. If you get client buy-in and establish the mockup and design process as part of your workflow, you won’t get bit by people backing out after you sink time and energy into it. There are those occasional clients who want ideas for free, and they will use you to that end. Of course, those folks might be few and far between, but be aware that they are asking you to do unpaid work.

There is a lot online about this already, so I won’t harp on it too much. From the master Zeldman himself, read Don’t design on spec. For a perspective from a respected graphic web designer, Veerle Pieters, I recommend Free of charge please!, and there is even an entire website dedicated to the topic: NO!SPEC. Besides reading what other web professionals have to say, I’d also recommend picking up a copy of Graphic Artists Guild Handbook: Pricing & Ethical Guidelines for some great advice and case studies (Amazon).

If a client asks for work up-front with no payment, my tendency is to run like the wind! If you feel they are a worthwhile client, and you really want to work for them, spend some time educating them on your workflow and process, and explain why the mockup and design iteration phase is an important part of the project cost and budget. That education will pay off many times over, giving more value to all the parts of your web design work, not just the “expert” parts such as coding and testing.

For example, in my typical web design project process I have clients read and sign off on each step, including brainstorming, planning, content organization, and design mockups. Giving each stage in the process a monetary value can help you feel good about spending time to get things right, and gives the client a reason for all the charges you bill them (or all the line items in an estimate beforehand).

This is a very important topic—if you are a freelancer it would do you good to define your stance and “official policy” on spec work. Let’s educate ourselves, our colleagues, and our clients on why spec work is unprofessional, and share this conversation with others.

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.