![Buro-Mobile](https://woocommerce.com/wp-content/uploads/2011/09/Buro-Mobile1.png?strip=all&w=1500)
“Responsive” design has been the buzz word amongst web designers on social media channels & blogs for the past few months, some debating how it will change the web. This week marked quite a milestone with a major news publication “The Boston Globe” launching a subscription-only website featuring content from the daily newspaper as well as breaking news, customized for different digital devices, including smartphones and tablets (Source: The Washington Post).
The idea of having a layout that adjusts according to the browser width/resolution and device it is viewed on, without the use of any plugins, or seperate design stylesheets is one that has been commonly requested within the WordPress community.
We saw this as an opportunity.
![juanma](https://woocommerce.com/wp-content/uploads/2011/09/juanma.jpg?strip=all&w=1500)
A good few months ago we approached Juanma Teixidó of the award winning design studio Teixidó in Paraguay to design us a slick business theme in his signature design style. The outcome of that was a very detailed, well thought out, design named Buró.
Buró carries all the usual bells and whistles of our popular business themes – a featured slider, a feedback/testimonial module, and lots of footer/sidebar widgetized spaces. We knew this design would be a hit with our users, but we wanted to make it even more awesome.
![buro](https://woocommerce.com/wp-content/uploads/2011/09/buro.jpg?strip=all&w=1500)
Cobus was handed the reigns of converting this beautiful photoshop file into a working WordPress theme, with the brief to make it responsive, and look beautiful on all devices. Jay and Mike had previously worked with responsive layouts on our application themes which helped a lot.
Over the past 3 months Cobus has done a huge amount of research into responsive design and the code it involves. Not only has he produced some consistent beautiful layouts, but managed to ensure that the slider scales using the JQuery FlexSlider , the dropdown menus adapt according to the layout being viewed, and videos in blog posts proportionally scale thanks to FitVid.JS.
![buro-tan](https://woocommerce.com/wp-content/uploads/2011/09/buro-tan.jpg?strip=all&w=1500)
We’d love to know what you think of Buró. We can’t guarantee all future themes releases will be responsive, as it was hugely time consuming, but we will be carefully monitoring Buró’s popularity as a metric to decide on it’s viability.
View the theme in all it’s glory on our demo site, make sure you scale the browser window, and view it on your iPhone, Android or iPad. Find out more about the theme’s key features on the theme listing page.
![buro-menu-small](https://woocommerce.com/wp-content/uploads/2011/09/buro-menu-small.jpg?strip=all&w=1500)
About
I responsive design thing, but the theme itself is not much attractive and its just too same and simple… just like all your other business themes…..
Well its just my opinion
Each to their own I guess.
Isn’t that the nature of the theme business? If they are overly unique/creative the target audience will diminish and/or make it difficult for clients to customize. I think Juanma did a great job balancing creativity and simplicity on this theme.
Well done Juanma/WooTeam
100% agreeance. It feels as if Woo has lost some focus this past year.
In our designs? Luckily it is subjective, but what kind of designs would you like to see?
Inovation seems to be less, then last year. There was serious talk about “big things” to come, and none of them has come down line. This is not the place for a more in-depth discussion but its a shame to see no real innovation. Woo came to the scene with something new almost every time. Now, its just the next “fuel efficient model”, not something ready to run alternative fuels … follow?
Code is always clean, but innovation is no longer there.
Whether I agree with your statement is seemingly irrelevant. 😉
In which spaces would you like to see us innovate? What would you like to see us work on?
I agree too. You see, if every other theme the same functionality but just different colors, you’re basically cloning your themes. And cmon.. this slider? Taking up ALL the screen? For real? Who wants to feature a single image on their homepage? 1 year ago we were getting *different* themes every month. Now we’re getting the same clones over and over again. Sure, it’s responsive – but you guys are about time to hire a usability expert (who would probably jump off the roof and slit his throat on the way down, at seeing the design decision of using a full-screen image in a business theme).
It might just be another business theme, but really, how many types of layouts are there?
Personally, I like the idea of a ‘responsive’ theme that I could potentially use to build a site from. I don’t know the first thing about these types of frameworks, but because Woo has used it, I could potentially learn for myself.
Hi Rahul, in fact i just visited on this site. Nice start to use a sensitive topic. It may be a different business theme.
I would agree with you — pretty much have to use canvas and pad enough time to really customize
Simple, yes. Which is GREAT, because it leaves ample room for customization. This is freaking fabulous. Love, love, love the responsive design. It must be a buttload of work, but I really appreciate the effort. Thanks!
Ditto! I have a feeling that the designers among us will love this theme, while the folks who are looking for a plug-and-play theme may not as much, unless their design-leanings are more minimalist.
Luckily for me, I fall into both camps, so I love it. And I thank you for it, since I was just having a conversation with a client this morning about how difficult it is to have a site that works on both a home machine and a mobile device. 🙂 Woo to the rescue, again!
How is this for “positive thinking” just this morning I was considering creating my own responsive theme that I could use as a base for other designs etc. ::: Seems I wont need to redesign the wheel … I’d better get a subscription of to you guy’s ::: I agree with @Rahul, not sold on the look but then we are developers si it should not be difficult to create custom looks based on this design :::
AWESOME WORK !!
Love the theme; responsive, with creative adaptation (like the changing menu). It guess it proves you can have a responsive WordPress website without having to cut on the design itself.
Is my browser acting up or are some of the alternate styles in the demo on coffee brake?
Same here, seems a little bit – unresponsive 🙂
Was a bug with the demo switcher. Now fixed.
Cheers 🙂
Yep, impressed. Great work and an extra well done to Cobus looks like the research has paid off. 🙂
Nice start using a responsive theme. I guess the criticism is all because everyone, and I mean everyone is going to be underwhelmed until a little thing called Woo – Commerce released
A Theme likes this does need.
1. Portfolio (should be standard for most sites)
2. Pretty Photo (should be optional standard for all sites)
3. Team Member Addition (should be standard for all sites)
Depending on the uptake all of those are a possibility for a future version.
Yip, we wanted to limit the functionality for first release, and focus on the responsive bits. And based on the, um, “response” to that we’ll be considering more functionality.
Happy to see FlexSlider put to work here. If I may, I’d suggest you update your version 1.4 to version 1.7. It should be a seamless update and will give you a nice crossfade effect, rather than the old fade handling.
Cheers, and great looking theme! 🙂
Thanks for dropping by Tyler. We love your slider. We’ll definitely update to the latest version.
Awesome, glad to hear that! I hope FlexSlider serves you well in future responsive themes, too.
It’s beautiful, just wish I had somewhere to use it.
One issue though, when I scroll to the bottom it jumps back to feedback every time it changes.
Thank you 🙂 Thanks for mentioning the bug, I will look into it.
Hey Sarah,
I can’t replicate the problem on my side. Which browser & operating system are you using?
I’ve put the theme up and am testing it. I love it! Video doesn’t seem to be adjusting. Images either. Do I have to use certain selectors to make that happen. I know that corbus used the video .js. It works in the slider but not the posts. How do I make it work?
Sorry Cobus, there was an “r” thrown in there:)
No worries! It’s something Americans do often, for some reason 🙂
As for your question above – that was a minor oversight on my part. It’s on the to-do list for V1 fixes.
Your the man. Thanks for putting in the hard work for a great design build out. I know it was hard work, but it means a lot that you’re pushing Woothemes to be great. P.S. – Americans get many things wrong:)
Hey Josh, the theme has been updated to make in-post media responsive. Version 1.0.1 🙂
Dude. Seriously? You don’t mess around! I actually checked the radio button to get the follow up comments. People are ragging on you guys, but I say they’re all nuts. You’re on your game and you’re making a solid, strong and profitable business. You’re right on the edge of innovation and making a solid product. Keep it up. Keep the haters at bay and get it done son…
Thanks for the support Josh! 🙂
Stunning! Wish it had come out a week earlier.
Sweet. If this had the portfolio feature I’d definitely use this theme.
Would love to see a version of Canvas that integrates the responsive design qualities without all the added ‘design’ of a theme like this. but it’s nice anyway. The demo isn’t working for me but i’ll check back later.
Maybe it’s just me but the layout seems all broken on my xp/chrome installation. The slider doesn’t load any images at all and the three column (I’m assuming) has a padding issue that leads to the third column being dropped below column 1.
As for the theme info page itself, the text “Buy this WordPress theme” is larger than the button itself and overflows its border…
Ditto here (Safari Mac). I thought it was just me.
Sorry about that guys, will have that looked into and fixed up. 😉
Hey guys, sorry to hear that. I check the theme in both those environments, and it looks fine my side. By the sound of things, the JS isn’t kicking in on your side. Perhaps try clearing your browser cache.
This is nice, but it definitely needs the mini-features and portfolio sections, as well as the ability to add a page above or below the mini features as on your other business themes. These are essential on business themes to move them from fancy blog-like sites to ones that can highlight products and services (and not just in the slider). The responsive aspect is fantastic! I look forward to it being made into a full-fledged business theme along the lines of Inspire. Thanks!
Both of those additions are on our Roadmap. Cobus mentioned earlier in the comments that we specifically wanted to keep the spec down a bit, so that we could properly trial the new responsive framework that we’ve utilized.
Love the look and function of the navigation buttons!
OMG – another theme with a…. Slider!!! How original… NOT. Come on Woo, you guys should be leading design and yet theme after theme has the same theme: slider, columns and rehashed image borders & treatments.
Honestly, the “responsive” doesn’t look that great on an iPhone (screenshot: http://cl.ly/1b0I3c0P3A0v2F3v3a0m) and the other color options look like something from MS FrontPage – really.
My take – boring – Woo is better than this.
The only reason that doesn’t look on your screenshot is that it’s a bug; check the last image on our blog post for an idea of how it’s supposed to look.
I don’t see any issues with a slider. We include these, because if we don’t people will shout: “OMG – a theme without a… Slider!!!” 🙂 I agree that featured sliders are hardly the most innovative addition to WordPress themes at the moment, but that being said, if they’re being used across the board, then why try reinvent the wheel?
Because if you guys don’t reinvent the wheel, someone else will. I’ve been a woo customer for a long time and have watched the design innovation decline. Personally I look to Woo to lead the WP community which you’re doing in terms of suport, code & functionality, community, etc. It’s just been a while since we’ve seen some compelling Woo innovation on the design end.
Seriously, are you proud of the alternate styles for this theme? (Maybe make this a free theme?)
Thanks for responding.
I responded to another of your comments further down this thread. From where I sit I see this:
As I mentioned below, I don’t think we’d be building a good, sustainable business if we tried to build it for 1% or 2% of Woo users. The comments here are just representative of exactly that; not every WooThemes user will like or appreciate every single design
The trick is Adii to havet he option to turn it off and for the designer to test that option as to how great the site can look without the slider (those mini features and have a page replacement sometimes help)
This is the thing with sliders (they are getting better) most themes when you turn off the slider they look empty and unfinished, but this is where great designers come in and understand the varying needs of their users.
You guys have got all the talent in the world at your finger tips to make future releases that look great with and without sliders turned on.
One more cup of coffee for the road! Wow looks very old and beautiful theme. I like brown and wood styles. Thanks WOO!
I’ve been designing my own new responsive website off and on for a few months and I keep letting feature creep get me down. This theme has almost everything I need to just adjust and make it my own. I wish it had a portfolio section built-in, but that’s something I can crib off of some other themes. Then if/when an official solution comes out, I can migrate.
Thanks Woo!
Always happy to help out! 🙂
With all the negative comments and bashing going on, I really hate to post, as in general I like it. I never thought as WooThemes to be “plug-n-play” themes but as starting points to customize.. however…
“…with the brief to make it responsive, and look beautiful on all devices.”
Unless that “device” is a printer. This theme, being a “business” theme, screams for a print.css file as well, all your themes pretty much do. The output is rather poor. Even a basic print stylesheet that makes sure that everything visible on the screen is printed and what isn’t does not get printed (like the “1.1 2.2 3.3” under the slides.)
We don’t generally do print stylesheets for our themes. Is this something that more of our users want?
I think a lot of people don’t think about it. But it would be nice to have something that will at least print all of the information that is on the screen and leave off the stuff that isn’t. Doesn’t need to be a great example of print.css but something for someone to work with and to at least make the themes printable.
Do you have any good examples we could reference perhaps?
http://www.alistapart.com/articles/goingtoprint/
Not WP, but not only talks about print.css but also demonstrates by removing elements that are not really needed for the print version (sidebar for this example, and navigation.)
http://meyerweb.com/eric/articles/webrev/200001.html
This “Print Different” article also demonstrates a print.css and even goes as far as to “expand” the URLs in navigation so you could at least know where they are going to if that was desired.
http://coding.smashingmagazine.com/2007/02/21/printing-the-web-solutions-and-techniques/
Here is a list of articles as well as an example. The print version of this page drops the ads and extraneous elements to create a clean document.
Thanks for that. I’ll spend some time looking at these articles and will discuss this with the team for possible inclusion in our themes.
I don’t understand the lack of print stylesheets on your themes, especially the business ones. I’m guessing that most of your customers might not print out content that often, but a huge percentage of their readers/customers probably still do. On a business site, there is a good chance someone wants to print out services or product information.
Will you be introducing any templates into your business themes for displaying service and product information? Basic product comparison charts would be another item many businesses utilise.
Really, what’s all the fuss over printing… Who prints anything anymore??? If you need a page of your website “printable” why not make a nice .pdf version with a link to print it under your desired content?
I’m not a fan of storing data in more places than necessary and creating twice the amount of work, not to mention the risk that someone maintaining a website updates the data in one place but not another…
A lot of people do print websites, unfortunately.
The problem with this “responsive” design is that at a very basic level it doesn’t even print correctly.
The idea of having a PDF works well for static content, but when you have an evolving website, sometimes people want to print and go, or they take a snapshop of a site as a print to PDF to make a site content portable and “detached” from the net.
BTW, Fred, go to your site and do a print to PDF of the front page.. not very pretty, huh? With a basic print.css file it could be at least more readable and a better presentation to someone that might print out the page for reference.
It would be nice to have a basic print.css file done for each theme, nothing fancy, just a good basic start done by someone that knows the theme well that can create and comment it.
Yep. Print stylesheets are very important.
好文推è,åšä¸»å¥½çŠ€åˆ©çš„说法ï¼
@Juanma Teixido
Well Done!
“Custom home page layout with an optional slider, blog module and testimonial modules”
That’s really awesome work! 🙂 Thanks for the great theme!
Textures, graphic elements and Type are great. Not sure to like that HUGE slider and the fact that 3 thumbs can have a different width here… :-/
that was awesome theme.
nice.
Great work.
Theme color and look is simple and yet impressive. I would surely recommend this theme
Props on the move to a responsive design! I know, in terms of business decisions, you guys wanted to get a responsive designed theme to market fast, but ultimately I really think this theme has limited use.
I look forward to the evolving strategy for the integration of responsive design into future themes.
My recommendation: the next time you have one that you think will be your biggest theme in a while, do it.
Would also love to see it implemented on one enterprise theme.
I’d love to see the responsive design migrate to all themes via the framework. It’s the behind-the-scenes infrastructure of Woo themes that keeps me coming back. I understand the need to balance the idiosyncratic with the generic, so I’m not distressed by the design of the layout. I think Woo would do itself a huge favor by having a set of portfolio modules that could be purchased that would work in sets of themes or across the whole spectrum. I’d keep coming back for more.
See my comment below re: making our existing themes responsive: http://woocommerce.com/2011/09/a-responsive-wordpress-theme/#comment-73562
I am not a fan of the color schemes either, nor do I love the overly huge slider. I think this should not be categorized as a “business” theme, since it most likely wont be used for that without lots of mods. That being said, I am a huge fan of Woo and look forward to what’s to come from them. Waiting for WooCommerce to blow me away (fingers crossed)!!!
Just an after-thought… If you want to build a nice business theme with a slider, why not give us something like this slider? http://www.bestbuy.com/
The slider on their homepage is perfect for business users, simple, modern, stylish, and usable. Please consider building a slider/theme like this one for your next business theme and I will buy it for sure!!!
That slider was pretty much delivered in 2009 in the Headlines Theme. http://demo.woothemes.com/?name=headlines
I am amazed at some of the comments today when the Woo team is focused on delivery of the much anticipated Woo Commerce. There is innovation, and variety that will give many of us tools we are desperately wanting in the Woo Framework.
I am not entirely happy with some of the themes lately, but keep in mind the good stuff is on the way. I think Woo provides a base product for designers, and developers that stays close to the WordPress core while delivering a versatile theme ready for tweaking.
Responsive design is really going to be a huge value to me, especially when Mini
Features, Portfolio, or Pages are thrown in.
Thanks for your hard work Woo, I owe much of my peace of mind, and success to your awesome products.
Thanks for the backing Will.
WooCommerce is indeed on the way (scheduled for launch on Tuesday, 27 September) and as you rightly mention, a lot of our development works into the WooFramework. So whilst the WooFramework doesn’t get the credit it deserves, our “innovation” shouldn’t just be judged by the front-end of our theme releases.
Buro is an important release for us – not because of the design (which we personally love btw) – but because of the time we invested to get V1 of our new responsive “framework” ready, so that we can use this in upcoming releases.
@Fred – You can always make suggestions over here: http://ideas.woocommerce.com
This is now the fourth consecutive business theme, it is not time for a little variety?
Right on Ronny! I think Woo has become more concerned with $$ than being creative. They know a certain formula sells so they keep doing it. The trouble is that early adopters are looking for more – and we’re getting in other places.
What I think they’ve lost is the realization that being creative is what got them noticed in the first place.
Sorry Woo – This is a bad theme and the fact that the theme styles are SUCH a departure from the default tells me you guys slapped this together. We deserve better.
I’d imagine that Announcement was a pretty creative release. But heck, that’s just my subjective opinion. 🙂
I don’t think there’s anything wrong our formula or with the fact that we’re giving the majority of our users exactly what they want. I think this is good business decision-making. I also don’t believe we’ve compromised creativity in any way either. That said, creativity is highly subjective, so your personal opinion is still true.
Replying to this comment, I’m reminded of the massive backlash we received when we released Sealight all that time ago. No theme we’ve ever released was more criticized, yet it became one of our most popular releases ever.
Unfortunately there’s not much business sense in release a theme that will only be purchased by 10 or 20 people. I’m not ashamed to admit that at all.
You have the right business model, for sure.
I spent four years in an apparel, ecommerce startup. Ultimately, you move away from niche opportunities and idea which product ideas offer the greatest response (and revenue).
I know that app themes are a tough choice – very difficult to execute with most likely much smaller sales.
Regardless, keep throwing them in the mix.
We will most definitely keep throwing them into mix and have a couple coming up soon. 🙂
All I was trying to say, is that these themes are in the minority, because they represent the minority of our user base (and also solve problems for the minority of our users). That said, we love developing themes like these, but need to find the appropriate release balance between the spiffy, groundbreaking niche stuff and that which 90% of our users crave.
Editorial was a pretty groundbreaking release, seen from my point of view – had it only been responsive…
Maybe that’s hoping for too much.
You may have to beg Cobus quite a bit to tackle that one… 😛
I pretty much like it! For me it’s a great design, though simple. But simple most of the time is best. The theme it’s elegant and the responsive design is awesome. I’m looking forward to you implement it in all the past themes or, at least, for all of us who don’t know how to code, will be great if you can make a tutorial on how to implement some plug ins in order to make woo themes responsive. Could that be posible?
Cheers!
Making existing themes responsive is unfortunately not a very efficient process. Much of the responsiveness of a theme relies on the initial HTML / CSS code; so we’ll most probably not do this for our existing themes.
A tutorial is however a more viable option and once we have our own technique settled, we’ll publish something. 🙂
Will be great! Please, do a tutorial when posible! thanks!
Game changer. Just needs portfolio section to finish it off.
Excellent theme, i love its background 🙂
Some might say the design isn’t all that (personally I think it’s fine), but surely the innovation is in the responsive design functionality!
And this is perfectly timed for me, just started working on a client site who have requested a responsive design, so already knee deep in building a child theme for this – though I suspect it’s going to give me a CSS headache!!
Great stuff 🙂
I don’t actually believe that the responsive layout is groundbreaking innovation (it’s something that’s been around for a while), but it is another step we’ve taken forward. I think the trick in incorporating responsive design into themes (that will be used by thousands of users) is to do so in a way that empowers and doesn’t limit. As with any functionality in themes, it’s very easy to incorporate things that obstructs users and makes customization harder.
So that’s why we spent so much time trying to develop a sustainable and flexible responsive framework, which can be used in our upcoming themes. 🙂
Responsive functionality is going to be *huge* for me! Didn’t you have another post asking for what are the less glamorous and unadvertised features of woo that we take for granted but are oh-so-handy? I foresee the responsive functionality *topping* that list.
Okay, maybe it’s not unglamorous – and should be advertised aggressively – but you see what I mean – it’ll just become second nature, and that will so awesome for everyone doing websites!
And I love the design. It took me like ten minutes to customize it into a completely different beast, and I think it’s super 🙂
I keep hoping there will be more themes that is designed to have the menu on the side, instead of on the top. A lot of the themes look very much alike, to me. That’s just my two cents.
You may want to venture away from the norm, if youw ant to retain the interest of us subscribers. 🙂
Can’t wait to dive through the code and take a peek. One question: How did you guys handle the max-width property on images when the framework only supports pixel values?
I have been playing around with this new theme, and like it very much. However, I think it would be nice to have some kind of a slider image layout/size option that works well with the responsive design. Myself, I just hate to eat up that much screen with slider images in a business theme.
Have you tried playing with the min-height attribute of #slider? Use the custom CSS option under theme options to say something like:
#slider { min-height: 200px; }
And use images of an appropriate size, and/or setup:
.slide-img img { height: 200px; }
to have a slider that’s less tall 🙂
At first I thought that this theme was very simple and not attractive. Then I tried to use it in a new project and I found it very cool and it was looking good… until… well, I chose to display 6 recent posts in main page — with 4 posts, it was all messy in my display. I thought that it could work with 6 posts, but I was wrong.
I really don’t know what to do now. I had 3 days on a research to find the perfect theme. I think I’ll have to find another one ;-(
Oh, and I agree with Bill. Would it be possible to have a smaller slider in the main page? Oh, my, this slider is HUGE.
This guy from Colorlabs http://colorlabsproject.com/themes/ also made some of their existing themes responsive. Think responsiveness will change the game of WP theming?