Updating an Older Website For Mobile
Making your website mobile friendly for all devices
The Internet and web browser software are constantly evolving. Websites should be kept up to date. If you have an older website there are some updates you can do to make your site more accessible to small screen and slower loading mobile devices. Below is a quick list of some updates you can do for higher website mobile compliance. See also the Google Developers Website.
 |
Mobile Version Plugin Custom Built Mobile |
Considerations:
So you want to update that tired old website and make it mobile friendly. There are a few options available, so to help you make the most informed choice you should check out Updating Your Website For Mobile. This page outlines some options available for both building a new, or updating an old website for mobile compliance.
Before reading the following sections you may want to review the article Responsive vs. Mobile Version for an objective viewpoint on the pros and cons of each update strategy. Since Allwebco sells both types of templates, responsive and mobile sub-sites, we do not favor one over the other. It all depends on the specific website project and website goals.
(Option #1) Mobile Site Solution:
Rather than edit your current website with responsive code (next section) you can instead add a mobile sub website linking to it from your full website, or using automatic PHP or jQuery mobile detection. See the following support areas:
Our Recommendation:
Easing into mobile: One option is to use a design or responsive website template that is close to a full website but still very mobile friendly. Place the mobile site in a folder named "mobile" in your hosting login, link to it from your full site homepage and site map and start updating it with your website text and images. It will be listed at Google as a mobile friendly website. Webpages inside a folder rank just as well as pages in the main hosting folder. For more help see guide for creating adaptive websites for mobile.
At any point, once you think your mobile site is good enough, or contains enough info, you can optionally move the mobile site into the main hosting folder and make it your main website. This way you can still add mobile compliance quickly and keep your current website undisturbed for desktop SEO.
(Option #2) Responsive Solutions:
Responsive solutions are updates you can do on your current website to make the pages more mobile friendly without adding a mobile sub website. Making a site fully responsive is an involved task and should only be attempted by experienced users.
Larger Fonts:
Mobile screens can be small. One quick update you can do is to increase your font sizes on your webpages and on the menu buttons and increase button padding. See Font Editing.
Add Media Queries:
Media Queries is responsive CSS3 code that detects the width of the device browser allowing your website to change fonts and layouts or hide items on smaller resolution mobile device screens. See Media Queries.
Smaller, Less Images & Files:
Remove images and videos on the homepage, use less images per page. See Mobile Tips.
Larger Image Tap Targets:
Tap targets are images that are linked to other webpages or websites. Increase any images to about 40 pixels or hide them using Media Queries if this is not possible.
Meta viewport Tag:
It is a common misconception that adding a meta name="viewport" tag to webpages will make them mobile friendly. Only add this meta tag if you can get your website down to under about 480 pixels wide. This tag should only be used in fully responsive or dedicated mobile websites.
Flash Animation:
If your website includes Flash animation in the header or for the home page image slideshow you can update a couple of different ways.
- Replace Flash slideshows with jQuery. See Free jQuery Slideshow
- Use the graphic logo option included with your template. See your help.html page. If you need a logo created see Custom Work
- Replace any Flash sliders or slideshows with a static image. This will be the animation on the homepage and most templates included a static version home page named "No-Animation-Home-sample.htm" or optional homepage.
- Add a Flash detection script. See Custom Work
Using the tips above any website can pass the Google Mobile-Friendly Test and rate better at Google PageSpeed Insights, however, this may take quite a bit of work and testing. In our tests, at the time of this writing, we found the Google Mobile Friendly tests to be very flexible toward older code and design. Basically, Google just wants your website to be readable on mobile devices, so getting your text, menu buttons and linked images larger may be all your site requires.
(Option #3) Update With a New Template:
Although you can do many things to be more mobile friendly, moving your website content into a new website design is another solution. Allwebco offers many responsive web templates as well as full sites that include a mobile sub-site that matches the full site. Website template discounts are available.
We also offer full credit on recent template purchases if you wish to do a trade-in for a different template model. Contact us for info.
