Category Archives: Design

Web design, typography, user experience, and visual aesthetics.

Death of Flexible Width Designs

It’s over, it’s done. Those of you holding on should wave the white flag as two of the best flexible width sites, Doug Bowman and Dan Cederholm, have thrown in the towel and gone fixed-width without even an entry of explanation, I suppose because the benefits of fixed-width are so obvious no explanation is necessary. Update: Cedorholm’s design is now centered.

Bowman's Stop Design Cederholm's Simple Bits

The assault is coming from all sides:

Dear Mr Antonioni:
I recently screened your classic film, The Red Desert, starring Monica Vitti and Richard Harris. I have a problem with the way you used screen space. My theater’s screen is big and wide. It is capable of handling many actors at the same time. For instance, crowd scenes and battle scenes work well. But in your movie there are only a few actors — and many times they are pictured in one corner of the screen or another, against a stark minimalist background. This is a terrible waste of screen space. For instance, there is one scene where Ms Vitti is filmed on the left side of the screen and there is a white forest behind her. The white forest is not much to look at. Sure, I can look to the left and watch Ms Vitti’s performance, but what do I see when I squint my eyes and look only at the right side of the screen? Not much! I urge you to add extra characters and situations to your movie so every inch of my screen bursts with action at all times.

Sincerely,
Howard Gumpf

Ouch. Now I think the film/web analogy is a bad one, and it breaks down with any sort of critical thought. Zeldman knows this but he’s trying to make a point.

Was it that long ago that flexible-width designs were all the rage? They came in with a bang, and left with a whimper. Is anyone still holding out? Are there any good flexible sites left? The only place I see it anymore in web applications (such as the WordPress administration interface) and in lightly designed e-commerce sites like Amazon.

Texturize Finished

I just stuck a fork in Texturize and I’m ready to integrate it fully with WordPress. I’m very satisfied with the speed and functionality of this latest version. Not much in way of feature changes, except for one I think is pretty significant.

The Q tag would be great if it weren’t for Internet Explorer’s lacking in the realm of CSS generate content. (See Hixie’s scathing remarks for a critical look at IE.) Anyway this is the first automagic quote curlifier to do this (cue 15 corrections) though I’m sure Textile and SmartyPants won’t be far behind. The great thing about this technique is it lets you markup semantically meaningful quotes in your writing without losing a majority of your audience. Even better it would be trivial to put some simple browser detection and send the markup to browsers that get it. What a concept, using browser detection for good and not evil. This post is the first one where I’m using this technique. Hope the sky doesn’t fall. Update: It didn’t.

Opera Coming Along

I must admit that I haven’t touched Opera for some time now, and I never really took it htat seriously as a browser. Tracking its market share is tough because out of the box it identifies as IE6 out of the box, but I always figured that there was just too much wrong with it for it to be that popular. What a surprise their latest version is! Not only is it blazingly fast like it has always been, it has what I would count as the best designed user interface I have seen thus far in a browser. IE is weak. Phoenix was better. SlimBrowser makes IE nice but puts too much clutter, and feels unpolished. Mozilla, well, good ‘ol Mozilla has become my main browser for the past couple of weeks and I can’t complain. Out of the blue comes Opera, with a interface so dandy I feel like I might be in OS X (someday…) if the garish start bar at the bottom of my screen didn’t bring me back to reality. The only thing chapping me is the banner, but I would have no problem supporting such finely done software even it wasn’t my primary browser, just to encourage its development. I can’t begin to detail all of the nice touches they’ve put into the interface, just try it out. It’s only a 3.2 MB download without Java! (And who needs Java anyways?)

Image Fun

Been playing with manipulating images with PHP all night, something I haven’t done much since I had the fancy capital thing on this site, and that wasn’t as much manipulating images as generating images using truetype fonts. With GD included PHP is very easy to use for this sort of thing. I’m storing the images themselves in the database as BLOBs, along with a bit of meta-data I grab from them when they’re uploaded using a web form. I have a small PHP script that returns the images from the database, resizes them to whatever width I specify in the query string, and does “funky” caching so if the image has already been generated/grabbed it returns just about as fast as reading it directly from the filesystem would. I have to have some fun because the site I’m doing this all for uses tables.

Speaking of tables, everyone head over to Big Pink Cookie and see how there aren’t any there. I recreated the basic layout in CSS and then helped Christine tweak it till it became the beauty you see before you now. If you’re curious, here are some of the changes I made:

  • The CSS and Javascript is now in seperate files, as to be easily cached.
  • The header graphic is now a h1 tag with the text hidden and the graphic as the background.
  • The latest pictures from Pixelog at the top of the page are now an ordered list, styled to display horizontially through CSS.
  • There is a “rapper” div (gotta have some flava) of a fixed width centered using margin: auto and a IE workaround.
  • Inside that there is a content and menu div, the menu has a fixed width and is floated on the right.
  • ms that were previously all preceded by “::” are now unordered list items with the :: effect recreated through a list image. Now if Christine wants to change the way her menu looks she just has to edit one file instead af change hundreds of double colons.
  • It now loads really, really fast. Especially when compared to before.

It might still have a stray error here or there that’s keeping it from validating, but give it a few days and all those should be ironed out. More importantly, it validates in spirit. I can now add Christine to the list of site I check when I’m browsing on my Palm over a 9.6k connection. Best of all, I think CSS no longer makes Christine’s eyes bleed, and she can see Tantek again.

New Yahoo

Saw this via Simon and I must say that I’m quite impressed. The interface is clean, the results are an ordered list and there’s all sorts of nice features and semantic goodness. Plus I show up twice on an image search for “photomatt.” If they had good toolbar this could definitely replace Google as my main search squeeze, unless of course Google comes back with something new, exciting and neat. While we’re on the subject, could someone tell me why I keep getting hits from a MSN search for “google.net”?

Sweet Wireless and Tungsten Impressions

I just dialed in to my dialup ISP using my Tungsten and T68 using Bluetooth as the connection. It worked on the first try. Next step is GPRS but since I have a “bootleg” phone not set up by T-Mobile the settings aren’t right on the phone itself. Some first impressions:

  • The springy stylus is great.
  • I need a SD card (256MB for ~ $60).
  • I’m really looking forward to trying out all the web browsers.
  • So far I’ve used WebPro:
    • It does some interesting content-negotiation stuff, unfortunately it does it badly, causing many things to break.
    • Can’t find technical documentation of its capabilites or methods.
    • From a user point of view though, it works pretty well.
    • Supports some basic CSS.
    • It looks like it may support gzipped content.
    • Update: I tracked down the developers and sent them an email, hopefully I can get some “official” information soon.
  • The size is perfect for me.
  • The directional pad is very useful.
  • With Jot installed I almost never need to open the slider. (Try the demo out.)
  • A lot of Palm software websites really suck.
  • The sound is really good, the speaker can get really loud. It can fill a quiet room.
  • Whoever designed the font on here did a good job. Much better than the one on the Sonys.

Tungsten T Review Review

The PalmOS news world has changed quite a bit in the past several years: you have the corporate, the fallen star, the amazingly thorough, the good but dying, and the current star. And then there’s Brighthand. The history behind the site is scandalous but unimportant, and instead let’s focus on their latest feature article, titled “The Zen Done Gone.” (Which brings to mind Brad’s comment at SxSW to the effect of “Grammarians around the world shuddered.”)

In this article Trotter Hardy decides to take to task the “Zen of Palm” by comparing its stated goals with the design of the Tungsten T. This could have been a very interesting article, especially if it had focused on Palm’s inclusion of numerous multimedia features while not making any significant improvements to the built-in PIM functions. What we get instead is a heavily biased presentation of one person’s difficulty, which to me is the very worst kind of review. (I remember a review of the Treo which spent half of the article complaining about T-Mobile service and saying nothing about the device itself.)

It starts out with a rant about the sliding bottom that covers the graffiti area. Hardy misses the point completely, which is as much a usage issue as it is a size issue. Palm did research and found that most handheld usage is data retrieval. That’s not a revelation if you’ve used a handheld for any period of time, but it’s nice to see that real usage affected the design of the unit. Some of my friends who have Tungstens have told me that they seldom ‘open’ the unit at all because all common tasks can be done with the unit closed (and a lot with the cover on!). It’s true that closing it only makes it .8″ smaller, but when the whole thing is just 4.8″ tall that’s a good fifth of the height. Also does adding the movable component really add that much to the production cost? It was my impression that manufacturers had been doing the moving parts thing for a while now, and the unit seems to be priced very competitively with its non-moving-part competitors.

Five paragraphs later, we have more complaints about the size. Apparently the Sony SJ33, which has been available for 10 days in America so in terms of context means very little to most people, just “feels good in your hand, like it wants to be there. Not so the Tungsten T.” A little research reveals there is a whopping .1 inch difference in width between the two. Perhaps that tenth of an inch makes a big difference to him, but his impression is most likely the result of another bias. As an added note the Tungsten T is lighter in weight than the SJ33 as well. The second part of this section says the unit is too slippery, which if true for the Tungsten is true for most handhelds out there. The third section describes what I can surmise is difficulty with holding the unit due to it having buttons on the side but it’s really hard to see through the incoherent writing and pick out what specifically is being criticized here, and what the author would consider a better solution to be. Should there be no buttons on the side? How does the bottom “collapsing” cause one to drop it? The last criticism of the cover is probably the most valid, as it’s compared to known units, but I’m surprised the reviewer didn’t know the cover clipped on the back, as this has been standard for detachable covers, most notably on the Visor series. I’m more surprised that the reviewer wasn’t familiar with the side flip cover on the V and 500 series, the V series being the most common Palms in the world. (May not be still be the most common, but for at least 3–4 years it was. I haven’t seen any data recently of this sort.)

If you’re going to talk about size and comfort when discussing a PalmOS unit, at the very least compare it to the units everyone knows, like the V/500 series, the III series, or maybe a Visor. To be truthful though these comparisons are of limited real-world use unless the unit is deformed. If you’re considering buying a handheld, online or otherwise, go into the store and lift it up, put your hands around it, turn it around. Best Buy is not good for this because they have their units in little cages, someplace like CompUSA or Circuit City is usually better because they have everything attached with a little security string, which while annoying is much less intrusive. Best of all, find a friend or colleague who has one: hold it in your hands sans restraints; most of all, put it in your pocket or wherever you plan to carry it. In a perfect world there would be a high-class store that would allow you to do the above, and such a thing has been discussed in Houston, but it’s probably not economically viable.

I’m going to skip over the part about bundled applications being too complicated; they’re optional and if you don’t like it don’t install it or find something better. Documents to Go is a great thing to include because it’s not just something consumers have been asking for, it’s something they’re demanding. It’s a powerful program that does a lot, but the basic interface is pretty elegant and doesn’t present too many complicated options. I still like Wordsmith, and the fact that I have that option is a testament to PalmSource’s commitment to the Palm Economy that they don’t develop their own program and bundle it by default with every unit they sell; competition is a good thing. Additionally, it’s a big selling point that on PalmOS you can do more with Office documents than you can on the PocketPC platform.

The final rant about not being able to access files off a SD card, as it stands, is just filler. If the author had dug deeper and discovered the cause of the problem, he could have reported accurately whether it was the result of human error (something at this point in the article I’m inclined to believe) or whether it is actually a failing in Palm’s product. The process of putting the files on the card is so vague almost nothing can be concluded from it.

One doesn’t have to look far to find plenty of glowing reviews of the Tungsten T, and more importantly I’ve been quite impressed with it when I’ve dealt with it in person, which is why I’m confident about the product and getting one this weekend.

Of course I didn’t expect much from a site whose design is a remarkably similar to Glassdog/Lance Arthur, but don’t take the mere uncanny resemblance as damning evidence, as Brighthand enhances the design with garish ads, mediocre writing, and gaudy graphics. A “Brighthand member” has left comments to the effect that permission was asked before the design was used. I don’t have any information to the contrary and I think my comments were unnecessarily harsh, so in the interest of peace I hereby withdraw these.

Menu Revamped

Okay, per Tantek’s suggestion I’ve made the menu entirely a nested list, and adjusted the CSS accordingly. I had to work out a few kinks with the specificity of the contextual selectors, but after that it was a breeze. However this has brought to my attention how terribly ugly the CSS ridge effect is in Mozilla—really unattractive. It’s a shame because a lot of people seem to like it, but I’m exploring other options. Structure is groovy. Hell is a world without the style attribute.

Notes: The Future: User-Centered Design Goes Mainstream

These are a day late and a little short but I thought I should put them up anyway.

Parrish: Strong claims: power, justice, and change. Aim to strengthen and not quash these principles. Limiting concerns to blogs. Many questions regarding accessibility. Blog tool developers have made many efforts to keep their tools flexible. Celebrate those efforts and use it as a starting point. Other barriers to access: technical, socio-economic, political. If all barriers were gone, would anyone publish anything. Continue reading Notes: The Future: User-Centered Design Goes Mainstream

Notes: Between the Stylesheets

Here is a collection of some notes I took at the Between the Stylesheets panel, complete with linky goodness. Update: Tantek’s post.

Jeffrey: The thing about CSS, it’s hard to understand unless you first think about markup. It’s hard to rethink the way you approach X/HTML. There’s so much to do that it seems strange to think about HTML, but in fact it’s important. We now have the chance to party like it’s 1993, we have the chance to write it like it was meant. We (designers) could do that until browsers became compliant. Saves Bandwidth. Work is now more accessible. Continue reading Notes: Between the Stylesheets

Notes: The Future: User-Centered Design Goes Mainstream

These are the notes I took, it’s a cross between transcription, commentary, summary, and BS. Hope they’re helpful if you were in another panel or would just like to review what you heard. Leave comments if you got a different impression of the talk or disagree with something I wrote.

Molly Steenson – Professor, GirlWonder.com
Marc Rettig – Professor
Jesse James Garrett – adaptive path; Elements of User Experience

Definition: Throwing away the assumption that you know your users and starting by using techniques of observation, interviewing, and co-designing to create better interfaces.

Marc: Design a vase. Design a way for people to enjoy flowers. A shift from the desginer focusing on the object, and more towards the effects. Understand, then make something that fits.

Jesse: Not existence but rather that it has taken so long for the idea to catch on, new yet obvious thing. Design culture has been so focused on the properties of the object rather than how it actually works. Companies are so turned in on themselves is an amazing revelation.

Marc: Design for the Real World. Industrial designers from 50s and 60s.

Molly: Why has it taken so long to take hold?

Jesse: Increasing complexity of consumer products. As a result, more products that have been brought to Marcet and have failed for reasons the producer couldn’t comprehend.

Marc: It’s stayed in the design camps, just in the last 4-5 years has it been talked about in business circles.

Molly: Will it have an effect? Continue reading Notes: The Future: User-Centered Design Goes Mainstream

Design Change

The design here is like the weather in Texas, if you don’t like it, wait five minutes for it to change again. Comments are appreciated! RSS users yawn and don’t even notice…

Update: I’ve gotten some comments that it looks a lot like Metafilter, and I see the similarities, mainly with the background color and story titles. The actual inspiration for this was that I ran across a page I did last year for a scholarship contest. I liked the way the black and blue looked, and as soon as I got some time I whipped this up. On second examination, the similarities are really superficial, and I think I’m going to stick with this design for a while. I’m going to try and tweak it though so the date/title to text offset isn’t so similar to Mefi. Any thoughts? The reactions so far have been positive.

If Architects…

This had me rolling:

Dear Mr. Architect:

Please design and build me a house. I am not quite sure of what I need, so you should use your discretion. My house should have somewhere between two and forty-five bedrooms. Just make sure the plans are such that the bedrooms can be easily added or deleted. When you bring the blueprints to me, I will make the final decision of
what I want. Also, bring me the cost breakdown for each configuration so that I can arbitrarily pick one.

Keep in mind that the house I ultimately choose must cost less than the one I am currently living in. Make sure, however, that you correct all the deficiencies that exist in my current house (the floor of my kitchen vibrates when I walk across it, and the walls don’t have nearly enough insulation in them).

As you design, also keep in mind that I want to keep yearly maintenance costs as low as possible. This should mean the incorporation of extra-cost features like aluminum, vinyl, or composite siding. (If you choose not to specify aluminum, be prepared to explain your decision in detail.)

Please take care that modern design practices and the latest materials are used in construction of the house, as I want it to be a showplace for the most up-to-date ideas and methods. Be alerted, however, that kitchen should be designed to accommodate, among other things, my 1952 Gibson refrigerator.

To insure that you are building the correct house for our entire family, make certain that you contact each of our children, and also our in-laws. My mother-in-law will have very strong feelings about how the house should be designed, since she visits us at least once a year. Make sure that you weigh all of these options carefully and come to the right decision. I, however, retain the right to overrule any choices that you make.

Please don’t bother me with small details right now. Your job is to develop the overall plans for the house: get the big picture. At this time, for example, it is not appropriate to be choosing the color of
the carpet. However, keep in mind that my wife likes blue.

Also, do not worry at this time about acquiring the resources to build the house itself. Your first priority is to develop detailed plans and specifications. Once I approve these plans, however, I would expect the house to be under roof within 48 hours.

While you are designing this house specifically for me, keep in mind that sooner or later I will have to sell it to someone else. It therefore should have appeal to a wide variety of potential buyers.
Please make sure before you finalize the plans that there is a consensus of the population in my area that they like the features this house has. I advise you to run up and look at my neighbor’s house he constructed last year. We like it a great deal. It has many features that we would also like in our new home, particularly the
75-foot swimming pool. With careful engineering, I believe that you can design this into our new house without impacting the final cost.

Please prepare a complete set of blueprints. It is not necessary at this time to do the real design, since they will be used only for
construction bids. Be advised, however, that you will be held accountable for any increase of construction costs as a result of
later design changes.

You must be thrilled to be working on as an interesting project as this! To be able to use the latest techniques and materials and to be given such freedom in your designs is something that can’t happen very often. Contact me as soon as possible with your complete ideas and plans.

PS: My wife has just told me that she disagrees with many of the instructions I’ve given you in this letter. As architect, it is your responsibility to resolve these differences. I have tried in the past and have been unable to accomplish this. If you can’t handle this responsibility, I will have to find another architect.

PPS: Perhaps what I need is not a house at all, but a travel trailer. Please advise me as soon as possible if this is the case.

Menu Updates

As you have probably noticed by now, the menu looks quite different than it did before. The markup is still exactly the same, it’s just the lists have been styled with CSS to make them appear more like a navigation menu and less like, well, lists. I have also coded a new feature that when the less frequently updated sections of the site get updated or have a new item added, that menu item will be emphasized for twenty-four hours. Let me know any thoughts on the new updates.

Redesign

Well all the cool kids are doing it ;). No actually, I’m starting to get back to the site in flux idea that I was attached to in the beginning. Before I had a home-brew theme system and I was committed to adding a new theme every month and making it the default for that month. As I added new features though it became cumbersome updating the different themes, and it was slowing me down when I was trying to add functionality. So I came to the decision that it was better to have one well-tweaked theme that worked perfectly with everything, rather than twenty themes that worked alright. I’m itching for a new design, plus I have some things to fix up around here, so it’s going to be a meta-day. Also to be honest I like having total control on how the site is displayed, which is why NS4 users see just text and other things, which is different then some sites that let you write your own CSS file even. There’s a lot to do, so I should probably make a list:

  • New design
    • Resizable fonts (no pixels for IE/Win)
    • External links differentiated
    • Something new with fancy cap stuff
  • RSS feedsDone
  • Finish archive system
  • Set up CVS (maybe gforge too?)
  • Install stereoI’m happy to say I think everyone in the neighborhood has heard it now
  • New intra-site link systyem
  • Improve error handling throughout
  • Install new RAID card and hard drives
  • Set up file-server
  • Try new battery in laptopThe new battery is nice, but the problem still appears to be the charging circuitry, just like I told them.

I think that’s enough for today.

Website Launch: Crystal Awards

Finally! As of about five minutes ago the AMA Crystal Awards site is now live and open to the public. Check it out and let me know what you think. This is actually the second iteration of the design, the first was entirely done in CSS and the barest XHTML and it worked quite well cross-browser but it was decided that we needed more uniformity across the print and web pieces and so this is what I came up with.

If you’re interested in seeing more of Miss Richfield 1981, he has a very informative website where you can find out all about him. I’ve heard rumors that he might be flown down for this year’s awards as well. We’ll see . . .