Under Construction

Notes on making your web pages mobile device compatible.

In 2015 web access from mobile browsers (smart phones and tablets) was approaching 50% of web page accesses.
See more browser data.

In 2015 Google posted on the official Webmaster Central Blog, that they would be extending the use of mobile-friendliness as a ranking signal. It would affect rankings on mobile devices only.
Page speed and load times will also affect rankings starting in 2018. (It was not clear to me if this applied to access from mobile devices only.)

file:///Users/dtmcbride/Sites/donsnotes/health/images/corona-ca-counties-sum.png Wide pages with things like tables and long performed text (<PRE>) strings will display on mobile devices but will be reduced to fit on the screen, so hard to read. You can enlarge the view and then scroll left or right to see it, but google does not consider this mobile friendly.

They will downgrade your ranking when you search for a page that is not mobile friendly.

Note from Google Search team 2022
The following issues were found on your site:
  • Viewport not set
    The page defines a fixed-width viewport property, which means that it can't adjust for different screen sizes.
  • >Text too small to read
  • Clickable elements too close together
Early mobile phones had around 320 x 480 displays.

A page enclosed in a table with width="100%" was mobile-friendly.
width="500" was not.

A 500 x 100 pixel image is mobile-friendly

500 x 1000 Pixel Image is still mobile-friendly
The Google mobile friendly test is inconsistent.
A 600 px image on this page usually (not always) makes the page NOT mobile friendly, but on a page by itself a 600 px sometimes is mobile friendly.
A 600 x 20 px image is usually not mobile-friendly but sometimes is.
Same for a 768 x 20 px image

  1920 x 1000 image
Preformatted Text

limit for preformated text seems to be around 64 characters in 10 point font.
<PRE style="font-size:10pt;"> - Preformatted text - monospace font and no wrap

         0         0         0         0         0         0
Preformatted text can be up to 64 characters in 10 pt font.
510 pixels on my MacBook Pro and my Samsung galaxy tab S3, 1,000 pixels on my iPhone 5s, 695 pixels on my iPhone 7+.
See a larger PRE

Tables Tables up to 500 px are mobile-friendly
Hike Dist. Diff-
Elev Elev
Emerald Lake 3.5 mi. Easy 4.7 (703) 9,500-10,170 780 Rocky Mtn NP
Mills Lake, Glacier Gorge Trail 4.7 Easy 4.5 (165) 9,180-9,920 700 Rocky Mtn NP
400 px table with 10 rows

A non friendly table which was designed for 1,000 pixel width. - Denver Hiking

How to make wider tables mobile friendly:
I googled around and there is no magic to make a page with a larger table "mobile-friendly" (according to google) and still have it look like a table. The solution is to convert the table to a list.

You can use JavaScript to get the display size then output the appropriate display. Below is an example.
On a desktop or laptop you can hit the button below to see what it looks like on the current size window, then resize the window and hit the button again.
Test it here.

Version to display on page load.

Example from PCMag.com
It is more sophisticated because it will reformat as you resize the window on a laptop of desktop.

Things to do to make mobile friendly pages:
  • Insert the meta tag
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    width=device-width instructs the page to match the screen's width in device-independent pixels.
  • Set width property to 90%
  • Width is confusing. The iPhone retina display, crams two device pixels into each CSS pixel on the screen so the CSS or display size is half the "reslution"
    See: mydevice.io know your mobile device (pixel-ratio, CSS width, features)

    Size Type %
    1 640x360 Galaxy S3-7
    LG 3-5
    2 1366x768 Most common laptop 11.4%
    3 1920x1080 1080P HD 6.8%
    4 1024x768 iPad 6.1%
    5 667x375 iPhone 6-9 5.7%
    6 736X414 iPhone 6+,7+,8+ 2.6%
    TOTAL 55.0%
    Source: W3Counter: Global Web Stats

    Some other device display sizes
    Device (CSS)
    iPhone 3,4 320x480 2
    iPhone 5 320x568 2
    iPhone 6,7,8 375x667 2
    iPhone 6+,7+,8+ 414x736 3
    iPhone X 375x812 3
    Samsung Galaxy S, S2, 320x533 1.5
    Samsung Galaxy S3 - S7 360x640 2-4
    Samsung Galaxy S8 360x740 4
    LG 3,4,5 360x640 4
    Apple iPad Pro 1024x1366 2
    Apple iPad Pro 9.7 768x1024
    2iPad 3,4, Air, Air 2 768x1024 2
    Apple iPad 1,2 768x1024 1
    Samsung Galaxy tab S3 800x1280 1
    Samsung Galaxy tab S2 800x1280 1
    Samsung Galaxy tab 8.9" 800x1280 1
    Samsung Galaxy tab 2 7" 600x1024 1

  • Magic numbers:
    • Maximum width
      Preformatted text can be up to 140 characters in 10 pt font (1,120 pixels)
      Tabels can be up to 500 pixels
      Images can be up to 767 pixels
    • 980 - To attempt to provide the best experience, mobile browsers render the page at a desktop screen width (usually about 980px, though this varies across devices)

      Note: my MacBook Pro (Retina, 13-inch, Mid 2014) recommended 1280 x 780 display resolution although it will do twice that.

Mobile-Friendly Test - Google Search Console
Mobilegeddon: A Complete Guide to Google's Mobile-Friendly Update
How to pass the Google Mobile-Friendly Test, for legacy sites - LucarInfo Blog — LucarInfo Blog
mydevice.io know your mobile device (pixel-ratio, CSS width, features)
8 Myths About Mobile Optimization
Responsive Web Design Basics  |  Web Fundamentals  |  Google Developers
Creating a mobile-friendly web page with Dreamweaver CS5.5 - Tutorial - Dreamweaver Club
Dave's Mobile-Friendly notes
last updated 4 Apr 2018