Designing Qwilr Pages for Mobile Devices

Qwilr automatically optimizes your Pages for any screen size. Here's a quick guide on how it works.

All of Qwilr's design tools are built to provide flexibility. If your clients view your page on a mobile phone, the content scales to keep it easy to read while remaining visually appealing and beautiful.

A PDF, on the other hand, just shrinks to fit a small screen, and sometimes doesn't even do that, so your clients have to zoom in. 

So how does Qwilr shift your page for mobile viewing and how can you follow best design practices for both web and mobile?

• Background Images and Videos
• Column-organized Content
• In-line Content recommendations
• Preview your mobile designs

Background Images and Videos

Consider the crop

If you have a background image that stretches across the whole page, it will crop in from the sides on smaller and mobile screens.

For example, this would be your background on an average desktop monitor:

And this is how it would look on a phone screen:

It's best to use a flexible image that can accommodate this automatic cropping. Keep the most important part of the image in the center, and it will stay visible on most screens.

Don't want your page to change the image size? Easy - you can always add it as an inline image which keeps 100% of your images. 

Background Videos will not play on mobile

On mobile devices Qwilr will display the thumbnail image from the video. The reason we do this is that streaming video consumes data on your client's mobile plan. We don't want to do that without their consent. So our mobile design reverts to the thumbnail image.

You can add a custom thumbnail to your video on YouTube.

Try Gif Backgrounds instead of videos

If the looping embedded video is fairly short, try instead to use a GIF background. This will loop on mobile just as it does on the web.

Side areas of the Page are flexible

As you view your Page on a large desktop monitor, you'll see what looks like empty areas at the sides. Keep in mind that these areas will crop out on smaller screens. 

The content of your Page lives in the center area, so it's readable on all screens.

Using the Columns widget?

Qwilr makes it easy to place text and images side by side, using our Columns widget.

On a phone screen, the columns will stack on top of one another, left-most column at the top and in order from left to right, to keep everything easy to read. You may want to test these before you send your Page out just to ensure it all looks good! 

Consider how you want your content to look on mobile. Having multiple columns widgets to make sure that the left-to-right order caries logically.

It is also a good idea to consider this with crowding content. If you have 4 columns side-by-side, this might be a longer scroll on a mobile device since the column content has to be re-arranged vertically.

In-line Content Best Practices

The following are general recommendations for your in-line content including font size, icon size, etc. Please review and feel free to reach out to support via help@qwilr.com with any questions.

In-line images and logos in columns

Optimize the size of logos or icons to be smaller so they look both professional on the web and aren't taking up too much space when scrolling through a mobile browser. Larger icons that might seem bold on the web can appear oversized on mobile devices. You can resize your images on the proposal after upload.

Add spacing between images and the content beneath them

In both the main editor and within columns, make sure to add a space below an image to avoid any text content below it looking like it's crowded right up against the bottom of the image.

Consider the size of your text

While Qwilr will try to best optimize your font size choices for mobile, consider changing the font size down if it appears too large in mobile versions.

Use Accordions

Accordions are some of the best ways to condense information both on the web and in mobile by having expandable content sections. However, make sure to use best practices on both the font size of the accordion labels as well as the length of the titles. Longer titles will wrap around the screen and create vertically taller accordions.

A large set of logos

Rather than using columns to organize large logo sets, such as a group of logos of companies you have worked with, consider creating an image on an external image editor with the same background color as your block where the logos are arranged in a group as one image, then adding that to your Qwilr page as an in-line image that will scale with the screen size on mobile.

How to preview the mobile version of your page

You can preview the mobile view at any time with your browser's Inspect tool. If you need help with this, please reach out to our team.

Did this answer your question? Got Feedback? Let us know by emailing help@qwilr.com