Old legacy sites are honestly one of the hardest web sites to make mobile-friendly. New web sites that are custom built or running off a popular CMS are relatively easy to convert but old static web sites are a real pain.
Zineb Ait Bahajji from Google posted in the Google Webmaster Help forums detailed technical advice on how to go about making your static web pages responsive/mobile friendly for the upcoming mobile-friendly algorithm.
The tips are details and advanced but again, static web sites require you to update every single page individually, which will be time consuming and leave areas for many errors and glitches, so be careful.
Here is her advice:
If you can't migrate your site to a CMS, here are some suggestions on how you can rewrite your site to be mobile-friendly. This is a non-exhaustive (but very long) list of advice, but we hope it will provide you with a starting point:
- Use Chrome Device Emulation Mode to test your website on different screen sizes and resolutions.
- Configure the Viewport. This tag will help scale the content of your page to fit with different screens. Without the Viewport, your content will be displayed as if it was on a desktop.
- Consider using CSS instead of <font> and other inline HTML elements.
- If you see a page that is too wide, it's probably caused by some HTML element that is too wide. You should use HTML elements with CSS that know how to float and resize themselves. You can visit our PageSpeed Insights page to learn more about how to optimize CSS delivery.
- Remove all fixed-pixel width (e.g. <table width=600>), and replace them with either relative width (e.g. <table width="80%">), max width (<table style="max-width:600px;">), or responsive width based on media query.
- Add img { max-width:100% } to the stylesheet. This is an easy way to deal with wide images, making all wide images shrunk within the device width.
- Avoid using <table> to layout a page. Use <table> for real tables only. If you already have <table> layout, firstly convert it to div + CSS floats/inline-blocks to be rendered nicely in desktop. After that, add media queries to make it responsive. To see more details and examples about creating responsive layout, check Responsive Web Design Basics and Patterns in Web Fundamentals.
- Avoid wide tables (tables with 3-4 columns or more); they cannot be fit into mobile screens. If you already use such tables on your website, we recommend that you modify them (e.g. transpose the table), or that you convert your code to a style without a table (such as <dl>).
- Get rid of <pre> tags when possible, because it often makes the page wider. The way depends on the content of these tags:
- For formatted texts, use CSS margin, padding, text-indent, etc.
- For tables, use <table>. Please also follow the above instruction about wide tables.
- For fixed-width fonts, use CSS font-family:monospace.
- For others that really need to preserve whitespace (e.g. computer code), it's OK to use <pre> but add style="overflow:auto;" to allow horizontal scrolling within the pre box.
- Add DOCTYPE declaration for users using old desktop browsers, such as Internet Explorer 8. Without a correct DOCTYPE at the top of HTML, some desktop browsers enter "Quirks mode" and render in a non-standard way. Using a DOCTYPE declaration makes them follow the standard, so you're less likely to get strange rendering in old browsers.
- Do not use Flash or other plugins that are not commonly supported on mobile.
