Best Tips for Creating a Mobile-Friendly Website

Here are our Best Tips for creating a Mobile-Friendly Website from a professional web design firm with over 20 years of web design experience.

But first let’s clarify a couple questions…

What is Mobile-Friendly Website Design?

Mobile-friendly website design is one which is optimized for smaller screens (mobile phones)  so it loads quickly, and is easy to navigate on a touch screen.

Why is a Website being Mobile-Friendly Important?

Everyone’s on a smart phone these days so its important that your website works well and looks good on those smart phones. Secondly, having a website be mobile friendly is important for Search Engine Optimization (SEO) because Google has prioritized its search engine algorithm to be “mobile first”…that is – how a website works on mobile phones is its first priority, with Desktop display and performance a second place priority.

Designing websites to be mobile-friendly is crucial because more people are accessing the internet from their mobile devices than ever before. There are 307 million smartphone users in the United States( as of 2022) and that number is expected to keep growing. In 2023, the number of global smartphone users is estimated at 6.8 billion, marking a 4.2% annual increase. Today, over 85% of American adults use smartphones. Approximately 47% of web traffic in the U.S. originates from mobile devices.  So its no surprise that Google prioritizes mobile page load speed as a key metric when determining your website’s search ranking, which is significant since 94% of organic search traffic comes from Google. Ever since about 2016 Google began punishing websites that were not “mobile-friendly. Therefore having a mobile-friendly website is valuable for your clients, potential customers and for SEO.

Best Tips for Creating a Mobile-Friendly Website

1) Build your site with WordPress

We think WordPress is the best choice for creating a mobile-friendly website with responsive design. Here’s why:

• Built-in responsiveness: WordPress themes are designed to be responsive, meaning they automatically adjust their layout to fit different screen sizes and devices. With a responsive website your website’s content will adapt to the different screen sizes your visitors are using making sure your information is easily available.
• Wide variety of responsive themes: There are many responsive themes available for WordPress, which can be customized to fit the needs of different websites. Many of the Themes are low cost or even free. But keep in mind, like everything else in life you get what you pay for.
• Mobile-friendly plugins: There are numerous plugins available for WordPress that can help improve the mobile-friendliness of your website, such as caching plugins that improve page load times and image optimization plugins that help with image compression.
• User-friendly interface: WordPress has a user-friendly interface and Content Management System (CMS) that makes it easy to add and edit content, which is especially important for clients who need to be able to perform website updates on their own.
• SEO-friendly: Responsive design is important for search engine optimization (SEO), and WordPress is built with SEO in mind, making it easy to optimize your website for search engines.

2) Responsive Design:

Responsive design for websites means that your website has the technology to allow it to be flexible so it can adapt and adjust  its layout and content to different screen sizes and devices, ensuring an optimal user experience. WordPress is built to be responsive making sure your website is mobile friendly and desktop friendly. The fact tha your website can adapt to different screen sizes makes it easier for users to navigate and find the information they need so they have a better user experience. On a desktop display, users will have a totally different experience than on a mobile phone.

SEO Benefits
A Responsive site helps with your Search Engine Optimization (SEO). Google search results are positively biased in favor of websites that are mobile-friendly and responsive. For more tips on creating a mobile-friendly website with an eye to SEO, check out this guide from Google’s Search Central.

3) Help people quickly understand what your site is about

Get to the point! Try of describe your business services and/or products using concise language. People on their phones are often on the move – needing their information fast. Less best!

4) Simplify the User Experience

• Provide simple forms. Minimize text entry. Filling out complex forms using a phone can be difficult for those “one-finger” mobile phone typists.
• One-click Call. Your potential customers have a phone in their hand! Encourage them to call by giving your users simple links and buttons which will initiate a call.
• Simplify the Navigation Menu. Instead of having nested dropdowns (which might work well on a desktop) consider displaying a subset of you most important links to make it easier for your users to access your most important information and keep mobile users from getting frustrated.

5) Optimize Your Images

No matter how fancy your new smart phone is there are going to be times when you have only one or two bars of connection (or interrupted connections) which negatively impact the your internet and download speed.  Besides video, images are your biggest files that have to be downloaded for a website. That’s why its critical to optimize your images especially for mobile users. Optimizing images refers to the process of reducing the file size of an image without compromising its quality, in order to improve website performance by reducing page load times and saving bandwidth.

Generally there are two steps to optimizing our images.

1) Reduce the actual size of your images using a graphics program like Photoshop.
For example: instead of inserting a 1980 pixel by 1000 pixel photo into a mobile page you can shrink it down to just 600 pixels by 302 pixels.

2) Next, take that smaller image and reduce the file size further by image compression and optimization techniques. By utilizing optimized images in your mobile web pages your website much faster and provide a better user experience.

Below is a screenshot from Photoshop “Export As” screen where the quality JPG images can be adjusted. Typically changing a JPG from 100% to 80-85% will reduce the file size by a whopping 50% with almost no visible impact.

Note: We use Photoshop for image resizing and optimization. One thing that Photoshop has that we really like is the capability to do batch processing. Batch processing allows us to make changes and adjustments to a large group of photos at once. When we do a photo shoot we can apply a number of more brightness, sharpness, tinting and color adjustments (as well as resizing and optimizing) all at the same time to a large group of images saving a lot of time.  However, there are a number of FREE image optimization tools that are available online including a few we like:

• TinyPNG 
• Compressor.io 
• Squoosh 

There are also FREE WordPress plugins that can optimize images directly from within your WordPress site. This is a handy way to automate the process – especially for folks that don’t want to deal with the hassle of processing each of their images themselves. Here are 3 Free WordPress plugins that handle image optimization pretty well:

• Smush: Smush is a free WordPress plugin that can optimize images in JPEG, PNG, and GIF formats. It offers a variety of features, including bulk image optimization, automatic image resizing, and the ability to compress images up to 32MB in size.
• Imagify: Imagify is a popular image optimization plugin that can compress images in JPEG, PNG, and GIF formats. It offers a variety of optimization options, including lossless and lossy compression, and can automatically optimize images as they are uploaded to your website.
• ShortPixel: ShortPixel is a versatile image optimization plugin that can compress images in JPEG, PNG, and GIF formats. It offers a variety of optimization options, including lossless and lossy compression, as well as the ability to convert images to WebP format for even better performance.

6) Hire a Professional Web Developer

Hiring a professional web developer is money well spent. Avoid the DIY website builders. We’ve had countless clients come to us frustrated after trying to use various (cheap) DIY website builder platforms.  Those clients lost their initial time and investment and had to start over. Yes, hiring a professional web designer will cost you more but you’ll likely get a much greater ROI (return on investment) and you’ll save yourself headaches to boot!

Your Theme Matters

This might be redundant but WordPress requires a Theme.  A WordPress theme come with web page design templates that can help you quickly provide the look and feel of a WordPress website. The Theme you install also plays a critical role. All Themes have variety of settings which will allow your web developer to adjust or fine tune as needs be. However there are huge differences between Themes. Make sure you use a quality Theme (which might cost a little more at the start) but can save you a lot of headaches and expense over the life of your website because of its ease of use, features and superior customer support.

Several Themes we recommend are: Avada (our favorite), Elementor and Astra.

Why inexpensive WordPress Themes can cost you more
Buyer beware…sometimes buying a low budget Theme is a bad investment. A change or feature that might take 10 minutes of work to install using a quality WordPress Theme might take 30-40 minutes using a cheap theme.  So while you might save money on the front end, the time you lose actually building or updating a site can be costly – wishing you had purchased a decent theme from the start. Also, the cheaper themes typically offer poor support and often no support down the road as those developers abandon their theme and leave you hanging. We’ve had customers have us use cheap themes and a couple years down the road those themes start failing which leads to us rebuilding their website using a quality (more expensive) theme the next time.

FAQ