Mobile Web Design

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

 <?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
 }   
 
 ?>

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)

• Progressive Web Apps (PWA) showcase: https://pwa.rocks
• PWA - Manifest (JSON) spec: https://w3c.github.io/manifest/
• PWA Stats: https://www.pwastats.com

• Google Dev docs -- Progressive Web App checklist: https://developers.google.com/web/progressive-web-apps/checklist | WebApp Manifest | EXAMPLE

• FireFox Dev docs -- Progressive Web App checklist: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps | Manifest

• Progressive Web Apps in the Microsoft Store: https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps/microsoft-store

• Progressive Web Apps on iOS are here: https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7

• Web App Manifest generator: https://tomitm.github.io/appmanifest/
• "Add to Homescreen" via webapp/website PoC: https://output.jsbin.com/gogiyas/

• PWA starter kit: https://pwa-starter-kit.polymer-project.org | SRC

No inline JS

• Disable inline-javascript tutorial: https://glebbahmutov.com/blog/disable-inline-javascript-for-security/ | SRC

No inline CSS

• wikipedia: Progressive enhancement
• Plain Old Semantic HTML (POSH): http://microformats.org/wiki/posh
• Hijax -- Progressive Enhancement with Ajax: http://domscripting.com/presentations/xtech2006/

Adaptive

• Adaptive Layout with CSS3 @media queries: http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries

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)

• wikipedia: Responsive design
• Mozilla Dev Guide - Responsive Design: http://developer.mozilla.org/en-US/Apps/Progressive/Responsive
• Opera Dev Guide - An Introduction to Meta Viewport and @viewport: https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/
• Google Dev Guide - Supporting Different Screens in Web Apps: https://developer.android.com/guide/webapps/targeting.html
• Common Techniques in Responsive Web Design: http://msdn.microsoft.com/en-us/magazine/dn217862.aspx
• Off-Canvas Navigation for Responsive Book Menu: http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/

• Creating a Mobile-First Responsive Web Design: http://www.html5rocks.com/en/mobile/responsivedesign/
• Do This to Improve Image Loading on Your Website: https://developer.mozilla.com/videos/improve-image-loading-your-website/
• Responsive Image layout (for Mobile): http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

• Elastic (responsive) Video layout (for Mobile): http://webdesignerwall.com/tutorials/css-elastic-videos
• Responsive Data Tables (using CSS3 @media): http://css-tricks.com/responsive-data-tables/

META

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

CSS

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.

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

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

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

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)

@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):

@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) {  }

• Responsive Design guidelines: http://responsivedesign.is/guidelines
• A-List-Apart -- Response Web Design tutorial: http://alistapart.com/article/responsive-web-design
• The 100% correct way to do CSS breakpoints: https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
• Media Queries for Standard Devices: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

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

• Get the size of the screen, current web page and browser window: https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window
• How can I attach a window resize event listener in JavaScript?: https://stackoverflow.com/questions/13651274/how-can-i-attach-a-window-resize-event-listener-in-javascript#13651455
• Importing CSS Breakpoints Into JavaScript : https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript

Touch/Drag

• Drag listener effect: https://www.kirupa.com/html5/drag.htm

Hamburger Menu

• The origin of the hamburger icon: https://www.evernote.com/shard/s207/client/snv?noteGuid=022f2237-4b4f-4096-87f2-053acd228c2d&noteKey=ede2672bc3f39a1b0232f84e01ca0a83&utm_campaign=buffer&utm_medium=social&sn=https%3A%2F%2Fwww.evernote.com%2Fshard%2Fs207%2Fsh%2F022f2237-4b4f-4096-87f2-053acd228c2d%2Fede2672bc3f39a1b0232f84e01ca0a83&title=The%2Borigin%2Bof%2Bthe%2Bhamburger%2Bicon

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

• Mobile design 101 - pixels, points and resolutions: https://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/
• Screen Size -- SmartWatches: https://www.dimensions.com/collection/smartwatches

iOS - Human Interface guidelines

• Apple’s Guidelines: https://developer.apple.com/design/human-interface-guidelines/
• Image & icon sizing: https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/
• Supporting various Screen-sizes: https://developer.apple.com/documentation/uikit/uiimage/providing_images_for_different_appearances | https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html
• SVG seems like a possible option here too (less clear documentation though): https://developer.apple.com/documentation/uikit/uiimage/creating_custom_symbol_images_for_your_app

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

• Apple -- iOS Device Compatibility Reference - Display resolutions by Device: https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html

Android - Design guides

• Google’s guidelines: https://material.io/design/
• Image & icon sizing: https://developer.android.com/training/multiscreen/screendensities#TaskProvideAltBmp
• Supporting various Screen-sizes: https://developer.android.com/guide/practices/screens_support
• Single SVG now a viable option for all Device/Screen-size/Resolution/Orientation combinations: https://developer.android.com/training/multiscreen/screendensities#vector-graphics

Tools

• Responsive Design Bookmarklet: http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/
• FoNet -- A mobile portal that links to many other Mobile (and non-mobile) SNS: http://fonet.mobi
• Flexible Math (for Fluid Layouts): http://responsv.com/flexible-math/ (quick way to convert fixed/px to %)

Resources

• W3C Proposed Recommendation - Mobile Web Best Practices 1.0: http://www.w3.org/TR/mobile-bp/
• Mobile Web App Checklist: https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist.html
• Finger-Friendly Design - Ideal Mobile Touchscreen Target Sizes: http://www.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/
• Mobile Reachability -- Rules of Thumb: https://medium.com/@Draward/mobile-reachability-rules-of-thumb-ce37dd0cd3ad

• A Couple of Best Practices for Tablet-Friendly Design: https://css-tricks.com/a-couple-of-best-practices-for-tablet-friendly-design/
• wikipedia: List of common resolutions
• StatCounter -- GlobalStats - Screen Resolutions: https://gs.statcounter.com/screen-resolution-stats | CANADA | US | EU | ASIA

Tutorials

• The 5-Minute CSS Mobile Makeover: http://perishablepress.com/press/2009/08/02/the-5-minute-css-mobile-makeover/
• Android Developer Guide - How to Support Multiple Screens: http://developer.android.com/guide/practices/screens_support.html
• Apple touch icon - The Good, the Bad and the Ugly: http://realfavicongenerator.net/blog/apple-touch-icon-the-good-the-bad-the-ugly/
• How to make your contact forms mobile friendly: http://www.webdesignerdepot.com/2013/03/how-to-make-your-contact-forms-mobile-friendly/
• HTML5 for the Mobile Web - Forms and Input Types: http://mobiforge.com/design-development/html5-mobile-web-forms-and-input-types
• How to Make Your Contact Forms Mobile Friendly: https://www.webdesignerdepot.com/2013/03/how-to-make-your-contact-forms-mobile-friendly/
• Left Half and Right Half Layout – Many Different Ways : https://css-tricks.com/left-and-right/
• Designing search for mobile apps: https://medium.muz.li/designing-search-for-mobile-apps-ab2593e9e413
• UX Design -- How to Use Animations in Mobile Applications: https://uxplanet.org/ux-design-how-to-use-animations-in-mobile-applications-a8257ebffe90
• Building the Universal Menu of Tomorrow (Part 1): https://uxplanet.org/building-the-universal-menu-of-tomorrow-4c2f06635197
• Optimising mobile web navigation (2 recent successes): https://uxdesign.cc/optimising-mobile-web-navigation-2-recent-successes-8132c715f516
• The Current State of Telephone tel: Links: https://css-tricks.com/the-current-state-of-telephone-links/ (likewise but less supported, sms:)

External Links

• wikipedia: Mobile Web Design
• The Extensible Web Manifesto: https://extensiblewebmanifesto.org
• W3C Mobile Web Design webinar: http://www.w3.org/2006/07/Mobile_Web_Design.pdf
• Bringing Web 2.0 to Mobile Devices: http://xtech06.usefulinc.com/schedule/paper/83
• 2009 Webdesign Starter Pack: http://www.webair.it/blog/2009/01/02/2009-webdesign-starter-pack/
• Mountaintop Corners: http://www.alistapart.com/articles/mountaintop/
• 12 Mobile App Design Fundamentals to Enhance User Experience: https://dzone.com/articles/12-mobile-app-design-fundamentals-to-enhance-user

See Also

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