Design Responsive Websites In The Browser With Webflow

Design Responsive Websites In The Browser With Webflow

• By Richard Knight


• August 5th, 2014


• Responsive Web DesignTechniques


• 5 Comments

This essay is a initial partial of a array of articles on rising manageable pattern tools. Today, Richard Knight explores a advantages of Webflow and how we can use it now to build manageable websites — maybe a bit faster than we would build them otherwise. — Ed.

New collection have emerged to residence a hurdles of manageable web pattern — collection such as Adobe Reflow¹ and a recently expelled Macaw². Today, we’ll demeanour during one that we have tested extensively in a final few months. Though not perfect, it’s been a jump brazen in capability for a group that we work with. Its name is Webflow³, and it could be a resolution to a problems we face with immobile pattern comps constructed in Photoshop and Fireworks.

This essay will take we step by step by a routine of formulating a manageable website blueprint for a genuine project. As we go along, we’ll also brand Webflow’s advantages and where it comes adult short.

Getting Started

Getting started in Webflow is a comparatively simple. Head over to a website⁴, emanate an account, and give a giveaway hearing a go. Make certain to open a interface in a latest chronicle of Google Chrome since it is now a customarily browser that is entirely supported.

Before commencement a design, endorse possibly to start it from blemish or to work with one of a many templates. For this tutorial, we’ll name a vacant website template.

⁵

Take a notation to rodent over a tooltips in Webflow’s interface to turn familiar. There are no figure collection or layers in a normal sense. There are also no filters or effects or even brushes. Webflow keeps all focused on what a browser can do; so, meaningful a basis of HTML and CSS is adequate to get adult and running.

⁶

Toolbar Overview

The left toolbar handles several functions, such as edition your website to be common with a live couple and switching between device views (using a laptop and phone icons). You’ll use this toolbar mostly for a latter and for entering preview mode, that hides Webflow’s interface and shows what your website will demeanour like when published.

⁷

(View a whole toolbar⁸)

The right toolbar (shown below) consists of 6 tabs. The initial add-on (“+”) lets we supplement structure and HTML calm elements to a page. Each object we supplement to a physique of a page comes with default styles that we competence overwrite. Whenever we need to supplement content, you’ll come behind here. we always start with a section, a enclosure and columns since they all have predefined function that changes according to a breakpoint.

A territory is a div set to a full breadth of a viewport. A enclosure sits centered within a territory and constrains a widths of elements such as headings and paragraphs, while columns sequence containers uniformly in percentages.

⁹

(View a vast version¹⁰)

Next is a CSS tab, where we’ll spend many of a time. Here, we can allot classes to a component that is now comparison and afterwards character it as we see fit. All of a CSS that we would routinely write by palm is shown here. As shortly as we change a class, a CSS will refurbish immediately nonetheless your carrying to refresh. Be certain to inspect a modernized toggles, that concede for control of other things such as positioning and a function of credentials images in their div.

¹¹

CSS options (View vast version¹²)

The third add-on is for settings of a component that we select. Here, we can control things like a prominence of calm during certain shade sizes, and we can supplement couple elements to other pages in your project. This row has to do generally with non-style-related aspects and is generally accessible when you’re operative on difficult elements, such as a navigation menu.

Control prominence and even supplement links.

Fourth from a left is a useful structure navigator that visually displays a essence of your website in a folder-like tree. If we need a streamer to lay in a opposite div or container, usually click and drag it to where we wish it to be. we mostly impute to this row as we go to make certain that certain equipment are in a right divs and that my styles cascade appropriately. It’s also useful for selecting calm that competence be tough to click with a rodent since it is behind other elements.

These elements will be represented by a category names that we allot to them, so give all a candid name.

Next adult is a category manager, that shows all of your CSS classes during once. You can use it to revise a sold category (see a tiny wrench icon) and to fast mislay any category that isn’t being used. It’s handy, nonetheless we will customarily usually use it to purify adult classes that you’ve rejected or to fast change a category that’s used mixed times in opposite places.

A discerning perspective of all of your CSS classes.

Last is a pitch library. Complex items, such as a primary navigation and a footer, can be combined as symbols, that can be reused on other pages in your Webflow website. This is a good time-saver, nonetheless know that black are serviceable customarily in a plan they were combined in.

Regarding Web Fonts

Before we start with a project, it’s value mentioning that Webflow supports web fonts to a certain extent. All of a common standbys, including Arial and Verdana, are available, and we can use any rise in Google’s library, as good as any we have in TypeKit. However, any rise not supposing by possibly Google or Typekit can't be integrated in Webflow’s pattern perspective (an barrier that my group faced).

Applying your possess rise regulating Webflow’s tradition formula area is possible. Do this by joining to it in a conduct of your website and afterwards regulating a character add-on to mention where to use it. However, a rise will seem customarily after you’ve published a website, creation it frustrating to labour your typography for opposite breakpoints.

¹³

An instance of how to request your possess hosted web font.

Designing In The Browser

For this tutorial, we’ll work from a desktop perspective down to mobile. This is deliberate: In Webflow, any character that we emanate in a desktop perspective will cascade down. It’s uncanny during first, nonetheless we do get used it. The motive is that when we change a character in a inscription view, it will change for all below. This saves time when something is damaged in one media query since it will mostly be damaged in a narrower views.

We’ll find what we need to start in a “+” idol (the add-on to supplement elements). First, supplement a section, and afterwards drag and dump a “navbar” into that section. Then, name a picture component underneath “Media,” and drag it over to a trademark area of a navbar. Once it’s highlighted, let go of a mouse, and Webflow will dump in a placeholder image. I’ve transposed a default picture with my company’s logo. Essentially, what we’re doing here is using divs and HTML pieces that have a predefined function in Webflow; while dull and lacking any important styles, they will form a simple structure of a website.

¹⁴

Now, let’s supplement a rest of a navigation, give it a credentials color, and change a fonts. My association uses a customary gray for a credentials of a navigation. Add a credentials tone simply by selecting a navbar territory with your rodent and afterwards going down to a credentials area in a character tab. Once you’ve comparison a color, click “OK” to confirm.

¹⁵

Next, we need to supplement a territory that sits above a navbar. This will have a couple and some copy. Click and drag a territory so that it sits above a navbar, and afterwards supplement a enclosure so that a new calm stays centered in a browser window, like a navigation next it.

¹⁶

Above, I’ve combined a plain-text retard for a deadline copy, as good as a calm couple for a call to action. Both are reserved apart classes, set to arrangement as inline-block and with a calm aligned right. I’ve also practiced a stuffing by boring with a rodent on a arrows underneath “Position,” so that they both seem plumb centered. Finally, I’ve given this new territory a credentials gradient.

Notice underneath “Position” how a stuffing values are blue. This lets us know that we’ve altered a default styling of 0. If it were a yellow array or a label, this would meant that a comparison element’s character is inherited.

The rise and line-height fields have yellow labels, vouchsafing we know that their styles are inherited.

With a styling finished for a header, let’s set a structure of a categorical body. Our website needs duplicate on a left and an picture on a right for inscription and desktop views. Again, supplement a territory and a container, and conclude a grid by adding a mainstay component to that container. By default, we’re given dual columns. You can change this to a opposite array during any time by tweaking a column’s setting.

¹⁷

I’ve left forward and combined a vast placeholder picture to a right mainstay and divide duplicate to a left. I’ve also combined dual buttons. Working with prolonged duplicate in Webflow gets vapid since any divide has to be combined as a possess element. It would be good usually to work with one text-box element, in that we can pulp all of a duplicate during once and ensue to character it, as in Macaw.

For now, let’s adjust a paragraph’s line height, supplement character to a buttons and supplement a remaining content.

¹⁸

Last, we’ll supplement a footer by adding a territory to a bottom of a page. We’ll request a credentials tone and chuck in one final enclosure to residence a new calm links and copyright. Another distrurbance is that Webflow doesn’t nonetheless concede for successor selectors. I’d many a cite a manifest approach to aim links in a footer territory with styles same to a following:

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

Webflow now requires all to be reserved a class, even if it’s already in a div that has a category that we could reference. While not a deal-breaker, a tiny some-more refinement would be nice.

¹⁹

Every styled component requires a possess category in Webflow.

With a footer done, a desktop blueprint is in flattering good shape. Now it’s time to tackle any display issues that we find during a other breakpoints.

Fixing Breakpoints In Webflow’s Responsive Views

One of a categorical differences between Webflow and a foe is that we can't conclude your possess breakpoints. Webflow is a tradition horizon formed heavily on Bootstrap, so a lot of a automatic function for calm elements derives from that. You could perspective this as a interruption or an advantage, depending on your conditions and your project’s needs. Our stream e-commerce website leverages Bootstrap, so regulating Webflow to antecedent creates clarity for us. If your website requires singular breakpoints or we already use another framework, such as Foundation, afterwards we competence have to try something else.

Let’s demeanour during a inscription perspective first. Nothing totally breaks, as we can see below, nonetheless we competence wish to supplement some-more space between a footer and a rest of a page.

²⁰

Webflow’s tradition Bootstrap horizon does many of a work to resize a content.

Next adult is a phone perspective in landscape mode or, as we like to consider of it, a really far-reaching phone breakpoint. As we can see in a initial screenshot below, things are removing messy. Our picture in “Column 2” collides with a callout box. Also, that picture is flattering vast for mobile phones, so let’s cringe it by changing a breadth to 40%, withdrawal a tallness set to auto. For a final change, I’d cite that a buttons seem on tiny screens as retard elements, with widths of 100%. Check out a before and after:

Webflow creates it easy to repair a damaged layout.

The same breakpoint with a changes applied.

That’s a bit better. As we turn informed with Webflow, we competence endorse to desert columns altogether in certain instances since they foreordain a sequence of your page. Suppose we wanted a picture to be a initial manifest object next a primary navigation on phones. Because we’ve used columns and thrown a picture into a righthand column, we can't shuffle it on mobile; a left mainstay will always be built on top.

If we used a possess divs with a possess CSS rules, we could simply by-pass this sequence with some floats. So, even nonetheless columns are easy to work with and they come with predefined stuffing and their widths switch to 100% during low breakpoints, they can also be limiting.

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

²¹

Menu before

That’s a lot of dim gray, with no imply of a range between menu equipment for users of hold devices. Select a couple and ensue to change a style. Let’s also apart a links with a bottom border. Other options are accessible to play with animation, nonetheless I’m happy with a defaults for now.

²²

Menu after

Much better. I’ve inverted a colors rather to make a menu equipment mount out more, and I’ve combined a box shade to give a clarity of abyss in box it overlaps with elements like buttons. Of course, we can labour it further, naming float states and pulpy states, nonetheless for now let’s demeanour during a smallest breakpoint and see how a changes cascade down.

Not bad nonetheless a header takes adult a lot of space. Considering that browser chrome will take adult space, too, let’s cringe it a bit.

There we go. You can perspective a outcome on a demo page²³. If you’re on a desktop machine, resize your browser to see how a blueprint changes. One of a final equipment we’ll demeanour during is Webflow’s code-exporting feature.

Exporting The Code

In a left toolbar is an idol that allows we to trade your work as a full ZIP file, with a HTML, CSS and all images that you’ve used. At this time, there are no options to tweak how your website gets exported. Having a choice to name between LESS files and one master character piece would be good in future, as would an choice to indicate to a paths where images are publicly hosted.

²⁴

Webflow’s formula is comparatively transparent and candid enough. Being design-focused, it does chuck usually about anything it can into a div, and you’ll see a lot of tradition classes that demeanour same to Bootstrap 3. It also includes a apart character piece for several fixes, so your website should work in many browsers. Your mileage with a exported formula competence vary, depending on what we need to do with it. The developers on a group found it easier usually to replicate my interactive mockup in Bootstrap 3, rather than try to build on tip of a code.

We did this for dual reasons. First, a website is a Backbone focus that needs functionality such as timed user sessions, Google Analytics and an executive behind end. Secondly, Webflow’s formula does not support Internet Explorer 8, that is a requirement for a user base, unfortunately.

Conclusion: A New Tool For Designers

Webflow is a apparatus targeted during designers who are looking for an choice to Photoshop and Fireworks for manageable web design. It’s not an all-encompassing resolution for formulating websites — during slightest not nonetheless — nonetheless by enabling me to focus on layout, communication and calm function nonetheless carrying to code, it sped adult a team’s pattern proviso immensely.

And while we didn’t use a formula that Webflow generated, we still found it to be some-more collaborative, permitting a developers who we work with to see a work we was doing on their tangible phone, inscription and desktop browsers. They could ask questions any time, and we was means to iterate on a fly. Sitting down to indeed build a website was easier since we had an interactive antecedent to impute to.

I still use Photoshop as we trust it was dictated — to stand and retouch images — nonetheless when I’m asked to make a new page or a new website, I’ll start operative in Webflow. And I’ll continue to labour and enhance a manifest antecedent until we feel we’ve taken it as distant as we need to. Then, we’ll pierce into development, still regulating Webflow to antecedent or exam ideas if needed.

On today’s manageable web, a immobile comp raises some-more questions than it answers. Sure, you’ll be means to communicate a demeanour and feel, nonetheless so many questions sojourn that both designers and developers can get frustrated. As designers, we try to solve these questions by formulating concomitant documentation, such as a web character beam or even infrequently by building a simple page ourselves.

Developers who accept immobile comps to build from possibly have to infer blank sum or go behind to a designer. How does a navigation adjust? What are we envisioning for float states or for pulpy states for buttons? How will a typography change to accommodate opposite screens? How do we imply an active page? The list goes on and on.

Webflow fills this gap. Details can be unspoken since they’ve been satisfied and are viewable in a browser. It enables we as a engineer to examination and antecedent interactive ideas on a fly. How a apparatus fits in your routine will count on we and a needs of a project. However, we strongly suggest giving it a shot. It competence warn you.

Other Resources

• “Video Tutorials²⁵,” Webflow Help
  
  This giveaway array of videos walks we by a UI and how to build websites in Webflow.


• “Forums²⁶” Webflow Community
  
  An active and associating village of people already use Webflow.

Many interjection to Shawna Jones, Jeffrey Love, Shawn O’Neill and David Belangér for ancillary my use and contrast of Webflow via a 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://gridtips.com/wp-content/plugins/RSSPoster_PRO/cache/052f7_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

Design Responsive Websites In The Browser With Webflow