It’s no secret that the days of the desktop computer are slowly being numbered. In fact, it’s estimated that not too far into the future, the amount of folks viewing on mobile devices will outnumber those on desktops.
A year ago we shifted our focus to responsive WordPress themes, which are created for optimal user experience across mobile devices such as the iPad and iPhone.
Over at StudioPress it’s important for us to be pioneers in the industry and run with the latest design trends as they are being introduced.
An Ever-Changing Design World
Last week I took a vacation and was looking for something to read on my flight home. At the same time I was talking with Rafal Tomal about the future of Genesis and themes.
It became quite evident that the book Responsive Web Design by Ethan Marcotte was the perfect choice for me to read while killing time in the air.
In a matter of a couple hours, I had read it from cover to cover.
This is one of the best books I’ve read that deal with the subject of responsive web design. Ethan walks you through the rationale behind it, as well as how to design for it.
As the book advertises, “I learned how to think beyond the desktop and craft beautiful designs that anticipate and respond to users’ needs.”
The Application of Knowledge
By nature, I’m a self-learner. This means I like to take a hands-on approach to see how things work — which explains why I think being street smart has its advantages.
In this case, I’m actually taking a hybrid approach to responsive web design. I’ve read the book, and now I’m planning on rolling up my sleeves and get dirty.
You may have noticed design changes on my site — I know, gasp, no surprise there.
Now that I’ve given you permission to rip off my design, it’s time for me to move along once again. But don’t worry, I actually have contemplated making my current theme’s source code available on Github. (More on that some other day.)
Aiming for (true) Responsive Web Design
If you take a look at my theme’s style sheet, you’ll see some subtle differences in the way some things are defined — look for ems and % widths in my definitions.
I’ve always considered my site a playground of sorts, where I like to test things out (long) before they ever make their way into our themes over at StudioPress.
Think of it as a visual and functional beta period in a sense. If it doesn’t break for you when you view it here, then it’s possible it won’t break when we update and release new themes there.
A Work in Progress
I’ve still got a lot of work to do — in fact, the work never ends. The theme I’m on now is the same theme I’ve had for a while now. It’s a continual refinement that evolves.
Once in a while I get caught while I’m playing around:
@bgardner – it’s kind of fun when you can tell a web designer is currently working on their site. You’ve read my mind w/ those changes!
— Jason Larsen (@jasonmlarsen) October 23, 2012
The invitation is extended for you to take a look at what I’m playing with, and identify some changes that might make their way into Genesis into future versions.
Getting YOUR Hands Dirty
Now comes the fun part, where I encourage you to really consider the power of responsive web design. Are you willing to explore CSS techniques and design principles, including fluid grids, flexible images and media queries?
If you read my blog, subscribe to my newsletter or follow me on Twitter, there’s a pretty good chance that you spend a lot of time with WordPress development.
With that said, I believe it’s YOUR responsibility to do what’s best for your clients.
So pick up the Responsive Web Design book, and start demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display.
Let’s Talk About Responsive Web Design
I think that a majority of the resistance with responsive web design stems from something we all fear — entering the word of the unknown and the world of change.
I can honestly say that when I first heard about it, I wanted nothing to do with it. I wanted to close my eyes and pretend that it wasn’t happening because I knew that I would mean entering the unknown and dealing with change.
However, I knew that I was doing myself and our users a huge disservice by ignoring what I knew was the inevitable. Mobile devices such as the iPad, iPhone and now the iPad mini are NOT going away.
Responsive web design is more than a trend. It’ll soon be a necessity to the way we all approach development. And that time will come sooner vs. later — the question is, will you be prepared?
Nice write up Brian. I, too, am/was in the “close my eyes and pretend it’s not happening” boat. Until recently (a couple of months ago), I never even read an article about it or cared enough to look into it.
Now, I feel like I’m months behind where I should be. It’s definitely the “future of the web”, as cliche as that sounds, and it’s something I’m diving into more now. This book is on my to-read list and this post is a reminder that I do need to sit down and crack it open.
For what it’s worth, Mike – the book is an EASY read. I’m not a book person, and I seldom read them. But I was able to quickly go through it and it all made sense. Highly recommended.
That is why for a while the only themes I would select are the responsive themes. I’d rather start with that as a base & modify to the look of an older StudioPress theme, then try to go the other way.
Thanks for what you have and continue to do, Brian.
You betcha Jonathan – always love doing good work that benefits others.
Good Stuff Brian,
Having already read that book, and then used responsive themes, I notice a lot of differences in the way the sites are marked up ie, using px instead of em for fonts, or fixed widths instead of % for other properties.
It does seem like the StudioPress themes are a hybrid of both techniques.
That said, I have had pretty good luck using Mininum to get it responsve, but it has taken me probably 8 hours of time messing with the css to get the css to look right — and I haven’t even look at it on the iphone 5 in landscape yet.
Just know that the time you spent on your site is an investment. Next time, it won’t take as long, and you’ll have the foundation of knowledge moving forward.
I saw your post on Twitter about the book, and will get a copy this week.
I absolutely love responsive design and encourage it will all new clients. I find myself going to new websites and adjusting my screen to see if it’s responsive. I always like seeing how creative others can be.
I look forward to the seeing what StudioPress does in the near future!
BTW, love the changes to your site!
Thanks Jared! I’m sure there will be more changes to come, as I try to walk the fine line between simplicity and necessity.
Same feelings as Jared. Love the re-design!
It is unfair, though. I bought the Minimum theme after having taken a liking for your website design. Now I feel like incorporating the changes onto mine.
I’m gonna have to restrain myself.
P.S: Thanks for creating beautiful + efficient themes/framework.
I should also add it would be great to create a responsive style sheet that covers 95% of the formats out there because the one that comes on minimum wasn’t enough.
I’ve been “collecting” the A Book Apart series as they come out, and Ethan Marcotte’s book is a great quick read for anyone who wants to better understand responsive web design but doesn’t have a lot of time to figure it out. Definitely a good choice.
I would like to add how it’s relatively easy to create a custom, responsive theme for the Genesis Framework. The unrestricted ability of building a site theme — as if I was working directly with a regular WordPress theme — added with the ease of use for content updating (which is an especially nice recommendation to clients). It’s the first thing I mention when I’m asked about making a site/blog; Love it!
That’s great Cliff, thanks for sharing. Like we both said, the book is very easy to read – I looked at it from a novice standpoint as I was reading it, and everything made sense. Ethan did an exceptional job from that perspective.
Yep – I won’t even consider a theme unless it’s responsive anymore. (I had a client just yesterday who wanted a site built on Enterprise, but I convinced him to go with Agency instead… which I’m now styling to be more like Enterprise for them.
)
Thanks for the book recommendation; I’ll jump on that. The piece I’m most interested in now is crafting appropriate break-points in the design, so I’m curious to see if Ethan’s book gets into that part of it. Cheers!
Enterprise is one of those themes that will probably get some degree of makeover as we make it responsive. As for breakpoints, I’m trying to figure out a way to make my theme so responsive that it barely uses any, if at all. I know at some point I’ll have to ditch the content/sidebar layout for content over sidebar.
I would prefer to keep some themes not responsive. Maybe make an Enterprise 2 or 1701 D.
Some clients don’t want to pay for responsive and it is a lot more work, so it would be good to still have those options.
In Genesis 1.9, we’ll be introducing a Genesis Responsive function, which will be activated by the child theme. All it will take is a comment out of that and the site will show up normal on any device.
Can’t wait for that!
This is great news. It would be good to also see a mobile-first approach to responsive design in Genesis by default, as well as a minimised expandable menu for the mobile version (also by default – I add this to all Genesis child themes I code at the moment because vertical one-item-per-line WordPress menus get long and unmanageable quickly on small screens).
Sounds like you’ve been eavesdropping on some of our conversations, Nick.
I just finished chapter 2 of RWD, and now I understand what you mean. Wowsa.
Brian,
Thanks for recommending that book! I went ahead and purchased it.
Do you have other book recommendations for general web design?
I already have “Don’t make me Think” which is fabulous!
But I’m looking for some others
Last week I switched my blog over to the StudioPress Prose theme!
Love it!
-Christina
Believe it or not, Responsive Web Design is the first book I’ve read about design. But I can assure you it won’t be the last.
Slowly but surely I’m seeing the importance of taking time out of my time “doing” to spend time “learning.”
If I come across any more, I’ll let you know!
I enjoyed the sample chapter from the book on the link you provided and it encourages me to make even more truly responsive sites. However, he seems to “gloss over” the media responsiveness, which I feel will only be more and more vital as the web not only goes responsive, but continues to incorporate more and more multimedia and video as well.
Basically in that sample chapter he suggests using max-width:100% for media/videos. And while this “resizes” the video and more or less keeps the proportions, it’s not truly responsive. It creates awkward black letterboxing and much wasted space as a result.
Hopefully he covers true media responsiveness elsewhere in the book?
If not, a StudioPress “Guide to Video and Media Responsiveness” would really help fill this gap (hint, hint).
Do any of the theme have the ability to shrink the menu into that drop down like twitter boostrap? It is difficult to work with the menu’s when they get more than 4-5 items in them.
Not yet, but this is something that we’re considering with Genesis 2.0. The gist of which would be… “if viewing on mobile, disable primary/secondary menus and display a new mobile specific one”.
If you Google, Jared Atchinson has some mobile menu code on Github and there’s a mobile menu plugin for Genesis in the Codex…
Cool. I will check it out.
I tried that plug in with Minimum. it didnt work at all.
I have two articles bookmarked for when we begin to incorporate this kind of stuff into Genesis – you can see them here and here.
If someone wants to give it a try, I have a nav plugin for Genesis that converts the primary menu to use the one from Foundation
https://github.com/pdewouters/Genesis-Foundation-Nav
at the moment, it’s the top nav bar, but I’m thinking of also doing the other Nav Bar version
http://foundation.zurb.com/docs/navigation.php
I think I’m fortunate, in a way, to come into web design at this point. I’ve been playing with mobile responsive stuff from just about the beginning, so it’s feels like a natural part of the design process. {By NO means do I completely understand it all… I have miles to go before I sleep…}
I did have a friend say she didn’t like the way the sidebar dropped down on her mobile device, but I reassured her that, given time, this was the future {which is actually the NOW..ha!}
I’m going to buy that book and read it in the plethora of my spare time.
Love the new update, Brian!
Thanks Gwen really appreciate it. I think it’s funny how people would think negatively about a sidebar dropping below content on a mobile device. I think that folk spend to much time worry about the stuff that resides in their sidebar and not enough time focusing on the content.
Without good content, the stuff in the sidebar is a) seen by nobody or b) seen by people who don’t care.
I really appreciate the mobile responsive design on the StudioPress themes, so thank you for making us look better. Like Adam said above, I also have made Agency look like Enterprise and a number of different themes because the mobile responsiveness is so important to me and my clients (and once you get used to the way one theme works the site comes together a lot faster). Look forward to reading that book to learn more and can’t wait to see the upcoming changes with Genesis. I really love the direction you are heading with the new versions. I have yet to use it yet, but I LOVE the gigantic pic on Minimum!
Do you think there will be a way in the future to have multiple responsive sliders on different pages? I have a few clients who have chosen to use the Dandelion theme by Envato for this purpose, and I no longer want to support that and move them all to Genesis, but they are stuck on the multiple slideshow function for their inner pages.
The Meteor Slides plugin is responsive, and allows for multiple slideshows (insertable with either a php function or a shortcode. http://wordpress.org/extend/plugins/meteor-slides/
I’ll often use it when a client wants an actual slide-based slideshow, rather than slides that are generated by featured posts/pages.
Thanks Adam for sharing about this plugin. I will take a look at it.
None of the slider plugs-ins are very good for responsive IMO because you are loading the same image size regardless of what screen you are seeing. No need to load a 150K slide, when it could be 15K on a phone.
I think we need a slider plugin that allows multiple versions based on display size.
I both love and hate responsive design. It kills the ability of the reader to experience the original (and primary) design of the website, but it also serves as a secondary form of visual expression.
I certainly makes things more readable, or rather that the reader doesn’t have to double click on the screen to enlarge the text, but it also makes it more difficult to find things around the website. There is a lot more scrolling in responsive design.
I would rather it go away, but I also know that it simply won’t. With that said, however, there are some websites that have a really nice responsive design and others that just don’t do it for me.
You should check out Trent Walton’s article on Content Choreography. It’s the school of thought that you can use media queries if you’re interested in more a more thoughtful approach to responsive. http://trentwalton.com/2011/07/14/content-choreography/
Thank you for posting that article. It was thought provoking, for sure. I also really enjoyed reading the article he cited by Jordan Moore with his demo of the FlexBox model.
Now THAT is an excellent read Chris, thanks for sharing that. (bookmarked.)
Here’s another one about serving different image sizes for different devices. You should read it and have one of your smarties change it to work with post thumbnails. That would be an *awesome* addition to 2.0…
http://www.wpexplorer.com/different-images-mobile-users-wordpress
Ethan Marcotte’s book is wonderful; I read it when it first came out, so have had the responsive bug for awhile.
Like, Dave, above, the type of menu that Twitter Bootstrap or underscores uses seems easier to use for really large menus with lots of sublevels. People can see all the submenu links at once, but then hide them out of the way when not in use. What you’ve done with the menus for less than 600px is really beautiful for smaller menus though!
The other thing that is nice to use is * { box-sizing: border-box } (yes, for everything per Paul Irish and others) because it makes the math easier; all the margins just line up. There are some issues with the Genesis dropdown menus using this, so decided it was better to use the menus as they are, and do the math. I’m not sure if it’s the superfish menu; I haven’t had a chance to play with it enough yet.
Also with responsive, we’re supposed to serve smaller resources, images, etc., but then there is retina display. And it seems that everyone has a different solution! LOL!
Anyway, I love working with Genesis themes, now that I’ve started, so I look forward to what’s coming, and I have to get a copy of Minimum soon!
Image size is for sure a concern with Minimum because the main image is HUGE.
I replaced that image with a slider, and those images are also huge – so while it looks nice on mobile, it probably isn’t saving any time loading the site.
It seems like I need some kind of conditional statement that if device is 300px wide, then show static image and create a small image for the site vs the slider.
Not sure how to do that. Any ideas?
Hey Brian what going on with your header section of your Blog? it seems there is something wrong because things are not lining up
Check it now, as I had updated a few things and your browser probably needed to have it’s cache cleared.
RWD is evolving so fast, that book is a little outdated. I suggest reading this one as a followup
http://www.implementingresponsivedesign.com/
Good suggestion Paul. That does look more up-to-date, and it looks like it covers responsive video and media properly.
I also was interested in Mobile Responsive Design. Is there a possibility of making all things responsive from Genesis, including the free themes? Just asking…
Any update on when we’ll get a responsive Lifestyle theme?
I am also curious as to a possible eta of responsiveness on the Lifestyle Theme
.
Mr. Gardner, do you know if or when it will be?
Best regards,
Karina (who is trying a number of other themes atm, but keeps thinking that the Lifestyle Theme is the best match)
It might be another month or two — but Lifestyle might also come back as responsive with a new design as well.
Ethan definitely started something when he wrote the book, “Responsive Web Design.” I’ve also compiled a list of free PDF books that help people with RWD, even if they’re not written by Mr. Marcotte himself. http://www.responsivewebdesignblog.com/2012/08/three-free-responsive-web-design-pdf-books/
Brian, While I LOVE (and mean LOVE!) the new responsive designs, I am having issues with clients (older people and companies with older computers). In particular, I was designing a website for a flight simulation teacher and his computer is like way old (windows 95) and only using internet explorer) I had to have him borrow his son’s newer laptop to actually view the website because everything (and I mean EVERYTHING) was out of whack and not lining up. (this was before I even started any customizations). How would you suggest dealing with clients like this? I have A LOT of these older clients. I’ve tried to explain that they are going to have to upgrade to newer technology, but because many are sole-proprietors or small businesses, the economical hit they’ve taken over the last few years is limiting cash-flow to the point that many cannot afford to upgrade their computers, or their proprietary software won’t run *yet* on newer platforms.
Hey Karen, thanks so much for the comment and SO sorry it took this long to approve. It was buried away in my spam page for some reason.
As for clients that are using archaic systems, there’s really not much you can do. I know it’s not ideal to suggest not taking them on as clients, but developing websites that are purposely outdated the moment you make them live isn’t really good for the web. (or for them for that matter.)
I installed the studiopress agentpress theme and I am in the process of “getting my hands dirty” with CSS. How do I delete the google fonts that were placed there with the CSS @import?
At the top of the style sheet is the @import for the Google Fonts.
So basically I just read a whole entire article that spent 1,000 words telling me to buy a book?
Feels kind of like a jip after taking the time to read the entire article when you could have just said, “buy this book” and it would have been the same thing.
I managed to read ‘Responsive Web Design’ a few weeks ago and I have to say it was such an interesting read! Some ideas inside the book were definitely on the ball though as no matter how big or small the efforts are, delivering a quality experience to the users is something I live by!
Responsive Web Design is definitely the way forward
Hi Brian, I’d like to buy Lifestyle theme, but it seem not support responsive yet. Is there any plan to add responsive design to Lifestyle?
Right now there aren’t, but at some point we will.
Web design is really important because it helps in building your sites, products and services in the online market. Victoria web design specializes in this kind of work since they are equipped with great ideas that improves the website.
This has been a constant struggle for me – balancing between the growing number of people viewing my website on their mobile phones and the current people who view with their laptops/desktops.
I got a chuckle about getting “caught” in your redesign… I always wonder if people notice when I’m doing that on my site… lol.
I haven’t really conformed to responsive design. I have always created mobile friendly sites, but most clients either expect the responsive style as part of web design or they really have no idea that creating a separate mobile version via responsive design isn’t going to function like their desktop version.
In the end, it is nice to have responsive design. But ultimately you are creating 2 or sometimes 3 different sites. Occurring more time and costs. So the question really is for the small business owner is it really worth it, when a mobile friendly site will be just as effective as responsive design?
Another way to look at it is to build the site with responsive in mind – in other words, try to combine the two, if at all possible. Of course maintstream-style sites like magazines and news, etc really can’t do that but here are two examples:
http://www.nomadtheory.com/
http://demo.studiopress.com/stretch/
Every time that you talk about changes into StudioPress themes I rub my hands. I remember when Genesis did not exist and how tedious it was to make a website, Genesis has made it fun, now comes the challenge of Responsive Web Design and then HTML5.
Our customers are the winners, while we have fun.
I think it’s simple mathematics here. Managing more than one site to address needs of more than one platform, cost of updating these sites, coordination with vendors, etc. requires more time efforts, which are directly proportional to money being spent. In the long run, responsive websites work out to be more cost effective.