Plan your content organization before you design
Designing a website without a strong sense of its content structures is kind of like picking out a fancy frame before you’ve actually created a painting. You need to have an idea of how the content is going to be organized so that you can see the bigger picture.
Content and design flourish when developed in tandem. Content organization is more than just copying and pasting blocks of text to see where they’ll fit on a page. Your content is the story you’re trying to tell your audience. Make a list prioritizing the messages you want to convey. Figure out how these ideas flow from one to the next. Design around the content and base your navigation on its organization. A linear path will keep someone engaged with your website and lead to better conversion rates (so long as the message itself resonates with your audience).
Use only the words you need
Desktops allow for more text. This isn't always a good thing. With mobile devices, you must work within the confines of smaller screens. That means writing more economically, ensuring that every word helps move your story forward.
If you're taking writing from a desktop site, it' might need some editing. Consolidate copy, use bullet points and other structural devices, and trim the fat wherever you can.
Typography matters even more on smaller screens
Make sure you scale font size, line-height, and width to best fit differing screen sizes.
You don’t need to see an eye doctor to know that tiny type on any screen is hard to read. Using larger font sizes can dramatically improve readability. So use something in the range of 16px for body copy, and adjust up or down depending on the font’s design. (Though we’d recommend using ems instead, starting at 1 to 1.25em.)
And be sure to use a highly legible font, especially for vital bits of text like navigation labels. Nobody wants to see a script font in your menu.
Spacing is also a factor on smaller screens. Make sure that your line height is set to an appropriate amount. Too much will leave your text floating in space and too little will see your words stacked like pancakes. Usually something in the 1.25 to 1.5 range will work well, but individual typefaces will vary.
Pro tip: if you’re using pixels for font sizes and don’t want to calculate 16 x 1.35, leave the value blank and Webflow will do it for you.
Throughout the design process, check your text on different devices to see how your line height will affect the presentation of the text.
When you’re designing with mobile in mind, remember that a huge font may push the important content you want someone to read further down on a page. So consider all the other design methods in your toolkit to add drama: vary font weights, use all caps or all lowercase, or use color to differentiate content sections from other elements on the page.
Embrace negative space
You walk a fine line when creating a responsive design. Yes, you want to take a minimalistic approach to content and navigation — but you also don’t want to leave anything vital out. Make use of negative space (aka, whitespace) to create breaks in your design and highlight those areas of content that you don’t want anyone to miss.
Create and test responsive prototypes
It's important to know how the look and feel of your design is going to translate to different screens. It's also crucial to know how it will function.
Static prototypes will take you part of the way, but eventually you’ll need a functional prototype to help you understand how the site will work and feel. Make sure to test your prototype on the actual devices to ensure that the website will work without problems. This will save you time and hassle — and spare you snarky tweets reporting that your site’s “broken” on mobile. Thankfully, Webflow takes the pain out of building easily shareable, fully functional, and responsive prototypes — all without writing code.
Also, be sure to check out our "Best practices for prototyping websites" for more details on what you need to create prototypes that meet both user and stakeholder needs.
Stick to the fast lane with responsive images
Keep your website moving with images that load quickly, on every device.
One of the problems people run into with responsive design is that while images visually scale on smaller devices, they’re still 3MB in size and slow load times to a crawl. Responsive images offer a powerful and effective workaround, but are laborious and painful to hand code.
Which is why we built responsive images right into Webflow, so you don’t have to deal with it.
We may be a bit partial, but really, Webflow does make responsive images incredibly easy. Our platform optimizes all your inline images for you, so they load up to ten times faster and look beautiful on every device.
So go ahead, upload that 3.5MB image. We got you.
Power your layouts with flexbox
Flexbox is a CSS3 layout module that makes sure your layout responsives fluidly to different devices. To use flexbox, you simply give a parent container the display setting of “flex,” then select how the children within that container distribute themselves within it. Fairly simple in principle, but it allows a powerful level of flexibility.
There are a number of tools you can use to implement flexbox layouts into your design, but we can’t but help to recommend our own flexbox builder. It takes the pain out of building creative layouts like split-screens, sidebars, and hero covers, and lets you build popular design patterns like equal-height modules and Z-pattern feature lists in a snap.
Responsive design has changed the web … for the better
The popularity of mobile devices and tablets has changed how we design websites and navigate through them. The huge spaces that desktop designs were allotted often led to a lot of unnecessary graphics and content that detracted from a site’s core message. Responsive design lets us strip away what we don’t need, so everybody can get what they need done, done faster.