4.6K members online now
Your business is up and running, you're looking for information and guidance to help you become more savvy and efficient. This is the place for you.
Guide Me
star_border
Reply
Highlighted

How to Set Up a Mobile Friendly Small Business Website

[ Edited ]
Top Contributor
# 1
Top Contributor

Today, I started setting up a new website for a client who is also a friend of mine. It is a site for a musical talent but don't let that fool you. Music is a business (at least if you want to make a living at it) and, as an aspiring artist, you have to create your online presence in the same way any other business.

 

The site is going to be hosted on my VPS (Virtual Private Server) on Bluehost Hosting, as the site has to be economical for the client which I am sure this resonates with a lot of you as small business owners. This is better than standard shared hosting, but by how much is a topic for debate.

 

Hosting is a very important consideration though when you begin to build your web presence. I will write this article from the perspective of a WordPress user as that is what I am using and prefer to use when designing a site. Bluehost and iPage are my own two favorites for cheap but decent shared hosting. I have used Bluehost for many years for my own sites and I have a reseller account with iPage. Also, iPage says they power their servers with green energy so that is another plus for some people. Really though, most cheap hosting companies are by and large very similar.

For this site, I am using the WordPress Swift theme, which says that it is very fast right out of the box and can score 90 on the Google Mobile Test. We will see! My favorite theme for the past several years has been one called Weaver Xtreme because it gives you total control over the appearance of the site you build and it has so many wonderful design controls built in. My own site is built on it and I have 90's across the board now on the Mobile Test -- but it took some work to get there!

By 12:21 p.m., I have WordPress installed on my server and have begun creating images for things like the site header and the favicon(s). I optimize the images as I create them using FileOptimizer. I use paint.net and GIMP to create and edit graphic elements.

I will make this a one page site for now until the Client has more content or decides more on what he wants on the site. One page sites can be better than multi page sites sometimes, mainly when you do not have enough content to justify a multi page site.

 

By 3:53 p.m., the site is up and pretty much done visually (at least for now). It's time to see where we are in terms of Page Speed and Mobile Friendliness.

 

screen shot 1 erie ave website test.png

 

Ok, not too bad for the point that we are at. Images are all optimized properly using both FileOptimizer on my desktop and ewww Image Optimizer plugin on WordPress. There were some images that the Google Mobile Friendly Test was still finding though that it thought should be optimized. However, the images were part of one of the plugins. In order to optimize those, I had to get the image file from inside the plugin folder on the site via FTP, download it, optimize the images and then upload it back to the plugin folder. 

 

Now it is time to turn on the cache, get that set up and to minify Javascript, CSS and HTML files. This should give us a nice boost. It takes a while to do but is well worth it. For this, I like W3 Total Cache plugin and Autoptimize plugins. This is also the point where I install Google Analytics and start a Google Search Console account for the site and link them (and AdWords, if applicable).

 

screen shot 2 erie ave website test.png

 

By 10:02 p.m., I have the files on the site cached and minified, massaged and coddled and have the Mobile Friendly Test returning 2 green results out of 3. While this is much better than it was and definitely "good enough" for many people, I want to get to 3 green scores for my client.

 

The next step is going to be implement a Content Delivery Network (CDN), CloudFlare in this case. Below is a screenshot of the final phase in today's efforts. There is still some work to be done with Rich Snippets, but as you can see this is all that was required to make this brand new site able to achieve green scores in all 3 parts of the Google Mobile Friendly Test. 

screen shot 3 erie ave website test.png

 

When I get to this point, I usually like to run some of my favorite tests to evaluate where I am. I think that many local businesses who do not really have enough content to justify having a full blown, multi page website could make good use of a one page site that is designed and optimized like this. It will allow you to be present in searches in your area and give the people who are doing the searching the information they need about your business. This could be used for almost any small business who does not intend to do a lot of online commerce, such as an auto repair shop, landscaping firm or even some restaurants.

 

Here are links to the testing tools I used at this point. Remember that "free" website will likely not perform very well.

One thing that is still slowing the site down is the YouTube video embed. I can get rid of it for a nice boost in load time but then the user experience would be affected, perhaps negatively. The site still scores a 95, though, so that is okay.

The site only scores 55 at this point but that is good for a brand new site. Getting a good WooRank score usually takes time. 

Only two items show so far but no errors and no warnings, so we're okay there.

 

Hopefully, you see how much work it is to create even a one page site that is fully optimized for search and user experience. It took me all day and half the night to get this far and I am not totally done yet. The scores are in though and they are good. I think it is a great start for this Rapper on the web!

 

 

 

 

 

 

1 Expert replyverified_user

How to Set Up a Mobile Friendly Small Business Website

Visitor ✭ ✭ ✭
# 2
Visitor ✭ ✭ ✭

Nice One..Thanks !

How to Set Up a Mobile Friendly Small Business Website

Explorer ✭ ✭ ☆
# 3
Explorer ✭ ✭ ☆

Nice case study. Thanks for the share @MikeJohnston Smiley Happy

Experts in the Topic
MikeJohnston