Introducing a Mobile-First Version of the Genesis Theme

One of the things that I love most about my position in our company is that I have the ability to try new things when it comes to design.

Usually that takes place in the context of developing Genesis themes and it’s always an adventure. So a few weeks ago I started playing with the idea of creating a mobile-first version of the default Genesis sample theme.

Mobile-first theme for Genesis
The Mobile-First Theme for Genesis

The idea wasn’t exactly new to me, since community member Mickey Kay and his team at Mighty Minnow had released their own version last year. I’ve also had a few brief conversations with Gary Jones on the subject of mobile-first as well.

I decided it was time to embrace the idea that a mobile-first strategy with theme development was something to consider. I’ve read many articles on the subject, and thought it was finally time to see what the fuss was all about.

So I downloaded our sample theme, installed a fresh demo and began hacking away at the CSS. Check out the Mobile First demo site to see what happened.

I plan on writing more about the actual process and what I’ve learned along the way, but in the meantime I thought that I’d share what I’ve been working on.

And … the Mobile First theme is FREE to download. Click here for access.

Design For Success

No Sidebar is a weekly email newsletter that helps you identify the things that stand in the way of building your business.

Learn how to eliminate the clutter on your website, increase conversion and grow your audience quickly.

Click here for more information.


  1. Rajiv Gupta says

    Hi Brian,

    What is the difference between responsive design and mobile-first design.
    I see less use of media queries in the css of mobile-first design. Please explain.


    • says

      That’s a great question, Rajiv. A mobile first design is developed with the mentality of building all containers at 100%, and then modifying that as your screen size gets larger. Typical responsive design sets the width of them first, and then breaks down as the screen gets smaller.

  2. says

    Not totally understanding this, Brian.
    I thought the Genesis Framework was mobile responsive.
    If I use this on my site, how will it affect what I already have?
    I’m using GF 2 with the Streamline Pro child theme.
    I don’t want to break anything.

    PS. Since getting the free theme require signing up for your blog, how does that work if I already am?

    • says

      Since getting the free theme require signing up for your blog, how does that work if I already am?

      If you’re already in, then no need to register (again.) The Get Free Content link in the nav gets you where you want to be.

      As for the Genesis Framework being mobile responsive it is — and will continue to be. The mobile-first approach is just a different mentality when making a mobile responsive design.

      It does appear that there might be confusion, which gives me another post to write. So thanks for that! :-)

      The Mobile First theme that I created and am giving away for free is a separate theme, so if you’re using GF2 and Streamline, stick with it. It’s mobile responsive and this is really an independent concept from it.

  3. Neil Egginton says

    This is a great theme Brian!

    I’m already using on one site and it looks great.

    What I’m really wanting to know is how do we get the theme you’re using on this site :)

    Thanks for for the freebie Mobile First theme.

    • says

      What I’m really wanting to know is how do we get the theme you’re using on this site?

      Believe it or not, you’re the first person who’s asked this. I’ll wait and see if there’s any more interest before I make the decision of developing this for the masses. More than likely, to be upfront, that one would be on StudioPress and not here.

      • says

        I too like the mobile first approach & look forward to more themes that take that approach, but agree with Neil, I like the theme here more than the one you just released.

        In looking at the StudioPress themes, all the way back to Revolution 1, it’s always been about the unique elements with each theme for me.

        Maybe Whitespace can be done up for mobile first & be the first major Mobile First theme StudioPress releases.

  4. says

    Looking at the CSS, it looks like you are able to reduce the number of @media query since you build setting widths to 100%. The layout adjust to fill the screen on small devices and then you add an @media query for screens larger than tablets.


    I like the approach.

  5. says

    Maybe I’m a little redundant to other comments & maybe this is fodder for your next blog you mention:

    Is mobile-first just an intellectual coding exercise or is there an incredible advantage or benefit I’m missing?

    Is there a front-end advantage to designing for phones first, besides the idea that more & more people are visiting from mobile-devices?

    • says

      All fair questions Rob, and the answer is an intellectual coding exercise. Quite honestly, this is also tied into the idea of a content strategy, which is more than angle I plan to take when I write up my follow up post.

      The gist of this in CSS terms is basically a flip flop when creating a style sheet. Media query declarations that were at the bottom of the file are now at the top, and vice versa.

  6. says

    Hi Brian,

    Interested to see how this “impacts” future SP theme development, and if you’ll put emphasis on mobile first over responsive, or vice versa, or a happy medium. :)

    One of the things I noticed over at the Mighty Minnow mobile first theme demo is mention of plug-in requirements for IE8 users:

    “Being as this theme utilizes mobile first media queries, you’ll need to utilize a polyfill if you want the theme to appear correctly in Internet Explorer 8 and below.”

    Is this the same for this theme, or has coding “moved on” a little and it’s built in?


    • says

      Hey Danny — totally forgot to come back and reply to your comment. I’ll have to look into the IE8 thing, but it’s not high on my priority list. Microsoft itself stopped supporting it, so I’m leaning on doing that myself. ;-)

  7. says

    Hey Brian this is cool and I like the concept. I see a lot of people in comments with the same questions… maybe a side-by-side comparison of each break point that will display the differences? Idk just a thought.
    Cheers man

  8. Henrik Blomgren says

    Mobile first is the new hot thing for coding so yeah. Try to learn it :) It´s awesome watching your first experience with this new way of building css.

    For my own experience using mobile first coding it´s both really interesting and terribly irritating. But it´s just a mindset for me untill I get used to it.

    Looking forward to the following posts. Getting the SP themes to be mobile first will help a lot with customizing them.

  9. Pseric Lin says

    Thanks Brian,

    What a great theme design! I really loving it!

    And I have updated my site to the new design, thanks a lot.

  10. Rob Renwick says

    Thanks for the great theme Brian, I’ve been thinking about mobile first a bit lately and great to see another example – especially from the official source :-)

  11. says

    I just converted an in-development project to mobile first. It was a bit painful, but once I got going it was amazing just how easy it got.

    I’ve been at this game a while and it reminds me of converting from table based layouts to css – productivity decreased, initially, but eventually surpassed old levels.

    Mobile first is the way to go – Kool Aid consumed – Keyboards Smokin!

  12. says

    I’m so glad to see you looking and thinking about mobile first design. I really hope this approach will carry over to the framework as well. As I have been attempting to move in the mobile first direction myself, one of the greatest challenges is adapting to limitations in my favorite frameworks.

  13. Pavle Djordjevic says

    I can´t believe it took my so long to take a look at this.

    Brian, this is amazing, seriously. Thank you very much for sharing this for free.

    This theme is perfect for my distraction free website :)

    Keep up the amazing work. I´ll catch you up on Twitter for any updates.

    I have only one question though, I hope you can help me out.

    I want to have wider content and narrower sidebar, but I am a bit confused how to do that, any ideas?

    Big hug for you.

  14. trista de leon says

    hi, I’m loving this theme on my site since I was looking for a better responsive layout and this is perfect. I have one problem, however, on my landing page (home page) my gallery is showing as one long column instead of the three rows it’s supposed to show. There’s room there to have them, so I’m confused as to why it’s showing like that, do you have any suggestions?

    thank you!!

  15. says

    Hi Brian,

    In my practice site, I have 5 links in my header widget area and this caused some issues with the layout. It turns out that the title area overlapped with the header widget area.

    In your demo site, the width of the title area was approximately 237px and the header widget was 600px so there was no problem. In my test site, they were 364px and 758px respectively. Considering that there’s 120px for margin, there’s an extra 42px that broke the layout.

    Question, if I would like to set the maximum width for the title area and header widget area, should I do this in the media queries section?


  16. Pavle Djordjevic says

    Hey Brian,

    How can we add a logo to this theme?
    I tried with adding a logo.png to image folder and putting this code

    /* Logo, hide text */

    .header-image .site-header .wrap {
    background: url(images/logo.png) no-repeat left;
    padding: 0;

    But it seams that logo and text are now overlapping?
    Thanks a lot.

Leave a Reply

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