I can’t speak for every theme out there, but some updates will contain mobile-friendly elements and may be enough to fix your problems. If there are pending updates, start with those. If your theme has been around for a while though, it might be time for a little update.įirst things first: Double-check your WordPress version and current theme version. If you’ve recently installed a new WordPress theme, there’s a decent chance you’re okay in this department. Use (Or Create) A Responsive WordPress Theme Once you’ve used Google’s mobile-friendly tool to benchmark your site, it’s time to start making improvements. The benefit of this is that you can quickly test more pages, but you can also monitor the most important pages on your site without having to manually turn to the browser tool all the time. Pretty neat little tool, right? Well, it gets even better.įor all of you developers out there, Google also released a Mobile-Friendly Test API that allows you to test URLs with automated tools. If you’re seeing red, you’ve got a little bit of work to do. If your website is fully optimized for mobile devices, you’ll get an enthusiastic little success message that looks like this: ![]() ![]() Just enter your site’s URL for a quick assessment of your site’s mobile design. To simplify things, Google has gifted us all with a free mobile-friendly testing tool that will tell you whether your site qualifies as “mobile-friendly” or not. Even if you happen to have a whole bunch of old phones lying around, that can be a time-consuming process to test it on every screen. ![]() Your website may look great on one mobile device (like your own personal cell phone), but you really need to test it on a wide range of screen sizes to know if it’s truly responsive. The first step? Benchmark your current design. Luckily, if your WordPress site isn’t mobile-friendly yet, there are plenty of tools to help you get up to speed and build a fully-functioning, responsive site. That’s a pretty sweet perk if you’ve done the work to create a mobile-friendly site! But it can also hurt your site’s traffic if it’s not quite up to the task of displaying on smaller screens. This means that if your site reads well on mobile devices, it’s going to perform better in search results than sites that don’t. Starting in 2015 (the year of “ Mobilegeddon”), Google implemented a major overhaul of its search algorithm to reward sites that are deemed “mobile-friendly.” The change came down to one crucial data point: whether or not your website is responsive. A mobile-friendly design makes for a positive user experience and will help your users find what they’re looking for while on the go.īesides UX, there’s another important reason your site should be mobile-friendly: Google. That means that over half the population is turning to phones and tablets over traditional desktop devices, so in order to keep up with them, your website needs to be ready to display on any screen size. In Q4 2019, 61% of Google searches took place on a mobile device. Consider mobile-friendly WordPress pluginsġ.Use a responsive WordPress theme (or create your own).Understand why responsive web design is important.To make your WordPress site mobile-friendly, you need to: This guide will help you understand why it’s important to have a mobile-friendly site, how to build one on WordPress, and introduce you to the best tools to create a responsive site. It’s no secret that mobile-friendly WordPress sites are the new norm, but despite how common they may seem, it can still take a little work to create a beautiful, responsive site. Posted in Design, Performance by WP Engine In styles.css, put the following rule with the rest of the base styles, outside of the media queries. To get a fluid image in Chrome, we need to tell the illustration to always fill the width of its container. Firefox will do this automatically, but if you open this page with Chrome and make your browser very narrow, you’ll find that the image stays the same size. SVGs let us forget about screen resolution issues, but we do need to shrink the illustration to fit neatly into our fluid tablet and mobile layouts. content div so that it matches the following: īrowsers automatically scale up SVGs for retina devices, so this 500×250 pixel SVG image will render crisply on both standard and retina devices. ![]() Let’s take a look by adding an illustration to our responsive.html page. They “just work.” Since they’re vector-based, SVGs avoid the screen resolution problems that we’ll see in the next section. The easiest way to solve all these problems is with SVG images.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |