This lesson digs into mobile-specific settings so your pages look great on any size screen.
Solutions keyboard_arrow_down keyboard_arrow_up
Our Solutions
Ontraport's solutions work together to give you everything you need to run your business in one centralized, easy-to-use platform.
Sales +
CRMarrow_forward
Segment + Organizearrow_forward
Smart Pipelinesarrow_forward
Unified Contact Historyarrow_forward
Task Automationarrow_forward
Lead Scoring + Routingarrow_forward
Mobile Apparrow_forward
Trends arrow_forward
Ontraport Calendar arrow_forward
No-code Web Appsarrow_forward
Custom Objectsarrow_forward
Dynamic CMSarrow_forward
Conditional Contentarrow_forward
Membership Sitesarrow_forward
Paymentsarrow_forward
Order Formsarrow_forward
Offline Transactionsarrow_forward
Complex Offersarrow_forward
Upsells + Order bumpsarrow_forward
Decline Recoveryarrow_forward
Customer Centerarrow_forward
Referral Trackingarrow_forward
Pages + Formsarrow_forward
Drag and Drop Editorarrow_forward
Form Buildersarrow_forward
WordPress Integrationsarrow_forward
Marketing
Automationarrow_forward
Campaign Automationarrow_forward
Email + SMS Messagingarrow_forward
Email Deliverabilityarrow_forward
Tracking + Attributionarrow_forward
Facebook Custom Audiencesarrow_forward
Platformarrow_forward
API arrow_forward
Integrations arrow_forward
Security and Scalabilityarrow_forward
Industries we serve
Select your industry to see how our CRM and marketing software can support your growth
Learn more Resources keyboard_arrow_down keyboard_arrow_up
Pricing Chat Resources
Find free content on the latest marketing strategies, using Ontraport in your business, and finding the right software.
Visit the blog Research and Education
Bootcamp
Coursearrow_forward
Attend a hands-on training course designed to give users a solid foundation of software skills and marketing strategy.
Expert Certification
Coursearrow_forward
A course for business owners and marketing professionals wanting to support our mutual clients. Learn advanced marketing strategies and get exclusive perks.
Ontraport
Blogarrow_forward
Browse a collection of articles on marketing automation, email marketing, CRM, membership sites and more.
Step-by-Step
Templatesarrow_forward
Implement proven marketing processes with our easy-to-follow worksheets and checklists.
In-Depth
Guidesarrow_forward
Download our best-practice guides, complete with data-driven insights and tactics to help you optimize your marketing.
Podcastarrow_forward
Listen in as Ontraport CEO Landon Ray talks with with a star-studded cast of entrepreneurs, marketers and thought leaders.
Marketing
Blueprintsarrow_forward
Learn everything you need to know to develop fundamental marketing strategies with our digital handbooks.
Using Ontraport in Your Business
Software
Comparisonsarrow_forward
See if Ontraport is the right fit for you — compare the top marketing automation and CRM software on the market.
Setup Wizards
Libraryarrow_forward
Our Setup Wizards walk you through the steps to customize and launch a marketing campaign for your business in minutes.
Get the
Factsarrow_forward
View the most frequently asked questions about Ontraport so you can get clarity and feel confident in your buying decision.
Feature Use
Casesarrow_forward
See exactly what you can do with Ontraport, and learn how you can personalize it to perform your specific needs.
Calculate Your
ROIarrow_forward
Get an honest estimate of the return you can expect from an investment in Ontraport's software.
Exploring
Ontraportarrow_forward
Take a guided tour through the five phases of the customer lifecycle in a simulated business powered by Ontraport.
Try our free interactive customer portal demo!
Want to offer the convenient, self-service experiences your customers are looking for? Check out this free demo to see what you can create in Ontraport without code or developers.
Want to offer the convenient, self-service experiences your customers want?
Check out this free customer portal demo to see what you can build in Ontraport without code or developers.
Home > Ontraport for marketing > Pages > Designing for mobile devices
Designing for mobile devices
You'll learn:
- 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
Sam Flegal
Designing for mobile devices
This lesson digs into mobile-specific settings so your pages look great on any size screen.
- 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
Course Instructor
Sam Flegal
Related resources
[Block//Author//First Name] [Block//Author//Last Name] on [Block//Date Added %F j, Y g:i a%+0d0h0m]
[Block//Comment]
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.
settings
Turn your business on with Ontraport.