Why optimizing for mobile is important
Optimizing your website for mobile users is just one aspect of modern web design, but it’s an important one. In our design and development process, we always make sure that your website will appear just as polished on a smartphone or tablet as it does on a desktop or laptop screen. Depending on your industry, anywhere from 60–80% of your website traffic will come from mobile users, so it’s important that this experience is good. When you go to make changes to your website, you will always want to ensure that you have considered mobile and tablet views as well.
How to change to mobile or tablet views
When you are editing your website in Elementor, the desktop view is the default. However, there are options to change to a mobile or tablet view. Newer versions of Elementor will show these options at the top in the center. You’ll likely see three icons: one for desktop, one for tablet, and one for mobile, but you may have more depending on the design of your site. In older versions of Elementor, there will be a mobile icon in the bottom left-hand corner that, once clicked, will open a similar bar at the top of the screen.
☝️ Your website may have more than one version
Sometimes we will design and develop more than one version of your site: a mobile version that will be hidden for desktop viewers and a desktop version that will be hidden for mobile and tablet users. If we have done this, we will be sure to communicate that to you and it will be included in your site-specific training materials.
How to make changes to mobile or tablet view
There may be times when you’d like to change how something appears on the mobile or tablet view without changing things across the board. For example, you may want the hero text to appear in a larger size on mobile to make it easier for people to read. This is possible with some aspects of your site design.
Because we will have relied heavily upon globals for the design of your site and encourage you to use globals as well, chances are most elements will be using global settings. (Remember, you’ll be able to tell if an element is using global settings if you see the purple global icon next to items like Text Color and Typography under the Style tab.) Using our example of making our hero text appear larger, here are the steps for changing a global typography setting for mobile or tablet only:
Step One: Navigate to Global Options
In the Style tab, click on the purple global icon next to Typography. A drop-down menu will appear with your global options, but at the top right, there will be a settings icon. If you hover over this icon, you will see Manage Global Fonts. Click to make changes to your global settings.
Step Two: Site Settings
The sidebar will change to your Site Settings, and you’ll see numerous items. Locate the item you are trying to change—in our case, the Hero font under Custom Fonts—and click on the pencil icon to the right. This will open up the settings for that global font.
Because we are in the mobile view, you will see small mobile icons next to some of the setting names. The settings that have this icon can be changed in the mobile view without making changes to the site as a whole. If a setting does not have this icon, any changes you make will happen across all views.
Note: If you want to make a similar change for tablets, you need to switch to tablet view and look for a similar tablet icon next to the settings that can be altered on their own.
Step Three: Save Changes
Once you’ve made the desired changes, be sure to click Save Changes at the bottom of the sidebar.
Using responsive settings to hide elements
If the design of your site feels too busy on mobile, you may want to hide certain elements to simplify things for your visitors. You can do this using responsive settings.
Step One: Open the Advanced Tab
Select the element you’d like to hide, and then open the Advanced tab in the sidebar. Scroll down and find the Responsive accordion and expand it.
Step Two: Select Options
Here you will see the options for responsive settings on that element. Simply select the slider for the option you’d like to turn on (e.g. Hide On Mobile Portrait). You’ll need to click Publish in the upper right-hand corner to make these changes live on your site.
How to test your changes and new pages using Google Chrome
It’s important to test your site when you are making changes or creating new pages. You’ll want to ensure that the changes you made appear as you hoped and that your site still looks right on all devices. One really easy way to do this is to use Google Chrome. While you can kind of simulate this effect by dragging the edges of your browser window in or out, Chrome allows you to quickly switch to specific device views to see how your site looks.
Step One: Inspect
Right-click somewhere on your website in the browser (not in WordPress or Elementor, just in a normal tab), and a menu will appear. Select Inspect.
Step Two: Select Menu
A new window will appear. If this window is popped out of the browser window, it may end up blocking what you’re trying to see. If this is the case, select the three vertical dots icon in the upper right-hand corner of the window. At the top of this menu is Dock side. Select the icon on the far right to place this window back into the browser window to the side. You can then drag the left-hand edge back to minimize it as much as you’d like.
The new window will show a lot of code, but there will also be a device icon in the upper left-hand side of the docked window. Clicking on this will give you options to change device views.
Step Three: Choose Device
You will now see a drop-down menu above your website view. This menu will have specific devices that you can choose from, and Google will display your site the way it would appear on those device screens.
Elementor’s mobile view uses a general sizing for mobile screens, but this feature in Chrome allows you to see particular phone models, which can be helpful when you’re ensuring that your site looks good for all visitors, no matter what device they are using.