Get Inside Unbounce

Subscribe

Product Update: Responsive Design Progress & Demo Video

It’s no secret that Responsive Web Design (RWD) is a big deal when it comes to handling the growing number of devices accessing the web these days. Ever since Ethan Marcotte wrote this article coining the term, it’s been getting more and more attention in the design community.

Google Trends for search term "Responsive"

Almost exactly a year ago, Google announced they were “upgrading AdWords, by rolling out enhanced campaigns,” changing the way marketers were able to segment their traffic between devices. That’s when we really saw our customers take notice. Since then, questions about Responsive have gone through the roof — rocketing it to our most requested feature.

So naturally like any startup, we dropped everything and started building what our customers wanted the most, right? Well… almost.

Identifying an MVP — what do marketers really need?

Responsive Web Design has three core tenets that define it. One of those is the idea of fluid grids, where elements are sized with percentages instead of exact measurements, allowing them to scale and shrink with their container. We decided to hand-code a landing page that we wanted our tool to one day produce, essentially starting with our desired outcome so that we could work our way backwards. Here’s one of our own templates built responsively to demonstrate this “fluid grid” effect as the browser is resized. You’ll notice it has two “breakpoints” (that point when one layout switches to another) to ensure the page is optimized for both mobile and tablet screen sizes as well as desktop:

Test #1. Responsive Fluid Layout

In order to produce a responsive page like this though, our page builder would have to undergo some pretty fundamental changes. Very early on in the development of Unbounce we chose to be as flexible as possible, allowing you to drag-and-drop elements wherever you want. This has been a huge factor in Unbounce’s popularity as most other tools require you to adhere to very rigid layouts.

Knowing we’ll have to support backwards compatibility with hundreds of thousands of our customers’ existing pages, and given the size of our page builder team (we’re hiring!), we took a step back to evaluate different solutions to make our pages mobile ready.

We coded up that same template again with a more constrained approach this time: a single breakpoint between desktop and mobile, both rendering static (non-fluid) layouts. Sure the result isn’t as flashy as the first test, but we felt it solved the problem our customers experience, and would require significantly less time to build. Avoiding a second breakpoint for tablets right now keeps things simple. Plus, given that landing pages are much simpler than websites (you don’t have have any navigation on your landing page, right?) they actually display pretty well on tablets already.

Test #2. Static Layout for Mobile & Desktop

This is when we started defining our MVP (Minimal Viable Product.) We put together a list of the must-have features and improvements our page builder needed in order to produce the above result. The goal here is to get something in front of customers as quickly as possible to start validating that we’re on the right track. That’s where this blog post comes in!

Time for a demo!

We’ve made some exciting progress so far so I’ve put together a short screencast of where we’re at with this MVP. There’s still a lot to do, but we’ll be looking to get this in front of you for hands-on feedback as soon as we possibly can. Also, as I mentioned, we’re hiring so if you (or someone you know) wants to help us solve this problem, we’d love to meet you!

37 CommentsLeave a Comment


  • Reply

    Sarah McCredie

    3 years ago

    So excited for this! Great post and screencast :)

  • Reply

    Corey Dilley

    3 years ago

    Really exciting, Carter.

    I noticed that when you switched to the mobile version, there were already a lot of assumptions made about how you’d like things to scale (like the 66% of the original headline size). Are you planning to have Unbounce try to calculate optimal sizing for customers if they build out their whole desktop version out first? Or are those calculations just made in advance by the template creator?

    • Reply

      Carter Gilchrist

      3 years ago

      Hey Corey, great question! The trick right now is to keep as tight a focus as we can on the MVP until we can truly validate that our customers are happy with the direction we’re headed. So for now that means ignoring any smart auto-layout features and leaving the heavy lifting up to the template creator. Once we can confidently say that this approach works, we’ll shift our focus on making the entire page building experience easier with layouts, grids and other “auto-magical” tools. Justin has already done some really exciting prototyping of layout functionality (in addition to building most of what you see in the demo) that we’ll likely jump back into after we validate this MVP.

  • Reply

    Cole Derochie

    3 years ago

    This is awesome! Great to see it functioning end-to-end.

  • Reply

    Liesl Barrell

    3 years ago

    Super, super cool! Love the way content & form field updates are retained across versions.

    Very exciting stuff, thanks for this insight, Carter!

  • Reply

    Sebastian Abboud

    3 years ago

    Carter, awesome! More great stuff from Unbounce. Looking forward to digging into it.

    • Reply

      Carter Gilchrist

      3 years ago

      Thanks Seb!

  • Reply

    Lou Sturm

    3 years ago

    Super exciting, one of my favourite posts! I love how you clearly demonstrate Responsive Web Design means so much more than just being mobile friendly.

  • Reply

    Sheldon Payne

    3 years ago

    This is very exciting. We were actually considering switching to another provider because this wasn’t an option. Can’t wait to give this a try for our business and more importantly for our clients.

    • Reply

      Carter Gilchrist

      3 years ago

      Thanks Sheldon! We know how hard it’s been for our loyal customers who love Unbounce but just badly need this feature. I’ll be extremely excited when I can write another blog post announcing our launch of Responsive!

  • Reply

    Manuel Castillo

    3 years ago

    Good job guys, Unbounce really ‘listens’ to us customers

  • Reply

    Mohamed Assem

    3 years ago

    Good news, any info about the release date of this badly-needed feature ?

  • Reply

    MattsMedia

    3 years ago

    This is a very nice feature, thank you!

    • Reply

      Carter Gilchrist

      3 years ago

      Thanks Matt, can’t wait to get your feedback on it when we’re ready to open it up.

  • Reply

    Jen Gordon

    3 years ago

    Looks great guys! So excited to have this feature added :)

  • Reply

    Michael Wagner

    3 years ago

    awesome, is there any non-official ETA on the launch of this?

  • Reply

    Jonathan Malkin

    3 years ago

    Definitely want a responsive page. I am hesitant about using Unbounce for anything until the pages are responsive. Mobile accounts for around half of all visits so it’s critically important but so is desktop so need a page that accounts for both.

  • Reply

    Muhammadatt

    3 years ago

    Any updates on the rollout of these feature? Almost 2/3 of the traffic on my new Adwords campaign is coming from mobile devices, so I will unfortnately be forced to switch if this is not available ASAP.

  • Reply

    Jon

    3 years ago

    Any updates on ETA? Comments below talk about an update in a week but that was a month ago..?

    • Reply

      Carter Gilchrist

      3 years ago

      Hi Jon, that’s my fault for taking so long to update. I’ve been in recruiting mode growing our product team for the past few weeks which has taken up most of my time. My goal is to have a post up by the end of this week though. It’s mostly going to talk about the fact that we are currently using our Responsive feature for our own marketing team, and the first official landing page we’ve released to be responsive is for our upcoming marketing conference which you can see here: http://www.calltoactionconf.com/. Sorry for the delay!

    • Reply

      Sarah McCredie

      3 years ago

      Hi Jon, Carter wrote an update on where we’re at on responsive over here: http://inside.unbounce.com/product-dev/responsive-progress-update-2/

  • Reply

    komakost

    3 years ago

    Awesome stuff Unbounce homies. I really, really can’t wait for this type of UI implementation. As a marketer turned web developer, this is huge from an ROI standpoint for an end consumer. I ended up spending $4k+ acquiring the skills to code my own pages and then split testing them with Optimizely.

    If digital marketers can avoid that, especially since they typically do not have the interest in truly learning about the products the bring to market, this is huge.

  • Reply

    Henrik

    3 years ago

    I really can’t use you until you get the act together on this. Desktop is dead, and your mobile templates are boring on anything above a phone.

    • Reply

      Carter Gilchrist

      3 years ago

      Hi Henrik — we’ll be opening up our beta for Mobile Responsive next week, so please make sure you’ve signed up here and we’ll get you access asap! get.unbounce.com/responsive-beta-access/ If you’d rather wait, we’ll be launch publicly mid-November.

  • Reply

    Rob Heath

    2 years ago

    How do you center text tho? In your tests above, your text in the 1st section goes from left aligned to centered. I can’t do this in Unbounce. I hope the solution isn’t to duplicate the content and hide / show depending on the view. That’d double my work.

    • Reply

      Carter Gilchrist

      2 years ago

      Hi Rob,
      The demos in this post were proofs of concept, hand coded (not built with Unbounce) to help demonstrate the direction or dev teams were headed in. Along the way we had to make various tradeoffs, and one of the big ones was in regards to text. Unfortunately, there is no way today to make text aligned differently between Desktop and Mobile, and the reason is because our text element relies upon a 3rd party plugin that makes it impossible for us to apply different styles between breakpoints. This has bumped up the priority of re-building a better text editing tool that will accommodate more control of text between breakpoints (it’s the next big one on the list, aside from allowing copy & paste of elements between pages.)

      Hope that helps explain things, and that you can work around the issue until we have a new text editing tool built!

  • Reply

    Prashant D

    10 months ago

    Hi Guys,

    You need to more work on responsive part, because of in ipad version it’s not look responsive…..If you have already work on please inform me.

Leave a CommentPlease be polite. We appreciate that.

Your Comment