How to Make Static Pages Mobile-Friendly

On August 5th, 2019 / By Hamzah Khadim

One of the biggest challenges for webmasters is converting static website to mobile-friendly responsible pages. The biggest issue is the coding originally used to create static pages since it did not consider the mobile user. While it is possible to convert static pages, it is time consuming and prone to several errors throughout the process. In addition, rather than being able to simply convert the entire site with minor adjustments, every single page has to be converted manually, modifying and recoding the content.

The best approach is to modernize your web development by using a content management system (CMS). Most popular CMSs make it easy to convert static sites into new, mobile-friendly compatible web pages. If you are unable to deploy a CMS, an alternative solution, which may actually save you time, is to redesign the entire website from the ground up and use HTML5 mobile-friendly coding to code the page content.

However, if neither of these options is feasible, it is still possible to modify the static pages and convert the pages into mobile-friendly content. Keep in mind the tasks required to do this are rather long. The following is a list to get your started on this process and does not include every single aspect, as every website varies.

1. Use the Viewport tag. Viewport scales the page content to fit with different screen sizes. Without the tag, content will be displayed like it was being viewed on a desktop.
2. Adjust images maximum width. Set the maximum width for images to 100% on the stylesheet. With this adjustment, images shrink size based upon the device’s maximum display width.
3. Test emulations modes. Google offers its Chrome Device Emulation Mode tool to test website pages at different resolutions and screen sizes.
4. Use cascade styling sheets (CSS). Remove <font> HTLM tags and other such elements and convert them to CSS. With CSS, pages automatically resize themselves to match the user’s display.
5. Remove <table> page layouts. The <table> tag should only be used for actual tables, not page layouts. Replace the tag with CSS-friendly tags to make the page mobile responsive.
6. Add the declaration “DOCTYPE.” Including this declaration into your page coding ensures compatibility with older browsers without affecting the changes made for mobile users.
7. Remove fixed pixel widths. Fixed pixel widths work fine with static pages, but not mobile-friendly pages. Instead, replace fixed widths with a percentage or utilize a maximum width command or configure the width to be responsive.
8. Avoid using plugins that are not supported on mobile devices. Flash and other such plugins will result in mobile users getting an error on the site pages they visit. Convert videos and other animations using the appropriate HTML5 coding compatible with mobile devices.
9. Remove <pre> tags from page content. These tags tend to make pages display wider than necessary. Use the appropriate CSS mobile-friendly tag. In cases where the <pre> tag is required, set the style command for overflow on auto.

While this initial list of tasks might not seem too overwhelming, there are other tasks that must be completed with static web pages in order to make them mobile-friendly website. After adjustments are made to each page, verify how it displays on both a smartphone and a tablet. Additionally, run the free Google mobile-friendly comparison tool, as well, to find and identify other problems that still require fixing.