A few years ago Google got everybody scared that they had to make their pages mobile device friendly or they would not show up in searches. First of all it is not as much of a problem as Google made out, and second it only applies to searches made on a mobile device. Plus people can turn their cellphone to horizontal to read larger pages and make the print smaller, so rankings are not going to be affected as much. I'd say you only need to work on a few pages such as index pages that have to be navigated faster. If you try to fix every page you could make things worse for working on very large screens if you vary the relative pixel rates and you may have to work in the opposite direction for something that would surely be builtin to browsers.
Google rules for compatibility:
Must work well with 375px screen width. A 420 pixel width that they appear to use in testing would compress to 375px and be readable, but that would imply that you did not have free flowing text to begin with.
Avoid flash which does not work on most mobile devices
Make sure links are not too small or close together (fat fingers)
Make sure Text is not too small to read
Mobile viewpoint is not set -- I'd say keep clear of all of the variations and just use the one below; otherwise, large screens become a problem later, and you will have to provide tweaks for every screensize and device -- keep things simple.
IMPORTANT: Add viewport META tag to files you want to test, without this the test program will fail you for mobile compatibility on small characters as it compresses 920 pixels into 420 pixels. <meta name="viewport" content="width=device-width, initial-scale=1.0" >
Use
overflow-wrap - CSS | MDN to force a linebreak within a word for such things as long urls and big words.
<span>style="overflow-wrap: break-word;"> ... </span> i.e. <a href="..." style="overflow-wrap:break-word;">
You could add it to your headings as follows: (and take care of PRE as well)
<style type="text/css">
a {overflow-wrap: break-word;}
pre {white-space: pre-wrap;}
</style>
Check the spelling on all pages you update with a bookmarklet:
sp - spelling or with
Grammarly which can be installed on Firefox, Chrome, Windows, I have had mixed success within browser itself as opposed to text entry areas, very good when it does it's thing.
You can read your persdict.dat file in your Firefox profile by opening it in your browser, you can then sort the list and copy to a text file. You can find my list of words (1,078) that I added here, or as a txt file here. It is an accumulation and as dictionaries improve you would need to add fewer words to your own dictionary. Add words that come up as spelling erros into your own dictionary. Just checked Chrome and practically all of them have to be added, and adding them one at a time is not going to happen.
Two examples of large text boxes:
dict, and
dict2; the first includes an earlier copy of my dictionary additions, the second is more streamlined. Purpose of both is to look at text for possible additions to the current browser's dictionary.
The bookmarklet above works in Firefox, you may have to toggle off/on spell check in preferences or in your context menu after running bookmarklet. This is the reason I made large text areas they work better at checking spelling.
Basically changes made to main page and search page for testing:
Find “pre>”, this will find both <PRE> and </PRE>
Use of PRE messes up font and underscored links and extends width, use only for code and wrap code so it is kept within bounds,
Change "<a " to "<br><a " use find to find next to see if it is at beginning of line formerly in the <PER> range; or just prefix each line within the removed Preformatted text tags with <BR>
Find "width=" then change nnnpx to a nnn%, like 80% or 95% instead of 780px
Use a spelling checker to examine your current pages. You can do that for free with Firefox and a bookmarklet and your own dictionary additions. I'll give you a list of mine, you can use it to add words that appear as spelling errors in your own browser if you accept them individually as correctly spelled .
If in doubt don't add words to your dictionary unless you are sure they are correcty spelled
Corporate Governance (corpgov.net), is mobile friendly. I'm surprised, paid off to use software. Note images are in upper left corner of segments and get reduced to screen width in portrait view without disturbing format of layout.
Mobile devices can be held vertically or horizontally, and have a Screen size of 570w✕320v or 320w✕570v, reduced by parts of screen used by operating system to 528w✕239v horizontal or 320w✕440h vertical, compared to older desktops with 1024✕768, or on newer small laptops of 1366w✕738v.
Mobile Browsers make accomodation for links close together by enlarging the area, so you can pick the correct link.
Mobile Browsers allow you to double tap to show webpage or large areas better for viewing.
On my photography club webpage, SCPC, I simply added overflow-wrap to the anchor tag in the headings, and to a plain text link of the club url. It renders fine in portrait, things that are small such as the rows of tabs at top, and tiny print meant to be unobtrusive and only for making quick navigation links are meant to be as invisible as stage-hands dressed in black during a performance. Can't figure out why the top menus do not reach across the entire page, even after several DIV with widths. Mobile test sees page differently than browsers.
10 Simple Ways To Make Your Website Mobile-Friendly
If you're still trying to figure out how to make your website more friendly for mobile devices, here are 10 simple things you can do to make sure your website is mobile-friendly and do not lose out on those mobile traffic.
This page was created on Feb 26, 2018.
Questions concerning this page can be emailed to me:
David McRitchie
send email comments (site comments/corrections).