Web Tips: Be Ready To Be Hit By A Bus

An unstructured list of experiences, pet peeves, and advice surrounding interactive design and development.

Let’s make something clear right now: I’m not a trained web developer.

Nor am I any sort of interactive expert in my opinion. But I have been involved in the design and production of websites for clients for many years. So, I was honoured when my colleague Steve Mynett asked me to give a presentation of my “real world” experiences, pet peeves, and advice surrounding interactive design and development to his web production class.

Once I began asking for input from colleagues and jotting down ideas, I could barely stop the flow of grumbles, observations and tips I wanted to share with these future web designers. Though what resulted may not be anything new for the trained web guru with years of experience, my lecture slides represented a practical list of suggestions and best practices useful to young designers keen on avoiding common interactive pitfalls.

The reality is that at Industrial Brand we’ve made many of these mistakes ourselves over the years. We also changed our minds on many issues as time passed and we gained experience. The following list (in no particular order) is a decent expression of how we approach interactive design and development. We’ll continue to learn and improve our methodology, so this should not be viewed as a static list. Please feel free to comment, disagree or suggest additions to the list.

Start with a brief. If your client can’t compose a simple expression of their goals, objectives, audience, their needs, etc, then how are you going to judge success?

Don’t take their word for it. Clients should be respected and likely know a lot about their products, category and probably even their audience, but they don’t have all the answers. Challenge the paradigm, dig into the problem, do a needs analysis—this is called the discovery process: a critical step in design.

A good coder is always be ready to be hit by a bus. Research, plan, scope, stick to it. Get organized. Consider your naming nomenclature. Make back ups.  [Suggestion: use an online backup system so it’s off site]

Be the audience. If you can’t honestly say you have clarity about who the user base will be, don’t assume. Find out. Go talk to them. Work with your client to develop a persona for the audience and role play user stories. And beyond things like their attitudes and preferences, try to accurate predict their browsing environment and develop with that in mind.

1024 isn’t 1024 anyway. So you’ve established that the majority of your audience is most likely on a display set to 1280×1024, but bear in mind that not only aren’t all those pixels available to you after you account for all the browser chrome, but who said you have to fill the entire space? How often are you on the web with your browser set to full screen? Consider a standard width of 980 or even as narrow as 960 in case your users have multiple apps open simultaneously. Of course this can also be affected by the grid layout you’ve created for the site—you are using grids, right?

You’re not the audience. Shut up. This isn’t about you. Save that for your own website—although even THAT isn’t about you either. Keep your mouth shut and look for solutions to the client’s and audience’s problems. If it isn’t clear, ask more questions.

Agile development is awesome. The “agile” approach of skipping all the charts, schematics, wireframes, etc and focusing on being flexible, fast and loose and learning constantly as you go can be a terrific approach once you’re an expert. [Recommended reading: 37signals’ book Getting Real]

Agile development is a lie. Well, OK. Not a lie, but be cautious of those who just wing it in favour of careful planning, clear communications and methodologies. Just diving in, launching early, tweaking as you go and flying by the seat of your pants WILL eventually fail you—and may be very costly. And having a well defined process will save you. Example: Nokia mobile advertising.You still need to determine user needs, develop grids and wireframes to produce effective interaction design. Don’t “wing it” or your projects will ultimately fail. [I know, I know, real agile development isn’t “winging it”, but you get my point here].

Avoid intros. If you MUST have an intro, then it should be to say something about the brand message or tell a story. If there is a “skip intro” button, something is almost certainly wrong—although there are exceptions to the rule where an intro can say something about the personality behind a brand or help clarify the services or products offered.

Reduce, reduce, reduce. Please don’t make me say “Less is more.” Oh shit. There, I said it. But remember, as great as simplicity is, sometimes less is too little. Don’t fight for minimalism and start quoting Bauhaus crap if there isn’t a real need for it driven by the audience and brand message. Some sites can be super cluttered and overly complicated, while others can almost seem broken they are so minimalist, while you can achieve ultra simple in a smart way.

Whose server is this, anyway? Get early access to the actual host server and work from there as soon as possible. Don’t get it all dialed in, only to discover the version of PHP or MySQL on their box is different and difficult to change. Confirm the Apache install, how to set up DBs, permissions, where files go, etc.

You will break it. Iterate with a backup plan. Use a development environment, staging environment and live environment. Be ready to fall back if bug fixes cause more bugs.

Resist feature creep. But know it will happen. It’s inevitable. One “simple” change may have a cascade effect. Never assume it’ll be a no brainer and allow adequate time.

Good web takes time. I don’t care if you coded your mom’s blog in four hours or did a whole website in a weekend. They both suck and the kind of web you WANT to be working on takes time. Fight for it and convince your clients to give you time to percolate as well as time to research, plan, organize, document, write good code and TEST.

Test, test, test. For god’s sake, check it on various platforms and browsers. Use your friends as guinea pigs and watch them interact with the site! If you can’t test on new and old platforms and various browsers, then at least utilize sites like www.browsercam.com or www.browsershots.com.

Where am I? I wanna go home. Facilitate clear indications of where a user is on a site by adding “breadcrumb trail” navigation or changing the state of nav used to reinforce the button or section selected by the user—you’d be surprised how often this is ignored or unclear. And not everyone knows a logo is the home link! Provide a global home link as a button if possible—at least in the footer as a secondary option for those who don’t figure it out. And avoid “mystery meat” navigation, regardless of how innovative or creative it seems. (example: Duff may be the Ace of Cakes, but his website navigation is baffling).

Dress to the left. Stats show that the majority of web users read top down, left to right—so for god’s sake, don’t hide your logo or vital navigation elements bottom right where it may be cut off or hidden with a smaller browser window.

Boing! Pop! Huh? If pop ups, new windows on click or browser resizes are so great, why do all the latest browsers block them? No pop ups! And I’ll open a link in a new page or make the browser fullscreen if I want, thank you. And please don’t hijack my browser. [example: here’s a very slick look design studio’s website that resizes to fullscreen, completely hijacks the browser and navigation toobar and doesn’t dynamically resize if you change the browser window. This is just plain rude.]

Study usability and user experience. Have you read Bill Moggridge’s Designing Interactions yet? Do it today.

Drop the drop downs. If you’ve read Moggridge, you would use JavaScript drop down menus with caution. They can difficult to code, awkward to use and inconsistent across platforms and browsers. Not to mention they jump open and closed, often blocking content beneath them, require tweening to keep from feeling clunky and harsh and when cascading, get impossibly finicky. This article called Sons of Suckerfish has some great guidance how to best create effects like drop downs (among others) in a reliable fashion. [example: the new www.gdc.net is a beautiful website to look at, but the long drop down menus crowded together make the navigation cumbersome and awkward to use]

Extensions make the permalink Ya ya, most servers these days can parse .htm, .html and php correctly, but .htm is “cruft” and makes you look like you’re coding for DOS with its antiquated three character maximum naming convention.

Human don’t read code. Not well anyway. And human-readable URLs (permalinks) are just so much more friendly and easy to reference. [example: a URL like http://www.mydomain.com/option,com_mtree/task,listcats/cat_id,1778/Itemid,35/ would be so much better as http://www.mydomain.com/component/download]

Footers, like feet, keep things from falling over. Take a queue from our friends at Apple who always design three ways to do anything, and make footers part of your design up front, don’t just tack them on as an after-thought. Simple, unobtrusive footers can be an excellent way to improve navigation in a content-heavy site. I suggest that if you need to include a sitemap (which can be very useful) then your navigation may need to be re-thought.

Colour doesn’t really matter, does it? Yes, it does. Big time. And is one of the most powerful web design tools available—and often screwed up. I won’t bore you with a long rant about colour spaces and the difficulties of predicting accurate colour display online, but I will say this: people perceive colour as vital part of any designed product. The Institute for Color Research reports that “all human beings make a subconscious judgment about an item within 90 seconds of initial viewing and that between 62% and 90% of that assessment is based on color alone.” Heck, recent surveys show that 40% of American car buyers stated they’d change brands if they couldn’t get the colour of their choice. Make sure you understand the emotive power of colour and chose combinations of colours that work [Tip: if using a colour wheel is foreign to you, check out Adobe’s Kuler application for a good online tool for picking colour palettes that work]

Show them. Don’t assume clients—or even designers or art directors—will be able to envision what you are talking about: show them. Send proofs in situ so they see it live, online in a browser.

Build around real content. Though not always possible, try to avoid using Lorem Ipsum as placeholder text in favour of designing around real content. Using Lorem Ipsum isn’t creating a *real* user experience and may be forgotten, running the risk of launching a website filled with gibberish.

What does that say? Bad font choices, small type or low contrast are common boo boos. Don’t make this mistake—make your text easy to read. If it doesn’t survive the squint test, fix it. And learn the basics of typesetting—they are just as relevant here as they are in print. For example, long line lengths cause eye strain and decrease readability. [example: www.gameaquarium.com – what IS Game Aquarium anyway?]

Web fonts doesn’t mean bad typography. This is probably one of the most common pet peeves among traditionally trained graphic designers who take pride in choosing just the right typeface and using it intelligently to aid the overall message behind a page. Web is not print, but a similarly calculated approach to type, its size, colour, placement, etc., helps establish a hierarchy and order of things—remember that. If you’ve ever read Robert Bringhurst’s The Elements of Typographic Style (and you really should), then check out  www.webtypography.net which translates the basic rules of type usage to the web. [example: www.coudal.com uses straight up web safe fonts and clean CSS styling]

I wish I could zoom in. If your site design doesn’t afford room for large images, but products or photos are key communicators, then build in the functionality to enlarge the images so the viewer can take a closer look. And don’t assume the user will know to click—add text like “click to view image”. We often use Lightbox JS, which is a simple, unobtrusive script used to overlay images on the current page. Alternatively, link thumbnail images to larger images, such as we did here on www.davedelibato.com. [example: www.meja.ca required larger images of their projects, so we used Lightbox]

I already have iTunes and YouTube, thanks. I don’t need a website that plays music, thanks. And if you MUST have a video auto-play on the site, set it up to do it on first visit and not repeat visits via cookies. If the site has a mute button or “skip” button, something is likely wrong.

Nothing new here. Don’t create sites with a “News” sections if it’s not really needed, your client isn’t committed to keeping it fresh or they aren’t able to update the page. There’s a new thing called CMS, learn how to use one.

Make it work. Old school works. Don’t follow what everyone else is doing and avoid trying to fix what ain’t broke. And don’t try to be an innovator (yet anyway). There are so many variables and technical limitations—be flexible and work within the basics. If you want people to know it’s a link, then use hinted text and make it obvious it’s clickable (i.e coloured & underlined).

Y’all got a big pipe. If you assume everyone has a web connection as fast as yours, you’re a fool. The majority of the world is still on slow connections like dial up. So strive to create tiny website to reduce load time. And use intelligent techniques such as dynamically loading menu/nav items using PHP so you have only one file to update.

Look at sites that suck. Browsing all the wonderful “best of” lists and award-winners is great, but consider looking at BAD websites and learn from them.

Step away from the screen. Get off your computer and consider the problem as a spatial one. Remember your sketch pad? Go get it and draw! Plan on paper. Consider the content and space with client objectives and audience needs in mind.

Wireframes are your friend. All the previous stuff should be obvious to many. If not, you have some work ahead of you. If I had my way I’d make new web design students spend a whole term drawing grids and wireframes for an entire term before letting produce their first line of code. It’s all about usability folks. Web is not just pretty graphics or cool tricks.

Web is not print. So don’t create images in CMYK or PMS. Create your Photoshop images in RGB.

Backgrounds can be lovely. I disagree that those who claim backgrounds should be unnoticeable. While primarily a framing element behind text and images, I think backgrounds are a powerful way to add tone, emotion and style to a website when used with care and with reserve. Add to that some consistent graphics element from page to page and you can create a “sense of place”. But for god sack, avoid using honkin’ big image backgrounds. [example: Dave Shea, author of CSS Zen Garden, uses subtle background on his website as does Psyop on their site]

Write beautiful code. Lovely code can be a gorgeous thing indeed. And well commented and organized code is much easier to understand and update when you (or someone else) needs to make changes six months later.

Meta my ass. Please remember to add meta tags, description, keywords, page titles, etc and register your sites with search engines. And consider including descriptive page titles. It may not be full-on SEO, but it’s the right thing to do.

Get fast. Learn shortcuts. Find resources and tools. Create a methodology that allows you to differentiate yourself as a fast, accurate and dependable developer. And start collecting code, images, objects, etc so you can quickly solve repeat challenges in future. Start using tools such as the Coda, Firefox’s Web Developer toolbar, Firebug, Color Picker and XScope.

Be compliant. Validate that beautiful code you developed so quickly! W3C’s Markup Validation Service is a fast way to make sure your code will work as expected.

Write goodly. Use simple language and spell check you scallywags! There’s nothing worse—from as branding perspective—than typos and bad grammar. Most good code editors, such as TextMate for example, have built in spell checking.

Are you a web designer or hosting company? Don’t try to do everything—regardless of how tempting it is to get monthly fees for hosting a site. The responsibility will yours to keep the server up and site online, so leave this to the experts.

Respect your employers. Especially if you’re providing coding for a design firm. How do they work? Do they need working files? Are there confidentiality issues? Are you even allowed to take credit for the work you did? Are you allowed to put a credit link on the site or in the source code? Make sure you ask if it isn’t clear in your contract.

The computer screen is already obsolete. Yup. It’s true. And for all you iPhone fanatics it should be obvious to you by now. If you’d like to have a career in the interactive media arts, you have to think mobile and design and develop for “the fourth screen“.

Good web design is simply good design. Bad design is still bad, regardless how sweet the back end is. Remember the “form follows function” lesson?

I think the most important point I can offer in conclusion is that the web today needs good designers more than it does coders. The debate whether classically trained print designers are capable of create good websites seems silly to me, but I think it’s time skilled print designers step up, retool and apply their training to this important medium and help raise the bar. I’m really tired of seeing websites with great functionality and technology behind them, but a clear lack of graphic design or usability thought applied to the interface design. Just like in print design, it behooves us to apply the same careful use of composition, layout, grids, colour, typography, hierarchy, simplicity, etc. to design GOOD websites.

So here’s the challenge: compose your next web project around real content using a carefully structured grid layout, scalable, centred orientation and based on an appropriate screen resolution. Choose web safe colours and type faces that not only aid readability, but work together to express the feeling and tone behind the site, its message and goals as defined by your client brief and research into the problem, industry, competition and audience. Resist using flashy technology in favour of a suitable technology that will actually work toward achieving your clients web needs. Simplify your layout, allow for plenty of whitespace and respect established conventions, presenting a visual hierarchy and navigation system that makes it clear to the user how to interact with the site’s content. And be smart about your production methods and always be ready to be hit by a bus.