Forms design is one of those niche topics that seldom seems to get much
attention. Yet it’s within the context of a form where much of the real
interaction on web sites happen. It’s where the rubber meets the road,
so to speak.
Web Application Form Design by Luke Wroblewski gets right to the nitty-gritty of label and form element layout. Mr. Wroblewski’s
recommendations will seem less subjective after looking at Label
Placement in Forms by Matteo Penzo. In this article for UX Matters, Mr,
Penzo describes using eye movement tracking to test form element layouts
similar to the ones in Luke W’s article.
A couple of other nice articles on this often dry topic – CSS-Based
Forms: Modern Solutions, in Smashing Magazine and The Form Garden – A Collection of CSS Stylesheets For Web Forms
Forms need love too!
Categories: Forms · web design
Our blogging-shy designer, Brian Willis, suggests this article on how Gmail treats images, as a suitable contribution here. It says basically that text will be more important than images as result:
Gmail strips out all graphics by default. You have to proactively turn them back on and do so on an email by email basis. This is going to dramatically effect how newsletter publishers embed their sponsor’s messages into the email since Gmail represents the email equivalent of TiVo, at least as far as ad skipping is concerned.
Read the article on eROI. Thank you Brian!
Categories: HTML email
Designing a small site recently and attempting not to fall back on the crutch of a single table cell, I was confounded by how to make the whole thing center in the browser window. Apparently this is not such an easy thing to do for others either! I was pleased to see that the solution recommended on the Venture Skills blog was the same one I came to (by trial and error). The whole exercise was made much easier by CSSEdit 2.5 which is fabulous. I could never have done it with Dreamweaver alone. Basically, you can create a page with divs, label content as h1, h2, etc. in Dreamweaver, and then style it with css in CSSEdit. As you style the browser preview updates without refresh needed, and it also helps you to create the css with the correct semantics. It makes it almost possible to design directly in code, without too much reliance on full comps in Photoshop.
Categories: Design tools · css · web design
I stumbled on the opportunity to join the WordPress annual get together in San Francisco later this month. Registration closes out soon, quite a deal for $25… I was number 245 to register!
Categories: blogs · cheap stuff
We missed the boat on an AMA-Aquent webinar all about CS3, it was given back in June. However, it’s available as a free on-demand recorded event through WebEx. Get it right here
Reviews encouraged… please log in and comment!
Categories: Design tools · free stuff · training
Here’s lots of information about blog design, links to templates, how to make one work well. Even how to make money with one! I’ve been thinking about blogs recently as a means for anyone to have a website easily, and also as a format for a variety of uses. For instance, a blog can be used to share resources in an easily sortable way, or to create a conversation, or even a community of people who share stories or an interest. My dad is publishing a book in a few months about people in their 80s, and instead of doing a “brochure” website as I did for a friend’s book last year, it would make much more sense to set it up as a blog. That way, the publisher’s team and the authors can help contribute updates when the book gets reviewed, and more importantly, we might even get some conversations going about the book and similar stories people have. Don’t know how many bloggers there are in their 80s, but who knows?
Categories: blogs · web design
I came across this info on a new aspect of Adobe CS3 that is wild. It’s flash enabled, context-sensitive tool tips that are fed by a delicious tag ANYONE can contribute to. Adobe monitors the contributions. This means that these tips are basically evolving and developed by a community of users, much as wikipedia is a dictionary created by community. What’s different is this is actually within the application, accessed through a “know how” palette. And it further blurs the line between software and web apps.
I gather there’s more on Adobe Labs about it, but from Veerle’s blog:
… knowhow is a technology preview that delivers single-click, contextual access to relevant help information from a panel in Adobe® Illustrator CS3. Knowhow gives users access to a wide variety of information—basic tool descriptions and short cuts, Adobe Help content, as well as community-generated tutorials, tips, and techniques on the web.
So it’s something that was built entirely in Adobe Flash and looks just like a standard palette in the application. The content found in knowhow is pulled from community-generated content from a user account on del.icio.us. Anyone with a del.icio.us account can suggest new content for knowhow by simply tagging it ‘knowhow’ and the Adobe team will review and add them to their collection.
Categories: UGC · UI · usability
A List Apart had a post a while back about doing concepts for pages in a layout application… I agree it’s easier. I’m roughing out a bunch of web layout options now… Photoshop takes so much time! So I’d rather to work in Indesign and bring in pieces of things. If I were on the PC I’d use SnagIt, but it doesn’t exist for the Mac. Frustrated, I poked around and found Constrictor (what a name) for only $10… works well, I can pull in pictures from various web pages and drop them into layouts.
Categories: cheap stuff · mac · web design
Usability for web pages, applications, recent things he’s been noticing. A ton to digest but even if you don’t read the whole thing you’ll get some nuggets.
Categories: UI · usability · web design
