This Is An Updated Website.

I rolled out the last redesign of this website was way back in 2009, when kids still respected their elders and we had to walk 15 miles uphill both ways to get to school.

I finally had a couple days to squeeze in a redesign, so I went for it. Here’s the before and after:

Brad Frost Web V4

Brad Frost Web V5

Baby Steps

As you can see, not too much has majorly changed. That’s intentional. I’ve spent my entire career on Big Fucking Redesigns. Knock down the crusty old website, put up a new shiny website in its place. Nary a thought is given to the site’s legacy or what users are familiar with. It wasn’t until An Event Apart DC that I heard Jared Spool articulate what’s been in my head for a long while. People enjoy a sense of familiarity. If you were to go to someone’s house and rearrange all their furniture while they were sleeping, chances are they’d wake up pissed off and disoriented (for a number or reasons given the example). Because of this, I wanted to make sure the redesign was more a natural evolution of the existing design.

Doubling Down on WordPress

After several conversations with James King and Scott Jenson regarding self-hosting versus publishing on a 3rd party, I’ve solidified my belief that the only reliable way to keep control of my content is to self-host. I’m through being a sharecropper on sites like Google+, which give me so so little in return. I’d rather build more gravity around my own planet.

Another part of me was tempted to go the route many others have recently taken, which is to build a flat file system using tools like Octopress or Jekyll instead of a full-blown CMS. The promise of writing everything in Markdown and not having to worry about databases was certainly tempting, but my gut told me that I’d run into limitations pretty quickly. I have big plans for the site moving forward that require the infrastructure to be as flexible and dynamic as possible.

Design

You may have noticed the gratuitously large type at the top of the screen. People who actually know what they’re doing with type will probably hate this, but I don’t really care. It’s big and obnoxious and fun, so naturally I like it.

Navigation

The site on small screens utilizes the toggle pattern, which slides down the navigation from the top. The navigation is also repeated in the footer, creating a site sandwich where the navigation is the bun and the delicious content is the meat. I had a conversation with Luke Wroblewski about why I didn’t just use the footer anchor pattern, and my reasoning is that I feel an abrupt jump to the footer can be disorienting to people. I prefer to keep them in their place on the page instead.

To implement the toggle, I utilized the CSS-only toggle highlighted by Aaron Gustafson in Build a smart mobile navigation without hacks. It’s a super clever technique that uses the :target pseudo-selector to toggle the navigation. One unfortunate problem with it however is that Opera Mini doesn’t update the URL with the anchor tag, so the navigation doesn’t trigger. That’s a bummer, but the super smart Tim Kadlec was able to find a way around it. I still need to solve it on my end, but it’s good to know that there are ways of making it work.

On larger screens the navigation fixes itself to the footer of the site. I’m normally not a fan of fixed positioned elements, but a relatively narrow band at the bottom of the screen didn’t seem too invasive. And coincidentally, Luke published Responsive Navigation: Optimizing for Touch Across Devices that says that a fixed footer is actually good placement for navigation on all these emerging large screen touch devices. I could say “Oh yeah of course that’s what I was going for the whole time”, but I’d be lying. It’s purely coincidence, but it’s good to know that the placement isn’t totally crazy.

Performance

I’ve been recently talking about performance as design, so keeping the site lightweight certainly influenced my design decisions. This design has two background images. The homepage weighs 29.87KB. The goal was to get away with doing as little as possible. If I need to add more later, I can. I still have a lot of performance-related tasks I still need to do, but it’s off to a decent start.

Development

This was my first site really going to town with Sass. I made ample use of nested media queries, which helped keep me in one place instead of sifting through a style sheet figuring out where I defined what. I also just got Coda 2, which adds nice syntax highlighting, autocomplete for Sass variables and other really nice stuff. I also started using Sparkbox’s Scss Rem Mixin Now With a Better Fallback in order to use rems but still fall back to relative units if rems aren’t supported.

I also used this site as an opportunity to restructure my CSS. I really enjoy Harry Robert’s CSS Guidelines and tried to do a better job documenting my CSS. It proved to be tremendously beneficial.

Oh, and Javascript on the site? There is none. That will probably change, but I think that’s pretty crazy.

Onwards

This is just the beginning. I’ve got a lot of work to do to get things where I want them to be, but I feel I have a simple, solid foundation that I can build upon. And that’s probably the biggest advice I can give. Start small and chip away at things when you get a little time. Don’t feel you need to bite off everything at once.

16 Comments

  1. Chris Ferdinandi

    The amount of restraint it must have taken to do such a minimal redesign.

    1. I love the big font size. Easy reading on any device!

    2. I’m glad you didn’t do a link to the nav in the footer – I agree it’s disorienting. I am curious why you didn’t keep the top-nav on bigger screens and forgo the footer nav altogether, though.

    3. I’m assuming the drop-down nav at the top is powered entirely by CSS3? I’d love to learn more about that process. It works great!

    Cheers,
    Chris

  2. Adam Fletcher

    Brad, that’s the smartest summary on a web redesign I’ve ever read and the best five minutes I’ve spent today. Kudos to you man. Keep chipping away.

  3. Ian P

    Congratulations on having a website that still feels modern but has no JavaScript. I’m not saying that’s always the way to go, but I am saying it feels pretty refreshing.

  4. Achim Schlemmer

    Thanks, Brad, I’m always enjoying your writing style since I attended your live performance on stage here at Smashing Conference. Your positions are clear, the language simple and powerful. A real energy source 🙂
    By the way, while reading this post with an iPad 2/iOS 6, it was a real pleasure to read. Large, but not too large typo, clean, not too sharp constrast, scrolling with the left hand was possible without unwanted touching of link targets. First, I wasn’t really comfortable with the sticking nav bar at the bottom, then I thought, I will get used to it. Now when writing this comment and the virtual keyboard is popping up, this bar snaps around on the page, ending sticky at the top and sharing the small space with my long comment lyrics.
    I’m sure, that you will come up with another overwhelming convenent solution for this little issue 🙂
    Sidenote: iPad in landscape orientation (95% of time for me)

  5. Pete Schuster

    Looks great man, I just did the same thing to my own site. Got my site on a newer code based, trimmed the fat, and refreshed the typography. Everything else is pretty much the same, but now as I continue to make updates moving forward, its easier because its on Sass, and a new more modular codebase.

  6. Teddy Zetterlund

    Looked at your CSS (since you mentioned you wanted to keep it more organised and keep it small), and noticed that you have classes like “.clickable” and “.center”. I’m guessing those are there because you use @extend from Sass? Then I’d suggest having a look at Sass placeholders: http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html#placeholder_selectors_

  7. Joel Eade

    Hi Brad!

    Nice min-height media queries in the header. Thanks for adding another trick to my arsenal.

    Not sure if this is a bug or not but I’ve found that clicking the small screen menu adds a link to page history. When I use the back button on my PC or mobile it toggles the menu open if I’ve closed it. Is that intentional or an unavoidable con of using the toggle pattern?

    Cheers,

    Joel

  8. Susanne

    Uhhmm.. ohh… I did not see it on mobile devices yet.. but.. hmm.. on a big screen… it’s… erm.. a joke, yes? Pleeeeease tell me, it is!!!
    I love you (and your dog) and all your posts but.. erm…ehhh… no.

    Sorry… seems, I will still follow the Flying Spaghetti Monster as my god.. 😛

  9. Mark

    I just launched my redesign today as well and also blogged about it.
    “Why I chose to not use a CMS for my Portfolio Website” http://www.markdixon.ca/design/blog/

  10. Andy

    The site looks great! Really enjoyed your rundown on the process as well. Thanks for sharing your rwd knowledge and thoughts – it’s been a big help to me, especially when it comes to performance and pushing mobile first.

  11. Joe Snell

    Great redesign! The minimalism is awesome! I LOVE the ‘no javascript.’ The home page categories are a tad ‘in your face,’ but, hey, it works. I’m attempting to do something ‘similar’ on a project, but also building it as a reusable theme to share with others. I’m having a tough time limiting the js, let alone eliminating it. I’ve now got inspiration to try a bit harder! Keep it up man.

    As a resource to us developers, you provide invaluable information. Thank you for that!

  12. pieroxy

    Brad,

    Good read and good design and good ideas in general. Just one remark: on a 1024×768 the huge title takes up the entire space and nothing of your blog is visible apart from the “Words That Would Otherwise Be Coming Out of My Mouth” sentence. It looks weird.

    The weird thing is that if I take my browser off of full screen and reduce it it becomes smaller and the sites looks much better.

    IMO your rule “min-height: 28em” for setting the h1 at 4em should be revised at something greater than 28em or maybe building an intermediary step at 3em for the h1s say from 28 to 32em.

    Keep up the good work, it looks great!

  13. pieroxy

    Another thing: On the webpage “https://bradfrost.com/blog/”, the top three links on the right (otherwise labelled “selected articles”) are not clickable on either Firefox or Chrome. They just link to “#”.

    On your about page (https://bradfrost.com/about/) they work fine.

    Consider me your new acceptance tester 😉

  14. Dennis Gaebel

    I’m curious if you’re using rems or ems within your @media conditions? I know that according to Cloud Four, using em values in @media conditions has many benefits over using pixels when zooming and such.

    I’ve filed a bug with Webkit as the rem does not work inside @media conditions. This totally bums me out because I also think rem units are an essential component with the future of RWD.

  15. Peter Müller

    You mention that Tim Kadlec found a solution to the Opera Mini issue with Aaron Gustafson’s CSS-only menu. Could you maybe link to it?

    Thanx.

Comments are closed for this post. If you've got something to add, feel free to reach out on Twitter.