Design Responsive Websites In The Browser With Webflow

Advertisement

This article is the first part of a series of articles on emerging responsive design tools. Today, Richard Knight explores the advantages of Webflow and how you can use it today to build responsive websites — perhaps a bit faster than you would build them otherwise. – Ed.

New tools have emerged to address the challenges of responsive web design — tools such as Adobe Reflow1 and the recently released Macaw2. Today, we’ll look at one that I have tested extensively in the last few months. Though not perfect, it’s been a leap forward in productivity for the team that I work with. Its name is Webflow3, and it could be the solution to the problems you face with static design comps produced in Photoshop and Fireworks.

1-introducing-webflow

This article will take you step by step through the process of creating a responsive website layout for a real project. As we go along, we’ll also identify Webflow’s advantages and where it comes up short.

Getting Started

Getting started in Webflow is a relatively simple. Head over to the website4, create an account, and give the free trial a go. Make sure to open the interface in the latest version of Google Chrome because it is currently the only browser that is fully supported.

Before beginning a design, decide whether to start it from scratch or to work with one of the many templates. For this tutorial, we’ll choose the blank website template.

2-introducing-webflow5

Take a minute to mouse over the tooltips in Webflow’s interface to become familiar. There are no shape tools or layers in the traditional sense. There are also no filters or effects or even brushes. Webflow keeps everything focused on what the browser can do; so, knowing the basics of HTML and CSS is enough to get up and running.

wf_toolbars_5006

Toolbar Overview

The left toolbar handles various functions, such as publishing your website to be shared with a live link and switching between device views (using the laptop and phone icons). You’ll use this toolbar mostly for the latter and for entering preview mode, which hides Webflow’s interface and shows what your website will look like when published.

webflow-left-bar-5007
(View the entire toolbar8)

The right toolbar (shown below) consists of six tabs. The first tab (“+”) lets you add structure and HTML content elements to the page. Each item you add to the body of the page comes with default styles that you may overwrite. Whenever you need to add content, you’ll come back here. I always start with a section, a container and columns because they all have predefined behavior that changes according to the breakpoint.

A section is a div set to the full width of the viewport. A container sits centered within a section and constrains the widths of elements such as headings and paragraphs, while columns divide containers evenly in percentages.

wf_layout9
(View the large version10)

Next is the CSS tab, where we’ll spend most of our time. Here, we can assign classes to the element that is currently selected and then style it as we see fit. All of the CSS that you would normally write by hand is shown here. As soon as you change a class, the CSS will update immediately without your having to refresh. Be sure to examine the advanced toggles, which allow for control of other things such as positioning and the behavior of background images in their div.

wf_css_preview11
CSS options (View large version12)

The third tab is for settings of the element that you select. Here, you can control things like the visibility of content at certain screen sizes, and you can add link elements to other pages in your project. This panel has to do mainly with non-style-related aspects and is especially handy when you’re working on complicated elements, such as the navigation menu.

wf_settings
Control visibility and even add links.

Fourth from the left is a useful structure navigator that visually displays the contents of your website in a folder-like tree. If you need a heading to sit in a different div or container, just click and drag it to where you want it to be. I often refer to this panel as I go to make sure that certain items are in the right divs and that my styles cascade appropriately. It’s also useful for selecting content that might be hard to click with the mouse because it is behind other elements.

wf_structure
These elements will be represented by the class names that you assign to them, so give everything a straightforward name.

Next up is the class manager, which shows all of your CSS classes at once. You can use it to edit a particular class (see the small wrench icon) and to quickly remove any class that isn’t being used. It’s handy, but you will usually just use it to clean up classes that you’ve discarded or to quickly change a class that’s used multiple times in different places.

wf_css_classes
A quick view of all of your CSS classes.

Last is the symbol library. Complex items, such as the primary navigation and the footer, can be created as symbols, which can be reused on other pages in your Webflow website. This is a great time-saver, but know that symbols are usable only in the project they were created in.

symbol_library

Regarding Web Fonts

Before we begin with the project, it’s worth mentioning that Webflow supports web fonts to a certain extent. All of the usual standbys, including Arial and Verdana, are available, and you can use any font in Google’s library, as well as any you have in TypeKit. However, any font not provided by either Google or Typekit cannot be integrated in Webflow’s design view (an obstacle that my team faced).

Applying your own font using Webflow’s custom code area is possible. Do this by linking to it in the head of your website and then using a style tag to specify where to use it. However, the font will appear only after you’ve published the website, making it frustrating to refine your typography for different breakpoints.

wf_custom_code_50013
An example of how to apply your own hosted web font.

Designing In The Browser

For this tutorial, we’ll work from the desktop view down to mobile. This is deliberate: In Webflow, every style that you create in the desktop view will cascade down. It’s weird at first, but you do get used it. The rationale is that when you change a style in the tablet view, it will change for everything below. This saves time when something is broken in one media query because it will often be broken in the narrower views.

We’ll find what we need to begin in the “+” icon (the tab to add elements). First, add a section, and then drag and drop a “navbar” into that section. Then, select the image element under “Media,” and drag it over to the logo area of the navbar. Once it’s highlighted, let go of the mouse, and Webflow will drop in a placeholder image. I’ve replaced the default image with my company’s logo. Essentially, what we’re doing here is using divs and HTML pieces that have a predefined behavior in Webflow; while empty and lacking any notable styles, they will form the basic structure of the website.

wf_navbar_50014

Now, let’s add the rest of the navigation, give it a background color, and change the fonts. My company uses a standard gray for the background of its navigation. Add a background color easily by selecting the navbar section with your mouse and then going down to the background area in the style tab. Once you’ve chosen a color, click “OK” to confirm.

wf_navbar_styles15

Next, we need to add a section that sits above the navbar. This will have a link and some copy. Click and drag the section so that it sits above the navbar, and then add a container so that our new content stays centered in the browser window, like the navigation below it.

wf_votenow_50016

Above, I’ve added a plain-text block for the deadline copy, as well as a text link for our call to action. Both are assigned separate classes, set to display as inline-block and with the text aligned right. I’ve also adjusted the padding by dragging with the mouse on the arrows under “Position,” so that they both appear vertically centered. Finally, I’ve given this new section a background gradient.

Notice under “Position” how the padding values are blue. This lets us know that we’ve changed the default styling of 0. If it were a yellow number or a label, this would mean that the selected element’s style is inherited.

wf_inherited_fonts
The font and line-height fields have yellow labels, letting you know that their styles are inherited.

With the styling done for the header, let’s set the structure of the main body. Our website needs copy on the left and an image on the right for tablet and desktop views. Again, add a section and a container, and define a grid by adding the column element to that container. By default, we’re given two columns. You can change this to a different number at any time by tweaking the column’s setting.

wf_bodysection_50017

I’ve gone ahead and added a large placeholder image to the right column and paragraph copy to the left. I’ve also added two buttons. Working with long copy in Webflow gets tedious because each paragraph has to be added as its own element. It would be nice just to work with one text-box element, in which you can paste all of the copy at once and proceed to style it, as in Macaw.

For now, let’s adjust the paragraph’s line height, add style to the buttons and add the remaining content.

wf_bodysection_50018

Last, we’ll add the footer by adding a section to the bottom of the page. We’ll apply a background color and throw in one last container to house our new text links and copyright. Another annoyance is that Webflow doesn’t yet allow for descendant selectors. I’d much a prefer a visual way to target links in the footer section with styles akin to the following:

.footer a {
   text-decoration: none;
   font-size: 12px; }

Webflow currently requires everything to be assigned a class, even if it’s already in a div that has a class that you could reference. While not a deal-breaker, a little more finesse would be nice.

wf_footer_50019
Every styled element requires its own class in Webflow.

With the footer done, our desktop layout is in pretty good shape. Now it’s time to tackle any presentation issues that we find at the other breakpoints.

Fixing Breakpoints In Webflow’s Responsive Views

One of the main differences between Webflow and its competition is that you cannot define your own breakpoints. Webflow is a custom framework based heavily on Bootstrap, so a lot of the automatic behavior for content elements derives from that. You could view this as a hindrance or an advantage, depending on your situation and your project’s needs. Our current e-commerce website leverages Bootstrap, so using Webflow to prototype makes sense for us. If your website requires unique breakpoints or you already use another framework, such as Foundation, then you might have to try something else.

Let’s look at the tablet view first. Nothing completely breaks, as you can see below, although we might want to add more space between the footer and the rest of the page.

wf_tabletview_50020
Webflow’s custom Bootstrap framework does most of the work to resize our content.

Next up is the phone view in landscape mode or, as I like to think of it, a very wide phone breakpoint. As you can see in the first screenshot below, things are getting messy. Our image in “Column 2” collides with our callout box. Also, that image is pretty large for mobile phones, so let’s shrink it by changing its width to 40%, leaving the height set to auto. For our last change, I’d prefer that our buttons appear on small screens as block elements, with widths of 100%. Check out the before and after:

wf_phone_landscape_500
Webflow makes it easy to fix a broken layout.
wf_phone_landscape_fixed_500
The same breakpoint with our changes applied.

That’s a bit better. As you become familiar with Webflow, you might decide to abandon columns altogether in certain instances because they dictate the order of your page. Suppose we wanted the image to be the first visible item below the primary navigation on phones. Because we’ve used columns and thrown the image into the righthand column, we cannot reorder it on mobile; the left column will always be stacked on top.

If we used our own divs with our own CSS rules, we could easily circumvent this order with some floats. So, even though columns are easy to work with and they come with predefined padding and their widths switch to 100% at low breakpoints, they can also be limiting.

Before moving on, let’s look at the default styles for the navigation menu when expanded. We get there by selecting the navbar and going to the settings tab. Once you’re in settings, click “Open Menu,” and you should see something like this:

wf_menu_expanded_50021
Menu before

That’s a lot of dark gray, with no indication of the boundary between menu items for users of touch devices. Select a link and proceed to change the style. Let’s also separate the links with a bottom border. Other options are available to play with animation, but I’m happy with the defaults for now.

wf_menu_expanded_fixed_50022
Menu after

Much better. I’ve inverted the colors somewhat to make the menu items stand out more, and I’ve added a box shadow to give a sense of depth in case it overlaps with elements like buttons. Of course, you can refine it further, specifying hover states and pressed states, but for now let’s look at the smallest breakpoint and see how our changes cascade down.

wf_phone_portrait_500

Not bad but the header takes up a lot of space. Considering that browser chrome will take up space, too, let’s shrink it a bit.

wf_phone_portrait_fixed_500

There we go. You can view the result on the demo page23. If you’re on a desktop machine, resize your browser to see how the layout changes. One of the last items we’ll look at is Webflow’s code-exporting feature.

Exporting The Code

In the left toolbar is an icon that allows you to export your work as a full ZIP file, with the HTML, CSS and all images that you’ve used. At this time, there are no options to tweak how your website gets exported. Having the option to choose between LESS files and one master style sheet would be nice in future, as would an option to point to the paths where images are publicly hosted.

wf_code_export_50024

Webflow’s code is relatively clear and straightforward enough. Being design-focused, it does throw just about anything it can into a div, and you’ll see a lot of custom classes that look akin to Bootstrap 3. It also includes a separate style sheet for various fixes, so your website should work in most browsers. Your mileage with the exported code may vary, depending on what you need to do with it. The developers on our team found it easier just to replicate my interactive mockup in Bootstrap 3, rather than try to build on top of the code.

We did this for two reasons. First, our website is a Backbone application that needs functionality such as timed user sessions, Google Analytics and an administrative back end. Secondly, Webflow’s code does not support Internet Explorer 8, which is a requirement for our user base, unfortunately.

Conclusion: A New Tool For Designers

Webflow is a tool targeted at designers who are looking for an alternative to Photoshop and Fireworks for responsive web design. It’s not an all-encompassing solution for creating websites — at least not yet — but by enabling me to focus on layout, interaction and content behavior without having to code, it sped up our team’s design phase immensely.

And while we didn’t use the code that Webflow generated, we still found it to be more collaborative, allowing the developers who I work with to see the work I was doing on their actual phone, tablet and desktop browsers. They could ask questions any time, and I was able to iterate on the fly. Sitting down to actually build the website was easier because we had an interactive prototype to refer to.

I still use Photoshop as I believe it was intended — to crop and retouch images — but when I’m asked to make a new page or a new website, I’ll start working in Webflow. And I’ll continue to refine and expand the visual prototype until we feel we’ve taken it as far as we need to. Then, we’ll move into development, still using Webflow to prototype or test ideas if needed.

On today’s responsive web, a static comp raises more questions than it answers. Sure, you’ll be able to convey the look and feel, but so many questions remain that both designers and developers can get frustrated. As designers, we try to resolve these questions by creating accompanying documentation, such as a web style guide or even sometimes by building a basic page ourselves.

Developers who receive static comps to build from either have to infer missing details or go back to the designer. How does the navigation adjust? What are we envisioning for hover states or for pressed states for buttons? How will the typography change to accommodate different screens? How do we denote an active page? The list goes on and on.

Webflow fills this gap. Details can be inferred because they’ve been realized and are viewable in the browser. It enables you as the designer to experiment and prototype interactive ideas on the fly. How the tool fits in your process will depend on you and the needs of the project. However, I strongly recommend giving it a shot. It might surprise you.

Other Resources

  • Video Tutorials25,” Webflow Help
    This free series of videos walks you through the UI and how to build websites in Webflow.
  • Forums26” Webflow Community
    An active and knowledgeable community of people already use Webflow.

Many thanks to Shawna Jones, Jeffrey Love, Shawn O’Neill and David Belangér for supporting my use and testing of Webflow throughout our projects.

(al, il)

Footnotes

  1. 1 http://html.adobe.com/edge/reflow/
  2. 2 http://macaw.co/
  3. 3 https://webflow.com/
  4. 4 https://webflow.com/
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/03/2_templates1-e1394009624163.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/04/wf_toolbars.png
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/03/3_blank_canvas3-e1394177800453.png
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/03/3_blank_canvas3-e1394177800453.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/04/wf_layout_full.png
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/04/wf_layout_full.png
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/04/wf_css_full.png
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/04/wf_css_full.png
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/04/custom_code.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/04/wf_navbar.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/04/wf_navbar_styles.png
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/04/wf_votenow.png
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/04/wf_bodysection.png
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/04/wf_body.png
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/04/wf_footer.png
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/04/wf_tabletview.png
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/04/wf_menu_expanded.png
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/04/wf_menu_expanded_fixed.png
  23. 23 http://mec-election-smdemo.webflow.com/
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/04/wf_code_export.png
  25. 25 http://tutorials.webflow.com/
  26. 26 http://forum.webflow.com/

↑ Back to topShare on Twitter

Richard Knight is a Vancouver-based web designer for Canadian outdoor retailer Mountain Equipment Co-op. Experienced in both copywriting and design, over the years he's been able to work with global brands such as McDonald's, Quiksilver, Roxy and DC Shoes. You can catch him on twitter @knightrick.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    So. Macaw for the browser. Neat.

  2. 2

    Guilherme Harrison

    August 5, 2014 3:30 pm

    I’m trying out UXpin and loving it. Webflow is awesome as well, but the former provides some cool tools like canvas model, pernosa building and other interesting things for those more inclined to Interface Design.

    • 3

      We actually used UXPin in conjuction with this project. Very cool wire-framing tool. I liked that it had basic interactions built in to test user flow.

  3. 4

    Admittedly, not bad in comparison to the tonnes of other apps out there for RWD. Seems enjoyable to use. But these things are still being aimed at designers who can’t code. Instead we should be encouraging designers to code.

    I’ll stick with Brackets. It means I can *actually* design a good-to-go website in the browser. Just because the app outputs code, it doesn’t mean it’s suitable, optimal, or even useable code. I haven’t tried webflow, but it likely outputs garbage (as a lot of these tools do). To me, this is a waste of time (as the writer mentioned, none of the code was used). Solution: learn the best of both worlds.

    I understand all of the problems mentioned in the article, and Webflow is certainly a solution for that, but in my opinion it creates a list of more problems that could be solved by simply being able to design-code in the browser, quickly. And I believe the only way to do that is to have a text editor with a great set of tools and beautiful UI. I understand coding isn’t for everyone, but still, it’s a massive timesaver. That’s why I use brackets, I love it’s extensibility and minimal UI. Here’s something I made with it: http://airwalk-design.com – cheers.

    -D

    • 5

      Guilherme Harrison

      August 5, 2014 5:13 pm

      @Daniel Schwarz
      I’m a designer that codes and I at first discarded this kind of app for the same reasons, but now I see Webflow (and similar tools) as a way to speed up the workflow compared to Photoshop, since it gives a starting point on the code. A crappy one, yes, but at least I have classes, id’s and a few lines I can keep.

      • 6

        Exactly, I think of Webflow, Macaw and others as a better starting point (if needed) for a mock-up than a PSD.

        • 7

          $180 (for Macaw) is a steep price to pay for a “starting point”. I think it’s possible to produce professional results with these tools. For seasoned designers, they may be a hindrance than an asset to their existing processes. But for those starting out or looking to speed things up, these tools are fantastic.

  4. 8

    Would be nice to see a little more evolved design. This is pretty basic and something that doesn’t really show any value to this product. If this was the design of your site you’d be better off downloading a template. I see the value of designing responsively, but the control of Photoshop means I’ll stay there.

    • 9

      Hi Jeff,

      The design shown was intended as a simple example for the purpose of this tutorial. It’s not meant to be a showcase. For better examples of designs done with Webflow, I encourage you to check out their site or visit their forums under Show and Tell.

    • 10

      Mark Louie Espedido

      August 6, 2014 4:31 am

      If you are interested, they have a video showing how the Webflow website was built within the Webflow tool. http://www.youtube.com/watch?v=gIVYQw8Ei-w

  5. 11

    for first interactive prototypes I use Adobe Muse. Yes, not runs on browser, but is much more versatile, fast and intuitive to export to html, and upload on my ftp to show to the client.

    • 12

      I thought about Muse as well, but I don’t want to buy into the Adobe CC subscription model. It’s kind of funny, because I had CS5 Web Premium. PS, AI, DW, FL, FW, Acrobat, etc. And I was so amped for “CS7″. When CC was announced and CS discontinued, I swore off business with Adobe and chose just to make do with what I had for as long as I could.

      I couldn’t understand their “1 app @ $20/mo, 2 apps @ $40/mo, or all 20 apps @ $50/mo” price structure. Nor do I like the feeling of knowing that I don’t own the software. So CC just isn’t for me. But now that I look at how much other software is out there from great companies, if I had to be honest with you, PS and AI are all I really use. And if push comes to shove, there are alternate photo/vector editors out there I’d be willing to switch to. I’ve been very disappointed with Adobe’s web platforms. DW… CFB… I moved from those to Sublime, and later to Brackets (by Adobe, yeah, but Open source).

      I just don’t like where Adobe’s going nowadays. Don’t take that as judging; if you get use outta Adobe apps, more power to ya. I just find it odd cause I can remember a time when I used to be such an Adobe fan. Now I have a lotta hatred for them. Hmmm.

      Anyways, aside from that sidenote, I like the idea of “Designing in the browser” It’s where your code is going to ultimately go. I would adore Google (doubly so) if they spearheaded a team to build an in-Chrome tool for this. The problem is that once you tie in application languages (anything beyond static HTML/CSS), there’s often a disconnect between being able to do this directly in the browser/app and the need of the server to process the requests to render data “live”. Still, I think great progress is being made here.

  6. 13

    for prototyping maybe, wouldnt code a site in there

  7. 14

    I just had a brief look at it, but it seems to me, that i might want to spent some more time with this “system”. Exellent :-)

  8. 15

    Looks nice but way to complicated and overloaded with functionality. I know it is alway a trade complexity vs easy to use but when it just comes prototyping rather use something like http://colorfully.me for my WP designs. I just set up the blog and roll the theme. How could/should one design complex theme/site with Webflow? Thank youbut let me pass…

  9. 16

    Seems like http://www.webydo.com/ is another one of those kinda DIY sites?

  10. 17

    I think it is better to learn the few things of CSS that allow responsiveness… it is not so complicated, really!
    At the end you will have to, so… it is better not to waste time learning still another library or program

  11. 18

    the one and main thing that bugs me about this apps is the interface. There’s Way to much of it. To many kitchen sink options. I would rather have a code box with auto complete that starts to fill in the tool bar as I quickly add some code. Too many options and tools are visual noise and just slows down my thinking and makes me hunt for that tool to tweak things. And tabs ARE VILLAINS.

    But I love the option to also quilt layout things. Its this merger that really needs to happen.

  12. 19

    Cocopine Web Solutions

    August 10, 2014 2:06 pm

    Responsiveness is not just about a few media queries and re-sizing a few media elements. A 900 Kb site delivered to desktop should be a 200 Kb website delivered to smartphone. That is true responsiveness. Give me a tool that optimizes and re-sizes and you will have a winner.

  13. 21

    SVN or GIT support?

  14. 22

    Now i’m JT and new to at this point so We’re hoping to gain some expertise

  15. 23

    We found Webflow extremely useful, and decided we’d do a video tutorial on how to build an interactive prototype with it: https://www.bloc.io/webflow-build-a-website-without-code

    The interface is very intuitive, and you can build out a site relatively quickly, either for prototyping or even production. If it doesn’t replace a full portion of your workflow, it can definitely help speed up a few steps in working and delivering projects to completion.

    Check it out and let us know your thoughts!

  16. 24

    Too bad that you can only design websites for small resolutions. I’ve been getting comments from our team about the designs not filling out the page as they are stopping at 960. Webflow is currently working on their canvas to make it possible to have the 1200px media query. The problem is that 1200px+sidebar won’t fit on most monitors, so they have to make the canvas more fluid. Meh

  17. 25

    Hey Richard,

    Thanks so much for putting this review together. It’s one of the best ones I have found on Webflow. One of the biggest questions I have about webflow is how easy it is to render data with Angular or Backbone once exported.

    Can you comment on Macaw… do you know if it’s easier to bind with a js framework than webflow ?

    Thanks,

    John

    PS:
    I can see that the approach you took, of using webflow strictly to build a really good mockup is probably the safest route.

    Our goal is to build a tool set, where we can go back and change a page in webflow, re-export the website, run the tools, and re-integrate into our application.

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top