41 thoughts on “Questions on Responsive WordPress Theme Design”
Maybe one of the biggest challenges to doing any kind of responsive design is the attention to detail and extra work. When you’re working on a deadline, more often than not it becomes a luxury. There’s also the matter of reaping benefits for the customer in a visible and measurable manner, and justifying the cost in time and money contra the additional workload and delivery delay.
It definitely could be seen, and probably is seen as a luxury, to most clients. Though there are some pretty persuasive arguments to be made for Responsive Web Design. It certainly does take way more work to create a thoughtful and useful responsive layout.
Mike, thanks so much for posting the link to Rethinking the Mobile Web by Yiibu. Very interesting stuff. Mobile is here to stay and growing rapidly. Web designers need to focus on the fact that many will be viewing the websites we design on these devices.
I can’t decide if I think responsive design is very limiting or not. I really think plugins like WP-Touch are more likely to be the correct answer. That is to say—creating a different experience on different platforms (notably mobile). The problem with responsive is that if you want it to work on all devices you have to keep your page size (images and so on) very small. You can’t be forcing a mobile device to download a responsive, but image heavy design (presumably you’ll want to be way below 1MB). That being said, I’m always in favour of minimal design, but it’s not always the right answer for every project.
I’m still mulling this over, but I can’t help but see responsive design as being a best practice (generally); however, it’s not the only best practice. Perhaps in conjunction with a touch-based plugin/design, so that users are afforded the ability to use either.
I suppose the best answer to Should This Design be Responsive? is, like the answer to a lot of other questions, it depends. That said, I’m starting to feel pretty strongly that most designs could do with a responsive layout. I’d definitely agree that it’s not the only best practice though. That’s a great way of putting it.
If you take the stance that it’s all about the content and the reader, then I think it’s hard to make an argument that a design shouldn’t be responsive. People will eventually try to read your site on a Galaxy tablet or an iPhone … if it looks like crap on the smaller screen, it pains the reader. When it comes to front-end design, the most important thing is the user (reader) experience. If they suffer or have a difficult time consuming your content, then you’ve done something wrong.
The other half of the depends would be a site that could do better with an alternate mobile version of their content because there’s just so much there. Though in that case, you could probably argue that they need to refine their content rather than create a mobile-only version. 🙂
I think it’s also helpful to realize we’re also talking about two things at once:
Responsive Design, the technology (otherwise known as Media Queries)
…and Responsive Design, the technique
Responsive design, the technique, is about creating custom styles that recombine the same look and feel in different ways for every screen resolution. WP Touch is a one-size-fits-all mobile design. A bit like apples to oranges?
Packages like WP Touch use a lot of complex PHP for user-agent sniffing and are dependent on WordPress to get the job done. CSS media queries, on the other hand are simple, intuitive, portable and easily hackable.
It would be interesting to see what a drop-in mobile stylesheet (using media queries) would look like. Say, a mobile stylesheet for the Toolbox theme.
Including sample media queries for small-screens in Toolbox might be a good idea. I’ll keep it mind!
A basic starting point in Toolbox’s stylesheet sounds like a great idea, indeed.
I’m a writer and not a designer/developer so for me WP Touch is the easiest answer, especially since it’s designed with a touch interface in mind. (I do recognize that this post was aimed at designers and developers, but I thought I’d join the conversation anyway.)
I’ve always been a fan of keeping functionality in plug-ins and design/presentation in the theme. Using a plug-in to create an iPhone/Android-friendly version of my site makes me uncomfortable. Particularly when I need another to make it iPad/Tablet-friendly. And yet another set of tweaks to the theme to make it work on both widescreen monitors (i.e. mine) and old-school 800×600 monitors (i.e. about 25% of my readers).
Responsive design alleviates that. It keeps all of the design in the theme, building a consistent brand experience across the traditional site, the iPhone site, the Tablet site, the low-resolution site, etc.
Building out the design, though, is tricky. I’m in the process of completely redesigning all of my sites with a responsive pattern in mind, and it’s not easy. I do have content available, but I also have to think of content that I haven’t written yet (to make the design/framework usable for other sites as well). A good approach is to think of common elements: You’re going to have an article. It will have a title and some meta. You might have some images. You’re going to have a page title. You’ll have navigation. You’ll have a sidebar. Once these are in place (just placeholders) it’s important to figure out where they’ll display on each version of the page.
On the narrowest screens (phones), certain elements of the sidebar (advertising?) won’t render at all. On a mid-size screen, navigation might be at the top with sidebar content below the articles. It’s the same kind of planning you do when you try to build out multiple versions of the same site for different browsers, you’re just building all of those multiple versions into a single, smart system that adapts to the user’s needs.
You hit the nail on the head—approaching any design without content is a huge challenge, made exponentially more complicated due to the multiple permutations in responsive design.
I haven’t gone responsive with a generic theme, just my personal blog, which had very definite constraints of it’s the writing, stupid. But this constraint is probably still the best place to start for all but the more specialized WP themes: a blog theme is there to let the writing of the blog author(s) shine. So, I’d still make that the primary constraint: at every step along the responsive design path, the question of “is this easy/joyful/intuitive for the reader?” should guide.
A few gotchas that I can imagine along the way:
Images need max-width:100%; and, ideally, no width or height attributes. Some custom filters would need to be written to override WP’s habit of hardcoding those. Even worse are captioned images, which hardcode inline width styles.
How will blocks of code display, especially at smaller sizes?
Menus. Mobile doesn’t have the width for horizontal, but vertical undoubtedly takes up too much space. This is what’s bugged me the most about some implementations, like Jeremy Keith’s St. Paul’s School: you have to scroll past too many menus in a mobile format just to get to the content.
“… at every step along the responsive design path, the question of “is this easy/joyful/intuitive for the reader?” should guide.” That’s just plain, old-fashioned, good advice for anything. But it’s especially useful when you’re looking at creating a layout for small-screen’s that still has to retain the larger flavor of an alternate design.
Also, Yes: Menus are undoubtedly the biggest gotcha for small screen sizes. 🙂
I think a show / hide toggle for menues can be a solution. Most of the time I read an article on my phone I come from twitter or hacker news and don’t browse around. So for blogs this can work. Not sure about company websites.
I’m working on a theme right now that does this and it seems to be a pretty good solution.
Agreed that it can work for many sites. But, progressive enhancement purist that I am, I also think about how to design that for browsers without JS, and I have no good solution currently.
@Matt Wiebe
You can make a toggle button without javascript, using the target pseudo selector in CSS.
@Matias Great point, but :target selector support isn’t universal yet (read: IE). If the menu is initially hidden and JS is off, then IE users will never be able to see the menu. And, if we want to detect :target support, we’re back at needing JS. So, I’d still approach it as: hide/show with JS, or just show it for no JS.
I was mostly taking into account that you would be employing it inside media queries, already ruling out IE prior v9. IE users wouldn’t miss elements because they would be hidden only with the media queries.
If I’m understanding this correctly, the idea behind responsive design is to make sure the site works on any screen size or device. I’m all for making sure that content is easy to read on any device and screen size. But the implementation suggested on the List Apart post you linked to is complex and potentially challenging to get working on every possible device and screen size
An alternative implementation of the concept is to do something similar with what I did with my site:
Keep it narrow and simple.
Simply use a relatively narrow main content area and keep things simple. It’s known to be easier for people to read narrow text columns (60-80 characters wide) anyway. My site has no special phone plugins but it’s very easy to read on every phone I’ve tried it on, even my Blackberry 9700 with it’s dinky screen.
I certainly understand that this won’t work for many types of sites that need more complex layouts. But it works fine for a blog. In some cases, I think sites that have complex layouts might better serve readers with simple layouts anyway, such as many sports sites (I want to look up the results of the latest game, not wait 10 seconds for my page to load so I can have the option of seeing 5 different videos . . .)
I think responsive design, both the technique and the technology behind it—as Gordon pointed out—is both the modern and smart way to build websites.
The solution is to either reject part of your potential audience and concentrate only on a subset of users like, say, just iPhone users …or you can embrace responsive design. The first option is the cure that kills the patient. The second option might seem intimidating at first, but it’s going to become increasingly accepted. Inevitable, even.
To me seeing this discussion around WordPress themes is super exciting, because of the size of the platform we have the potential to be leaders in putting these techniques and technologies into practice on sites both big and small.
If all of us – especially the big one like WP itself – doesn’t invest much attention to the responsive design, then over time all the mobile device and tablet pc will eventually be able to adapt itself ( hardware and software ) to behave like real computer’s browsers.
it’s the if A then B.
Technology today is evolving fast, the device (chips) become smaller and more powerful – they will be catching up the ability to display webpage the same way a normal computer’s browsers do.
I’ve been in the process of redesigning my personal website, for well, months. I started using all my usual tools but soon realized I wanted a responsive design rather than using a plugin based approach to target mobile devices and tablets and smaller screens.
Like basically everyone else, Ethan’s article last year was a huge inspiration. I’m actually using the Less Framework (www.lessframework.com) to build out my site now and then I’ll end up converting that into a WordPress theme. If the basic theme is any good, I’ll be happy to offer it to anyone who wants it, but I’m still working through various sketches for aspects of the site itself.
For me, I’m a fan of responsive design not just because it’s less overhead and less reliant on plugins to serve to different screen types, but because it forces designers to think about, as you so aptly said, designing for the content.
I like that I have to create sketches of various sizes of the same page, to make sure that what I’m doing will work the way I want it to. Frameworks — Less in this case — certainly help on that point. I’d very much like to see the media queries added to the Toolbox theme because that might be a good baseline.
Great post!
This is a great conversation.
I’ve really liked what I’ve seen of Responsive Design around the web, both in articles and in tutorials. Just like most things in web design and development, I think the solution re: responsive design or mobile stylesheet largely depends on the project.
The Whiteboard Framework is a WordPress theme framework that integrates the Less Framework. I haven’t used it on a project, but have experimented with it and it’s very cool.
I’m reworking my site using Toolbox and Less Framework. I’ve been toying around with releasing a child theme of it, but we’ll see how it goes.
Responsive Twenty Ten works much better than Twenty Ten in Opera Mobile. Hopefully, Duster can appear with responsive design in the future. Thumbs up!
I think sliding menus works best in phones in both droid and iPhone, but also it has limitation of minimum links of 5 to 6 in the view.
I am currently developing a theme where i’m using Media Queries to provide a responsive layout. I’ve set up 3 different layouts that active at 670px, 960px and 1280px wide browser windows.
Try resizing your browser on the various pages on my blog and see how the layout dynamically changes.
It’s fun to play with and you can do so much more than i’ve done here, like act on rotation for tablets and phones, but just having the basic widths covered goes a long way in my opinion 🙂
Great article – And good to know the WordPress community is adapting this technology!
I decided to scratch the theme mentioned above and experiment more with minimalism instead.
Since my new theme is only 530px wide, I’ve decided not to implement a responsive design as I don’t feel it’s really needed in the current layout. However I might add some responsive features later.
Anyway, just wanted to say that the link above is no longer used media queries to alter the layout.
Responsive layouts make my brain feel like its melting… But I would agree that although they are very complicated, the ultimate design will be worth it.
As for serving up large images to small devices, check out what the filament group is doing with responsive images: http://d.pr/5roV
Happy designing/coding!
Read all the way through hoping someone would point to some good resources for resizing images to 100%, perhaps a responsive wp slider plugin? After a few rwd under my belt, I’m starting to get faster. But the additional work of making the site fluid, within multiple widths, is definitely a huge addition to time in the initial planning and rendering. It’s fun though. I don’t think I’ll go back.
So how about it, any good links to the actual image filters or plugins that make the image 100%? Responsive home page sliders/rotators?
Fascinating stuff this – I’ve just found out about RWD and was wondering how this would integrate with WordPress, particularly with the WP WYSIWYG hard coding images dimension attributes – does anyone know how to get it to print percentages rather than fixed width? Also, this would raise the question of how would we expect end users (ie content authors) using WordPress as a CMS to know what percentage values to input?
Also as an aside, when designing mockups, do you guys create several mockups of every page at different resolution levels? How many resolution levels is the norm to design for?
I am also very interested in Responsive design. Just the other day, I started an open source project for a Responsive WordPress Theme Framework hosted on Github.
I have a lot of work to do. I have basically created the theme, included the Paul Irish HTML5 Boilerplate, and Nicole Sullivan’s Object oriented CSS. The result has been a very fast loading site.
I am building this theme as I learn and develop my own ways to do Responsive design, and build WordPress themes. I thought it would be most efficient to build something useful and share it as I learn. I am about to rebuild the theme structure, so I’d love any input more experienced theme devs may have.
Once I’m happy with the theme structure, and html, I’ll begin making it Responsive.
Thanks for publishing this, some good stuff in there! Another nice example of a responsively designed website is the designer/developer job board at http://www.findbacon.com
Can anyone recommend WordPress theme frameworks for responsive design. We currently use Hybrid.
Any theme can work as the base for a responsive design. If you’re familiar with Hybrid I’d keep with that.
I agree with Ian, but as I mentioned above, the Whiteboard Framework has responsive design integrated. But going with something you’re familiar with goes a long way.
ThemeShaper 
Maybe one of the biggest challenges to doing any kind of responsive design is the attention to detail and extra work. When you’re working on a deadline, more often than not it becomes a luxury. There’s also the matter of reaping benefits for the customer in a visible and measurable manner, and justifying the cost in time and money contra the additional workload and delivery delay.
It definitely could be seen, and probably is seen as a luxury, to most clients. Though there are some pretty persuasive arguments to be made for Responsive Web Design. It certainly does take way more work to create a thoughtful and useful responsive layout.
I saw this tweet today http://twitter.com/#!/smashingmag/statuses/50829035164549120 which led to http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu – interesting reading so far.
Mike, thanks so much for posting the link to Rethinking the Mobile Web by Yiibu. Very interesting stuff. Mobile is here to stay and growing rapidly. Web designers need to focus on the fact that many will be viewing the websites we design on these devices.
I can’t decide if I think responsive design is very limiting or not. I really think plugins like WP-Touch are more likely to be the correct answer. That is to say—creating a different experience on different platforms (notably mobile). The problem with responsive is that if you want it to work on all devices you have to keep your page size (images and so on) very small. You can’t be forcing a mobile device to download a responsive, but image heavy design (presumably you’ll want to be way below 1MB). That being said, I’m always in favour of minimal design, but it’s not always the right answer for every project.
I think this is an interesting article to consider: Do You Need A Mobile Version of Your Website?
I’m still mulling this over, but I can’t help but see responsive design as being a best practice (generally); however, it’s not the only best practice. Perhaps in conjunction with a touch-based plugin/design, so that users are afforded the ability to use either.
I suppose the best answer to Should This Design be Responsive? is, like the answer to a lot of other questions, it depends. That said, I’m starting to feel pretty strongly that most designs could do with a responsive layout. I’d definitely agree that it’s not the only best practice though. That’s a great way of putting it.
If you take the stance that it’s all about the content and the reader, then I think it’s hard to make an argument that a design shouldn’t be responsive. People will eventually try to read your site on a Galaxy tablet or an iPhone … if it looks like crap on the smaller screen, it pains the reader. When it comes to front-end design, the most important thing is the user (reader) experience. If they suffer or have a difficult time consuming your content, then you’ve done something wrong.
The other half of the depends would be a site that could do better with an alternate mobile version of their content because there’s just so much there. Though in that case, you could probably argue that they need to refine their content rather than create a mobile-only version. 🙂
I think it’s also helpful to realize we’re also talking about two things at once:
Responsive Design, the technology (otherwise known as Media Queries)
…and Responsive Design, the technique
Responsive design, the technique, is about creating custom styles that recombine the same look and feel in different ways for every screen resolution. WP Touch is a one-size-fits-all mobile design. A bit like apples to oranges?
Packages like WP Touch use a lot of complex PHP for user-agent sniffing and are dependent on WordPress to get the job done. CSS media queries, on the other hand are simple, intuitive, portable and easily hackable.
It would be interesting to see what a drop-in mobile stylesheet (using media queries) would look like. Say, a mobile stylesheet for the Toolbox theme.
Including sample media queries for small-screens in Toolbox might be a good idea. I’ll keep it mind!
A basic starting point in Toolbox’s stylesheet sounds like a great idea, indeed.
I’m a writer and not a designer/developer so for me WP Touch is the easiest answer, especially since it’s designed with a touch interface in mind. (I do recognize that this post was aimed at designers and developers, but I thought I’d join the conversation anyway.)
I’ve always been a fan of keeping functionality in plug-ins and design/presentation in the theme. Using a plug-in to create an iPhone/Android-friendly version of my site makes me uncomfortable. Particularly when I need another to make it iPad/Tablet-friendly. And yet another set of tweaks to the theme to make it work on both widescreen monitors (i.e. mine) and old-school 800×600 monitors (i.e. about 25% of my readers).
Responsive design alleviates that. It keeps all of the design in the theme, building a consistent brand experience across the traditional site, the iPhone site, the Tablet site, the low-resolution site, etc.
Building out the design, though, is tricky. I’m in the process of completely redesigning all of my sites with a responsive pattern in mind, and it’s not easy. I do have content available, but I also have to think of content that I haven’t written yet (to make the design/framework usable for other sites as well). A good approach is to think of common elements: You’re going to have an article. It will have a title and some meta. You might have some images. You’re going to have a page title. You’ll have navigation. You’ll have a sidebar. Once these are in place (just placeholders) it’s important to figure out where they’ll display on each version of the page.
On the narrowest screens (phones), certain elements of the sidebar (advertising?) won’t render at all. On a mid-size screen, navigation might be at the top with sidebar content below the articles. It’s the same kind of planning you do when you try to build out multiple versions of the same site for different browsers, you’re just building all of those multiple versions into a single, smart system that adapts to the user’s needs.
You hit the nail on the head—approaching any design without content is a huge challenge, made exponentially more complicated due to the multiple permutations in responsive design.
I haven’t gone responsive with a generic theme, just my personal blog, which had very definite constraints of it’s the writing, stupid. But this constraint is probably still the best place to start for all but the more specialized WP themes: a blog theme is there to let the writing of the blog author(s) shine. So, I’d still make that the primary constraint: at every step along the responsive design path, the question of “is this easy/joyful/intuitive for the reader?” should guide.
A few gotchas that I can imagine along the way:
Images need
max-width:100%;and, ideally, nowidthorheightattributes. Some custom filters would need to be written to override WP’s habit of hardcoding those. Even worse are captioned images, which hardcode inline width styles.How will blocks of
codedisplay, especially at smaller sizes?Menus. Mobile doesn’t have the width for horizontal, but vertical undoubtedly takes up too much space. This is what’s bugged me the most about some implementations, like Jeremy Keith’s St. Paul’s School: you have to scroll past too many menus in a mobile format just to get to the content.
“… at every step along the responsive design path, the question of “is this easy/joyful/intuitive for the reader?” should guide.” That’s just plain, old-fashioned, good advice for anything. But it’s especially useful when you’re looking at creating a layout for small-screen’s that still has to retain the larger flavor of an alternate design.
Also, Yes: Menus are undoubtedly the biggest gotcha for small screen sizes. 🙂
I think a show / hide toggle for menues can be a solution. Most of the time I read an article on my phone I come from twitter or hacker news and don’t browse around. So for blogs this can work. Not sure about company websites.
I’m working on a theme right now that does this and it seems to be a pretty good solution.
Agreed that it can work for many sites. But, progressive enhancement purist that I am, I also think about how to design that for browsers without JS, and I have no good solution currently.
@Matt Wiebe
You can make a toggle button without javascript, using the target pseudo selector in CSS.
See this quick example: http://matiasventura.com/target.htm
@Matias Great point, but :target selector support isn’t universal yet (read: IE). If the menu is initially hidden and JS is off, then IE users will never be able to see the menu. And, if we want to detect :target support, we’re back at needing JS. So, I’d still approach it as: hide/show with JS, or just show it for no JS.
I was mostly taking into account that you would be employing it inside media queries, already ruling out IE prior v9. IE users wouldn’t miss elements because they would be hidden only with the media queries.
If I’m understanding this correctly, the idea behind responsive design is to make sure the site works on any screen size or device. I’m all for making sure that content is easy to read on any device and screen size. But the implementation suggested on the List Apart post you linked to is complex and potentially challenging to get working on every possible device and screen size
An alternative implementation of the concept is to do something similar with what I did with my site:
Keep it narrow and simple.
Simply use a relatively narrow main content area and keep things simple. It’s known to be easier for people to read narrow text columns (60-80 characters wide) anyway. My site has no special phone plugins but it’s very easy to read on every phone I’ve tried it on, even my Blackberry 9700 with it’s dinky screen.
I certainly understand that this won’t work for many types of sites that need more complex layouts. But it works fine for a blog. In some cases, I think sites that have complex layouts might better serve readers with simple layouts anyway, such as many sports sites (I want to look up the results of the latest game, not wait 10 seconds for my page to load so I can have the option of seeing 5 different videos . . .)
I think responsive design, both the technique and the technology behind it—as Gordon pointed out—is both the modern and smart way to build websites.
If you haven’t read Jeremy Keith’s poignant essay on this topic, I highly recommend it. He says:
To me seeing this discussion around WordPress themes is super exciting, because of the size of the platform we have the potential to be leaders in putting these techniques and technologies into practice on sites both big and small.
If all of us – especially the big one like WP itself – doesn’t invest much attention to the responsive design, then over time all the mobile device and tablet pc will eventually be able to adapt itself ( hardware and software ) to behave like real computer’s browsers.
it’s the if A then B.
Technology today is evolving fast, the device (chips) become smaller and more powerful – they will be catching up the ability to display webpage the same way a normal computer’s browsers do.
I’ve been in the process of redesigning my personal website, for well, months. I started using all my usual tools but soon realized I wanted a responsive design rather than using a plugin based approach to target mobile devices and tablets and smaller screens.
Like basically everyone else, Ethan’s article last year was a huge inspiration. I’m actually using the Less Framework (www.lessframework.com) to build out my site now and then I’ll end up converting that into a WordPress theme. If the basic theme is any good, I’ll be happy to offer it to anyone who wants it, but I’m still working through various sketches for aspects of the site itself.
For me, I’m a fan of responsive design not just because it’s less overhead and less reliant on plugins to serve to different screen types, but because it forces designers to think about, as you so aptly said, designing for the content.
I like that I have to create sketches of various sizes of the same page, to make sure that what I’m doing will work the way I want it to. Frameworks — Less in this case — certainly help on that point. I’d very much like to see the media queries added to the Toolbox theme because that might be a good baseline.
Great post!
This is a great conversation.
I’ve really liked what I’ve seen of Responsive Design around the web, both in articles and in tutorials. Just like most things in web design and development, I think the solution re: responsive design or mobile stylesheet largely depends on the project.
The Whiteboard Framework is a WordPress theme framework that integrates the Less Framework. I haven’t used it on a project, but have experimented with it and it’s very cool.
I’m reworking my site using Toolbox and Less Framework. I’ve been toying around with releasing a child theme of it, but we’ll see how it goes.
Responsive Twenty Ten works much better than Twenty Ten in Opera Mobile. Hopefully, Duster can appear with responsive design in the future. Thumbs up!
I think sliding menus works best in phones in both droid and iPhone, but also it has limitation of minimum links of 5 to 6 in the view.
I am currently developing a theme where i’m using Media Queries to provide a responsive layout. I’ve set up 3 different layouts that active at 670px, 960px and 1280px wide browser windows.
Try resizing your browser on the various pages on my blog and see how the layout dynamically changes.
It’s fun to play with and you can do so much more than i’ve done here, like act on rotation for tablets and phones, but just having the basic widths covered goes a long way in my opinion 🙂
Great article – And good to know the WordPress community is adapting this technology!
I decided to scratch the theme mentioned above and experiment more with minimalism instead.
Since my new theme is only 530px wide, I’ve decided not to implement a responsive design as I don’t feel it’s really needed in the current layout. However I might add some responsive features later.
Anyway, just wanted to say that the link above is no longer used media queries to alter the layout.
Responsive layouts make my brain feel like its melting… But I would agree that although they are very complicated, the ultimate design will be worth it.
As for serving up large images to small devices, check out what the filament group is doing with responsive images: http://d.pr/5roV
Happy designing/coding!
Read all the way through hoping someone would point to some good resources for resizing images to 100%, perhaps a responsive wp slider plugin? After a few rwd under my belt, I’m starting to get faster. But the additional work of making the site fluid, within multiple widths, is definitely a huge addition to time in the initial planning and rendering. It’s fun though. I don’t think I’ll go back.
So how about it, any good links to the actual image filters or plugins that make the image 100%? Responsive home page sliders/rotators?
Fascinating stuff this – I’ve just found out about RWD and was wondering how this would integrate with WordPress, particularly with the WP WYSIWYG hard coding images dimension attributes – does anyone know how to get it to print percentages rather than fixed width? Also, this would raise the question of how would we expect end users (ie content authors) using WordPress as a CMS to know what percentage values to input?
Also as an aside, when designing mockups, do you guys create several mockups of every page at different resolution levels? How many resolution levels is the norm to design for?
I am also very interested in Responsive design. Just the other day, I started an open source project for a Responsive WordPress Theme Framework hosted on Github.
I have a lot of work to do. I have basically created the theme, included the Paul Irish HTML5 Boilerplate, and Nicole Sullivan’s Object oriented CSS. The result has been a very fast loading site.
I am building this theme as I learn and develop my own ways to do Responsive design, and build WordPress themes. I thought it would be most efficient to build something useful and share it as I learn. I am about to rebuild the theme structure, so I’d love any input more experienced theme devs may have.
Once I’m happy with the theme structure, and html, I’ll begin making it Responsive.
Check out the demo site – http://jeffsebring.com/responsive-wordpress-theme/.
and the Github repo, where you can contribute. – https://github.com/jeffsebring/responsive_theme.
Thanks for publishing this, some good stuff in there! Another nice example of a responsively designed website is the designer/developer job board at http://www.findbacon.com
Can anyone recommend WordPress theme frameworks for responsive design. We currently use Hybrid.
Any theme can work as the base for a responsive design. If you’re familiar with Hybrid I’d keep with that.
I agree with Ian, but as I mentioned above, the Whiteboard Framework has responsive design integrated. But going with something you’re familiar with goes a long way.