Church website mobile friendly fast and easy

Church Website Mobile Friendly Fast and Easy

Step 1: Why is mobile so important?

Depending on your age and experience often determine whether you use your phone or desktop, or tablet. Your mobile website is not just a miniature version of your desktop webpage. Most modern WordPress themes and builders are built so that they so well on mobile. This is called being ‘responsive‘. The theme does its best, but you cannot think of everything. The theme and builders will allow you to modify parts of your pages for just desktop or tablet or mobile. Take a look at this page on both a desktop and mobile and see what we did.

Step 2: Let’s do a Technical Test

We will use this website to show you if your web page meets the technical requirements of being mobile-friendly. the test really looks. There are a few steps to test, the first is Mobile Friendly by Google. This will give you a simple Yes or No to the question, Is your church website mobile friendly?

These screenshots show the type of feedback the Google site provides. This Does Not evaluate Core Vitals, to address this issue please go to Our Performance WebPage.

We want to fix the issue found here first. These issues are telling search engines that your page will not perform well on mobile, and other pages with better mobile ranking may get listed ahead of you. We will fix these first in Step 4.

Step 3: Let’s Look at in mobile

We will use this website to show you how the test really looks. There are a few steps to test, the first is Mobile Friendly by Google. This will give you a simple Yes or No to the question, Is your church website mobile friendly? Here is an easy and free way to see how your webpage looks in different Mobile views. In Chrome click CTRL + Shift + I, click the Mobile icon, and then on your left, pick what device we what to test.

Other options are to enter your webpage here. Mobi Ready or Mobile Test. me or Responsinator. They all work well.

Take a look at a few different devices and see what is working and not working. Examples of not working are 1) text too small, 2) text too big, 3) Titles in the wrong place 4) images or items stacked wrong.

Tip #1: Church Website Mobile Friendly

Your desktop and mobile page can and should look different. Church Website Mobile Friendly pages should have fewer images, be simpler, faster, smaller (size of the webpage in megabytes ) easier to navigate, and designed to ‘scroll through’ or ‘swipe through’. Same message, different format.

Step 4: Let’s Make a plan

Let’s make a plan. Be patient, this takes time. Get a little bit done each day, each week. Backup daily in case you ‘break your site’ (it happens to everyone) see our Best Practices.

First: Fix accessibility issues. Make sure fonts are bigger, and they contrast with the background to be seen easily. Anything that can be clicked (hyperlinks, buttons, images) must have either larger margins or padding. Use Mobile Friendly by Google over and over to address the issue. Tip-make sure your cache is off if you use one, read more about cache here. Read here to understand how to clear a phone’s cache so you can see changes.

Second: Start by looking at your webpage on your phone and ask yourself a few questions. What do I see that would cause me to scroll down? What questions are answered above the fold? Service times? Directions? What draws a person to scroll down? How much wasted space is there above the fold? What is blocking (does a button or image move as the page loads, it should not)

Start making changes to that very first screen. Have two or three buttons or links to click, and have a visible table of contents. Create reasons to stay and scroll, to stay a swipe. Also only scroll down, DO NOT allow the scroll to width, left, or right (meaning the page is too big for the screen) this will frustrate you, users.

The mobile view is not a smaller view of your website, it is a different audience and purpose. The mobile user came for action, not to read. Hit them right away with solid useful information. Don’t make them wait.

Third: Delete, Hide or modify parts of your mobile view. Get rid of what you don’t need. For example, a mobile page rarely needs a footer. Your banner or hero section rarely needs an image behind the title, a simple color background often works better. You only need enough text to help the user find out what they need. Are directions, hours, and parking easy to find? Is your first or second photo a picture of the pastor or church people or building? If they are new, is there an easy way to check you out?

Tip #2: Church Website Mobile Friendly

Mobile First: Don’t try to make your Desktop fit your Mobile screen. Design it for mobile-first and then adjust it for desktop.

Here is the unspoken truth of websites. Think SEO and Mobile versions first. Then make a webpage. Anything else, and we are just kids playing in a grown-up world.

Step 5: Let’s Make it awesome

Mobile Editing Tools

All these tools allow you to edit mobile and leave the desktop alone

Gutenberg

Generate Blocks

Elementor

WordPress is working and the page builders have been working hard to make editing mobile pages easier. Above are the three we have experience with, the native WordPress Blocks editor, Generate Press Blocks editor and Elementor a very popular page builder.

Each one work on this simple principle. Change the view to Mobile, and makes edits and those edits are only for mobile, the desktop stays the same. Instead of deleting, you can hide an image, section, or block in just the mobile view. You can make a button bigger, and text smaller all in Mobile view.

Step 6: Some more hints | Church Website Mobile Friendly

Hint #1 Themes: A WordPress theme helps provide some structure and functionality to WordPress. DO NOT pick on it because it looks good. A solid theme can do nearly anything you want it to do. Pick a theme that is modern, updated, and boasts of its speed. An old, outdated, or worst unsupported theme will make the mobile view much harder than it needs to be. You do not need a Church Theme or a church Template. WordPress editors and builders can make your church website mobile friendly and awesome.

Hint #2 AMP: AMP stands for Accelerated Mobile Pages initiative by Google to make mobile pages faster. We do not use it, and it requires some advanced skills. We also do not see a consensus across the web that this is widely being adopted by standard WordPress sites. If you are interested read this Kintsa AMP article first.

Hint #3 Google Page Insight Mobile Score: Google Page Insights provides both a desktop and Mobile score. Don’t be worried that the mobile score is low. Your Desktop score can be 100 and the same page on mobile can be 70 or less. Continue to work at it, but getting 100 in mobile is very difficult. This page, which is mobile friendly is only______ and we have been working on it for years.

Hint #4: Sizes made easy. There is a large range of tools to change the size of text, see the differences in text tools here. PX is an absolute size, a number of pixels (dots). We like to use EM as relative font size. It talks to the browser, EM=1 is 1 times the size (the same), and 1.5 is 50% large.