Mobile-Friendly: How Jetpack Can Help

Making your website mobile-friendly is becoming as important as having good content: over 75% of Americans now access the internet on both desktop and mobile devices, and the numbers of users who solely use a mobile device or tablet is steadily on the rise. A mobile-friendly site also helps attract new visitors; in April 2015, Google expanded mobile-friendliness as a ranking priority, so sites that are mobile-friendly rank higher in search results.

What does that mean to you as a website owner? A little time spent making sure your site looks good and works well on mobile devices can have big results.

Explore the benefits of Jetpack

Learn how Jetpack can help you protect, speed up, and grow your WordPress site. Get up to 50% off your first year.

Explore plans

Your site might already be mobile-friendly!

Most WordPress themes developed today are built to be responsive. That means the theme responds to the needs of the viewers and their devices, shifting the layout based on the screen size, resolution, and device capabilities.

Here’s the Twenty Fifteen theme, which is fully responsive, on a desktop computer, tablet, and phone:

Twenty Fifteen responsive design

Twenty Fifteen’s responsive design

The layout adjusts based upon the screen size. The site keeps a consistent look, but adapts to the smaller screens. No matter what screen size a site visitor is using, it will automatically adjust — and since screen sizes are continually changing, the site can adapt to any screen size today and in the future.

How can you check to see if your theme is responsive? If you’re on a desktop machine, go to the site you want to test, let it load, then make your browser screen narrower. If the site has a responsive design, the elements from the web page will start to adjust and rearrange themselves into a still-readable format.

You can also check this using your own mobile device: simply visit the site you want to test and see how it looks. If it looks like exactly the same as the desktop version but shrunk down, your site is likely not responsive.

How can Jetpack help?

Jetpack’s Mobile Theme in action.

If your site isn’t responsive and you’re not able to update your theme to one that is, you can use the Jetpack Mobile Theme to create a simplified, mobile-friendly version of your website. The Mobile Theme displays your content in a clean, uncluttered interface for phones, making it easy for visitors to access your newest content on the go.

The default mobile theme has a pleasing blue color, but you can also tailor the Mobile Theme to bring your site’s mobile experience more in line with the full-screen version. You can customize the kinds of content that appear on your mobile home page, the colors, and the header.

In addition, viewers have the option to switch to the desktop version of your site by tapping the “View Full Site” link at the bottom of each page, so they can still choose to have the full site experience.

Ready to make your site mobile-friendly? Activate the Jetpack Mobile Theme in your Jetpack settings, and check out our support documents for more detail on how to customize it!

This entry was posted in Jetpack News and tagged , , , , , . Bookmark the permalink.

Carolyn S. profile
Carolyn S.

Bacon bacon bacon!

Explore the benefits of Jetpack

Learn how Jetpack can help you protect, speed up, and grow your WordPress site. Get up to 50% off your first year.

Explore plans

Have a question?

Comments are closed for this article, but we're still here to help! Visit the support forum and we'll be happy to answer any questions.

View support forum

Comments

  1. Dave Z says:

    As a blogger, versus theme developer, I still find the mobile presentation pretty hard to customize. I’d love if you guys integrated widget areas distinct from my default theme and presentation.

    Like

    • Carolyn Sonnek says:

      Thanks for the feedback. We designed our theme to be lightweight and to be easily implemented without taking over the functionality of your primary theme. You can customize the mobile theme’s colors and header using CSS to help match the design of your primary theme, but is not meant to be a separate, stand-alone mobile experience.

      We have some tips on how to use CSS to customize the look here:
      http://jetpack.me/2013/06/27/customize-mobile-theme/

      Like

  • Enter your email address to follow this blog and receive news and updates from Jetpack!

    Join 112.8K other subscribers
  • Browse by Topic