24 November 09

Firefox does not support tabindex for select inputs. Hopefully, I saved you 30 minutes of frustration that I suffered.

20 November 09

Disabling fonts

Social Media Official Logos

Why futz with Brands of the world when you can go straight to the source?

5 May 09

Check your labels

Once you’re done marking up a web form, it’s easy to check that the labels are marked up correctly. If you click on the label, it should change the focus on the element, just like if you were clicking the element itself. I never even realized the functionality was available up until a couple weeks ago. It’s a huge benefit to Fitt’s law. The click-able area is substantially increased.

I’ve been pretty surprised how many labels are not marked up properly when interacting with various corporite sites in my personal life (i.e. paying bills online).

30 April 09

Samantha Warren: Resources for Students & Job Seekers

This is a list of helpful links for those interested in perusing a career in web design, graduating from design school, or trying find a web design job.

Daniel Mall: Design by Comfort

It means that you have to be realistic about what you can and can’t do. There are some things that you are going to be better at, things that you’ll have a natural affinity towards. And that’s great. It is in this fruitful imbalance that your work can accentuate itself.

29 April 09

SeamlessTextures.net

Awesome. But shameful use of Century Gothic and no Futura in the font stack

19 April 09

Jeffery Zeldman, Big Think videos

18 April 09

Font Shop: Fonts by Alternatives

Overused typefaces can lose their impact, especially in branding, advertising, and package design where originality is important. Here we recommend fonts that are less common but just as serviceable as old standbys like Helvetica, Futura and even Comic Sans.

Think of what a better world it would be, if everyone knew about Papyrus alternative.

9 April 09

456 Berea St: Quick Tips

Design Observer: Ten Graphic Design Paradoxes

I re-read points 5 and 6. Whether it’s design or customer service or sales or engineering, communication is key. Talent, creativity and problem-solving will not matter unless you can paint a picture in someone else’s mind.

6 April 09

Frank Chimero: Getting Better

I wrote a little essay for Thinking for a Living about healing and improving called “Getting Better.” It’s a pep talk for graduating design students, and briefly discusses the challenges to be faced as someone looking for work, for a place, and for a purpose.

1 April 09

Garrett Dimon: Evolution of a Header

Another example of the design process from sketches to final implementation.

27 March 09

And Curiouser: Life After College

Here are some of our notes on the presentation we gave to the 2nd year Digital Multimedia Technology students at Red River College.

They address in detail a lot of the topics that people coming out of school will encounter: freelancing, the first job, and being a newly branded member of the working population.

25 March 09

CSS Properties To JavaScript Reference Conversion

I know the formula is xxxx-yyyy :: xxxxYyyy, but I like to double check with this chart.

20 March 09

An Introduction to Using Patterns in Web Design

Ryan Singer of 37 Signals: An Introduction to Using Patterns in Web Design

This is from 2004, but still relevant. Singer provides a work flow for the designer. Sadly, I can’t think of any other examples of how designers approach their projects. I wonder what other ‘standard operating procedures’ are out there. The web design community excels at propagating tips and tricks and hacks, but there is little discussion about its structured processes.

via rewdy

18 March 09

What do we call headers and footers now?

Now that HTML5 is being adopted, I figured I would give my own shot at a redesign with the new features. Implementing HTML5 wouldn’t be that hard, just a tweak to the Doctype, and change some divs to the new elements. I felt pretty comfortable mapping out which sections could be a section and where I could implement an aside here or there. The preliminary planning stage was going well, until I considered what I was supposed to do with the page header and footer.

Header and footer are solid conventions for web designers. Just about every wireframe can be reduced to these three main sections.

<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>

At this point, I should acknowledge that header and footer don’t adhere to the semantic naming concept. That is, they do not describe their content, but rather their position on the page. All the same, they get the job done. Everyone recognizes them, and they are easy to identify in CSS.

That was before HTML5. Now, they can be easily mistaken for the new header and footer tags instead of the old id names. Imagine a scenario where you use both header elements and an element with an id of header.

#header a { color: #789; font-size: 20px; }
header a { color: #333; font-size: 16px; }

Uh oh. it’s all too easy to mix up the selectors in CSS, regardless if the header element is a div, header, or section. In order to resolve this situation, replacement id’s are going to need to be found. Ideally, the replacements for header and footer would be just as short in length, and just as obvious in meaning.

I first turned to the sites that have already deployed HTML5 to see how others approached this issue. The newly re-aligned nclud hasn’t yet fully implemented HTML5 elements, instead opting for Jon Tan / Andy Clarke’s HTML naming conventions. Jounce and Cameron.io both avoid the issue by only using one instance of the header element. Apple’s page for Safari does offer a solution. They use <div id="globalheader"> and <div id="globalfooter">. Not bad. But personally, I’d like my top-level id names to be a bit shorter. One option would be abbreviating “global” to just “g”, but that would make #gheader, still too similar to header.

Back to semantic names. I considered describing the content of the header. Andy Clarke advocates branding, but branding is just one of the purposes of the header. I often end up having navigation in the header, so naming it all branding doesn’t make sense. The best compromise might be a portmanteau of these two main functions, navigation and identity: identinav. But now the name is jargon and it’s not as self-evident as header.

The best replacement I’ve found for header is masthead. It’s obvious, short, and unique.

That still leaves me with the footer. Back to Clarke, he suggests site-info. Again, a good proposal since most of the content within the footer is basic information about the site as a whole — a quick author bio, copyright, links to popular or recent posts. But just like the header, the footer can contain a wide variety of content, sometimes complete unrelated to the site itself: links/blog-rolls, social networking icons, general ephemera. The footer is the asylum for slightly-related content. The only thing that these different items have in common is that they didn’t belong anywhere else on the page. There’s no chance that one semantic name could fit the bill.

Word association

If masthead is a winner to replace header, then what would work for the footer? Mastfoot doesn’t make sense, as it’s not a legitimate phrase, plus mast reminds me of the mast of a ship, which is a reference to positioning…maybe keelfoot would be the correct opposite phrase.

At this point, I’m just spit-balling, trying to find something that could get the job done. The phrases become more abstract as I consider the beginning and ending parts of other forms of art.

  • Music: intro and outro
  • Fiction: prologue and epilogue
  • Literature: foreword and afterword
  • Architecture: roof and foundation
  • Interior design: ceiling and floor
  • Cuisine: appetizer and dessert, main-course could replace content
  • Movies: coming-attractions and credits, feature-presentation could replace content

The Wikipedia page for book design also has a list of “back matter” which provides for some good candidates to replace footer: conclusion, postscript, appendix, addendum.

For now, the best solution I have conjured up with is coda. It’s the musical term for the conclusion of a work. It is short, and it does have some semantic meaning, but it is far from ideal as a replacement for footer. The word coda already has an assigned meaning in the world of web design , that of Panic’s flagship text-editor for web development. On top of that, I’m mixing metaphors with masthead. But for the time being, it works.

As 2009 progresses, I am really interested to see how other developers will confront this situation. My guess that is that the age of #header and #footer has come to an end.

11 March 09

If no one reads on the web, it is for lack of design, not lack of readers. If reading on paper persists, it will be for an attention to design — for a commitment to design that is as carefully crafted as the text itself. A beautiful text deserves no less.

— Mandy Brown, By Design

9 March 09

Designer resumés

I’m in the process of designing my own resumé. It’s a hard enough task as it is, but for the graphic designer, it comes with additional pressure. The resumé is the first example of your work that the employeer will see. In order to get some better ideas on what others look like, I’ve been a compiling a list of designers with links to their own resumés. These aren’t necessarily the best or most impressive that I’ve found, but they give a good range of what you can do with your layout, and how to handle the wording. Experience levels range from student to art director. Out of respect to the designers’ bandwidth, I’m linking to their pages, and not directly to the PDF’s.

8 March 09

Quantity makes for quality, a zeitgeist

I’ve been noticing a recent zeitgeist in the world of creativity: the virtues of quantity over quality. Here’s the supporting evidence:

The bummer is most ideas kinda suck when you do ‘em. And no matter how much you plan you still have to do something for the first time. And you’re almost guaranteed the first time you do something it will blow. But somebody who does something bad three times still has three times the experience of that other person.

— Ze Frank: The Show, 07-11-06 as pimped by Merlin Mann

Bruce Springsteen is a really interesting guy. For one thing, he supposedly writes dozens of songs for every album he throws out.

— Merlin Mann: Most Days 2009-01-12 (skip to 3:30)

Bill refutes the common phrase “build one to throw away” replacing it with “sketch 100 to throw away, then take stock of what you learned.”

— Des Traynor: Fail early, fail often, and learn

In the projects I’ve been involved in recently, I’ve been better served by diving in—I tend to procrastinate, so the time I normally spend thinking about what I need to do (aka putting it off) is better spent just working on the problem and iterating as needed.

— flow14: Nothing ventured, nothing gained

And finally, the questionable characters answer How do you come up with interesting designs?