Don's Home
Web Developement
Mobile Friendly Pages, mobile device compatibility, mobile usability
|
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.
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. 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:
|
Early mobile phones had around 320 x 480 displays.
A page enclosed in a table with width="100%" was mobile-friendly.
Image:
limit for preformated text seems to be around 64 characters in 10 point font. 1234567891123456789212345678931234567894123456789512345678961234 0 0 0 0 0 0 </PRE>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
A non friendly table which was designed for 1,000 pixel width. - Denver Hiking
How to make wider tables mobile friendly:
You can use JavaScript to get the display size then output the appropriate display. Below is an example. Version to display on page load.
Example from PCMag.com Things to do to make mobile friendly pages:
Links: 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 |