Coffee on the Keyboard

Picofiction

Picofiction is new project: telling stories in 140 characters.

Picofiction is a combination of microfiction, text messaging and Twitter. If you can write a story in a two-page spread, and tell the world what you’re doing in 140 characters, maybe you can tell a story in 140 characters.

Why 140?

140 characters is the length of a standard text message. Text messaging has its own vocabulary to deal with the limit, but story telling can be even more flexible with words.

The site is up and running and you can start sharing stories right now! Some features haven’t been finished yet but I’m working on it.

And remember that this Saturday is MSU’s Technology Conference 2007. If you’re a teacher in Michigan you should come!

Tags: fiction, short, stories
Posted in Articles, Projects, Social Networking

Technology Conference 2007

I will be running a workshop on web design for educators at the MSU College of Education’s Tech Conference 2007. You can still sign up for the conference if you are in the East Lansing area and interested in technology-in-education.

Dreamweaver.

(I’ve been working on that, sorry for the lack of posts.)

My goal is to cover a mix of mechanics and principles: how you can use CSS versus how you should.

To that end, I plan on discussing how the content should drive the design process, how to separate structure (XHTML) from presentation (CSS), and the basics of best-practices design—standards-compliant code, cross-browser javascript, etc.

The principles will be weaved together with the mechanics of using CSS, such as formatting text and positioning elements.

Do you have any ideas, suggestions, or comments? The target audience is educators with at least some background in HTML, though who knows exactly how much?

Comment and let me know!

Posted in Articles

use semantics to guide design

An example.

For the longest time, I wondered how exactly people chose the layouts for gutters. Why did box X end up in the left gutter while box Y was on the right? Was it random chance?

Looking back, I realize that, yes, much of it was essentially chance. Or trying to make the columns the same height. Or what the designer had eaten that morning. But not all sites were done this way, and the sites that had other reasons for grouping were usually better.

Then I looked at the code for one of my favorite sites, and I was shown The Way: describe semantic containers.

By describing the containers semantically, instead of geographically (ie: #user_context instead of #left_gutter) you can give yourself a map and create a layout that’s both easy and logical.

my example

For example, on my site, I wanted to break the footer into sections. But where to put the copyright notice, which had previously been centered on the bottom? Easy: put it in the #footer_legal section, with the other legalese.

Another one of the four footer columns was described as #footer_standards, but then I wanted to add a link to an "about the site" page, which is not a coding standard. Instead I changed the column to #footer_techy and included all the technical links, including standards and site-information, divided into sub-sections.

logical design is ease of use

By describing semantically, you not only make your own design choices easier, you make navigation easier for your users.

Semantic descriptions force you to group semantically related content. So if your readers are looking for your privacy policy, but find your copyright notice first, they should be in a "legal-looking" section, and be able to find your privacy policy easily.

Of course, this isn’t limited to design elements within a page. On a larger scale, you can use semantic groupings to make user-interaction easier. As Eric at Internet Duct Tape suggested, you can use mind-maps to model user interaction, and also to model site organization.

So pay attention to your content. Use semantic ids and classes to your, and your users’, advantage.

Posted in Articles