This lesson digs into mobile-specific settings so your pages look great on any size screen.
Home > Ontraport for marketing > Pages > Designing for mobile devices
Designing for mobile devices
Course Instructor
- How to edit the mobile style settings such as mobile-only fonts
- How to edit mobile element position settings, such as width and margins
- How to create blocks that will display only on mobile or only on desktop screens
- How to set up a mobile width/ mobile breakpoint to trigger mobile styling
- Our recommendations for tablet and cell phone page widths
Comments
[Block//Author//First Name ##cap_first] [Block//Author//Last Name ##cap_first] on [Block//Date Added %F j, Y g:i a%+0d0h0m]
[Block//Comment]
Leave your comment
14-day free trial. No commitment.
Related resources
[Block//Resource Type]
[Block//Resource Description ##ellipsis(166)]
Transcript
Today, most web traffic comes from mobile devices, so your page has to look good on a little screen. In this video, I’m going to show you how to make sure it does.
When you use columns and rows to create your page’s layout, you’re actually creating a responsive web design that will automatically fit different-sized screens. But pages don’t always look perfect once they fold up and shrink down. So I’ll show you mobile-specific settings so your pages look great on any size screen.
First, let’s talk about columns in mobile view. You can see that when your page is viewed on a mobile device, the columns that were side by side will reorient themselves vertically. The columns on the left side will be at the top, and the columns on the right will be at the bottom.
Here’s an example of how this works and how to make changes when you need to.
Click the mobile icon to view your page in mobile view and see how your blocks appear on mobile devices.
This lets you see if there are any blocks that need to be simplified for your mobile view.
If you see a block that doesn’t look great in mobile view, there are two ways to fix it.
Alright, so let’s Edit the mobile style settings
When you edit the mobile style settings, you can set mobile-only fonts with whatever sizes will make your text more readable. Once you save ‘em to use again later, you’ll always have user-friendly fonts at the ready.
Here’s how to do it.
Click the mobile icon, then click into your “Mobile Font Style” dropdown. Click the pencil icon next to the font style you want to edit.
If your body text appears too small on your mobile view, or your headlines are too big, just click the pencil next to each font that needs changing and drag the font size slider to the font size you want. You can see here that it says ‘mobile font size’ which tells you that changes you make here aren’t going to change the desktop size at all.
Ok, onto Mobile element position settings
Another group of mobile style settings you can edit is mobile element position settings. These let you customize your element’s padding, margins, alignment and element width, all of which work together to set the position and size of each element in your mobile view.
Click the mobile icon to get to mobile view. The quickest way to make changes here is to grab one of the little dots that you see on the border around an element when you hover over it, and drag them. The upper left helps you move the element around, and the lower right is good for resizing things.
I want a little bit more spacing between my headline and subheadline in mobile view. So I can grab the top of the element’s border and drag it down.
For even more specific control, you can click on the element or the gear you see when you hover, go to the Position tab and then use the sliders and buttons to customize your element’s position and size.
You can see that editing the top margin does the same thing as dragging the element around.
And that’s it for mobile style settings!
Now, some desktop block designs are too busy or too hard to use on mobile devices and fixing spacing and sizes won’t get you where you want to go.
When that happens, you solve it by creating a separate version of the block that’s only shown on mobile devices. Let’s walk you through how to do that.
To set it up, first go to desktop mode on the offending block.
Click the settings gear on the block you want to make mobile-only. Click “Display Settings” and choose “Desktop Only” from the “Device display” dropdown. Now this block will only display on desktop-sized screens.
Next, make a copy of the block by clicking here.
Then, go to your new block’s layout mode by clicking the settings gear. Click “display settings” and adjust the settings so that the block only appears on mobile devices. Now, you have one block for each screen size.
Last, you need to simplify the new block so it looks good on mobile screens. Usually, this means you’ll want to remove a row or two. And you can put more elements in fewer columns. Then when the columns end up stacked on top of each other -- as they will on mobile screens -- things still make sense.
Once you’ve done that, go check out your mobile block in mobile preview mode and make any adjustments to spacing or font sizes. Notice that both of your blocks will show up when you look at ‘all blocks’ mode. But clicking desktop or mobile modes will hide the blocks that aren’t shown on those screen sizes.
With just these tools -- custom mobile font and spacing settings along with optionally making completely different blocks for mobile -- you have everything you need to make your pages look great on any sized screen.
There’s one more setting I want to tell you about that will give you a leg up in designing for mobile.
The Mobile width / mobile breakpoint setting lets you choose the viewing screen width that will trigger your page to be presented with mobile styling. This will make your mobile page not just nice to look at, but easier to use on small screens.
Let’s see this in action. Click the mobile icon, then click into your “Mobile Width” dropdown and add the width you want in px.
For example, Spotify.com figured out that the desktop version of the navigation bar wouldn’t work well on a cell phone screen. So, the mobile view has a simplified navigation that’s thumb-friendly.
Here’s what we recommend for your mobile width setup:
If you want to include tablets in your mobile view, consider setting your mobile width to a number around 800 px.
If you want to only include cell phones in your mobile view, choose a number around 400 px.
The default setting is 600px which is best in most cases.
That’s it for our deep dive into optimizing your pages for mobile devices. Now you can make sure your pages look amazing and are functional on any screen.
When you use columns and rows to create your page’s layout, you’re actually creating a responsive web design that will automatically fit different-sized screens. But pages don’t always look perfect once they fold up and shrink down. So I’ll show you mobile-specific settings so your pages look great on any size screen.
First, let’s talk about columns in mobile view. You can see that when your page is viewed on a mobile device, the columns that were side by side will reorient themselves vertically. The columns on the left side will be at the top, and the columns on the right will be at the bottom.
Here’s an example of how this works and how to make changes when you need to.
Click the mobile icon to view your page in mobile view and see how your blocks appear on mobile devices.
This lets you see if there are any blocks that need to be simplified for your mobile view.
If you see a block that doesn’t look great in mobile view, there are two ways to fix it.
- Edit the mobile style settings. Or...
- Make a completely different block for the mobile version of your site.
Alright, so let’s Edit the mobile style settings
When you edit the mobile style settings, you can set mobile-only fonts with whatever sizes will make your text more readable. Once you save ‘em to use again later, you’ll always have user-friendly fonts at the ready.
Here’s how to do it.
Click the mobile icon, then click into your “Mobile Font Style” dropdown. Click the pencil icon next to the font style you want to edit.
If your body text appears too small on your mobile view, or your headlines are too big, just click the pencil next to each font that needs changing and drag the font size slider to the font size you want. You can see here that it says ‘mobile font size’ which tells you that changes you make here aren’t going to change the desktop size at all.
Ok, onto Mobile element position settings
Another group of mobile style settings you can edit is mobile element position settings. These let you customize your element’s padding, margins, alignment and element width, all of which work together to set the position and size of each element in your mobile view.
Click the mobile icon to get to mobile view. The quickest way to make changes here is to grab one of the little dots that you see on the border around an element when you hover over it, and drag them. The upper left helps you move the element around, and the lower right is good for resizing things.
I want a little bit more spacing between my headline and subheadline in mobile view. So I can grab the top of the element’s border and drag it down.
For even more specific control, you can click on the element or the gear you see when you hover, go to the Position tab and then use the sliders and buttons to customize your element’s position and size.
You can see that editing the top margin does the same thing as dragging the element around.
And that’s it for mobile style settings!
Now, some desktop block designs are too busy or too hard to use on mobile devices and fixing spacing and sizes won’t get you where you want to go.
When that happens, you solve it by creating a separate version of the block that’s only shown on mobile devices. Let’s walk you through how to do that.
To set it up, first go to desktop mode on the offending block.
Click the settings gear on the block you want to make mobile-only. Click “Display Settings” and choose “Desktop Only” from the “Device display” dropdown. Now this block will only display on desktop-sized screens.
Next, make a copy of the block by clicking here.
Then, go to your new block’s layout mode by clicking the settings gear. Click “display settings” and adjust the settings so that the block only appears on mobile devices. Now, you have one block for each screen size.
Last, you need to simplify the new block so it looks good on mobile screens. Usually, this means you’ll want to remove a row or two. And you can put more elements in fewer columns. Then when the columns end up stacked on top of each other -- as they will on mobile screens -- things still make sense.
Once you’ve done that, go check out your mobile block in mobile preview mode and make any adjustments to spacing or font sizes. Notice that both of your blocks will show up when you look at ‘all blocks’ mode. But clicking desktop or mobile modes will hide the blocks that aren’t shown on those screen sizes.
With just these tools -- custom mobile font and spacing settings along with optionally making completely different blocks for mobile -- you have everything you need to make your pages look great on any sized screen.
There’s one more setting I want to tell you about that will give you a leg up in designing for mobile.
The Mobile width / mobile breakpoint setting lets you choose the viewing screen width that will trigger your page to be presented with mobile styling. This will make your mobile page not just nice to look at, but easier to use on small screens.
Let’s see this in action. Click the mobile icon, then click into your “Mobile Width” dropdown and add the width you want in px.
For example, Spotify.com figured out that the desktop version of the navigation bar wouldn’t work well on a cell phone screen. So, the mobile view has a simplified navigation that’s thumb-friendly.
Here’s what we recommend for your mobile width setup:
If you want to include tablets in your mobile view, consider setting your mobile width to a number around 800 px.
If you want to only include cell phones in your mobile view, choose a number around 400 px.
The default setting is 600px which is best in most cases.
That’s it for our deep dive into optimizing your pages for mobile devices. Now you can make sure your pages look amazing and are functional on any screen.
Features
© Ontraport 2024
playlist_add_check
PCI DSS, Level 1
security
Privacy Shield Certified