Monday, August 15th, 2016 http://adamkhan.net/rambles/homepage-design-2016
ou always think it’s the bee’s knees when you first design it. And maybe you’re right: it is and you are indeed good even if unrecognized beyond your own cabin office. Then times change, new technologies and techniques become part of the medium, and even if its purpose hasn’t changed, and there’s not necessarily the traffic to warrant the time and attention, nonetheless, for your own satisfaction, and as a training ground, and maybe even as a source for new ideas, you redesign your personal web site. Hence adamkhan.net, Version 4.
Circa 2001, Version 1 was called “Spaddiedoodoo” in memory of the song I would sing as a small child when calling to have my bottom wiped. Indeed. It had a pink-hued fullscreen background of a slice of helicopter-filled sky in Frank Lloyd Wright’s illustration of his Broadacre City. Shamefully I lack a functioning version of this site, nor even have a screenshot to show you. It had ambitious sub-blogs, such as “WW4” for cheerleading the response to the 9/11 attacks and “Net Nellie” about all things James Bond.
Version 2 was the least memorable, a retreat. It lost the sub-blogs, was much plainer, despite sporting a bright orange background. It was set in Microsoft’s Verdana, which seemed a safe yet still mildly exciting typeface at the time. No screenshot of this either, but you aren’t missing much.
Version 3 was more of an opus. I graduated here to plain black on white, influenced by nytimes.com and Khoi Vinh’s Subtraction.com (namedrop alert: I was working with him at the time, and when I sent him a link to it he replied: “Wow!” Which in retrospect may not have been so much enthusiasm as polite ambiguity). Like nytimes.com I wanted it to have a shape, which very few sites do, and I believe it did, and I was loathe to lose that, so after trying otherwise I’ve more or less kept it for Version 4, but moved the content around.
Colors and a watery landscape
As well as for the shape I kept it for the colors. Beginning in v3, each photo got its own color, which — in arguably a bit of girliness and I love it — affected the color highlights of the entire page, from chrome to links. Over the months and years, I confess, I’ve gazed at it in satisfaction, taking plenty of screenshots as new photos and their chosen colors changed the entire homepage’s hue and atmosphere.
Part of all that was a top banner illustration of a gentle watery Asian landscape attributed to Mu Xi, with its concentrated yang of land to the left and expansive sea of yin on the right. I’ve been told though that this image is kind of weak, that in whitewashing its aged brown canvas I’d desecrated it so much as to make its inclusion worse than pointless. I took this criticism seriously and for Version 4 tried alternative images or no image entirely. But in the end I kept it. That said, it doesn’t appear on mobile screens; no space there for non-sequitor niceties.
Below the Mu Xi the concentration crossed from left to right, where the dominant item on the homepage was the latest photo and accompanying gallery. (As screens widened in the intervening years since launching v3 it was by enlarging this image that I widened the site.)
There were complaints that the v3 homepage was cluttered, too wordy, too full, unfocused. I was blind to all this, but one clue that not all was entirely well is that it needed an explanatory text somewhere on the page. Also, despite the desire for a shape, an infrequently updated personal blog should perhaps not be emulating The New York Times; the content simply doesn’t warrant the visual complexity of the page. And yet I liked the complexity; while I enjoy the elegance of simplicity as much as the next consumer, I just didn’t think my site was any more complex than it needed to be in order to display all the things I wanted to display. Perhaps however some of this was too trivial: it showed the latest book I’ve read (which I’ve kept for v4) and it showed the Latmag articles, things written by others that should really be on a completely separate site (and which I’ve eliminated for v4). One significant flaw in v3 was that the very latest content added — usually an item in the Trail channel — was below the fold. So yes, my propensity to gaze notwithstanding, v3’s layout had its problems.
Simplify to X and Y
For Version 4, the photo gallery has been shunted off to its own area above the homepage, the focus spot now given over to an illustrated preview of the latest article. This frees up the top text area for the latest shorter-form blog entries, so that the freshest content on the site is now above the fold (that is to say, it’s visible without scrolling).
Unsurprisingly, responsive design has been a major influence on v4. To work well on various screen sizes it’s not only the technical ability to resize and adjust that matters; a web site should feel like itself, even if it doesn’t look it, no matter the screen size. That said, this tall order almost inevitably ends up adversely affecting how the site looks when fullsize — there’s an undesirable “mobile first” look I wanted to avoid (but in at least one instance failed to do so, given the long tail that is the Briefs).
This is not to say that I don’t appreciate the newer mobile design conventions that have migrated over to the desktop. I think it’s great that menus have been tucked a click away behind a hamburger icon even when there’s plenty of space to display them; this simplicity, necessary on mobile, is a visual boon on the desktop, conferring elegance.
I already mentioned The New York Times; that really is the only site on the whole web now where I’m so used to the homepage that I don’t want to see a mobile version; the shape itself imparts so much information, each article’s position saying a lot about what type of article it is, that the loss of this implicit information on the NYT mobile version, which is a simple vertical list, sends me fleeing.
Stepping down a notch in status from the NYT, very quickly we get to a situation where a simple list is just fine, because the type of article is more or less the same. At theatlantic.com a simple yet pretty list is just fine for mobile. Other big media sites such as thedailybeast.com are slick, professional and attractive, but since I don’t really have an ingrained mental model of their homepage layouts (perhaps because they’ve changed too frequently?), again on mobile a list is just fine.
All this led me to conclude, slightly reluctantly, that to serve any occasional visitor best, my homepage needed simplification. I reduced the number of lists from half-a-dozen or so to three, which hopefully feels like the near side of many. These are: 1) Photos, 2) Rambles, ie, full-fledged articles (formerly “Parries”), and 3) Briefs, a chronological amalgamation of all content channels — okay, also a separate fourth list in the sidebar for books I’ve recently read. And even this: since Photos are images and sectioned a click away above the top of the screen, they arguably don’t even warrant including here. So we’re down to just two main lists, Rambles and Briefs. And since these are a semantic pair in that they suggest longer and shorter entries, maybe we’re down to just one with two parts?
To maximize the visual difference between Rambles and Briefs they’re presented perpendicularly. The first three Rambles appear as the illustrated focus of the homepage, alongside which are the first few Briefs. Then, as of the fourth Rambles entry, they appear as a horizontally scrollable bleeding deck of illustrated golden-ratioed color cards (though I’m concerned that these are so graphic and self-contained that they resemble ads). Then the Briefs resume below this deck of Rambles, centered and alone, in a narrow vertical column of only 6 or so words per line — this because in Version 3 I so enjoyed reading smaller items in that layout (though the long tail that they now form does look like a “mobile first” victim).
The newly-amalgamated Briefs comprises entries from the Trail, Words, Sentences and Book Readings channels (Rambles are not repeated here), each content type displayed in its own unique format. One flourish I’m enjoying here is using double borders for the Sentences; I don’t think I’ve ever used these ever on any site, but I like their evocation of silent-film title-cards. Fun!
Component-based, not mobile-first
On mobile’s single column, the first three Rambles lose their special treatment and join the front of the horizontal deck. And unlike on the desktop, where photos are shunted away, on mobile they splash big and brash and first (Why? Because that’s what I felt like seeing on my phone.) And to make sure that the newest Briefs appear immediately after this splash photo, a single Briefs entry appears before the Rambles deck, after which the Briefs resume.
[Update 2017 June 19: Today I changed the desktop layout to be more like the mobile, with photos not shunted away but appearing first, because photos are increasingly likely to be the latest content on the site, as I’m taking more of them and I’ve been digitizing old negatives going back some 30 years. One advantage of the change — which should really have caused me to make it from the get-go — is a more consistent experience across screen-sizes; isn’t that after all one of the main arguments here?]
With this site I crystallized my approach to responsive design, at least in theory: that it be component-based. Components may be arranged radically differently for radically different screen sizes, but they remain themselves with as little variation as possible. This consistency not only makes a site easier to produce, but also easier to use. Dropping down to the technical for a moment, the CSS media queries for different screen sizes should no longer be sitewide but added as variations per component; this is quite a radical shift. And I didn’t fully achieve it, primarily because repeatedly writing the media query for each element got tedious; I needed a shortcut for this. And, like it or not, in actuality I’m still thinking in terms of breakpoints, defending elements as changing screen size forces change upon them. It seems that modular responsiveness requires a more detailed concept of an entire page than I currently hold. But I believe it’s a worthy and sensible goal.
When working on this site I cannot work on clients’, so it certainly does have a cost. To minimize the work involved (and because all things being equal it’s better to maintain consistency), there are — as before — only two templates: a multi-entry for the homepage that also handles the year-, search- and topic-based pages; and a single-entry used only for full articles.
Life and the single-entry template
The single-entry template begins with a fullscreen bleeding image, as is standard today, so with a good picture on a big screen it can look — though I say so myself — pretty darn spectacular. And although some prefer preserving images sacrosanct, me I love the visual synchronicities of typography superimposed on an image. What with Archer’s flourishes, its end-of-letter beads, titles can look lovely intertwined with complicated shapes such as leaves on branches. See “The Mouse and the Cantilever”.
But this doesn’t always work — the title can be partially or fully obscured — so there are options to control position and color. The title can be positioned either flush left with the rest of the content (the default) or fully on the left, such as at “For Love of Economy”. I discovered that further positioning options, enabling say X and Y percent in from a corner, encouraged endless fiddling and moreover broke consistency.
Also, the color of the title and of the blurb and its background can be independently set either to that of the illustration (the default for the title and blurb background), to black, or to white (the default for the blurb, given its default color background).
There is one more layout option: if none of these variations does the trick then with the flip of a switch field the layout can change to one I call Boxes. Like many of the best things this layout was an accident, but as soon as I saw what my erroneous CSS rendered I was excited. The title is in a top-left box, the blurb in the top-right, and the photo is below not behind them. I found this layout works best with symmetric or patterned images, such as at “From Nokia N95 to iPhone 4S” and “At Modi’in Mall”. The three boxes are in golden ratio, the top two (title and lead-in) boxes horizontally, the bottom (image) box vertically with the top two.
Finally, I added an option to crop a percentage off the top and bottom of the bleeding hero image in order to hide detracting details and maneouver to make the title look better against the image.
This handful of variation options has proven sufficient to make dozens of articles look unique, exciting, and clear.
Many sites with fullscreen images on entry pages aren’t fullscreen on their index pages. There are pragmatic reasons for this but I think it’s a bit of a mismatch; some elements of the homepage at least must be fullscreen in order to feel sufficiently related to the single-entry pages. Here this is handled by the bleeding horizontal deck of Rambles.
Good not great?
One clue that the redesign is working is that I’m encouraged to go through the site’s content and make fixes, categorizing items, tightening titles, reworking article blurbs; I want to see how things look now. That said, I recently read a review of Pixate that caused me a qualm or two. The author argues that the difference between good and great design is that great doesn’t refine one direction until it’s at its best, but explores various directions until settling on one (and that Pixate and prototyping tools in general can facilitate the latter). Well. I confess that our site falls into the former category; I didn’t create a variety of designs before developing this one. Actually I don’t even think I agree with the author.
One value I’ve pursued is to keep things minimal, particularly on the single-entry page. In Version 3 I was guilty of throwing alongside the article everything available on the site. Now in Version 4 even items belonging to the entry itself are hidden, sliding in upon clicking a More Info button. I thought of following the trend of putting the latest article at the bottom of every other article, but you know, and maybe I’m just being old-fashioned here, I just don’t like that (or, more likely, don’t yet know how to do it?). Instead there’s a mini version of the homepage at the bottom of an entry page: the complete Rambles deck followed by three Briefs and a button for more.
For round buttons that slide something in from offscreen, I added a connector that bleeds off the page. Since this is something I’ve not seen before, by default this rectangle+circle became the icon/logo of the site. I guess this is the sort of thing the writer means: refining a single idea is inferior to trying different ones. Well, sorry; it seems good enough to me; again, good enough is arguably not good enough; well, sorry again; I think it is; I like it. It reminds me of a cartoon submarine. Or a cartoon key. Or the Discovery One from 2001: A Space Odyssey.
About the process
By the way, I started the redesign by choosing the fonts first; I like that approach. Typography permeates a web site and sets the emotional tone. Hoefler & Co.‘s Archer seemed appropriate in that it’s bright and friendly yet credible; also practical in that it’s legible as a body font; and rich as a title font. Ideal Sans also by Hoefler most often appears on the site in uppercase italics with a shadow because that way it reminds me of a comic book font. After accidentally placing it as a dropcap, I kept it there — when displayed big enough I could see its letters have flares! I also think the two fonts pair nicely and have never seen them together.
Rather than mobile first I do desktop first because the larger canvas enables more varied ideas and because it’ll always be easier to remove than create. Starting mobile first can tempt one to not take advantage of the riches of a big screen. Yes, hover effects will not work on touchscreen devices, but you can then add methods to achieve the same functionality, whereas with mobile first you may not have even considered that functionality. All that said, we now have mobile in the back of our minds when doing desktop, so it functions as a kind of gentle constraint; we know it’ll have to work on mobile at some point. And it invariably does, and with much more character than a site designed mobile first.
But it’s not quite finished. I haven’t re-implemented the search and the navigation menu, resorting to the sort of “under construction” area that we haven’t seen for years.
O reason not the need!
Although I’m pleased with the results, now that I sit down to write about it comprehensively, I’m forced to ask: Why do I even have this site? Yes, it’s an uncanny culmination of decades-old personal excitements, but all these could be handled using focused established platforms: photos on Flickr, articles on Medium, quick links on Twitter, any book reviews on Amazon, etc. Moreover, diffusing things that way would probably help them reach anybody interested in them.
Well, I did it out of sheer love of the medium; like a commercial sailor having his own small yacht for sailing on the weekends, I couldn’t imagine not having my own web site. Also, I want to retain control over the presentation and the data itself. And I did it out of stubborn pride: having grown up with the internet of homepages, not to mention being a professional in the field, I can’t abide the notion of giving up my online identity to an aggregator of millions of such.
That said, with this redesign I did not rise to the strategic level and ask the vital questions: What do you want this site to achieve? How will you know whether it’s succeeding? Rather than strategic, it was reactive. Reactive to the rise of mobile and the new responsive way of building web sites. To webfonts (yes, it’s 2016, this is all late, very late). To the bold new design pattern of illustrating articles with fullscreen bleeding hero images. And to occasional yet repeated praise for my photographs from both a fine-arts painter friend and a web designer. So yes, while it’s merely a playing at catch-up, it’s a doing so with care and enthusiasm.
Update 2017 Mar 9: Just happened across a diary entry from March 2003, almost 14 years ago to the day (two 7-year eras ago), wherein I write of my satisfaction with Spaddiedoodoo:
What is really nice is that there are now enough aphos [aphorisms] and photies [photos] that occasionally the apho seems an apt caption for the photie, or the photie an apt illustration of the apho. Like this time, “Without solitude there is no glamour.” and the pic in Switzerland of the lit forest and the downplayed road. Now “An ordered day is a chosen day.” with one of my Japanese temple roofs!
This functionality — of possible serendipity between the random aphorism and picture — is exactly what the site is doing today! I’d forgotten that the original Spaddiedoodoo also did it. We are, it seems, ourselves.
Update 2017 Dec 31: It’s gratifying to see the abovementioned nytimes.com employ some similar techniques for their full-bleed layouts.
- Adobe’s Balance Text plugin, which seems so necessary and obvious to me yet everywhere I go I see sad evidence of its non-use, creating widows all over; without it, nice controlled typography simply isn’t possible
- The Golden Ratio for title widths! (They use 62%, close enough to 61.8%)
- Lazy-loading for the full-bleed image (okay, this one isn’t so exciting)
- Responsive expansion of the full-bleed image to cover the entire page regardless of screen size (again less exciting, I guess that’s what full-bleed means)
- A tiny transparent-background site logo up top
Their design is ultimately nicer as they keep the title and blurb together — a much lovelier look than my separate treatment up top and below for title and blurb. It shows me that the background color for my blurbs is visually clunky, especially when combined with balanced text, as this can leave a lot of the colored blurb box pointlessly empty. Also, my fonts are probably too large; not classy. In my defence, mine is a smaller one-man publication which somehow makes the giant fonts seem more appropriate? No.
One flaw though in their design is that there is no hand-holding from the dramatic splash screen down to the workaday regular body text. Arguably their layout doesn’t need it as much as mine does because their title and blurb fonts are less huge, making the transition down to body text less jarring, but I do think it needs something. A dropcap seems the obvious thing, doesn’t it? But everybody seems to eschew them — too pre-modern? Yet the start of the article just seems naked to me without something. The subtle technique they do use is to make the distance from the bottom of the blurb to the bottom of the image the same (70px) as that from the top of the white area to the first line of the body (yes, they are still using pxs).