June 23rd, 2008

One Column to Rule Them All

Before: Greywater 2

I’ve redesigned my site again, bringing Zero to One-Eighty to version 3, and this time it really is a One Column Layout. Not that I didn’t like my recent new look, but it didn’t seem to go far enough. There were a couple of things with version 2 I couldn’t resolve. It felt too busy near the top of the page, with the site identity, two-item navigation bar and header of the most recent post all competing for attention.

Second was the right column. As soon as I added a site description to it recently it started to seem like a problem. I don’t think I really wanted that column to begin with, and as long as it only had a single purpose in the content space—providing section links—I was mostly okay with it. But the horizontal meets vertical navigation on a site that was already fairly minimal never felt quite right. Then I added more content to it, and the moment it started to feel like a good old extensible sidebar I wanted to change it. I started working on this 30 seconds after reading Mark Pilgrim’s post on minimalism and offloading typical weblog functions to the browser.

When I made version 2 back in March I was trying to balance simplicity with future expansion, to some extent. This worked against clarity. I was saving space on the navigation bar for imagined future uses, and this empty space was getting top billing, even over and above the latest post I’d written. It wasn’t negative space so much as pregnant space, waiting for something to happen. This time around I’m putting simplicity on top for the sake of one important rule: the content should have the best possible presentation since that’s why people come to the site. Almost everything else is design junk (at least in my hands) and should get out of the way.

After: Greywater 3

Having said that, I’m trying out a new mark, something I’ve long wanted for the site. It’s both a compass rose and ship’s wheel and brings back a hint of the curves missing since version 1. Also making a return is the centred design. I’m not sure why, but the hard left alignment on version 2, which I was fairly attached to, just didn’t seem to work here. I ditched the search form because my visitor logs tell me almost no-one uses it, which makes sense given that most browsers have a much better one built in. Regarding mobile, this version is only 500px wide (as opposed to the previous 780), so it should look change less visibly when viewed on small-screen devices, and I’ve trimmed down the markup so it might load a bit faster too.

I’m looking for feedback and I want to see whether I’ve accomplished my goal of making the content more prominent without compromising usability. In particular, I’m wondering whether the lack of a formal navigation menu will be a problem for visitors. There’ll no doubt be bugs to work out too. I’d also like to add support for next and previous navigation in the metadata for browsers like Opera and Firefox (with a plugin)—this is a great development, kind of like microformats, in making pages that enable the browser to work more effectively at translating markup into functionality.

// 6 comments ›

June 18th, 2008

Drew McLellan on Choosing a CMS

Drew McLellan at Edge of My Seat writes up eight features to consider when choosing a CMS. This is packed with succinct explanations and good reasoning. At least half of these are simply features of good web design (“design” as in how it works, not how it looks, and “web” as in of data not 2.0).

// Leave a comment ›

June 14th, 2008

Chris Piascik: Scheming Against Myself

Poster by Chris Piascik.

My friend Chris has a show at New Haven’s best coffee shop starting July 1. It’s called, wonderfully, “Scheming Against Myself.” Chris draws a picture and posts it to his weblog every day, if you want to get a feel for his work.

// 2 comments ›

June 14th, 2008

Information Security and You, Yes You

More web security advice from Bruce Schneier from a recent interview in Malaysia’s The Star. I’d say I follow about eight of these, and people think I’m anal. In a gloomy outlook indeed:

1. Turn off the computer when you’re not using it, especially if you have an “always on” Internet connection.
2. Keep your laptop and PDA with you at all times when you go outside—treat it as you would a wallet or purse.
3. Back up data regularly.
4. Set up automatic updates so that you automatically receive security patches.
5. Limit the number of applications installed on your machine.
6. Limit the use of cookies and applets.
7. Keep in mind that Secure Sockets Layer (SSL) encryption does not provide any assurance that the vendor is trustworthy or that its database of customer information is secure.
8. Think before you do business with a website. Limit the financial and personal data you send to it.
9. Never reuse a password for something you care about. It’s fine to have a single password for low-security sites, such as for newspaper archive access.
10. Assume that all PINs (personal identification numbers) can be easily broken and plan accordingly.
11. Never type a password for a service that you care about, such as a bank account, into a non-SSL encrypted page. If your bank makes it possible to do that, complain to them. When they tell you that it is OK, don’t believe them; they’re wrong.
12. Turn off HTML e-mail. Don’t automatically assume that any e-mail is from the “From” address. Also delete spam without reading it.
13. Use either a combination or separate antivirus and antispyware software. Always update them.
14. Use personal firewall software. If you can, hide your IP address. There’s no reason to allow any incoming connections from anybody.
15. Install an e-mail and file encryptor. Encrypting all your e-mail or your entire hard drive is unrealistic, but some mail is too sensitive to send in the clear. Similarly, some files on your hard drive are too sensitive to leave unencrypted.

Number 11 is crucial: it’s shocking how many sites ask you to log in over open http. Never give your password unless it’s over https, unless there’s nothing at stake for you personally by exposing that password, because that’s what you’re doing. Better still, look at your browser’s address bar and make sure that the lock icon is intact. Browser’s like Firefox will refuse to give you the yellow lock all-clear if the site’s SSL certificate is invalid or can’t be verified.

// Leave a comment ›

June 13th, 2008

Opera 9.5

Nice, with the coloured swooshes.

Opera 9.50 was released yesterday. The interface is substantially changed: the Windows and Mac versions features more styling cues from Vista and Leopard respectively. On the Mac this skin is called “Macintosh Native.” The alternative “Opera Standard” has reflective gradients on the tab buttons and red Vista “x”s on the top of each tab. The placement of the tabs above the main address/navigation bar seems like a strange choice—feels distracting to me, and seems to break the hierarchy of Application controls → Window controls → Sub-window controls that most browsers use. It seems you can’t change this positioning either. On the rendering side, Opera now supports last-child which is good news for fluid blockquote styles ;-) It also starts up a lot faster and page drawing feels blazingly quick (it’s a new rendering engine). There’s also support for some HTML5 elements. On the downside, the address bar uses an auto-suggest feature that seems to have too much going on. Maybe it needs some getting used to.

Update: I have to fess up that I never noticed the tabs-above-address bar in the previous version of Opera before. Perhaps I noticed it in 9.5 because in both Mac and Windows versions the background colour on the tab bar is quite dark and contrasts heavily against the selected tab and address bar. Also, Application controls → Window controls → Sub-window controls was pretty inaccurate. I think I meant Application controls → Global viewport controls → Current viewport. The more I think about it, Opera’s way makes sense if you think of a tab as a mini-browser, rather than another viewport. Still, I don’t like it. Go figure.

// 2 comments ›

June 13th, 2008

Stop Using XHTML!

Four years back Anne van Kesteren wrote a little piece on why you should use HTML instead of XHTML unless you are going to serve the latter with the right MIME type (application/xhtml+xml), arguing that even then it’s only really useful if you’re planning on mixing in markup from other XML namespaces, like MathML and SVG. It is XML, after all. Eight months earlier Mark Pilgrim made a similar argument in a hypothetical piece about what might happen if more sites actually did serve XHTML with the correct MIME type. Both are great articles if you like writing that combines heavy debunking and markup languages. It’s a powerful genre.

Anyway, I mention all this to make a similar point to the one in my previous post: if you can use HTML (over XHTML), then it’s probably the best idea. XHTML served as text/html (e.g. what WordPress produces) doesn’t hurt anything, and will not be worth changing for most people. But XHTML served this way is being treated as HTML (not as an XML subset) by the browser, so if nothing else you’re sending more cruft in the head than you need to, and you’re not getting the XML treatment for your pages that you thought you were:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;
        charset=UTF-8" />
    <title>Page title</title>
</head>
etc.…

If you enjoy life with the W3C validator, then go with HTML 4.01 (use the “strict” doctype to trigger the browser layout engine’s Standards mode) and stick to the familiar XHTML 1.0 element restrictions to keep with the standards-based approach (e.g. no font tags!). Henri Sivonen explains the value of this approach on the Mozilla Web Author FAQ with typical brevity:

Serving valid HTML 4.01 as text/html ensures the widest browser and search engine support.

I prefer using HTML5 over 4.01 and I use Sivonen’s conformance checker instead of the W3C validator for these pages—it’s really fast too. And there are some sweet new elements coming when browser support catches up, such as section, header, footer, nav, article, figure, audio, video… the list goes on. A HTML5 document starts out something like this, short and sweet:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
etc.…

Don’t get me wrong: I like using XHTML and I think that it’s done huge things for the visibility of web standards and for accessibility by associating a leaner, more semantic approach to markup with the use of CSS for presentation. But HTML5 is, for a lot of designers and developers, a logical step right now from XHTML 1.0, especially those who like typing out all their pages from scratch :-)

// 2 comments ›

June 12th, 2008

James Edwards: Stop Using Ajax!

James Edwards (a.k.a. Brothercake) on avoiding AJAX for the sake of accessibility unless it’s really the only way for your application to function:

The emergence of Ajax techniques has inspired a whole new wave of applications, but in many (if not most) cases, these applications don’t actually need Ajax to work—it’s simply that we hadn’t thought of them before.

Agreed. Edwards provides an alternative mockup of Flickr’s Edit Photo page using standard form controls and CSS. It’s verbose but totally accessible. The example could be enhanced with unobtrusive JavaScript to simplify the interface, although the section colouring, fieldset organization and large input and select elements make it easy to parse as it is.

A counter-argument is that Ajax makes a lot of webapps convenient because they save time waiting for the browser to reload the page. I’m thinking of Basecamp and Jumpchart, both of which rely heavily on edit-in-place functionality in their present form. But Edwards’ point is a good one: developers and designers should cast a critical eye on Ajax patterns, and only use them when they need them, or when they add without taking away.

// Leave a comment ›

June 1st, 2008

Perfect Café

Myles bought us a housewarming present yesterday:

My neighbour David says they were probably made some time in the late 1950s to mid-1960s, when manufacturers started making modern, everyday dinnerware that emphasised utility. I guess that would make this an example of mid-century modern design. I’m curious to know more if any readers can confirm or elaborate.

// 2 comments ›

June 1st, 2008

Five Things I Learned This Week

(Other than the hybrid Fit…)

• We can sleep eight people in our house on short notice.
• Without irony, major media outlets published photos of “uncontacted” indigenous people who were pointing at the people with the camera.
• You can compare two directories and write the results to a file, minus some cruft, using diff -rq dir1 dir2 | grep -v -e 'DS_Store' | sort > diffs.txt in OS X.
• There Will Be Blood is phenomenal and deserves all the hype (thanks for the loaner, Matt!); P.T. Anderson just keeps getting better and better.
• Scarlett Johansson has released an album of Tom Waits covers.

// Leave a comment ›

May 28th, 2008

Honda Announces Hybrid Fit

At a Tokyo press conference last week Honda announced plans to renew its hybrid lineup, part of which includes a gas-electric Fit. The hybrid option is expected within around five years, and will cost about $2,000 more than the petrol-only model. Awesome. For an extra $2k we would have stretched to get a hybrid model a year ago—the Prius was then about $10k more; pretty serious difference. And of course the Fit is way cooler. (Sorry Lyds.)

// Leave a comment ›