Oops! I Did it Again… and the Reason Why it Happened

You may have noticed, that things are looking a bit different around here. That might be a surprise to you, especially when things didn’t go so well the last time I tried this.

So I pulled out my big guns, and got Rafal Tomal involved.

I know, you might be calling that an unfair advantage, but this was one of those times where I really needed his help. And now I’ll go into detail why it was a necessary thing.

It’s Time to Move On

It feels like I’ve spent the better part of the past few years churning out redesigns here on my site. While I really love the process, I also really don’t love the process.

You see, I’m a perfectionist and a refiner.

This means that everything needs to line up and be perfect, but also that I want to keep changing things. I don’t know what you think, but this is a recipe for getting burnt out.

And that’s exactly what I’ve become with my site, and probably why I had to 86 myself a few weeks ago. So instead of becoming the designer, I became the client.

Rafal and I sat down at Starbucks for a few hours, and really went through what it was I wanted to achieve. We talked about my identity and branding, to site layout and beyond.

Being in continual redesign mode isn’t a very efficient use of my time, and I wanted to focus that energy on some other great things we are working on over at Copyblogger.

Welcome to my New Digs

Take your shoes off, and stay a while — mi casa es su casa.

Unlike the previous design I had, my new one has a custom homepage. I really wanted to portray the many sides to who I am, and hopefully we pulled that off in a creative way.

Check out my homepage, and tell me what you think.

Originally I had broken the four sections down to Personal, Lifestyle, Business and WordPress. Something about those didn’t jive with me, and I wasn’t sure that I’d be able to focus on those properly.

So I jumped ship and took things in a direction that is more about what I want this site to be about: me, my writing, my code and my themes.

If you follow me on Twitter, you’ll probably experience the same resonating feeling about those topics as I did when they finally came to me.

Let’s Take a Tour

Now that I’ve shown you the homepage, I want to walk through the house and point some of the main points of the redesign. And more importantly, why I made the choices I did.

I’ll start at the top of the design, which is the header and navigation. As you can see, I have a very simple logo being used as focal point, with two sets of links to each side.

This worked out perfectly because, as previously mentioned, I wanted to have four main points of entry which lead deeper into the site.

Because the header is relatively tall, I wanted to use an effect called sticky menus to replace it once you scroll down a bit. Not only does this provide more screen real estate, it also gave way to a few things which I’ll discuss below.

The Single Page Design

More than likely you came to this post directly — whether it be via my email newsletter or by way someone link to it on social media. These are two of my biggest traffic sources, with organic search engine traffic being the other.

I’m in the camp, that when people land on a single post, there’s a pretty good chance that you want them to read the content. For me and my site, that’s most definitely the case.

With that said, I’ve chosen to place a featured image at the very top of the content. This was a decision that I insisted on implementing so that it could serve as the focal point.

I wanted to grab my visitors attention, and send them down through the content.

At the bottom of the content, you’ll see a very prominent email newsletter box. That isn’t there by accident, and after reading the content, my hope is that it appealed enough to the reader to make them want to sign up for more.

After that is the typical comments section, which I’ll hope you use to give me feedback or share what your thoughts are on the new design. Hint, hint.

The Lack of a Sidebar

You might be scratching your head on this one, or are thinking you want to privately email me to tell me I forgot to add one.

I’ve chosen not to display a sidebar, and this might have been one of the toughest decisions that I made with the new design.

Like I mentioned above, I really wanted the focus to be on the content. My personal site doesn’t publish breaking news or have a slew of topics on lifestyle like a magazine would.

There are times where I’m really not a fan of sidebars, and with this new design came one of them. My previous sidebar had a picture of me, link to my about page, newsletter signup box and a list of my recent posts.

In my opinion, not only was it distracting from the content, it also duplicated efforts that were in theory being displayed on the single posts and page already.

The Rest of the House

Other things of note with the new layout, is that I’ve kept a search function for those of you trying to find things in particular. In the sticky menu, you’ll see a search icon that you can click and a search form will drop down.

Also note that next to the search icon is a Follow Me menu item, which you can click to find links to my popular social media accounts.

I decided to make use of @2X retina images primarily on the homepage where you’ll see the section icons, but also being used in the header and footer as well.

I’ve also chose to bring back my Stream page, as I love being able to drop simple bits and links to things I find interesting. I consider it my own personal Twitter feed.

What Else is Going On

Now that I’ve finally settled on a design that I plan to keep for a while, I’m sure you guys are wondering what my plans are. Well for starters, the answers to the questions that are burning inside your mind are 1) maybe and 2) yes.

I made the decision with my previous theme design to make it available on Github, and then we released it officially over on StudioPress. I’m pleased to say that Metro is currently (and by a large amount) the most popular selling theme of ours.

With that said, I haven’t decided if (or when) I’ll make this new design available on GitHub, but you can pretty much count on the fact that in some fashion, it’ll make it’s way over StudioPress as a theme you can purchase.

Other really cool things that we have going on at Copyblogger include the upcoming live event in March for real estate agents called AgentPress, the re-welcoming of Brian Clark’s Entreproducer and more from Demian Farnworth on Google Authority.

Last But Not Least

It wouldn’t be a party unless I put on a sparkly top hat and blew $0.99 horns, right?

I’m very pleased to announce that the entire network of Tsh Oxenreider’s Simple Living Media sites are now running Genesis. Her flagship site, Simple Mom, was the first to get onboard, and we moved the rest over as well.

She’s been extremely fun to work with, and we’re looking forward to doing some great things with her network in the upcoming months.

Last, but certainly not least, I’m very happy to announce that early last week, Rae Hoffman (better known as Sugarrae) also launched her site on Genesis. You can read her post on Genesis vs. Thesis, why she made the switch and her Genesis theme review.

Good stuff, eh?

Well Happy Monday to you, and may the odds be ever in your favor …

Email Newsletter

Like what you read here in this blog post?
Get more like it delivered to your inbox daily.

Comments

  1. says

    Brian,

    The is without question the best re-design you’ve done and I hope it sticks for a long time. I’m going through this exact exercise right now and I can attest to what a monumental challenge it can be. I’m trying to be the designer AND the client but may go the same route and pull in an outside designer to get it done. Sometimes removing yourself from the equation or a part of it is the right move.

    I’m mesmerized by the homepage. It really is insanely good, and now that you’ve upped the bar, I better get back to work! :)

    • says

      I don’t think there’s a coincidence in this being the best redesign to date and Rafal being involved. ;-)

      As for the homepage, it’s really something I’m happy about. And have found myself mindlessly scrolling up and down to watch the background images change.

      There’s a good story behind that effect, actually. I was trying to do something else, and this happened by accident.

  2. says

    I tried SO hard to get my site to work with the sticky menu before launch in October, but could never figure it out. It’s one of those things that I’ve loved since the moment I first saw it on a website. Hopefully with my next site launch I will have it working! Fell free to email me some tips, lol :)

    While I absolutely love this design, I’d almost rather see you *not* make it a theme available through StudioPress. I feel like what you have now is completely original. and it would be a shame to see 100s of copies of this design popping up all over the internet. Also, I have noticed that it’s really specific to you and your brand this time around, and I think that’s one of the hardest things to nail down. Maybe you could just release a simplified version of what you have instead of an exact copy?

    As always, great work ;) Can’t wait to see how you grow into this one!

    • says

      This is the primary reason I’m not committing to putting this up on GitHub. In it’s current form, I love that it IS original.

      If something along the lines goes up on StudioPress, it would be a completely different look. So much of this design (header, navigation) is unique in a way that would make it extremely difficult to code for mass distribution.

      More than anything, scrolling effects on a homepage and sticky menu (you have no idea how ridiculously easy this is) will be the focus of a similar theme. But again, I’ll make sure that it can’t be brought back to what you see here.

    • says

      I agree with you, Heather. Brian should keep this one to himself. Maybe rather even than issuing a simplified version, he could blog some tutorials on what he did to make it this way.

      PS: I’m with you on the Sticky menu. I love that feature and I can’t figure out how it works. ;-(

      • says

        The sticky menu will be the first (and easiest) one to publish.

        But no worries, if something comes out on StudioPress, it’ll be completely unrecognizable to my own site/design.

  3. says

    Looks great Brian, I totally agree about shredding the sidebar, have done before and probably will do again on my site in future. It ‘just works’ for articles.

    (PS Not the reason for the comment, but one thing I noticed while filling out the (Speak Your MInd) comment entry form is if I hit ‘tab’ e.g. from Name to Email or Email to Website it jumps me down to the form in the bottom right of the footer instead – not a big deal but just thought I’d let you know)

    • says

      The (lack of) sidebar thing was something that I wrestled with. My homepage has the “centered” approach, as does the header. Having a content/sidebar layout felt weird, and once I realized that everything in my sidebar was onpage anyway, it became a no brainer.

  4. says

    I love what you guys have done, Brian! Normally I get kind of annoyed at the inconvenience of not having a sidebar, but with the sticky menu I think you’ve been able to make the aesthetic cleaner without sacrificing the functionality of the sidebar. Nicely done!

    • says

      Thanks Kate, always good to know I’m not the only one who sees it that way. Part of me gets paranoid and thinks it’s a mistake, but on the other hand — I kinda wanna say “it’s my blog, I can do what I want to.”

  5. says

    Love the design. Front page is killer and I like the single column. You had a great single column design a couple years ago that I always thought was unique and effective.

  6. says

    Well, I do covet this design, Brian. Definitely stick this one out. It’s a keeper.

    What I like the most is the lack of a sidebar. It opens everything up and gives a fresh breath of open white space. I’d do it on my own site but I have a few advertisers who might not appreciate their advertisements being 86′d. ;-)

  7. says

    I’m a really big fan of the single-column blog post design–I really like the way that turned out here!

    Also, really dig how the home page came together. It really highlights every aspect of what you do. So basically, you nailed it. Nicely done, man!

    • says

      Thanks Ricardo, but we (Rafal and I) nailed it. I’ll be continually checking out my analytics to see if the no-sidebar thing was a bad choice. Hopefully it wasn’t, because I’m not exactly sure how I’d incorporate one (design-wise).

  8. says

    Recently I find myself more and more trying to convince customers to allow their visitors to focus on the content they have to offer… You have joined the trend for single column designs now… and help in this struggle to keep people on target.

    Well done! I really like the footer and the transparency it has.

    It works great on an iPad (especially in portrait) ! but are you aware that the site looks crappy on a lot of Android devices ?

    Another thought might be that this kind of design works foremost for blogs and relatively small websites.. So maybe next time you work on a template for Studiopress you could challenge yourself by using WordPress more as a CMS, with a couple of CPT’s and heaps of content?

  9. says

    Nice job, Brian (& Rafal!) – I love the layout, and I especially love the fixed images, with the content scrolling over them – I can’t wait to see it over on StudioPress, so I can figure out how you did that!

    I really like the colors you’ve chosen too – that little spot of aqua is a nice touch!

  10. says

    First time visitor so I don’t know what the old site looked like but I’m totally digging the aesthetic here! Big easy to read type, clean, white, bold, clean. My only suggestion is I saw your color scheme and LOVE it – I wonder if there is a way to bring that color into the design a bit more without messing with the clean design?

    Very nice – congrats :)

    • says

      Hey Alexis, so grateful for your comment and thanks for stopping by. The color palette is something that got lost in the shuffle from the original design of the homepage to the production of the inner pages.

      It was my intent to somehow pull in each color in the appropriate sections. Thanks for the gentle poke and reminder there!

  11. says

    This is perhaps the most beautiful Genesis child theme I’ve ever seen. Been peeking around the CSS to see how Rafal managed to pull off the sticky images as you scroll. The fact that he pulled that off with just CSS and no jQuery is really amazing. The guy’s a really gifted designer — the Copyblogger equivalent of Apple’s Jony Ive — and I think you did yourself a treat having him redesign your site.

    Very minor cosmetic request: please change the tabindex on this form so that we’re not tabbing to the contact form in the footer when we go between the different fields.

    Keep up the good work, team!

    • says

      The sticky images thing was something that I did when it came to coding the theme. (while he designed it, I still coded it.)

      As for the tab index, that’s been fixed. Didn’t realize the issue until you and another person brought it up. Thanks Gravity Forms has it going on, and allows for custom indexes to be set.

      • says

        Ah nice man — you definitely know your CSS! :) That was a trick I hadn’t come across before.

        It’s a pity that Gravity Forms doesn’t use Ajax to submit the request like Contact Form 7 does. I hit the “Submit” button without filling in any of the fields and the page reloaded, and when I scrolled to the bottom it had a “success” message. So we’ve got neither Ajax nor validation going on here… *ducks*

  12. says

    Wow, that’s all I have to say. Just . . . WOW. I hope you do make it available, because it’s not something that low-budget non-coders like me could possibly do on our own.

  13. says

    Wow Wow Wow

    You did it again :) You wowed Genesis’s lovers again and again Brian. I really enjoy the concept of one page homepage which allows people to browse through everything. The design is big, bold and really attractive with a nice addition of white spaces too.

    I think I fall in love with this theme at the first time. Like my first kiss.

  14. says

    I think this is my favorite design ever. I was stalking your 365 site a zillion times a day and just kept scrolling up and down. Now, even when it’s live, I still can’t stop :) Great site and thanks so much for continuously going above and beyond to make it better (and easier) for everyone.

  15. Fran says

    I dig it – I wish this was on StudioPress, it is perfect for a client I will be working with this month.

    Alas, I will have to talk her into a redesign later on haha.

  16. says

    This is absolutely brilliant – you guys did a killer job. I suffer the same re-design addiction through being a perfectionist and refiner, and wish I had Rafal around to help me through it! As a big fan of white space and single column design – when I saw this I was blown away. The typography, icons.. custom homepage(especially like the dual column paragraphs) – love it. Three of my favorite things: The post navigation, CSS buttons, and full width image across the top.

    If I ever get time to work on my personal website – i’ll be definitely be taking a deeper look at this. In regards to putting the theme on StudioPress – can’t wait to see the adaptation and has me pumped to see what you guys have in store. I’m going to email you a suggestion I have in relation to management of the homepage that I came across in some new themes that you may find interesting.

    Glad to see more and more people using Genesis (:

  17. says

    Wonderful new look!

    I’ve been wanting Rafal Tomal custom work for a while now. Someday. Someeday.

    And proxima-nova…very easy on the eye.

  18. says

    Love the new look and enjoyed reading through your homepage. You always inspire me, Brian! How funny too, I was actually wanting to ask you if there are any plans to release single-column themes at Studiopress; I used to have one a few years ago and I’ve been missing it the last month or so… I love the personal feel to it (reminds me of reading a letter), not to mention your photos are extra big and look awesome! :D

    x Renee

    • says

      Thanks Renee, really appreciate your comments. Bummer to see you move off WordPress, especially since I was really fond of the latest version of the site you had. Maybe if I put out a great one-column theme I can swoon you back over!

      • says

        Hey Brian, I decided not to leave WP in the end – too much risk. I totally relate to what you said above about being burn out, I felt Tumblr was new to me, kinda exciting, and it made me like blogging again because I was feeling “exhausted” about it all. But I guess we all go through phases with our blogs.

        Anyway – I’m rambling. :) I decided to tweak an old design to a one column, only because I am not too familiar with Genesis so I would not know how to tweak it to a one column. When I figure it out I’ll tweak the one I had, I too really loved the Mindstream layout.

        x Renee

  19. says

    Great look! I just did a rehaul of my blog (Kikolani.com) from Thesis to Focus. It’s not customized, but it makes me a lot happier as it’s simply cleaner and easier to read. I know the feeling of constantly refining until you’ve had enough of your current theme. My husband is probably worse, but we’re both happily rocking StudioPress now. :)

  20. says

    Interesting look on this one, Brian. I’m missing the sidebars but it looks really cool. I’m learning to scroll more with some of these newer designs. Just to let you know, I’m building a new site with your Metro theme and I got a whopping 98 page speed. I’ve never come close to this before. Using Dreamhost with optional page speed mods. Really exciting!

  21. says

    love it. i’m moving away from a sidebar in my next design and you beat me too it! i was going to mention the responsive but someone beat me to it.

    love this new look!

  22. rSolution says

    It is just me? I almost assumed I hit a 404 error page when this page came up. Guess it was the Oops! that gave the impression.
    No doubt Brain and Rafal have raised the bar. Still got tons to learn. Pitching with Genesis is not a regret.

  23. says

    I dig it.
    I always have thought to myself about the Stream:
    What about some sort of linkage to Twitter where one populates the other?

    It seems like such cross-over and a missed opportunity for marketing mileage if the stream content is only on your page & not tied into a vehicle like Twitter.

  24. says

    Bran, you already know I love this! ;) It’s been a pleasure to work with you and everybody so far, and can’t wait to see what happens in the near future! Congrats on the home run here. It’s stunning.

  25. says

    Hello there ! Congrats to Brian and Rafal for this awesome job on the new design. For me it’s nothing but Amazing. it has been a couple of days I started to read that post I saw the link on twitter. Luckily today, I finally did it. So I’m Posting my thoughts here. The header and menu design is a great work that you’ve done. Sure I’m going to read the next article on how to create that sticky menu. And also, it would be very useful if you’d think of writing a tutorial about how to design the homepage. I’m very impressed. (Anyway I don’t know if it’s the right adjective to use :) ).

    Again great work guys !

    Article well written.

    Regards !

  26. says

    Brian,

    This does look great. It’s refreshing to see the pages without the sidebar. That’s definitely something to consider for my company – as we have been on a blogging hiatus for a while but are planning to get it back up and going soon!

    Thanks,
    -Chad

  27. says

    I’m in the middle of redesigning my website (with Genesis) and for sure, visited your website today, and that’s it – I’m in love with your new design!!

    Question: When will it be available and will we be able to add a Portfolio page?

    • says

      Hey Chris — sorry for the delay, your comment was marked as spam. More than likely something like this won’t be available until after Genesis 2.0 is released, which is tentatively scheduled for May(ish).

  28. Jim Anderson says

    Very nice redesign.

    What fonts are you using? Will you be offering a similar theme at StudioPress?

    • says

      I’m using Museu Slab and Proxima Nova from Typekit. As for something similar, yes — but more than likely it’ll be after Genesis 2.0 is released.

      Unless I get the bug before that. ;-)

  29. Bud Fawcett says

    Glad to see a little parallax feature that actually works on the iPad. Not sure if any other WordPress “Parallax” themes have had much success. Will look forward to this new theme making it to Studiopress. thanks
    Bud

  30. says

    Brah; your style is so clean & elegant it’s ridiculous.

    Recently I’ve had a slew of clients for which simple design/flat design is completely lost on them. But then I charge more to hunt for lame repeating patterns on stock photo sites and that kinda makes up for it…

    Nonetheless ~ huge fan of this revision. Now stop fiddling around and focus on RPA [revenue-producing activity] [RPA is trademarked btw...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>