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.
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.