Mobile Web Design

From BC$ MobileTV Wiki
(Redirected from PWA)
Jump to: navigation, search

Known issues and limitations in Mobile Web Design are many, but can for the most part be summarized into the following three main categories:

  • Presentation Limitations – including screen size and resolution, projection (scale to other screens), support for visual effects, browser, media player, etc
  • Input Limitations – such as navigation, form controls and condensed keyboards, etc
  • Physical Limitations – as in memory size, processor speed, network card, graphics cards, sound cards, etc

These issues make designing web and other user interfaces for the mobile extremely challenging.



Approaches

User-Agent Detection

User-Agent string matching or checking can be done to determine on the server-side (or client-side) whether the user is accessing your site via a Mobile Device or larger screened Desktop. This method is subject to abuse though as the User-Agent can be spoofed, hidden, missing (i.e. old device or stripped down) or just plain inaccurate, and should be considered unreliable. However, it can still be used for "suggested" redirecting or basic device/capability checking. Important variables include:

  • navigator.userAgent
  • navigator.appName
  • navigator.appVersion

To list out all User-Agent related information, use the following:

 for (i in navigator) {
  document.write('<br />navigator.' + i + ' = ' + navigator[i]);
 }

[1] [2] [3]

 <?php
 
 $mobile_browser = '0';
 
 if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $mobile_browser++;
 }
 
 if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
    $mobile_browser++;
 }    
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda ','xda-');
 if (in_array($mobile_ua,$mobile_agents)) {
    $mobile_browser++;
 }
 if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {
    $mobile_browser++;
 }
 if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows') > 0) {
    $mobile_browser = 0;
 }
 if ($mobile_browser > 0) {
   // do something
 }
 else {
   // do something else
 }   
 
 ?>

[4] [5] [6]

Progressive Enhancement

Progressive Enhancement is a strategy for web design that emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.

PWA

Progressive Web Applications (PWA) are lightweight self-contained web applications that are "Added to Homescreen" using the corresponding Mobile "Add to Homescreen" option, whereby the PWA will appear with an icon in a similar manner to the Native Applications installed on the device.

PWAs typically leverage some or all of the following web technologies:

  1. Metadata
  2. Manifest JSON (metadata & "discoverability")
  3. Add To Homescreen to enable adding the app to your Mobile device (and now through Windows Store's PWA support, PC Desktop)
  4. ServiceWorkers for more efficient data retrieval
  5. WebWorkers for background data processing
  6. AJAX/Fetch for real-time updates from client-server or server-client
  7. SSEs
  8. localStorage for caching of frequently needed data
  9. Offline Mode
  10. Feature-Policy (which requests and users optionally grant access to features like: Accelerator, Magnetoscope, Altimeter, GPS/Location, Notifications, etc)


[11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23]

[24] [25] [26] [27] [28] [29] [30] [31] [32]

[33] [34] [35] [36] [37] [38] [39] [40] [41] [42]

[43] [44] [45] [46] [47] [48] [49] [50] [51] [52] [53] [54] [55] [56] [57] [58] [59]

[60] [61] [62] [63]

[64] [65]


[66] [67] [68] [69] [70] [71] [72] [73] [74] [75] [76] [77] [78] [79] [80] [81] [82] [83] [84] [85] [86] [87] [88] [89] [90] [91] [92] [93] [94] [95] [96] [97] [98] [99] [100] [101] [102] [103] [104] [105]


No inline JS
No inline CSS

Adaptive

Fluid Layouts

The following simple formula can be used for converting Fonts from their pt/px measurements to relative/fluid "em", and also for converting static/fixed width & height layouts (px) to dynamic (%).

Target / Context = Result

For instance to convert a static layout with a main site (just below body) container width of 1080px and a left sidebar menu of 280px with content area of 800px you would do the following conversion for the sidebar width:

280px / 1080px = 25.93%

Now for the remaining content area on the right:

800px / 1080px = 74.07%

The same concept also applies for fluid margin calculations, say there was also a margin of 50px between left and right (meaning the total area was 50 + 280 + 50 + 800 + 50 = 1230px fixed layout, or, 150 needs to be evenly subtracted from the 280 and 800 if the old layout was limited to 1080px), then you have the following:

 .container {
   width: 100%;
   height: 100%;
   margin: 4.06%; /* 50px/1230px */
 }
 .sidebar {
   width: 22.76%; /* 280px/1230px */
 }
 .content {
   width: 65.04%; /* 800px/1230px */
 }

An essential trick for fluid heights is that you need to provide 100% height for the html & body before any child elements can be dynamically resized vertically, as follows:

html, body {
  height: 100%
}

Now the main container on the page can have its content fill the available area, or the whole page itself can even be iFrame'd (as in a Widget, Mashup or other external embed approach), but without this in place, height: 100% on child elements will have no effect.

Responsive Design

Responsive Web Design (RWD) uses a combination of methods including:

  1. multiple image files (file-sizes/definition/dimensions)
  2. scalable web Font packages
  3.  % rather than pixel or physical measures on CSS layout properties
  4. folding of menus once a threshold is surpassed
  5. large touchable icons in Mobile view that replace regular buttons/links from Desktop view
  6. gesture support (swipe, pinch/zoom, etc)

[108]

[109]

[111]


META

Automatically set the page width to the device's physically available screen width/resolution:

<meta name="viewport" content="width=device-width" />

[112]

Disallow pinch/zoom (not a good move for accessibility reasons, but in the right context to maintain screen to content ratios for a particular experience):

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

[113] [114] [115] [116] [117]


CSS

Specify the media type to render mobile-specific styles:

<link type="text/css" rel="stylesheet" href="style/mobile.css" media="handheld" />

[118]

media Attribute

The CSS spec actually defines a number of device profiles, however, reliance on these as the only method of deciding device dimensions and presentation can be prone to errors as not all devices and browsers respect or follow the standards in this regard. Some may report the wrong profile or no profile at all.

Projector:

<link type="text/css" rel="stylesheet" href="css/projector.css" media="projection" />

Desktop:

<link type="text/css" rel="stylesheet" href="css/desktop.css" media="screen" />

Television:

<link type="text/css" rel="stylesheet" href="css/tv.css" media="tv" />

Mobile device (i.e. Smartphone, Cellphone, etc):

<link type="text/css" rel="stylesheet" href="css/mobile.css" media="handheld" />

Tablet:

<link type="text/css" rel="stylesheet" href="css/tablet.css" media="only screen and (min-width: 321px) and (max-width: 768px)" >

Printer and other print devices or software (such as a PDF converter, screenshot saver, etc):

<link type="text/css" rel="stylesheet" href="css/printer.css" media="print" />


@media Queries

You can also use the above technique of Media queries inline within <style> tags, or inside of an externally loaded CSS file itself:

 @media handheld {
   .container {
	padding: 0;
	margin: 0;
        width: 100%; /* use % widths to prevent content overflows/resizes on mobile */
   }
   .left {
	padding: 0;
	margin: 0;
        width: 20%;
   }
   .right {
	padding: 0;
	margin: 0;
        width: 80%;
   }
 }

[119]

Another useful trick is to be able to make an image or lengthy or secondary content section (i.e. within an ASIDE, DIV or P tag) appear only on orientation change:

 .sidebar div { background:url(/img/huge.png) }
 @media only screen and (max-device-width: 480px) {
   .sidebar { display:none }
 }
 @media only screen and (max-device-width: 480px) and (orientation: landscape) {
   .sidebar { display:block }
   .sidebar div { background:url(/img/small.png) }
 }

[120] [121]

Device Breakpoints

Here's a full list of common queries for different screen resolutions and physical device sizes (organized in order of size, biggest to smallest).

Projectors such as in a home theater system, Work office presentation or board room, or Public Advertisement Display screens (expect HD, inability to read small text and changing dimensions => 2048x1536 and up, even iPad now has these specs with its retina display at 264 pixels per inch (ppi))[122]

TVs such as "Smartscreens", Google TV, Connected TVs, etc... (typically a widescreen with HD and retina display ==> 1920x1080)

Business, Hardcore Gaming or Developer Computers (usually use widescreen and/or dual screen display ==> 1680x1050)

@media only screen and (max-width: 959px) {  } 

Desktops and Laptops (most home PC & Mac users fall into this category ==> 1024x768)[123]

@media only screen and (max-width: 959px) {  } 

Desktops, Laptops or Netbooks with Smaller than standard 960 pixels wide ( ==> 800x600):

@media only screen and (max-width: 959px) {  }

Tablet Portrait size to standard 960 (tablets and browsers ==> 800x1200):[124]

@media only screen and (min-width: 768px) and (max-width: 959px) {  }

All Smartphone Mobile Sizes (typically only high-end smartphones approach this max-width ==> 640x480) and Tablet Landscape (lower-end portable devices and browsers ==> 600x1024):

 @media only screen and (max-width: 767px) {  }

Mobile Landscape Size (horizontal, left-to-right ==> 480x360) to Tablet Portrait (devices and browsers ==> 480x800):

 @media only screen and (min-width: 480px) and (max-width: 767px) {  }

Mobile Portrait Size (vertical, top-to-bottom ==> 1680x1050) to Mobile Landscape Size (devices and browsers ==> 320x240):

 @media only screen and (max-width: 479px) {  }

Legacy Mobile Phones, these old devices were believe it or not "phones" before they were portable entertainment centers or business tools and range widely in physical screen size, but typically only support video at 176x144:

 @media only screen and (max-width: 320px) {  }

[126] [127] [128] [129] [130] [131] [132] [133] [134] [135] [136] [137] [138] [139] [140] [141] [142] [143] [144] [145] [146]

JS Breakpoints/screen-sizes

JavaScript is far less reliable cross-browser in its interpretation of screen width/height .vs. window width/height .vs. container width/height, so it is almost always recommended to use CSS breakpoints first for acheiving responsive design goals. That said, some common JS utilities to help vary your display for the available screen/window/container real estate follow:

/**
 * Helper functions to determine styling and sizing display variations
 */
function getStyle(ele) {
   return (ele.currentStyle || window.getComputedStyle(ele));
}

function getScreenWidth() {
   return (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || screen.availWidth || screen.width);
}

function getScreenHeight() {
   return (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || screen.availHeight || screen.height);
}

function getContainerWidth(ele) {
   return (ele.clientWidth || ele.offsetWidth);
}

function getContainerHeight(ele) {
   return (ele.clientHeight || ele.offsetHeight);
}

Touch/Drag


Hamburger Menu

[147]


App Design

In general, both App guidelines advise against building a large number of images statically right into the App, as that can unnecessarily increase App size (Google studies have shown a 1% increase in downloads for every 6MB of install size saved).[148]

[149] [150]

iOS - Human Interface guidelines

http://martiancraft.com/blog/2014/09/vector-images-xcode6/

[151] [152] [153] [154] [155] [156] [157]


Android - Design guides

Tools


Resources

[158] [159] [160]

[161] [162] [163]


Tutorials


External Links


References

  1. Using the navigator object to detect client's browser: http://www.javascriptkit.com/javatutors/navigator.shtml
  2. Auto detect mobile browser (via user-agent?): http://stackoverflow.com/questions/1005153/auto-detect-mobile-browser-via-user-agent
  3. Browser detect: http://www.quirksmode.org/js/detect.html
  4. Lightweight Device-Detection in PHP: http://mobiforge.com/developing/story/lightweight-device-detection-php
  5. Mobile Device Detection and Redirection with PHP: http://www.mlynn.org/2010/06/mobile-device-detection-and-redirection-with-php/
  6. Browser detection using the user-agent (with Chrome example): https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
  7. PWA - manifest spec: https://www.w3.org/TR/appmanifest/
  8. PWA case studies: https://developers.google.com/web/showcase/
  9. Google's "Weather PWA": https://github.com/googlecodelabs/your-first-pwapp/archive/master.zip
  10. PWA installation criteria: https://web.dev/install-criteria/
  11. Google Codelabs -- PWAs - Going Offline: https://developers.google.com/codelabs/pwa-training/pwa03--going-offline#0
  12. Google Codelabs -- PWAs - Build a PWA with Firebase, Polymerfire and Polymer Components: https://clmirror.storage.googleapis.com/codelabs/polymer-firebase-pwa/index.html
  13. Progressive Web Apps (Google overview on PWAs): https://developers.google.com/web/progressive-web-apps/
  14. Manifest - Web Accessible Resources: https://developer.chrome.com/extensions/manifest/web_accessible_resources
  15. Fullscreen Web App for Android: https://stackoverflow.com/questions/7517352/fullscreen-web-app-for-android
  16. 12 HTML5 tricks for mobile (2014): https://www.creativebloq.com/html5/12-html5-tricks-mobile-81412803
  17. Removing address bar from browser (to view on Android): https://stackoverflow.com/questions/4068559/removing-address-bar-from-browser-to-view-on-android
  18. Making Fullscreen Experiences (desktop & mobile): https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
  19. Patterns for Promoting PWA Installation (mobile): https://developers.google.com/web/fundamentals/app-install-banners/promoting-install-mobile
  20. User Can Be Prompted To Install The Web App: https://developers.google.com/web/tools/lighthouse/audits/install-prompt
  21. Native App Install Prompt: https://developers.google.com/web/fundamentals/app-install-banners/native
  22. PWA "Add to Home Screen": https://developers.google.com/web/fundamentals/app-install-banners/ (triggering the prompt intelligently where supported, detecting already addded to homescreen where supported, etc... right now Android/Chrome leads in PWA spec compliance but iOS/Safari shows signs of improvement and should hopefully be catching up)
  23. Android Oreo takes a bite out of Progressive Web Apps: https://medium.com/@firt/android-oreo-takes-a-bite-out-of-progressive-web-apps-30b7e854648f
  24. Google CodeLabs -- Your First Progressive Web App: https://codelabs.developers.google.com/codelabs/your-first-pwapp/
  25. Progressive Web Apps 101: the What, Why and How: PART 1 | PART 2
  26. Getting started with Progressive Web Apps: https://addyosmani.com/blog/getting-started-with-progressive-web-apps/
  27. Why Are App Install Banners Still A Thing?: https://medium.com/dev-channel/why-are-app-install-banners-still-a-thing-18f3952d349a
  28. All you need to know about Progressive Web App: https://codeburst.io/all-you-need-to-know-about-progressive-web-app-4ba73368da66
  29. Upgrading the HTML5 Boilerplate Project to a Progressive Web App in 15 Minutes: http://https://love2dev.com/blog/15-minute-progressive-web-app-upgrade/
  30. What Browsers Support Service Workers?: http://https://love2dev.com/blog/what-browsers-support-service-workers/
  31. Progressive Web Applications Features Make the Web More App-Like: https://love2dev.com/blog/progressive-web-app-features/
  32. PWAs .vs. Native for SEO: https://www.searchenginejournal.com/progressive-web-apps-vs-native-apps/198759/#close
  33. Microsoft PWAs: https://developer.microsoft.com/en-us/windows/pwa
  34. Microsoft is supporting Google's Progressive Web Apps platform and that's great news for everyone: https://www.windowscentral.com/faq-progressive-web-apps-windows-10
  35. Tailor your PWA for Windows: https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps/windows-features
  36. Microsoft Teams and Progressive Web Apps coming soon to the Windows Store: https://www.windowscentral.com/microsoft-teams-and-progressive-web-apps-coming-soon-windows-store
  37. Microsoft to Integrate Progressive Web Apps with Windows 10 from Redstone 4: https://winbuzzer.com/2017/10/30/microsoft-integrate-progressive-web-apps-windows-10-redstone-4-xcxwbn/
  38. Microsoft tees up Windows 10 support of Progressive Web Apps: https://www.zdnet.com/article/microsoft-tees-up-windows-10-support-of-progressive-web-apps/
  39. Microsoft's latest Windows Store strategy involves a rebrand plus Progressive Web Apps: https://www.zdnet.com/article/microsofts-latest-windows-store-strategy-involves-a-rebrand-plus-progressive-web-apps/
  40. Yes, PWA Will Kill UWP. It’s OK: https://www.thurrott.com/windows/windows-10/151780/yes-pwa-will-kill-uwp-ok
  41. Welcoming Progressive Web Apps to Microsoft Edge and Windows 10: https://blogs.windows.com/msedgedev/2018/02/06/welcoming-progressive-web-apps-edge-windows-10/
  42. Progressive Web Apps (PWA) -- What they are, and what they mean for Microsoft: https://www.windowscentral.com/what-are-progressive-web-apps-video
  43. A Few Tips That Will Make Your PWA on iOS Feel Like Native: https://www.netguru.com/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native
  44. What’s new on iOS 12.2 for Progressive Web Apps: https://medium.com/@firt/whats-new-on-ios-12-2-for-progressive-web-apps-75c348f8e945 excellent breakdown of PWA lifecycle & APIs)
  45. iPhone 11, iPadOS and iOS 13 for PWAs and web development: https://medium.com/@firt/iphone-11-ipados-and-ios-13-for-pwas-and-web-development-5d5d9071cc49
  46. Enabling iOS Splash Screens for Progressive Web Apps - Everything you should know (2019): https://blog.expo.io/enabling-ios-splash-screens-for-progressive-web-apps-34f06f096e5c
  47. How to install PWA apps in your iOS device?: https://www.appypie.com/faqs/how-to-install-pwa-apps-in-your-ios-device
  48. How to Test PWA on iOS devices: https://superpwa.com/doc/test-pwa-ios-devices/
  49. What Progressive Web Apps are and how to install and use them on iPhone and iPad: https://www.idownloadblog.com/2018/07/19/howto-progressive-web-apps-iphone-ipad/
  50. What is Progressive Web App solution for iOS: https://stackoverflow.com/questions/41185471/what-is-progressive-web-app-solution-for-ios
  51. Apple’s refusal to support Progressive Web Apps is (was) a detriment to future of the web: https://m.phillydevshop.com/apples-refusal-to-support-progressive-web-apps-is-a-serious-detriment-to-future-of-the-web-e81b2be29676 (at least support for "Slash"/Loading screens, ServiceWorkers & Offline data/caching up to 50MB has been added, as of iOS 12 still missing key "Add to Homescreen" trigger from within website/webapp, configurability, and several other features)
  52. Apple Encouraging Progressive Web Apps [PWA] By Rejecting iOS Apps: https://love2dev.com/blog/apple-encouraging-progressive-web-apps-by-rejecting-apps/
  53. Safari iOS & PWAs (overview and limitations): https://dockyard.com/blog/2017/07/13/safari-ios-and-progressive-web-apps
  54. Don’t use iOS meta tags irresponsibly in your Progressive Web Apps: https://medium.com/@firt/dont-use-ios-web-app-meta-tag-irresponsibly-in-your-progressive-web-apps-85d70f4438cb
  55. What You Need to Know about the Progressive Web Application Add to Homescreen or Installation Process: https://love2dev.com/pwa/add-to-homescreen/
  56. PWAs are now (properly) available for Apple devices with iOS 12.2 (and 13 beta): https://www.monterail.com/blog/pwa-for-apple-ios
  57. Encouraging iOS users to install your Progressive Web Apps in Ember: https://dockyard.com/blog/2017/09/27/encouraging-pwa-installation-on-ios
  58. Apple could lose billions on Progressive Web Apps, but it has no choice: https://www.techrepublic.com/article/apple-could-lose-billions-on-progressive-web-apps-but-it-has-no-choice/
  59. Is Apple trying to kill PWAs?: https://ionicframework.com/blog/is-apple-trying-to-kill-pwas/
  60. wikipedia: Progressive Web App
  61. Progressive Web Apps - Escaping Tabs Without Losing Our Soul: https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
  62. Service Worker Caching Strategies Based on Request Types: https://medium.com/dev-channel/service-worker-caching-strategies-based-on-request-types-57411dd7652c
  63. Offline Cookbook (with ServiceWorkers): https://jakearchibald.com/2014/offline-cookbook/
  64. PWA starter kit -- build fast, scalable, modern apps with Web Components (Google I/O '18): https://www.youtube.com/watch?v=we3lLo-UFtk
  65. PWA Starter Kit with Monica Dinculescu - HTTP203 (2018): https://www.youtube.com/watch?v=dfsyABvzpj0
  66. Google Chrome samples -- ServiceWorker - Basic example: https://googlechrome.github.io/samples/service-worker/basic/
  67. Google Chrome samples -- ServiceWorker - Custom Offline page: https://googlechrome.github.io/samples/service-worker/custom-offline-page/
  68. Google Chrome samples -- ServiceWorker - Push Messaging example: | SRC
  69. Adding push notifications to a WebApp: https://codelabs.developers.google.com/codelabs/push-notifications/index.html#0
  70. Web Push library for Node.js: https://github.com/web-push-libs/web-push
  71. The End of App Stores Is Rapidly Approaching: https://onezero.medium.com/the-end-of-app-stores-is-rapidly-approaching-b972da395097 (PWAs may soon free you from Google Play and the iOS App Store)
  72. Why Progressive Web Apps Will Replace Native Mobile Apps: https://www.forbes.com/sites/forbestechcouncil/2018/03/09/why-progressive-web-apps-will-replace-native-mobile-apps/
  73. Why progressive web apps are anything but boring – a retail view from Magento: https://diginomica.com/2018/04/06/why-progressive-web-apps-are-anything-but-boring-a-retail-view-from-magento/
  74. Progressive Web Applications -- The Thing to Consider When Short on Resources: https://insanelab.com/blog/web-development/progressive-web-apps-pwa-vs-native/
  75. What is a PWA? and How to Install / Add to Home Screen Progressive Web Apps? (videos of Desktop .vs. Mobile experience): https://medium.com/pynk/what-is-a-pwa-and-how-to-install-add-to-home-screen-progressive-web-apps-e6e8087d9ad0
  76. The modern PWA Cheat Sheet by Maximiliano Firtman | JSConf EU 2019: https://www.youtube.com/watch?v=cybhV88KLfI
  77. An introduction to Progressive Web Apps: https://medium.freecodecamp.org/an-introduction-to-progressive-web-apps-6aa75f32816f
  78. How to Turn Your Website into a Mobile App with 7 Lines of JSON: https://medium.freecodecamp.org/how-to-turn-your-website-into-a-mobile-app-with-7-lines-of-json-631c9c9895f5
  79. Learn how to build a PWA in 5 minutes: https://medium.com/dev-channel/learn-how-to-build-a-pwa-in-under-5-minutes-c860ad406ed
  80. I built a Progressive Web App and published it in 3 app stores. Here’s what I learned: https://medium.com/free-code-camp/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned-7cb3f56daf9b
  81. A Simple Progressive Web App Tutorial: https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605
  82. A Beginner's Guide To Progressive Web Apps: https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/
  83. Everything You Should Know About Progressive Web Apps: https://tutorialzine.com/2016/09/everything-you-should-know-about-progressive-web-apps | SRC
  84. The Complete Guide to Progressive Web Apps: https://flaviocopes.com/progressive-web-apps/
  85. The Complete Guide To Progressive Web Apps with Ionic 4: https://ionicthemes.com/tutorials/about/the-complete-guide-to-progressive-web-apps-with-ionic4
  86. The Ultimate Guide to Progressive Web Applications: https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
  87. Getting started with Progressive Web Apps: https://addyosmani.com/blog/getting-started-with-progressive-web-apps/
  88. Progressive Web Apps (PWAs) FTW — Pt. 1 - Add To Homescreen & Offline-first experiences: https://medium.com/hackernoon/pwas-ftw-pt-1-37729432d529
  89. Progressive Web Apps (PWAs) FTW  —  Pt. 2 - ServiceWorkers & Cache API: https://hackernoon.com/progressive-web-apps-pwas-ftw-pt-2-31c2779e55c4
  90. How to save an image to localStorage and display it on the next page?: stackoverflow.com/questions/19183180/how-to-save-an-image-to-localstorage-and-display-it-on-the-next-page
  91. Service workers -- the little heroes behind Progressive Web Apps: https://medium.freecodecamp.org/service-workers-the-little-heroes-behind-progressive-web-apps-431cc22d0f16
  92. Service Workers -- Going beyond the page: https://blogs.windows.com/msedgedev/2017/12/19/service-workers-going-beyond-page/
  93. Build your first progressive web app with React: https://engineering.musefind.com/build-your-first-progressive-web-app-with-react-8e1449c575cd | SRC
  94. BBC News Webpages Move To Faster PWAs: https://www.mediapost.com/publications/article/338603/bbc-news-webpages-move-to-faster-pwas.html
  95. How to publish PWA app on Google Play Store – Step by step guide: https://www.vtnetzwelt.com/mobile/publishing-pwa-app-on-google-play-store/
  96. Progressive Web Apps are NOT only a Google thing: http://love2dev.com/blog/progressive-web-apps-google/
  97. Google, Apple, and Microsoft Are On Board With This Progressive Trend in 2019--Here's Why: http://www.inc.com/tom-popomaronis/why-google-apple-microsoft-are-on-board-with-this-progressive-trend-in-2019.html
  98. Progressive Web Apps - Microsoft And Google Are "Falling in Love" With: https://dazeinfo.com/2019/02/05/progressive-web-apps-microsoft-google/
  99. Share like a native app with the Web Share API: https://web.dev/web-share/
  100. How to Build a Progressive Web App (PWA) with advanced features/APIs like Face Recognition and Speech Recognition: https://dzone.com/articles/tutorial-how-to-build-a-pwa-with-face-and-speechrecognition
  101. Workbox - PWA with steroids: kforce.medium.com/workbox-improving-the-pwa-4a5f5bda8c9d (offers a set of libs & Node modules that make it easy to cache assets and take full advantage of features used to build PWAs)
  102. Your PWA is going to break in August 2021: https://javascript.plainenglish.io/your-pwa-is-going-to-break-in-august-2021-34982f329f40
  103. Google pauses plan to break your PWA: https://javascript.plainenglish.io/google-pauses-plan-to-break-your-pwa-d249bca27852
  104. Progressive Web Apps in 2021: https://firt.dev/pwa-2021/
  105. 2018 State of Progressive Web Apps: https://medium.com/progressive-web-apps/2018-state-of-progressive-web-apps-f7517d43ba70
  106. Designing Experiences for Responsive Web Sites: Adapting Your Content From 4-Inch Phones to 40-Inch TVs: http://msdn.microsoft.com/en-us/magazine/dn197837.aspx
  107. Why the Web Is Ready for Responsive Web Design: http://msdn.microsoft.com/en-us/magazine/dn151701.aspx
  108. CONDITIONALLY LOAD JAVASCRIPT BASED ON MEDIA QUERY: http://responsivedesign.is/develop/javascript/conditionally-load-javascript-based-on-media-query
  109. Space images out to match text height: http://zomigi.com/blog/css-effect-space-images-out-to-match-text-height/
  110. Videos styled with an intrinsic-ratio: https://web.archive.org/web/20110802130829/http://www.tjkdesign.com/articles/how-to-resize-videos-on-the-fly.asp
  111. Device-Agnostic Approach To Responsive Web Design: http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/1
  112. An introduction to meta viewport and @viewport: http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
  113. Mobile Dimensions via CSS/META: http://www.yourhtmlsource.com/accessibility/mobile.html
  114. Difference between visual viewport and layout viewport?: https://stackoverflow.com/questions/6333927/difference-between-visual-viewport-and-layout-viewport
  115. A tale of two viewports — part one: https://www.quirksmode.org/mobile/viewports.html
  116. A tale of two viewports — part two: https://www.quirksmode.org/mobile/viewports2.html
  117. Table viewport: http://www.quirksmode.org/mobile/tableViewport.html
  118. Responsive Web Design: http://www.alistapart.com/articles/responsive-web-design/
  119. CSS contents and browser compatibility - mobile: http://quirksmode.org/m/css.html
  120. W3C - Using CSS Flexbox to reflow content: https://www.w3.org/WAI/WCAG21/Techniques/css/C31 | DEMO
  121. Sirens - CSS for adaptable content that responds to orientation changes: http://aaronmentele.com/2012/01/13/sirens-2/
  122. iPad 3 .vs. iPad 2 specs: http://www.apple.com/ipad/compare/
  123. Screen resolution - web usage statistics: http://www.webdevelopersnotes.com/design/web-screen-resolution-usage-statistics.php
  124. RIM PlayBook vs Apple iPad: http://www.knowyourmobile.com/comparisons/613275/rim_playbook_vs_apple_ipad.html
  125. Responsive Design Breakpoints: The Ultimate Overview: http://1stwebdesigner.com/responsive-design-breakpoints/
  126. Media Queries for Standard Devices: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  127. Common CSS @media queries & breakpoints (by device size): http://stackoverflow.com/questions/16443380/common-css-media-queries-break-points
  128. MEDIA QUERIES FOR COMMON DEVICE BREAKPOINTS: http://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints
  129. The Most Used Responsive Breakpoints in 2017 Of Mine: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a
  130. Popular Screen Resolutions: Designing for All: https://mediag.com/news/popular-screen-resolutions-designing-for-all/
  131. Are there standard media query break points?: https://teamtreehouse.com/community/are-there-standard-media-query-break-points
  132. Screen sizes and breakpoints: https://docs.microsoft.com/en-us/windows/uwp/design/layout/screen-sizes-and-breakpoints-for-responsive-design
  133. Defining Breakpoints: https://responsivedesign.is/strategy/page-layout/defining-breakpoints/
  134. WHY YOU DON’T NEED DEVICE SPECIFIC BREAKPOINTS (ANYMORE): http://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints
  135. HOW DO I ORGANISE MY CSS (for Responsive Web Design)?: http://responsivedesign.is/develop/css/how-do-i-organise-my-css
  136. Introduction to media queries –- Part I - What are media queries?: https://www.adobe.com/devnet/archive/dreamweaver/articles/introducing-media-queries.html
  137. What is the difference between “screen” and “only screen” in media queries?: https://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries
  138. The Ultimate Overview of Responsive Web Design Breakpoints: https://1stwebdesigner.com/responsive-design-breakpoints/
  139. Responsive Breakpoints: http://www.erintozour.com/responsive-breakpoints/
  140. A Quick Guide to Responsive Design: https://uxtricks.design/blogs/ux-design/responsive-design/ (mentions SVG suitability for icons and decorative images but not detailed or complex images as much)
  141. What media query breakpoints should I use?: https://ricostacruz.com/til/css-media-query-breakpoints
  142. Defining Breakpoints in Responsive Web Design: https://www.browserstack.com/guide/responsive-design-breakpoints
  143. Responsive email design: https://www.slideshare.net/jfswee/responsive-email-design-guide-44882769
  144. Defining Breakpoints in Responsive Web Design: https://www.browserstack.com/guide/responsive-design-breakpoints
  145. The responsive design SEO checklist: https://builtvisible.com/the-responsive-design-seo-checklist/
  146. IE6 compatible responsive images: http://clagnut.com/sandbox/imagetest3/
  147. What Is a Hamburger Menu Button?: https://www.howtogeek.com/720214/what-is-a-hamburger-menu-button/
  148. Shrinking APKs growing installs: https://medium.com/googleplaydev/shrinking-apks-growing-installs-5d3fcba23ce2 (Google's study on download rates by app/package size)
  149. When designing a mobile app, for what screen size and resolution should I create my designs?: https://www.quora.com/When-designing-a-mobile-app-for-what-screen-size-and-resolution-should-I-create-my-designs
  150. API - Image Sizes for iOS and Android (Different Screen sizes) - Optimization: https://stackoverflow.com/questions/46855473/api-image-sizes-for-ios-and-android-different-screen-sizes-optimization
  151. What should image sizes be at @1x, @2x and @3x in Xcode?: https://stackoverflow.com/questions/30049544/what-should-image-sizes-be-at-1x-2x-and-3x-in-xcode
  152. Launch Screen Image size for all iOS screen sizes: https://stackoverflow.com/questions/32114162/launch-screen-image-size-for-all-ios-screen-sizes
  153. Change splash screen in iOS app for dummies (the better way): https://medium.com/flawless-app-stories/change-splash-screen-in-ios-app-for-dummies-the-better-way-e385327219e
  154. For iOS development what image sizes do I need?: https://answers.unity.com/questions/1315265/for-ios-development-what-image-sizes-do-i-need.html
  155. How base image size should I prepare for iOS app?: https://stackoverflow.com/questions/52250504/how-base-image-size-should-i-prepare-for-ios-app
  156. UIWebView and SVG images scaling: http://yberdnikov.github.io/2014/06/18/uiwebview-and-svg-images-scaling/
  157. Using Vector Images in Xcode 6: http://martiancraft.com/blog/2014/09/vector-images-xcode6/
  158. How could I make a list appear 'clickable/touchable?': https://ux.stackexchange.com/questions/92719/how-could-i-make-a-list-appear-clickable-touchable
  159. Mobile Product Lists Need Very Distinct Hit Areas: https://baymard.com/blog/mobile-product-list-hit-areas
  160. Beyond Blue Links: Making Clickable Elements Recognizable: https://www.nngroup.com/articles/clickable-elements/
  161. 11 Most Common Screen Resolution Statistics and Trends: https://brandongaille.com/10-most-common-screen-resolution-statistics-and-trends/
  162. Common Screen Resolutions in 2019-2021: https://w3codemasters.in/most-common-screen-resolutions/
  163. Screen Resolution Statistics (2014): https://www.rapidtables.com/web/dev/screen-resolution-statistics.html
  164. Breaking Out With CSS Grid Layout: https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/
  165. CSS Grid: Justification and Alignment: https://alligator.io/css/align-justify/
  166. The Ultimate Flexbox Cheat Sheet: https://www.sketchingwithcss.com/samplechapter/cheatsheet.html
  167. A Complete Guide to Grid: https://css-tricks.com/snippets/css/complete-guide-grid/

See Also

Mobile Web | Mobile | Web | Web Design | CSS | Browser Detection