The last version of this site lasted just under a year. That may seem like a short amount of time until you consider how quickly things change on the web.

@font-face usage has been fortified by services like Typekit & Fontdeck, CSS3 & HTML5 are popping up everywhere, and with the release of the iPad, multi-touch technology is drastically changing web design.  My goal has been to cut out the extra divs, widgets and doodads so browsing is more fun for you and posting is less work for me.

There’s nothing on that plate but gristle & fat!

I wanted to start by clearing out all the non-essentials.  Any elements that weighed down the markup, design or user experience from the previous version had to go.  I scaled back the footer by removing the black content box, list of posts and tweets.  The Comments section was updated by trading the author comments in the margin and indented threads for a good ol’ fashioned list with @replies.  I 86-ed the 1px horizontal lines filling the page margins.  Though they did frame the page nicely, they cramped art-directed posts’ style,  and the same effect can be achieved with well-placed text and line-height.

Inspired by Multi-Touch

This site wasn’t intended solely for the iPad, though it is inspired by my experience browsing the web sans mouse.  Many of the assertions I made before getting an iPad have been strengthened each time I slide, swipe and tap my way across the inter-web.  Each change I’ve made (larger font size, less content/page, fewer columns) has been shaped by my belief that the future of web design lies in making browsing all play and no work.  Hunching over a keyboard at a desk and squinting at an overstuffed page with 12px font is work you don’t get paid to do, so why do it?

A New Mark

I knew I wanted to move away from Helvetica as the typeface for the body copy as well as for my logo.  I thought the mark needed a hand-drawn look to offset all the obsessive pixel pushing I was bound to do while designing. Fortunately, Reagan Ray was willing to bring custom lettering talent to the process.  After trading a few ideas, Reagan took to sketching and then ran a few lettering options through Illustrator.  I immediately gravitated towards this script version, dropped it in a black circle and let it set the tone for the rest of the site design.  More than anything, my favorite thing about the new mark is that Reagan did it.  I dig his style... always have and always will.

new logo

The Design Process

Once I had the new mark & simplified content list I set out to experiment with design, mainly consisting of 30 minute design sessions where I’d try different combinations of fonts, font sizes, page widths and line heights which were checked with fresh eyes at regular intervals during the day, using both a point-and-click interface and the iPad.  After a couple of weeks, I settled on a 1000px wide site with a 23px baseline grid for the text.

Updated Typography Served Up Via Typekit

For the body copy, I went back and forth between a 14, 16 and 18px font size.  14 seemed small when zoomed out on a touch device, but 18 seemed excessive on my laptop, especially when you consider how large heading fonts would need to be to maintain visual hierarchy.  So, 16px Georgia it was until I found FF Meta Serif via Typekit.  I love this typeface and think it interacts well with the new mark.  I also enjoy using Typekit & believe that they’re doing important work for both the web and type communities.

The Code-out

The markup & WordPressing process was aided by Nathan Staines’ HTML5 adaptation of Elliot Jay Stocks’ Starkers theme.  In addition, CSS3 came in handy in quite a few cases.  Whenever possible, I gladly trade larger javascript files or semi-transparent pngs for a single line of progressively enriched CSS code.  The search page uses -column-count and column-gap to set the tags into columns, and I use rgba color to set the 1px lines on the header and footer.  I also threw in 0.2 second ease-out transitions for the link hovers. With the help and council of Paravel’s Development Sensei, Dave Rupert, I was able to minimize file size and load times by running images through ImageOptim, making icon sprites and installing WP Super Cache.

bon appetit

Content Navigation

I had 3 times the content to work with this round and saw a real need for a good search page and tags system, which were added to the main navigation.  While I enjoyed displaying those billboard style banners on the Articles page, it became progressively harder to find older posts.  Now the layout mimics the notes page, but with post-style referencing thumbnails.  I also added a more prominent Previous & Next navigation for easy browsing. I sure hope you enjoy the updated site.  Let me know what you think.

Ads by Fusion

43 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Greg

    Love the redesign! Still simple, and still recognizable as TW! Good stuff.

  • Brian Rupert

    nice and clean. can’t wait to see some more posts come through in this new design.

  • Tyler Galpin

    Looking awesome, Trent. Really dig the new logo and the way you’ve taken into account various user experiences (iPad, etc.).

  • Aaron

    Looks great and I love the new mark.

  • Tim Brown

    Really nice work, Trent. Feels good to read and browse. I agree that FF Meta Serif seems to work very well with your new mark. Why do you think that is? Perhaps the balance of black and white spaces, or the contrast in the strokes?

  • Jason Melgoza

    Looking nice! Great job.

  • Trent

    Thanks fellas... @Tim Brown: I think that FF Meta Serif, being so refined, balances out the casual nature of the lettering in the mark really well. The typeface set a great tone for the design from the get-go. Thanks for helping to make it available via Typekit!

  • Nathan Staines

    Wow Trent, this layout looks great on the iPad, an absolute joy to browse.

  • Terry Acker

    Trent,

    All very excellent executions in a variety of ever-changing web design disciplines. This work reflects what has become increasingly clear and important to me about laying out a website. Spot on! Bravo! Woot!

    Thanks for explaining your process. Great way to articulate what I feel are becoming new standards and best practices. Or at least until this afternoon, at the rate things go online. :)

  • Joe

    Nice redesign. I absolutely LOVE the use of the letter “T” in the meat.

  • Trent

    @Terry Acker:

    Or at least until this afternoon, at the rate things go online.

    Ain’t that the truth!

    @Joe: Thank you sir... It’s a T-Bone!

  • Design Informer

    Excellent Job Trent. The redesign/realign looks amazing.

    BTW, one small thing, I was browsing through some of the older articles on your archives and the images aren’t showing up on the left column.

    http://trentwalton.com/2009/03/16/lebowski/

    It seems like it’s still referencing the images from your local host.
    http://localhost:8888/wp-content/uploads/2009/03/nihilists.jpg

    Anyway, great job and looking forward to some more awesomeness from you via this site and Dribbble.

  • davatron5000

    I think the <steak> tag should be included in HTML5. Why use a SPAN when you can use a STEAK?

  • Trent

    @Design Informer: Thanks for looking out. Whoops :)

  • Tuomas Tolppi

    Nice redesign indeed. Did you do any testing for example in loading times, HTTP requests etc. between the old and the new version?

  • Chris Armstrong

    Love it, didn’t think you could improve much on what you had before but this realignment makes the old one look... old.

    Out of interest, did you spend any time re-jigging your old posts? If not they stand up surprisingly well still.

  • davatron5000

    @Tuomas Tolppi: I’ve got the stats you crave. We used Trent’s Multi-Touch Post as our baseline for testing. Best sample of a custom post we could find.

    BEFORE
    Size: 595.6K
    Time: 2.137s
    HTTP Requests: 34
    PageSpeed Score: 74
    YSlow Grade: C (77)

    AFTER
    Size: 177.4K
    Time: 1.57s (rendering in 1.08s)
    HTTP Requests: 27
    PageSpeed Score: 83
    YSlow Grade: A (98)

    You can diagnose yourself but it seems Gravatar is the major hangup on the Page Speed score.

    An Un-styled/Imageless post like my favorite has 13 HTTP Requests and weighs in at ~89.15K (76.89K is the @font-face font). 4 requests are analytics, 4 requests are TypeKit, 4 requests are the site, and 1 request is Modernizr.js for HTML5 retro-fitting.

  • Dan Wiersema

    Great stuff, love your lightweight site. Congrats!

  • Trent

    @Chris Armstrong: I did spend some time updating older articles. The process mainly consisted of stripping out unnecessary CSS, resizing a few banner images and creating those Article page thumbnails.

  • Design Informer

    @davatron5000: You should really write a post on how to optimize a site for the fastest load times. I’ve head that you are quite the expert at doing so.

  • Elliot Jay Stocks

    Looks really nice, man. great job! I’m very much into the idea of stripping things back and seeing how well you’ve accomplished this has inspired me to take away even more from my site than I had originally planned. Thanks for the inspiration!

    Thinking along the ‘touch’ theme you brought up, I’d be really interested to see how this design could be enhanced even further still using the responsive web design approach to building.

  • Trent

    @Elliot Jay Stocks: Glad to hear you like the new site and look forward to seeing what you come up with for yours. I was halfway into this update when I read Ethan’s post, and after seeing that brilliant Responsive example, I had a few days where I debated on whether or not I should try to go fluid/responsive. Ultimately, all the art-directed bits I had in place drove me to hold off, but I can’t help but think that If I change anything in the coming months, that’d be it.

    @Design Informer: I agree. You can expect a number of posts from Dave on that shortly. His page speed analysis & optimization talent has kept The Many Faces Of online during some pretty heavy traffic days.

  • J-P Teti

    Love it. Looks great.

  • Steve

    Very nice re-align. I like it a lot.

  • Justin Kropp

    — “my belief that the future of web design lies in making browsing all play and no work“
    I couldn’t agree more with this sentiment. The new TW has a very nice visual and functional flow to it.

  • Phil Coffman

    Great to see the considerations you made for the iPad that we were talking about the other day in action. The new layout looks super clean and that steak has some nice ribboning going on!

  • Stephen Coles

    Great use of FF Meta Serif. We’re pleased as punch here in the FontShop office. Why the faux italics, though?

  • Trent

    @Stephen Coles: Very happy to know you like it. To answer your question, I was really focused on page speed during the buildout and initially only activated the single book version in my kit. After comparing the faux & real versions, adding a few measly KBs to the load is definitely worth it.

    Update: I now remember another reason I had italics disabled. Unfortunately, multiple styles/weights can cause Mobile Safari to crash, and in this case it seems to be doing just that. The gang at Typekit has filed a bug with Apple to address the issue.

  • Matthew Irish

    @Trent: love the new design, it’s fresh and looks great. I do wonder if it’s necessary to load 80K of fonts on a mobile device at all - that’s a pretty big hit if you’re not on wifi. And if you dropped that, you could still serve the real italic! Anyway, just my two cents.

  • Auré

    I really love this “back to basics” version, very clear and functional. You’ve been very generous with this 16px/23px typo. It gives a huge legibility to your content. All is absolutely well executed... just great.

  • Trent

    @Matthew Irish: Not a bad point. That, coupled with Mobile Safari’s inability to render CSS applied font styles has lead me to switch off iPad & iPhone FF Meta Serif support for now. Real italics for everyone!

    @Auré: Thanks, I’m glad you like it.

  • Johan Bakken

    Beautiful stuff, Trent. Especially love the font size, the white space and the simplicity/philosophy. Simply wonderful to read and navigate.

  • Christopher Meeks

    Sorry I’m late to the party. I didn’t bring any chips, but I’ve got this 6-pack of Nati-Light. That work?

    Great changes. You mad everything simpler (which I didn’t think was possible), but I don’t feel like the site is missing anything from the previous version. That’s tough to pull off!

  • Victor

    Great! Link transitions work even in Firefox (Mozilla Preview). Great design, also. All this white space between elements looks really nice and comfortable for the eye.

  • Trent

    @Johan Bakken & @Victor: Thanks fellas. Glad to hear you like it.
    @Christopher Meeks: Yes sir, that’ll work fine :)

  • Aaron

    I think what most impresses me about this new design is the way you adapted the different look of each post to the new layout, and still have all of them look great. Was that much trouble?

  • Trent

    @Aaron: Thanks for noticing! Not too much trouble. Overall, I found pulling out all those chunks of excess code to be pretty cathartic.

  • silla

    Nice work, + love the steak. Thanks for all the good info you share too.

  • Kenny

    Got here from a friend’s link. FYI, the typeface renders horribly on my screen. I’m on PC/FF3. Here’s a screenshot: http://picasaweb.google.com/lh/photo/87fbwSdDblHDuKDFsEGasg?feat=directlink

  • Trent

    @Kenny: You aren’t kidding... Out of curiosity, do you have XP / clear type turned on? Thanks for taking the time to bring this to my attention.

  • Paris Vega

    Truly Inspiring. Right up there with Jason Santa Maria’s site.

  • samth

    Great to read about the trials and errors!

  • Mike

    I’m working my way back trough your posts after discovering the site a few days ago in regards to responsive design. I’m reading on an iPhone (at work) and responsive design really shines in this department. No more zooming in and out! The only thing I think you should consider adding to the mobile @media is a previous/next button to the end of articles. On mobile even short posts require a lot of scrolling and having to scroll all the way up to the top after reading a post to get to the next post isn’t ideal. It’s the only real hiccup and minor but I thought I’d give my two cents. Great articles though, every one so far has given me food for thought.

Leave a Reply