tecznotes

Michal Migurski's notebook, listening post, and soapbox. Subscribe to this blog. Check out the rest of my site as well.

May 6, 2005 7:52am

allegorical web design

Mboffin posted an animation showing the development of a basic web log in the form of a stream of screenshots. It's a 900k GIF, coincidentally the same dimensions as the monochrome monitor of my first computer.

My first impression is that it's a disarmingly simple demonstration of standards-based web design that explains the process better than any book or advocacy project ever did. It approaches Jon Udell's Heavy Metal Umlaut movie in communicative density and progressive unveiling of an idea.

The animation starts with a blank page, and a title: "Site Name." The process of constructing a website framework in this way and the mode of presentation feels like a handy metaphor for a few larger trends in current development for the web (more later).

Site content is slowly added. The page is built from the information up, a radical departure from the html terrorism of the bad old days. New chunks of content are added using obviously semantic markup: headers, unordered lists, plain paragraphs. When I was designing for the web before 2000 or so, I would start at the other end: sketch out a site design, build up a comp in Illustrator and Photoshop, decide where the table cut lines would need to be, and then work out the tedious process of pixel arithmetic GIF slicing. Flexibility had to be considered and planned for. Change was expensive.

Visual design comes next, and proceeds according to the internal logic of the box model. It's worth noticing that at this point in Mboffin's animation, work on the HTML effectively stops, and all effort moves to the style sheets. Previously generated chunks of content are grouped into columns and moved about the page, with backgrounds and borders adjusted. CSS is uniquely well-suited to this sort of incremental play and parameter adjustment, and closely matches Malcom McCullough's understanding of craft as an activity which requires both skill (planning, foresight) and feedback (responsiveness, flexibility). It provides a language that simultanesouly supports generalizations (e.g., "make all the borders red, and give them 10 pixels of space on the left") and specificity ("...except this one").

The final appearance is unmistakably now, from the image-header to the centered dual-column box and subtle gradients. I love the way in which it was approached as a loose pattern with cumulative refinements, rather than a rigidly pixel-specified Photoshop comp.

This particular approach to simplicity feels like an idea that is currently hitting its stride in web development circles, expressed through the mantra of "release early, release often". This example starts from the core of an idea, the textual content of the website. Other examples include event-sharing services and junk-management fads that focus narrowly on a single primary goal, short stories to the sprawling novels of 2001's obsession with content management behemoths. It will be fun to participate in the aggregation of all these porous mini-services into a loosely-coupled "emergent Internet operating system" over the next few years.

Comments

Sorry, no new comments on old posts.

March 2024
Su M Tu W Th F Sa
     
      

Recent Entries

  1. Mapping Remote Roads with OpenStreetMap, RapiD, and QGIS
  2. How It’s Made: A PlanScore Predictive Model for Partisan Elections
  3. Micromobility Data Policies: A Survey of City Needs
  4. Open Precinct Data
  5. Scoring Pennsylvania
  6. Coming To A Street Near You: Help Remix Create a New Tool for Street Designers
  7. planscore: a project to score gerrymandered district plans
  8. blog all dog-eared pages: human transit
  9. the levity of serverlessness
  10. three open data projects: openstreetmap, openaddresses, and who’s on first
  11. building up redistricting data for North Carolina
  12. district plans by the hundredweight
  13. baby steps towards measuring the efficiency gap
  14. things I’ve recently learned about legislative redistricting
  15. oh no
  16. landsat satellite imagery is easy to use
  17. openstreetmap: robots, crisis, and craft mappers
  18. quoted in the news
  19. dockering address data
  20. blog all dog-eared pages: the best and the brightest

Archives