You should definitely create mobile-specific content for your lead generation forms. You can also use a page builder plugin like SeedProd to edit your landing pages in mobile view. Many premium themes and plugins let you create elements that display differently on desktop versus mobile. Users on mobile devices are often looking for different things than desktop users. It’s important that your website has a responsive design, so your mobile visitors can easily navigate your website.īut simply having a responsive site may not go far enough. How to Create Mobile-Specific Content in WordPress You can even rotate the mobile screen using the rotate icon. You can also simulate your site’s performance on fast or slow 3G connections. You can check how your site would look on different types of smartphones. You can also hold down the ‘Shift’ key, then click and move your mouse to simulate pinching the mobile screen to zoom in or out.Ībove the mobile view of your site, you’ll see some additional options. This circle can be moved with your mouse to mimic the touchscreen on a mobile device. When you run your mouse cursor over the mobile view of your site, it’ll become a circle like this: In the example above, the menu has collapsed, and the Search icon has moved to the left instead of the right of the menu. You’ll also notice your website’s appearance change to the mobile view. You’ll notice the preview of your website will shrink to the mobile screen size. Next, click the ‘Toggle Device Toolbar’ button to change to the mobile view. In the developer view, you will be able to see your site’s HTML source code. Next, you need to right-click on the page and select ‘Inspect.’Ī new pane will open up on the right-hand side like this: This could be the preview of a page on your site, or it could even be your competitor’s website. Simply open the Google Chrome browser on your desktop and visit the page you want to check. Google Chrome browser has a set of developer tools that let you run various checks on any website, including seeing a preview of how your website looks on mobile devices. Using Google Chrome’s DevTools Device Mode You can make changes and check how they look before you put them live. This method of previewing the mobile version is particularly useful when you’ve not yet finished creating your blog, or when it’s under maintenance mode. Note: The blue editing symbols are only present in the previewer. You’ll then see a preview of how your site looks on mobile devices. Depending on what theme you’re using, you may see slightly different options in the left-hand menu here:Īt the bottom of the screen, click the mobile icon. This will open up the WordPress theme customizer. Simply log in to your WordPress dashboard and go to the Appearance » Customize screen. You can use the WordPress theme customizer to preview the mobile version of your WordPress site. If you don’t like the video or need more instructions, then continue reading. Your final test should always be to look at your site on an actual mobile device. It’s important to keep in mind that most mobile previews will not be completely perfect because there are so many different mobile screen sizes and browsers. In this article, we’re going to cover two different methods of testing how your site looks on mobile using desktop browsers. You might even want to create different versions of key landing pages that are optimized for mobile users’ needs (more on this later). In fact, mobile is so important that Google is now using a “mobile-first” index for their website ranking algorithm.Įven if you’re using a responsive WordPress theme, you still need to check how your site looks on mobile. This means that having a site that looks great on mobile is essential. More than 50% of your website visitors will be using their mobile phones to access your site. Why You Should Preview Your Mobile Layout In this article, we’ll show you two simple ways to easily preview the mobile layout of your WordPress site without switching to different devices. While you can certainly take a look at your live site on your phone, this doesn’t help during the development stage.Įven when your site is live, it’s often easier to view the mobile version on a desktop computer, so you can quickly make changes and see their effect. Do you want to preview the mobile version of your WordPress site? Previewing the mobile layout helps you see how your website looks on mobile devices.
0 Comments
Leave a Reply. |