Written by on

Responsive is Coming to iThemes Builder

Since the first of the year, the Builder team has been making plans for how to implement responsive web design in Builder. This post sets the stage for what responsive web design is all about, while providing a blueprint for the future development of Builder. You can check out the full forum thread on Builder and responsive design here.

Q. What is responsive web design about?

In the early days of the web, pages were mostly text with very little design. As the web got older, more advanced designs came along to make the pages look better and to add features such as complex navigation, sidebars, etc.

Most of these designs started to make assumptions on what type of device would render the page. These assumptions typically were about the amount of space available to render the page. For many years, 960 pixels was the standard for a full-sized layout as it could be assumed that most people viewing the site could easily see at least that amount of width.

Looking back, that was probably a bad assumption. We should have never assumed to know exactly how much width was available to render a page.

Compounding this problem is the explosion of web-capable mobile devices and tablets. Since these devices have much smaller screens than desktops or laptops have, rendering a standard 960 pixel wide layout and just assuming that visitors can deal with the shrunken view of the site was a bit optimistic to say the least.

But how do we deal with this issue?

For years, the solution was to show a different version of the site to visitors on mobile devices. We used this practice as well which you can see by checking out our Mobile plugin.

This type of solution was the gold standard for a long time. Unfortunately, such a solution isn’t perfect. There are a massive number of mobile devices, and it isn’t possible to correctly send a mobile version of the site to just these devices while avoiding the possibility of sending the mobile version to a non-mobile browser. In addition, the mobile version of the site may not offer all the features of the full site, causing frustration by the visitor.

So, we shouldn’t just show a 960 pixel wide layout to everyone, but we also shouldn’t show a different version of the site to specific devices. What now?

A couple of years ago, an article titled Responsive Web Design was published. It started a big shift in how designers think about how web pages should function. The key idea is that a single layout should be able to adapt to any kind of device, no matter if its width is 300 pixels or 2000 pixels. In other words, no more worrying about providing different versions of the site to different people and no more forcing visitors on mobile devices to have to zoom in and out of the site just to be able to read the content.

While there are other ideas out there for how to deal with these issues, responsive design has really taken off and shows great promise for the future of the web.

Q. What does this mean for Builder?

For quite a while now, the Builder team has been working on implementing responsive web design practices into Builder. This means being able to use all the great Builder features to quickly and easily build a site while also getting the benefit of having a site that renders nicely on mobile phones,  tablets, or very small browser windows.

Q. Are there any examples of this new feature?

While this feature is still in active development, there are a couple of sites that you can check out that have the current development version loaded on them.

We’ve created a simple demo site to showcase the responsive version of Builder so you can see an example of the progress that has been made. If you resize your browser window, you will see that the design shrinks down to not overflow the sides of your browser window. You can also load it on your mobile phone or tablet to see the site nicely scale down to fit the device.

Also, if you visit ChrisJean.com, my personal site, you’ll notice how the video on the home page scales as needed to fit the width. This also happens with images as can be seen on this page

Brad Ulrich, iThemes’ lead designer, had an old Builder test site that he had available. Brad loaded the development version of Builder, and the result is great. If you resize your browser, notice how at certain points, the sidebar will drop down and the Widget Bar columns will also switch to vertical alignment. This is to give the design more breathing room so that the columns don’t become cramped as the design shrinks down.

All of this is still a work in progress, but we hope that these examples get you excited.

Q. When will this much-anticipated feature be launched?

The Builder team has had a deadline of this Friday to get everything ready. So far, everything is on track to reach this deadline.

There is much testing to be done though, so we can’t promise a Friday launch. If we can’t get it to you by Friday, we will definitely have the feature launched by early next week.

In other words: soon, very soon.

Q. Will this break existing sites?

A big priority for all Builder updates is backwards-compatibility. We never want a Builder user to update Builder and end up with a broken site.

To that end, when you update your existing Builder site, the feature will be disabled by default. This will ensure that when you upgrade, your site will still behave normally.

We will include instructions on how to enable the feature on your site with our launch announcement.

Q. Will I have to redesign my child theme?

While many child theme designs can easily switch over to being responsive with minimal changes, some more complex modifications may require some additional changes to allow the design and the responsive feature to work well together. It is for this reason that the backwards-compatibility is such a key to this update.

After we get the updated version of Builder released, we are going to go through all of our child themes and ensure that they are updated to take full advantage of this new feature. This should only take a day or two, so just be aware that there will be a transition period as we update all the themes.

Q. What if I don’t want my site to be responsive?

Great question. The feature can be easily turned of if it is not desired.

Q. Are there any more plans for Builder and responsive?

Yes. This is just the starting point of Builder and responsive.

Our users have been very eager to get this feature, so we prioritized speed on this development cycle to get it out as quickly as possible. This means that we had to leave behind many great ideas to make Builder and the responsive feature even better. Those features are high up on our list to implement as quickly as possible after this big update.

Some examples of features that will not be implemented in this version but are high up on the list for future development are:

  • Ability to cause specific Modules and Blocks (each column in a Module is called a Block) to show or hide at different sizes. For instance, the ability to cause the Content Module’s sidebar to hide if the site is viewed on a mobile or tablet-sized browser.
  • Ability to control the vertical stacking order of Blocks as the width reduces. For now, if you have a left sidebar on a Module, that sidebar will always appear on top of the Module’s content when the Blocks stack vertically. We want to enable people to control how this functions so that the sidebar can appear below the Module’s content if desired.
  • Options to fine-tune the way in which the responsive feature operates, such as being able to control when specific parts of the design switch from horizontal to vertical alignment. For this release, Builder will handle all of the logic of how this functions internally with few options to control exactly how it works.

So there’s some background, upcoming announcements and a future roadmap for Builder and responsive web design.

In December of this year, Builder will be 3 years old. It’s hard to imagine how far Builder has come in that time as I still recall planning the pre-launch version and all the iterations we’ve released in that time, including 65+ child themes.

I’m excited about Builder and these new responsive features and hope you are too.

Comments

  1. That is great news! Thanks iThemes for your continual improvement to web design but making backward compatibility a priority!

    Looking forward to the release!

  2. Chris,

    Your thoughtful approach to solving the compatibility issue is much appreciated. As a shop who uses Builder it would be a serious problem if all of those sites stopped working when we updated.

    Again, well done!

    • Right – although you don’t have to activate it. I’d highly suggest evaluating it as an update project for those clients. It’s more work for you to make sites responsive … and likely something you didn’t originally include in those initial projects.

  3. I just checked out your demo site on an iPhone 4s. The first video displays perfectly, but the second one is messed up. It goes very tall with giant lettering. I realise development isn’t finished yet, but thought you’d like to know.

        • Ahh yes that site is also responsive. I think you might be referring to a code block. It’s not a video. That’s a block of code that Chris has styled on his site specifically to show in that way to mimic the look of code in his terminal.

    • As far as I can tell, this is a side effect of the way that many mobile browsers are rendering their placeholder videos (since they won’t play the actual video but will instead load it in a video player). I’m still trying to get issues such as those ironed out.

  4. WOOT WOOT! I was so hoping iThemes would bring this feature to Builder. You guys are the best and you really listen to your clients. Can’t wait to use the new Responsive Builder!
    Thanks to all on the team and Chris Jean.

  5. Yehaaa, been waiting for this for ages. I thought you might produce a alternative responsive version of Builder but if you can make it backwardly compatible, that’s even better. Good work guys an’ gals.

    • Thanks Chris – few if any themes do what Builder does in terms of the layout engine … so it complicates it. Other themes have come out with “responsive” themes but they also don’t do all that Builder does. Thus, it’s taken us a bit to figure it out … but having full faith in Chris and his abilities, we were eager for this day to come!

  6. And with this announcement, the future is HERE!

    So exciting. I am so glad to see that you are addressing the need to change the content that displays on mobile as well as the way that it appears. Exactly the right solution.

  7. Thanks Chris and the Builder Team! I know just enough about coding to appreciate how big of a job this was. I’ve had a couple of needs for a responsive theme recently and have been putting off the design change. Glad I did. Thanks for keeping Builder more than relevant in the cutting edge web-design world. After this I can say that I still haven’t found an application that Builder can’t handle!

  8. Great news!

    It will be nice getting back to Builder. All of my new sites have been responsive for the past 8 months. It would be kinda kewl to add SASS or LESS support, but now I’m really asking for too much.

    Good job Chris Jean & Cory

    • We’ve kicked around the idea of adding built-in LESS or SASS support, but the reality is that it probably wouldn’t be the best solution for most of our users. Many of our users are relatively new to CSS, forcing them to learn not only CSS but another language on top of that would be a bit much. In addition, there isn’t just one option, so if we chose one, we’d likely alienate some that would have preferred the other.

      The thing that sealed the discussion was the fact that people who want to use LESS or SASS are fully able to update their child themes to use those tools as desired by using a plugin to tie in the support.

  9. I continue to be delightfully impressed by your proactive, real-world response to your customers needs. It is hugely appreciated and sets you apart as a WordPress add-ons leader. – Pg

  10. That is awesome news guys! I love your prudent and reasoned approach to updating and pushing Builder forward while also giving your customers what they ask for. You indeed wear your crown well Chris… ;)

    One question: As I do mostly custom work I always start from the BuilderDefault 3.2.1 child theme. As it reproduces the basic Builder styling, will it soon be updated for responsive too?

    • All the child themes will be updated following the release of the updated Builder. Since the Default child theme is kept inline with changes made to Builder core, it is going to be updated very shortly after the Builder version is released. It is likely to be updated within minutes of the Builder update release.

  11. Quick question, i’m new to all this Responsive stuff so forgive my ignorance. I am looking at the test site on my Ipad 2 and the last link(Get Builder) on the menu starts a second menu row when I’m on portrait mode. is this normal?

    • Short answer: yes.

      Builder has always wrapped long Navigation modules to cause the links at the end to fall down to a new line. This is unchanged in Builder responsive, so smaller screens are likely to cause navigation wrapping.

  12. Been monitoring the members area, have a couple of existing Builder sites I’ve contracted to go responsive. I need to pull the trigger on one of them this weekend. Any chance of getting a beta copy? I’m running in a dev, staging, production environment on phpFog. This one really needs a facelift http://generationpoolplastering.com/

    Let me know, thanks.
    David

    • It would have been far too early to give you a copy last week. Much has changed since then. We’ve found some areas that needed improving and are busy at work making those needed improvements.

      We just made a breakthrough on one of the big issues plaguing us, so things are moving forward quickly now.

      Sorry that we couldn’t help you out for last weekend. We’re hard at work to ensure that you can get it by this next weekend.

    • Unfortunately we found some roadbumps that caused us to hold off on the launch. We’re busy fixing up those issues to make this launch as smooth and successful as possible.

      As soon as the version is launched, rest assured that we will be making a lot of noise about it. :)

Respond

×

Sale Ends Today! Save 35% OFF BackupBuddy with coupon code BACKUPWP35