7 mobile design tips to engage and convert users

Mobile is an opportunity to improve how people experience the web — here are seven ways designers can help.

No items found.

With the emergence of mobile, designers have had to change their approach. Print turned to digital and designers found new ways for people to interact with content made from pixels. And now, mobile devices have surpassed desktop computers as our windows to the web. Here are seven tips for designers to engage and convert users on today’s smaller screens.

1.Design for mobile

Not so long ago, designers had the luxury of designing primarily for sprawling desktop displays. These provided an expansive canvas that gave designers a lot of room to work with. At times, maybe a bit too much. Limitations force a more practical approach, decreasing visual clutter and pointless embellishments.

The starting point of any web design should consider the smallest screen a site might be displayed on. Working within the limitations of smaller screens will create a consistent experience across devices.

Webflow's multi-device preview mode shows how a design will look on different devices and let you make adjustments along the way.

Before you create wireframes for a mobile design, make sure you:

  • Compile the necessary content and define how it will be organized
  • Create headers for each section
  • Determine calls to action and their placement
  • Plan the type of interactive elements you’ll be using

And plan how all these elements will flow in a single-column design.

2. Use gestural microinteractions and animations

‍Spotify makes scrolling through songs easy with a simple left or right swipe.

Mobile means a smaller screen space, which makes it important that content and interactive elements stand out, and clearly communicate their purpose.

Microinteractions are little bursts of usability that inspire someone to take an action with immediate feedback. The “like” button is a ubiquitous microinteraction used for everything from cute cat photos on Instagram to Facebook shares and comments.

We hit that thumbs up or heart without even thinking about, making our approval public. We swipe left or right on dating apps, and are immediately rewarded with the news that (gasp!) someone likes us, too. Microinteractions make interactivity quick and intuitive — they’re the defining moment on many websites and apps.

Scroll-based interactions are like microinteractions: they add movement to the flat screens we hold in our hands. They add dynamic elements to a design and act as guides, capturing your user’s attention, leading them where you want them to go, like to a signup form.

‍A very cool dynamic scroll by Sergey Valiukh for Tubikh. Is this too much — what do you think?

3. Keep it simple

When designing for mobile, strip everything down to its basic components. It's not about boring, nondescript text floating in a void — but if you can make that work, more power to you. It’s about refining the elements so that only what's important remains.

This means taking away unnecessary items like graphics and busy animations that don’t add to the user experience. Extreme drop shadows and other graphics simulating three dimensionality are cast aside for a more practical design.

Instead, use attention-grabbing colors and ample negative space. Combined with simple typography, this can make for a design approach that’s easy to navigate and quick to load.

‍Design Calendar makes use of negative space and strong typography for a successful flat design.

4. Keep their attention with quick load times

Desktops have the luxury of faster processors, more computing power, and no need to cram megabytes down narrow 3G connections. They can accommodate larger file sizes like long video clips. You don’t want someone landing on your page only to be bogged down by files not optimized for mobile.

When you're preparing the visuals for a design, make sure to:

  • Use well-composed, uncluttered, meaningful images
  • Optimize all images with photo-editing software, like Photoshop
  • Use proportional images sized correctly for the layout
  • Use high-quality background videos, but only when necessary — most mobile devices won't even display these anyway
Design interactions and animations without code

Build complex interactions and animations without even looking at code.

Subscribe to be a Webflow Insider
Thank you! You are now subscribed!
Oops! Something went wrong while subscribing.
Start animating

5. Craft your content with mobile in mind

Mobile devices have transformed how we experience the web. Instead of sitting in a quiet place, basking in the glow of a desktop monitor, we experience the web on small screens on a train to work, in line at the grocery store, in the waiting room at the doctor’s office — everywhere and anywhere we have a quick window of time.

Content needs to be broken into small chunks that are easily digested during short spurts of engagement. Just as the visual design elements need to be refined to only what’s necessary, so too does content. This means crafting sentences and paragraphs that are short, direct, and crystal-clear.

Content organization is even more important on mobile. Every section should seamlessly flow into the next. There shouldn’t jarring content shifts. Everything should make sense as someone scrolls through the content. One idea needs to flow logically into the next.

Calls to action need to be more than a whisper — they should command attention. To write more engaging calls to action:

  • Give readers a reason to act
  • Appeal to their emotions
  • Stress the importance of timeliness
  • Creatively communicate a brand’s personality
Wired uses a gridded layout and concise headlines to grab the interest of people scrolling through their content.

6. Use popups the right way

We know. Popups get a bad rap. But much like Microsoft's much-maligned Clippy, they have the best of intentions.

Popups are an important tool for conversions. They need to make their appearance useful, rather than distracting. A popup needs to be more than a generic prompt — it should be aligned with your brand’s personality and inspire a specific action that will gain the reader something. Even if it's just more free content in future.

Popups need to be anchored to specific content. Instead of showing up indiscriminately at the top of each page, weave them into the fabric of the content. A popup should make sense in the context of what’s being presented.

A user might be scrolling through tour dates for a band. A popup asking them to join an email list about tour dates is appropriate. Conversions happen when popups are useful and in context. The content should provide the reason to learn more and take action.

‍This New York Times popup uses direct language and highlights the benefits of being a subscriber.

7. Use multi-step forms

Forms can be time-consuming and tedious. How many of us have filled out every single field and hit submit only to get that the angry red text informing you something’s wrong? With a sprawl of content fields, it’s easy to miss something.

The development of multi-step forms simplifies the process of inputting information. There’s a logical flow, where the input of one type of information transitions into the next. Multi-step forms are especially great for mobile devices. The let users painlessly set up an account, apply for a job, or fill out a dating profile.

‍Uber uses a multi-step form for interested drivers.

Mobile design is about simplicity

Mobile design has changed the standards of usability. What was once fine for desktop is now considered cumbersome. Mobile design has stripped away unnecessary ornamentation and found more direct routes to guide users through content. What some call constraints, we can view as opportunities to improve how people experience the web.


February 20, 2018


Web design

Join the conversation

What's Webflow?

Try it for free
More about the Designer


The power of CSS, HTML, and JavaScript in a visual canvas.


Build website interactions and animations visually.

More about Interactions


Define your own content structure, and design with real data.

More about the CMS


Goodbye templates and code — design your store visually.

More about Ecommerce


Edit and update site content right on the page.

More about the Editor


Set up lightning-fast managed hosting in just a few clicks.

More about Hosting