Category Archives: Web design

Interesting Links for August 3–9, 2007

Posted on by
Reply

Web Standards Checklist, Outline Style

Posted on by
1

In 2004 Russ Weakley of Max Design presented a Web standards checklist to the Web Standards Group. I was on the mailing list and found the checklist invaluable as a guide for developing and testing web sites. The online version is perhaps the most useful, since it has links and reference materials, but I’ve often used the PDF version that Russ made available since I could print a new version for each project.

For several years I would either print the PDF and reference the checklist on paper, or open it in Illustrator, edit new layers of “checked” boxes and notes, and save it as a PDF again.

Now I’ve moved the checklist to a much easier format to work with on a regular basis: outline template in OmniOutliner. (OmniOutliner’s free version comes bundled with default software packages on Mac OS X.)

This allows me to quickly check off items without the clunky Illustrator editing. The plain-text export is handy for emailing or clean printing, and you can export as HTML if you like. OmniOutliner also has “notes” areas for adding text underneath each item, which is great for including reasons for not checking off a point, or if you need to jot down a few to-do items regarding an item.

A big thanks for Russ for developing this checklist—it’s been an integral part of my workflow. I hope you can use this outline-style “Web Standards Checklist” and that it speeds up your web site development and testing.

To use the outline, download the template file and open it in OmniOutliner. Then “Save As” to start a checklist; this gives you a new checklist for every web site project.

Download:

“Web Standards Checklist” as OmniOutline Template (Note: Includes minor changes to spelling, punctuation, and style.)

Original “Web Standards checklist”[sic] from Max Design as OmniOutline Template (Note: I didn’t change any text or fix typos in this version—it’s straight from the original PDF.)

Interesting Links for June 1–8, 2007

Posted on by
Reply

Followup: Edward Tufte on Presenting Data and Information

Posted on by
Reply

As with his books, Edward Tufte suggests that your designs should be self-revealing. That is, they should practice what they preach. For example, his books on visual design are well-designed.

Not only that, but his presentation on presenting information, “Presenting Data and Information,” was very well presented. I was very impressed at the end of the day when his last point was “Finish Early,” and he said it three minutes before we were supposed to be done. What a great way to teach…

I highly recommend this conference by Edward Tufte, no matter what arena you work in. Check the E.T. web site for details on when/where to attend.

I attended the seminar on May 24th, 2007 in Crystal City, VA. I found the best way to take away his message was to encode small ideas as sentences.

Notes

Display of data should be driven by its content, not by what you are “good” at.

Use all the levels that it takes to explain the meaning of the content (not just one level).

Details matter: annotate relationships between items (it helps your credibility with the audience).

Model of a good diagram is a good map; maps generally don’t have non-essential information.

Don’t put boxes around things—instead, use that room to display information.

Provide “reasons to believe” such as a credibility statement. An example is a disclaimer such as, “This is the best we know until better evidence comes along.” Always leave the door open and be open to improvements.

Rich supergraphics supersede just generic bullet lists (E.T. doesn’t like the bullet “reveal” technique commonly used in PowerPoint presentations).

Aim for rich content and very simple design. This will maximize content reasoning time and minimize design “figuring out” time (decoding, fooling around, and figuring out time for people viewing your work).

Tables will outperform graphics for small datasets (less than 300 numbers). Example of sports pages and financial data (mutual fund page): these should be our models (you won’t find zebra strips or fancy icons there).

“Don’t get it original, get it right”: use excellent but conventional templates.

Research is more important and appropriate than creative work. Know your content!

Design standard: at least do no harm to the content.

Follow the metaphor of teaching and educating people through the content and design; use elite newspapers as examples: NY Times Thursday science articles for example.

The principles of analytical design are based on the principles of analytical thinking (and also therefore tied to nature’s laws)

The goal of information design is to aid thinking

  • Example: if you want to compare things, show comparisons directly in your design.
  • Example of Mihard’s “Napoleon’s March to Moscow” graphic: Mihard didn’t make the graphic because he was good at it (drawing, engineering). He was trying to make a strong antiwar statement. The word “Napoleon” doesn’t appear on the map anywhere; it’s about the soldiers. He cared about the content so much that the result is the best it could be. The design is obsessed by content.

Show important information side-by-side (avoid the flip, flip of back and forth movement to compare things visually). For example, the medical bill chart with annotated sidenotes is a good template for reports (explains the data with side-by-side notes).

Good quote: “If you look after truth and goodness, beauty looks after herself.”

Sparklines: based on the idea that graphics are no longer important; they are the same as letters and numbers.

“Nature” magazine: best statistical graphics available (also see “Science”).

Content matters most of all.

Skip to Content Links: Visible or Invisible?

Posted on by

Many web designers implement “skip links” on their sites in order to aid visitors with alternate devices like mobile phones or screen readers. The links act as a way to navigate quickly to main parts of the page; if implemented correctly, they can be a good step towards keeping a web site accessible.

How to implement these links is a hot topic of discussion among web professionals. I recently received this question regarding skip links and whether to show them or hide them in a given layout.

The Question

Hi, I just wanted to ask you a quick question about accessibility for this site I am working on… I was going to use the display:none CSS attribute for my skiplinks, but according to this site, it’s not ideal because users that use a keyboard but that are not blind (i.e., have to use TAB to get around) can’t see it and therefore can’t use it. Also, apparently, some screen readers don’t read them. So, that option aside, I’ve come up with a potential solution. This would be to put a small downward-facing arrow at the top right, with the ALT tag[sic] describing its use. It’s visible, and relatively unobtrusive. In your experience, is using display:none an industry standard, and is what the site said a concern? What do you think would be the best solution?

My Thoughts

My experience has been that a well-designed HTML document doesn’t need skip links at all. If you do need it, for a very busy or long page with lots of content, then it is a great way to aid site visitors.

On some of the sites I have worked on I’ve included a “Skip to navigation” link and tried to put the main content first in the source. For example, see my Travel/RV blog and turn off CSS. The skip link is under the page title but just on top of the main content. For other sites, like here on simpledream, the skip link text is “Skip to content” and is located just above the global navigation menu.

To hide or not to hide? This is very much a personal preference. Lots of accessibility experts claim all skip links should be visible (always). My preference is to hide them from sighted folks. Most designers or visually-oriented developers will follow the hidden approach unless they can come up with a creative way to show the visible skip link. As a general rule, and as you pointed out, hidden skip links only benefit screen readers and other alternate browsers and don’t provide an option for sighted keyboard users.

If I’m going to hide, what CSS rules to use? I’ve used “display:none” on almost every site, but I am now leaning towards a better approach. For example, setting the “text-indent” to “-9999px” or something similar (I’ve also used “width: 0; height: 0; overflow: hidden;” before with similar results). This keeps it visible in screen readers and alternate browsers that understand CSS. I think it’s valid to say that “display:none” is not the best solution for hiding the links since it’s possible that some screen readers will ignore them.

What’s the best solution? It really depends! Like a lot of web design and development issues, the best solution depends on the web site itself, especially its audience and purpose. For example, if a site expects lots of mobile device visitors, the visible skip links at the very top of the page will be ultra-important. It’s really useful on a mobile device (such as a cell phone) to be able to use a skip link to navigate rather than having to endlessly scroll. As mobile access gets more popular each day, this is an important consideration.

Conclusions

If you want the site to be clutter-free and clear, I would recommend hiding the skip link. If accessibility is more important than the look of the layout, then the arrow idea is superb. Go for it!

In a scenario where the main content of the page comes first in the HTML source, then you may be alright without a visible skip link since the important content will be right there for the visitor to read.

Further Reading

If you would like to read other opinions and explore test cases:

Don't Use "Click Here" as Link Text

Posted on by
Reply

An important part of web design is making sure your content works for as many people as possible. To achieve this goal, make sure to use appropriate text for your links.

When calling the user to action, use brief but meaningful link text that:

  • provides some information when read out of context
  • explains what the link offers
  • doesn’t talk about mechanics
  • is not a verb phrase

Read more about meaningful link text on the W3C web site.

Important Questions for Your Web Site Project

Posted on by
Reply

When approached about taking a web design project, the first thing I do is to ask a series of questions of the site owner. The idea is to get him or her thinking about important aspects of the web site before any work begins.

I send the potential client a questionnaire with questions ranging from technology needed to budget and timeframe expected. I also explain my web design philosophy: simple, clean, and to-the-point (read more about the simpledream philosophy).

Along these lines, Drew McLellan recently shared his list of important considerations when planning a web site. He came up with five factors that go into the process.

In summary, these were:

  1. Who is the site for?
  2. What are the visitors trying to achieve when they visit the site?
  3. What does the site owner want visitors to achieve when they visit?
  4. How frequently do people expect to use the site?
  5. How will the site owners measure the success of the site?

This is a good start; the only one I would change is number four. My number four would be: “Budget: how much do you want to spend in time and money?” Knowing how much investment a potential client wants to make in the site makes a big difference on whether I take the project or not.

Money is not the only thing, either. Respect for you as the designer, time spent preparing content, and overall concern for the site’s success go a long way. Typically, if the client is excited about their site and wants to be involved in the process, the site itself has a greater chance of being successful.

There are other important questions for web sites including what technology is required, how much maintenance is needed once the site is launched, and what marketing exposure is required. The ability to answer these questions honestly gives you and the client a great foundation to build upon if you decide to work on a project together.

What questions would you ask? Do share.

Learning Web Design

Posted on by
Reply

People often ask me how I learned web design. My first response is that I am still learning! The question comes from people who are curious about getting started in the field. In this blog I hope to share some techniques for learning web design especially aimed at beginners.

If you are interested in learning to design, build, and maintain web pages, read on. If you are already a web designer or developer, go build something, and use CSS to it’s maximum potential. (Jeremy Keith nails it again).

Web design is exciting, it changes day by day. It is a diverse field, and many have dabbled in it at some point in their online lives. As with web technology in general, there is room for a solid career in web design with potential for growth. Good web designers are very much in demand right now as the web expands and requires skilled people to build and maintain sites.

As with any career path, there are many ways to enter web design as a career. Most of my colleagues learned on their own, but I do know several web designers who took college courses and received degrees in computer-related fields. For the most part, though, web designers switched from other fields to dive into web design full-time. Web designers typically come from other backgrounds: graphic design, communications, journalism, art, business, and many more. Today, however, children and teenagers are exposed to web design early and are able to choose web design as a first career.

Whatever your current skill level or interest, there is a place for you on the web. The first thing to do is: try it! That is how I began: I signed up for a free Yahoo account (it was Geocities.com back then) and started my own web page. I enjoyed it, and eventually it expanded from a hobby to a full-time job.

I learned web design (and am still learning) through several methods: college classes, books, online tutorials, viewing source code, and experimenting. If you can do a little of everything, you will benefit from the variety of learning and teaching methods. Often designing a few web pages or sites on your own can be frustrating when you are a beginner, so team up with a friend, fellow student, colleague or family member. If they are an experienced web designer, so much the better. Looking over friends’ shoulders is another way I learned valuable web design skills.

College Classes

Take as many classes as you can. If your college offers a “webmaster” or web design degree, take it. Even if you think it’s too basic or hard, it will do you well.

Through my local community college I took basic computer programming, digital arts (Photoshop and Illustrator), and several web design-specific courses. I took one or two courses a semester, and was able to learn design and programming skills even as I was experimenting at home.

Books

There are lots of books out there. Here are some of my recommendations:

Online Tutorials

As with web design books there are many good online resources. They are mostly free, so take advantage of the wealth of knowledge out there. Here are some of my favorite web design blogs, tutorials, and references:

“View Source” and Experiment

One thing about web design is that most of your work is free for anyone to use: the HTML, CSS, and JavaScript is visible to anyone with a computer and a web browser. This can be bad, as plagiarism, piracy, and stealing code is a common practice. But it can also be good for web designers because you can learn from other designers’ methods.

On any web site, hit “View Source” in your browser to see the HTML (in IE it’s under “View” toolbar, “Source”. In Firefox, go to “View”, “Page Source”). For CSS, use Firefox’s Web Developer Extension or copy and paste the URL for the CSS file from the source code. Feel free to look at and experiment with code, just make sure not to take it and use it as your own.

Learn Solid HTML and CSS Skills

Finally, a big part of being successful in web design is mastering HTML and CSS. Hypertext Markup Language is the de facto markup language for formatting web documents and Cascading Style Sheets is the language that gives the HTML markup it’s beautiful colors, typography, layout, spacing, and the rest of the visual elements. If you are a beginner, start with CSS and HTML basics and build up your skills from there. A solid foundation here will give you full control over your web pages and a deep understanding of how they work.

Note: A good resource: HTML and CSS: An Absolute Beginner’s Guide

Moving from Design to Web Design

If you are already working in the graphic or print design field, making the step to web design isn’t very difficult. Your skills will come in handy, and you can apply many of the same principles used in traditional design to web design.

For you, I recommend additional reading:

Go Forth and Code

Whatever your skill level or desire, web design starts with solid HTML and CSS, training, reading, and experimenting. Don’t ever hesitate to ask for more information.

Simple Does Not Mean Ugly

Posted on by
Reply

In his recent article on Site-Reference.com, Mark Daoust reveals the truth behind ugly web design. It’s not about whether the site is ugly or not. The key is simplicity.

I am in total agreement here. My philosophy for web design is to create simple, usable, yet attractive sites. I feel odd emphasizing the contrast between those two worlds (ugly and simple), but it is a common misconception that simple means unattractive. This issue is what Mark’s article addresses. In my experience, simplistic design is sometimes very complicated and hard to achieve. Taking away details and revealing the core of a design is a difficult task.

So what makes a site’s design effective? If it let’s the visitor do what they would like quickly and easily, it is a successful site. That’s it. It can be as ugly or as pretty as you like, but the goal for effective web design is clear communication with your site visitors. A simple design gets out of a visitor’s way and lets them get on with their lives.

Some simple yet good looking sites: the newly re-aligned SimpleBits, GarrettDimon.com, WordRidden (which Jeremy recently redesigned to be simpler…), JeffCroft.com, Cornell University, and the ever-pleasing-to-look-at smallTransport.

Learning DOM Scripting

Posted on by
2

Around Christmas I purchased Jeremy Keith’s new book DOM Scripting: Web Design with JavaScript and the Document Object Model. It has been amazingly good so far (I am on the sixth chapter). I have already found practical uses for the lessons in the book.

Jeremy nails the topic down with clear principles, examples that are easy to follow, and a fun but authoritative tone to his writing. I highly recommend this book to all web designers and developers.

If you’ve been doing JavaScript and client-side scripting for a while, you will learn new ways to make your code degrade gracefully and how to separate the scripts from your CSS and HTML code. If you are new to JavaScript, even better! This book will teach you the basics while giving you a solid education in unobtrusive scripting.

My experience is somewhere in between. I’ve been using JavaScript for some time, but I’ve never understood it very well. Until reading this book, I had also never written any scripts from scratch. Now that I see how easy it is to manipulate a document with the DOM, I will incorporate unobtrusive JavaScript into my daily workflow.

Tips and tricks

These are some of the lessons I have noted:

  1. When considering JS for a project, or when writing scripts, a cautious, questioning attitude is desirable
  2. A good practice: use double quotes in your JavaScript code, and use the (back slash) for escaping characters within a string
  3. Some naming conventions: camelCase for functions, under_score for variable names
  4. Good practice: use var when assigning a value to a variable for the first time, especially within a function. This forces it to be local in scope
  5. Reminder for when manipulating the DOM: All nodes are objects
  6. For conditional statements, if (something != null) can also just be if (something) to shorten the statement
  7. The methods getAttribute and setAttribute only work on element nodes
  8. Here are some useful methods used on the document object:
    • getElementById
    • getElementsByTagName
    • getAttribute
    • setAttribute
    • childNodes
    • firstChild
    • lastChild
  9. Instead of browser sniffing, use object detection: if (!document.getElementsByTagName) return false;
  10. Use safety checks to add object detection in functions to help separate code from markup. If id or class names change, the JavaScript won’t get called. It’s important to have these tests and checks both for backwards compatibility and for future use.

Some bad uses of JavaScript

Also, some of the wrong habits that I need to change:

  1. Using javascript: pseudo-protocol to send links to a new window (for example)
  2. Using inline event handlers
  3. Relying on document.write and innerHTML for modifying markup
  4. Avoid onkeypress if possible, since onclick works with both mouse AND keyboard!

Personal JavaScript Updates

Just as learning semantic markup for HTML documents and lean, clean CSS for style sheet use, there are now a lot of bad uses of JavaScript coming to my attention on sites that I own or operate. For one, I need to get all JavaScript out of the body element of my web pages. Next, inline event handlers need to be moved to the JavaScript file instead of being in the HTML.

Another example: I often use JavaScript to obfuscate email addresses and form action paths. Doing it in this way might not be unobtrusive (it doesn’t degrade nicely) unless I can figure out a way to return a statement of [at] type if JavaScript is not supported. This is worth pursuing more…Of course, there are always server-side solutions but I don’t always have access to the server on client projects.

Worth it’s Weight

I am only 6 chapters into DOM Scripting: Web Design with JavaScript and the Document Object Model, but it has already paid for itself. By the end of the book, it will be worth it’s weight in gold. Thanks Jeremy and hopefully others will find similar lessons in their own web work.

Visit the book’s companion web site and purchase the book on Amazon.com.