User Tools

Site Tools


website_creation:mobile-friendly_method

Table of Contents

Mobile-friendly method

A work-in-progress outline of a hopefully robust, practical and maintainable method of styling documents for old mobiles, desktop web browsers, and everything in between.

Approach

The detection of use of a mobile device (e.g. an old mobile phone, a modern smartphone, a tablet) will not be used to determine visitor intent. The substance of the content will be the same across all devices in the spirit of not breaking the web, and a URL will resolve to the same core content no matter what kind of device is used to request the resource.

However, low priority items might be removed (e.g. duplicate navigation, adverts and superfluous imagery). Also, stylistic images may be limited to devices more likely to be connected via a higher bandwidth connection, and content images may be served at a lower size to mobile devices to save likely unnecessary bandwidth and loading times.

Layout and styling will be adjusted according to the size of the device's screen/orientation, allowing the same content to be easily readable and navigable across a full range of devices. (“Responsive web design”.)

How

index.htm
<!DOCTYPE html>
<html lang="en-GB">
<head>
	<title></title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 
	<link rel="stylesheet" href="/workspace/assets/styles/base.css" />
	<!-- base CSS (including "resets"); styles for all devices that read CSS including non-smart mobiles -->
 
	<link rel="stylesheet" media="only handheld and (min-width: 300px), only screen and (min-width: 300px)" href="/workspace/assets/styles/gte-smartphone.css" />
	<!-- styles for all modern devices with "smartphone-sized" and larger viewports -->
 
	<link rel="stylesheet" media="only handheld and (min-width: 740px), only screen and (min-width: 740px)" href="/workspace/assets/styles/gte-tablet.css" />
	<!-- styles for all modern devices with "tablet-sized" and larger viewports -->
 
	<link rel="stylesheet" media="only screen and (min-width: 1000px)" href="/workspace/assets/styles/gte-desktop.css" />
	<!-- styles for all modern devices with "desktop-sized" and larger viewports -->
 
	<link rel="stylesheet" media="only screen and (min-width: 1200px)" href="/workspace/assets/styles/gte-desktop.css" />
	<!-- styles for all modern devices with "large desktop-sized" and larger viewports -->
 
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0;">
 
	<!--[if lt IE 9]><script src="js/html5.js"></script><![endif]-->
	<script src="js/jquery.mediaqueries.js"></script>
</head>
styles-modern-300.css
body {
	-webkit-text-size-adjust: 100%; /* prevents Safari's text zoom change on orientation change */
}

http://www.protofunc.com/scripts/jquery/mediaqueries/

http://code.google.com/p/css3-mediaqueries-js/

http://www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/

http://www.broken-links.com/2011/02/21/using-media-queries-in-the-real-world/

http://adactio.com/journal/4227/

http://tinysrc.net/

http://www.handsetdetection.com/features/mobile-browser-detection

http://www.hand-interactive.com/resources/detect-mobile-php.htm

http://www.slideshare.net/arborwebsolutions/beyond-responsive-web-design

website_creation/mobile-friendly_method.txt · Last modified: 2012/02/24 14:36 by David Oliver