There are an emerging new set of design tools available now to accommodate responsive Web design challenges like Adobe Reflow, and the recently released Macaw. Today we’re going to look at one I have tested extensively over the past few months, and although it’s not perfect, it’s a been a leap forward in productivity for the team I work with. Its name is Webflow and it could be your solution to the problems faced with static design comps produced in Photoshop and Fireworks.
This article will take you through the step by step process of creating a responsive website layout based on a real project. As we go along I’ll also identify Webflow’s current advantages and the areas where it can come up short.
Getting started
Getting started in Webflow is a relatively simple process. Head over to their site, make an account and give the free trial a go. Make sure you open the design interface in the latest Google Chrome, as it’s currently the only browser that fully supports it.
Before you begin a new design, you need to decide whether you’re going to start a website from scratch, or work with one of their many templates. For the purpose of this tutorial, we’re going to choose the blank site template.
Take a minute to mouse over the tooltips within the Webflow interface to get familiar. There are no shape tools and layers in the traditional sense. There’s also no filters and effects, or even brushes. Webflow keeps everything focused on what the browser can do, so if you know the basics of HTML and CSS it’s enough to get up and running.
Toolbar overview
The left-hand toolbar handles various functions such as publishing your site to a live link that you can share and by using the laptop and phone icons you can switch between device views. You’ll use this toolbar mostly for the latter and entering preview mode, which hides the Webflow UI and allows you to see what your site will look like when published.
Below, you’ll see the right-hand toolbar consists of six tabs. The first tab (the + icon) lets you add structure and HTML content elements to your page. Each item you add to the body of the page comes with default styles you’re able to overwrite. Whenever you need to add more content you’ll come back here. I always start with a section, container and then columns because they all have predefined behavior that changes depending on the breakpoint. A section is a div set to the full width of the browser window. A container sits centered within a section constraining the width for things like headings and paragraphs, while columns are used to divide up containers evenly in percentages.
Next is the CSS tab where we’ll spend most of our time in Webflow working. Here we can assign classes to elements we currently have selected and then proceed to style them however we see fit. All of the CSS one would normally write by hand is on display here. Once you’ve changed a class, you’ll see the updated CSS immediately take effect without the need to refresh. Be sure to examine the advanced toggles which allow for further control of things like positioning and how background images behave within their div.
Above: CSS options See at full size.
The third tab is all about settings for any particular element we select. Here you can control things like visibility for specific content at certain screen sizes and add link elements to other pages in your project. This panel has more to do with non-style related tasks and can be especially handy when working on more complicated elements like a navigation menu.
You can control visibility and even add links.
Fourth from the left is a useful structure navigator that visually displays the content of your site in a folder-like tree. If you need a heading to sit in a different div or container, just click and drag it up to to where you want it to be. I often reference this panel as I go, making sure certain items are in the right divs and my styles are cascading appropriately. Additionally, it’s useful for selecting content that, possibly due to being behind other elements, would be hard to click on with your mouse.
These elements will display as the class names you assign them, so be sure to give everything straightforward names.
Next up is the class manager, which allows you to see all your CSS classes at once. You can use it to edit a specific class (see the small wrench icon) and quickly remove any classes that aren’t being used. While handy, you will usually only use it to clean up classes you’ve since discarded during a project or to do a quick change to a class that’s being used multiple times in different places.
A quick view of all your CSS classes.
And lastly is the symbol library. Complex items like a global navigation or footer portion of a website can be created into a symbol which allows you to use it again for any new pages within your Webflow site. This can be a great time saver but be aware that any symbols you make are usable only in the project they are created in.
Regarding Web Fonts
Before I start, it’s worth mentioning Webflow supports Web fonts to a certain extent. All the normal standby’s like Arial and Verdana are available, and you can even use any font from Google’s font library as well as any you have on TypeKit. However, be advised that if you use a font that isn’t from those two providers, which is the case for my team and I, integration is not possible within the Webflow design view.
It is still possible to apply your own font using Webflow’s custom code area. This is accomplished by adding the necessary links to it within the head of your site and then using a style tag to specify where the font gets used, but you’ll only see it applied after you publish the site – making it difficult and frustrating to refine your typography for different breakpoints.
An example of how to apply your own hosted Web font.
Designing within a browser
For the purpose of this tutorial, we’ll be working from desktop view down to mobile. The reason for this is deliberate: in Webflow every style you create in the desktop view will cascade downward. It’s weird at first but you do get used it. The idea here is when you change a style in tablet view, it is changed for everything below. This can save time when something is broken in one media query as it’s often broken in the other smaller views.
From the + icon (add element tab) we’ll find what we need to begin. First, add a section then drag and drop a navbar into that section. Afterward, 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 a placeholder image for now. 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, and while empty or lacking any notable styles, they will be the basic structure of the site that we can work with later.
Now let’s add in the rest of the navigation, give it a background color and change the fonts. My company uses a standard grey for the background of our nav. You can add a background color easily by selecting the navbar section with your mouse, then going down to the background area within the style tab. Once you’ve chosen a color, click OK to confirm.
Next, we need to add another section that sits above the navbar. This will have a link and some copy. Click and drag the section so it sits above, then add a container so our new content stays centered within the browser window like the navigation below it.
Above, I’ve added a plain text block for the deadline copy as well as a text link for my call to action. Both have been assigned separate classes, are set to display as an inline block and are text aligned to the right. I’ve also adjusted the padding by dragging with my mouse on the arrows under Position so they both appear vertically centered. Finally, I give this new section a background gradient before moving on.
Notice under Position how the values of padding are blue. This is to let us know we changed the default styling of zero. If it were a yellow number or label, this means the selected element’s styles are being inherited.
The font and line height fields have yellow labels, letting you know those styles are being inherited
With the styling done for the header, let’s start getting the structure we need for the main body. Our site needs copy on the left and an image on the right side for tablet and desktop views. Again, add a section, a container and now use a grid by adding the columns 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 settings.
I’ve gone ahead and added a large placeholder image to the right column, and the paragraph copy I need to the left. I’ve also added two buttons. Working with long copy in Webflow can get tedious given that each paragraph you need has to be added as its own element. It’d be nice to simply work with one text box element like in Macaw, where you can paste all the copy you need in its entirety at once and proceed to styling it.
For now I’m going to adjust my paragraph’s line height, add style to the buttons and add in the remaining pieces of content.
Lastly, I’ll add the footer by adding a final section to the bottom of the page. I’ll apply a background color and throw in one last container to house my new text links and copyright. Another item I find irksome about Webflow is at this point it doesn’t allow for descendant selectors. So in the case where I have a link in the footer section, I’d much a prefer a visual way to target them with styles akin to:
.footer a text decoration: none; font-size: 12px;
But Webflow currently needs a class assigned to everything, even if it exists already in a div with a class you could reference. While not a deal breaker, it’d be nice for a little more finesse.
Any content that is styled needs its own class in Webflow
With the footer done, the desktop layout is in a pretty good spot. Now it’s time to tackle and fix any display issues we find at the other breakpoints.
Fixing the Breakpoints in Webflow’s Responsive Views
One of the main differences between Webflow and its competition is you are unable to define your own breakpoints. This is because Webflow uses a custom framework based heavily on Bootstrap, so a lot of the automatic behavior for content elements is derived from that. This could be seen as a hindrance or an advantage depending on your situation and your project needs. Our current e-commerce site leverages Bootstrap so using Webflow to prototype makes sense for us, but if your site requires unique breakpoints or you’re already using another framework like Foundation, you may have to try elsewhere.
Let’s take a look at tablet view first. Nothing is completely broken as you can see below, though I might add more distance between the footer and body of the page.
Webflow’s custom Bootstrap is doing most of the work to resize our content
Next up is phone landscape or as I like to think of it: a very wide phone breakpoint. As you can see in the first picture below things are getting messy. My image in column 2 is colliding with my callout box. Also, that image is pretty large for mobile phones now, so let’s shrink that by changing its width to 40% with the height still set to auto. For my last change I’d prefer on all small screens that my buttons be displayed as a block element with 100% widths. Check out the before and after.
Webflow makes it easy to fix broken layouts
The same breakpoint with my changes now applied
That’s a bit better. As you become familiar in Webflow you may decide to abandon columns all together in certain instances because they dictate the order of your page. Say, for instance, that we wanted the image to be the first visible item below the global navigation on phones. Because we’ve used columns and thrown the image into the right-hand column, there is no way for us to reorder it on mobile; the left column will always be stacked on top. Now if we used our own divs with our own CSS rules, we could easily circumvent this order with some floats. So while columns can be easy to work with and come with predefined padding and switch to 100% width for smaller breakpoints, they can also be limiting.
Before we move on we should take a look at what the default styles are for the navigation menu when it’s expanded. We can 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. That’s a lot of dark grey with no indications of boundaries for touch. Select a link and proceed to change the style. I’m also going to add some lines to separate each link with a bottom border. There are other options to play with the animation but I’m good with the defaults for now.
Menu before
Menu after
And there’s the fixes. I’ve inverted the colors somewhat to make it stand out more, and I’ve added a box shadow to give a sense of depth in case it overlaps with elements like a button. Of course you can refine even further, specifying hover states and pressed states, but for now let’s take a look at the smallest breakpoint and see how our changes cascaded down.
Not bad but the header in the picture above is taking up a lot of space. Considering some users’ browser window will also subtract from this space, I’m going to shrink it a bit.
There you go. You can view the final results here. If you’re on a desktop machine, resize the browser window to see how the layout changes. One of the final items we’ll be taking a look at is the code export feature that Webflow offers.
Exporting the code
On the left hand toolbar you’ll find an icon that allows you to export your work as a full zip with HTML, CSS and any images you’ve used. At this time the export doesn’t have any options to tweak how your site gets exported. It’d be nice to see this expanded on in the future to allow a designer to choose between possibly .less files or one master style sheet. Even an option to point images to a path where they’re publicly hosted would be useful.
Webflow’s code is relatively clear and straightforward enough. Being a tool that’s focus lies in design, 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 stylesheet for various fixes so your site should work in most browsers. Your mileage with the exported code may vary depending on what you need to do from this stage of the project. The developers on our team found it easier to simply work from my interactive mock-up and replicate it themselves in actual Bootstrap 3, rather than trying to build on top of this code.
We did this for two reasons: first, our site was a Backbone application that needed functionality like timed user sessions, Google Analytics and an administrative back-end. The second was Webflow’s code did not support Internet Explorer 8, which unfortunately is a requirement for our user base.
In summary: a new tool for designers
Webflow is a tool targeted at designers who are looking for an alternative to Photoshop and Fireworks when it comes to Responsive Web design. It’s not an all-encompassing solution to website creation, at least not yet, but by allowing me as a designer to focus on layout, interaction and content behavior without needing to code, it sped up our design phase immensely. And while we didn’t use the code Webflow generated, we still found it more collaborative, allowing the developers I work with to see the design work I was doing on their actual phone, tablet or desktop browser. They could ask questions any time and I was able to iterate on the fly. When we sat down to actually build our site, it was easier because we had an interactive prototype to reference.
I still use Photoshop as I believe it was intended – for image cropping and retouching, but when I’m asked to make a new page or a new website, I’ll start working in Webflow. This visual prototype will continue to be refined and expanded until we feel we’ve taken it as far as we need to. Then we’ll move into actual development, still using Webflow to prototype or test ideas if needed.
In today’s Responsive Web a static comp raises more questions than it answers. Sure, you’ll be able to convey a look and feel, but there are so many questions left it can be frustrating on both sides of design and development. As designers, we try to answer these questions by creating accompanying documentation like a web style guide, or sometimes even building a basic page ourselves. For developers receiving static comps to build from, they either have to infer missing details or go back to the designer. How does the navigation adjust? What are we envisioning for the hover states or pressed states for buttons? How does typography change to accommodate different screens? How are we denoting an active page? This list can go on and on.
This is where Webflow steps up to fill in the gap. Details can be inferred because they’ve been realized and are viewable in the browser. It allows you as a designer to experiment and prototype interactive ideas on the fly. How it fits in to your process will depend on you and the needs of the project. However, I strongly recommend you give it a shot. It might surprise you.
Some additional resources
- Webflow University
A free series of videos that walk you through the UI and how to build site in Webflow. - Webflow Forums
An active and knowledgeable community of people already using Webflow.
Many thanks to Shawna Jones, Jeffrey Love, Shawn O’Neill and David Belangér for their support of me using and testing Webflow throughout our projects.
The post Designing Responsive Websites in a Browser with Webflow appeared first on Smashing Magazine.
Designing Responsive Websites in a Browser with Webflow
No comments:
Post a Comment