Mobile Web Design

From BC$ MobileTV Wiki
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.


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]

 $mobile_browser = '0';
 if (preg_match('/(up.browser||mmp|symbian|smartphone|midp|wap|phone|android)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
 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_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'wapr','webc','winw','winw','xda ','xda-');
 if (in_array($mobile_ua,$mobile_agents)) {
 if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {
 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.


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


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)





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

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


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]


Specify the media type to render mobile-specific styles:

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


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.


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


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


<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" />


<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%;


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);


Hamburger Menu


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

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

Android - Design guides



[158] [159] [160]

[161] [162] [163]


External Links


  1. Using the navigator object to detect client's browser:
  2. Auto detect mobile browser (via user-agent?):
  3. Browser detect:
  4. Lightweight Device-Detection in PHP:
  5. Mobile Device Detection and Redirection with PHP:
  6. Browser detection using the user-agent (with Chrome example):
  7. PWA - manifest spec:
  8. PWA case studies:
  9. Google's "Weather PWA":
  10. PWA installation criteria:
  11. Google Codelabs -- PWAs - Going Offline:
  12. Google Codelabs -- PWAs - Build a PWA with Firebase, Polymerfire and Polymer Components:
  13. Progressive Web Apps (Google overview on PWAs):
  14. Manifest - Web Accessible Resources:
  15. Fullscreen Web App for Android:
  16. 12 HTML5 tricks for mobile (2014):
  17. Removing address bar from browser (to view on Android):
  18. Making Fullscreen Experiences (desktop & mobile):
  19. Patterns for Promoting PWA Installation (mobile):
  20. User Can Be Prompted To Install The Web App:
  21. Native App Install Prompt:
  22. PWA "Add to Home Screen": (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:
  24. Google CodeLabs -- Your First Progressive Web App:
  25. Progressive Web Apps 101: the What, Why and How: PART 1 | PART 2
  26. Getting started with Progressive Web Apps:
  27. Why Are App Install Banners Still A Thing?:
  28. All you need to know about Progressive Web App:
  29. Upgrading the HTML5 Boilerplate Project to a Progressive Web App in 15 Minutes: http://
  30. What Browsers Support Service Workers?: http://
  31. Progressive Web Applications Features Make the Web More App-Like:
  32. PWAs .vs. Native for SEO:
  33. Microsoft PWAs:
  34. Microsoft is supporting Google's Progressive Web Apps platform and that's great news for everyone:
  35. Tailor your PWA for Windows:
  36. Microsoft Teams and Progressive Web Apps coming soon to the Windows Store:
  37. Microsoft to Integrate Progressive Web Apps with Windows 10 from Redstone 4:
  38. Microsoft tees up Windows 10 support of Progressive Web Apps:
  39. Microsoft's latest Windows Store strategy involves a rebrand plus Progressive Web Apps:
  40. Yes, PWA Will Kill UWP. It’s OK:
  41. Welcoming Progressive Web Apps to Microsoft Edge and Windows 10:
  42. Progressive Web Apps (PWA) -- What they are, and what they mean for Microsoft:
  43. A Few Tips That Will Make Your PWA on iOS Feel Like Native:
  44. What’s new on iOS 12.2 for Progressive Web Apps: excellent breakdown of PWA lifecycle & APIs)
  45. iPhone 11, iPadOS and iOS 13 for PWAs and web development:
  46. Enabling iOS Splash Screens for Progressive Web Apps - Everything you should know (2019):
  47. How to install PWA apps in your iOS device?:
  48. How to Test PWA on iOS devices:
  49. What Progressive Web Apps are and how to install and use them on iPhone and iPad:
  50. 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: (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:
  53. Safari iOS & PWAs (overview and limitations):
  54. Don’t use iOS meta tags irresponsibly in your Progressive Web Apps:
  55. What You Need to Know about the Progressive Web Application Add to Homescreen or Installation Process:
  56. PWAs are now (properly) available for Apple devices with iOS 12.2 (and 13 beta):
  57. Encouraging iOS users to install your Progressive Web Apps in Ember:
  58. Apple could lose billions on Progressive Web Apps, but it has no choice:
  59. Is Apple trying to kill PWAs?:
  60. wikipedia: Progressive Web App
  61. Progressive Web Apps - Escaping Tabs Without Losing Our Soul:
  62. Service Worker Caching Strategies Based on Request Types:
  63. Offline Cookbook (with ServiceWorkers):
  64. PWA starter kit -- build fast, scalable, modern apps with Web Components (Google I/O '18):
  65. PWA Starter Kit with Monica Dinculescu - HTTP203 (2018):
  66. Google Chrome samples -- ServiceWorker - Basic example:
  67. Google Chrome samples -- ServiceWorker - Custom Offline page:
  68. Google Chrome samples -- ServiceWorker - Push Messaging example: | SRC
  69. Adding push notifications to a WebApp:
  70. Web Push library for Node.js:
  71. The End of App Stores Is Rapidly Approaching: (PWAs may soon free you from Google Play and the iOS App Store)
  72. Why Progressive Web Apps Will Replace Native Mobile Apps:
  73. 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:
  75. What is a PWA? and How to Install / Add to Home Screen Progressive Web Apps? (videos of Desktop .vs. Mobile experience):
  76. The modern PWA Cheat Sheet by Maximiliano Firtman | JSConf EU 2019:
  77. An introduction to Progressive Web Apps:
  78. How to Turn Your Website into a Mobile App with 7 Lines of JSON:
  79. Learn how to build a PWA in 5 minutes:
  80. I built a Progressive Web App and published it in 3 app stores. Here’s what I learned:
  81. A Simple Progressive Web App Tutorial:
  82. A Beginner's Guide To Progressive Web Apps:
  83. Everything You Should Know About Progressive Web Apps: | SRC
  84. The Complete Guide to Progressive Web Apps:
  85. The Complete Guide To Progressive Web Apps with Ionic 4:
  86. The Ultimate Guide to Progressive Web Applications:
  87. Getting started with Progressive Web Apps:
  88. Progressive Web Apps (PWAs) FTW — Pt. 1 - Add To Homescreen & Offline-first experiences:
  89. Progressive Web Apps (PWAs) FTW  —  Pt. 2 - ServiceWorkers & Cache API:
  90. How to save an image to localStorage and display it on the next page?:
  91. Service workers -- the little heroes behind Progressive Web Apps:
  92. Service Workers -- Going beyond the page:
  93. Build your first progressive web app with React: | SRC
  94. BBC News Webpages Move To Faster PWAs:
  95. How to publish PWA app on Google Play Store – Step by step guide:
  96. Progressive Web Apps are NOT only a Google thing:
  97. Google, Apple, and Microsoft Are On Board With This Progressive Trend in 2019--Here's Why:
  98. Progressive Web Apps - Microsoft And Google Are "Falling in Love" With:
  99. Share like a native app with the Web Share API:
  100. How to Build a Progressive Web App (PWA) with advanced features/APIs like Face Recognition and Speech Recognition:
  101. Workbox - PWA with steroids: (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:
  103. Google pauses plan to break your PWA:
  104. Progressive Web Apps in 2021:
  105. 2018 State of Progressive Web Apps:
  106. Designing Experiences for Responsive Web Sites: Adapting Your Content From 4-Inch Phones to 40-Inch TVs:
  107. Why the Web Is Ready for Responsive Web Design:
  109. Space images out to match text height:
  110. Videos styled with an intrinsic-ratio:
  111. Device-Agnostic Approach To Responsive Web Design:
  112. An introduction to meta viewport and @viewport:
  113. Mobile Dimensions via CSS/META:
  114. Difference between visual viewport and layout viewport?:
  115. A tale of two viewports — part one:
  116. A tale of two viewports — part two:
  117. Table viewport:
  118. Responsive Web Design:
  119. CSS contents and browser compatibility - mobile:
  120. W3C - Using CSS Flexbox to reflow content: | DEMO
  121. Sirens - CSS for adaptable content that responds to orientation changes:
  122. iPad 3 .vs. iPad 2 specs:
  123. Screen resolution - web usage statistics:
  124. RIM PlayBook vs Apple iPad:
  125. Responsive Design Breakpoints: The Ultimate Overview:
  126. Media Queries for Standard Devices:
  127. Common CSS @media queries & breakpoints (by device size):
  129. The Most Used Responsive Breakpoints in 2017 Of Mine:
  130. Popular Screen Resolutions: Designing for All:
  131. Are there standard media query break points?:
  132. Screen sizes and breakpoints:
  133. Defining Breakpoints:
  135. HOW DO I ORGANISE MY CSS (for Responsive Web Design)?:
  136. Introduction to media queries –- Part I - What are media queries?:
  137. What is the difference between “screen” and “only screen” in media queries?:
  138. The Ultimate Overview of Responsive Web Design Breakpoints:
  139. Responsive Breakpoints:
  140. A Quick Guide to 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?:
  142. Defining Breakpoints in Responsive Web Design:
  143. Responsive email design:
  144. Defining Breakpoints in Responsive Web Design:
  145. The responsive design SEO checklist:
  146. IE6 compatible responsive images:
  147. What Is a Hamburger Menu Button?:
  148. Shrinking APKs growing installs: (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?:
  150. API - Image Sizes for iOS and Android (Different Screen sizes) - Optimization:
  151. What should image sizes be at @1x, @2x and @3x in Xcode?:
  152. Launch Screen Image size for all iOS screen sizes:
  153. Change splash screen in iOS app for dummies (the better way):
  154. For iOS development what image sizes do I need?:
  155. How base image size should I prepare for iOS app?:
  156. UIWebView and SVG images scaling:
  157. Using Vector Images in Xcode 6:
  158. How could I make a list appear 'clickable/touchable?':
  159. Mobile Product Lists Need Very Distinct Hit Areas:
  160. Beyond Blue Links: Making Clickable Elements Recognizable:
  161. 11 Most Common Screen Resolution Statistics and Trends:
  162. Common Screen Resolutions in 2019-2021:
  163. Screen Resolution Statistics (2014):
  164. Breaking Out With CSS Grid Layout:
  165. CSS Grid: Justification and Alignment:
  166. The Ultimate Flexbox Cheat Sheet:
  167. A Complete Guide to Grid:

See Also

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