Related Topics
Popular Passages
New topic 2013-02-05 15:24:06 description
Handheld/mobile devices have been exploding in popularity and with the advent of the iPhone they have become the device of choice. The Blackberry was a lovely device but once you try an iPhone you will never want a Blackberry again. Of course, all of this will change as each new device comes out but what won't change is the fact that mobile devices are supplanting PCs for everything but the most keyboard- or large-screen-intensive work.
Therefore, the popularity of a website/blog/whatever depends on making it accessible to mobile devices. Step one is knowing when you've been visited by such a thing.
iPhones
» Articles
The iPhone is very well-behaved with respect to CSS. Simply include the following meta tag in an otherwise-ordinary web page:
<!--[if !IE]>--> <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="iphone.css" /> <!--<![endif]-->
... which points to the iphone.css CSS stylesheet:
body { margin: 0;
padding: 0;
width: 100%; }
#wrapper { margin: 0; padding: 0; width: 100%; }
#left { display: none; }
#right { display: none; }
#center { margin: 0; }
#welcome { display: none; }
#content { line-height: 115%;
font-family: "Times New Roman", Times, serif;
padding: 5px 20px 0 20px;
margin: 0;
font-size: 28px;
background-color: white; }
#comments { display: none; }
#footer { display: none; }
iphone.css uses { display: none; } to keep the surrounding boxes from displaying on the smaller screen. No other changes are required.
An excellent article on using CSS is here: https://www.bushidodesigns.net/blog/mobile-device-detection-css-without-user-agent/
(Subsequent to writing this article we wrote an iPhone-specific article page. The stylesheet method described does work but we had other reasons to make modifications to the content.)
» Index Page
The index page was a complete rewrite of the standard index page to turn it into a simple table of contents. The breakthrough here was an exquisite PHP script found at https://detectmobilebrowsers.mobi/ which analyzes the HTTP headers to determine if a device is a handheld and if so, what type. Using this, we redirect from the regular index page to the iPhone-specific index page (from index.php to indexiphone.php ... it looks much better on an iPhone than on a PC).
Generic Handheld Devices
We may build more device-specific CSS files and pages as we learn what our visitors use but for the time being we simply support iPhones and Other.
Because many handheld devices have very small screens and a very small buffer capacity, we strip out all HTML comments, images and tables; we also convert to UTF-8 encoding because of the claim that handhelds support it better than iso-8859-1:
$content = preg_replace('/<!-- .*? -->/si', '', $content);
$content = preg_replace('%<table [^>]*?>.*?</table>%si', '', $content);
$content = preg_replace('/<img [^>]*?>/i', '', $content);
echo utf8_encode($content);
We include these meta tags (cribbed from Google's mobile page):
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/> <meta name="HandheldFriendly" content="true" />
We also send handheld-specific HTTP headers ... see XHTML vs. HTML for the script we use for all page headers.
» Articles
It turns out in real life that many handhelds don't handle CSS correctly, so the { display: none; } trick that works so well for iPhones is unreliable for many other devices. Furthermore, many devices choke if sent a large data stream. Therefore, we had to write a very stripped-down page for each individual article. This required writing only one new program since all of our content is served from a database.
The https://detectmobilebrowsers.mobi/ function is used to redirect from the regular page to the handheld page.
Examples:
A glance at the page source of each of these pages will show you the extent to which the handheld version is stripped down; rather elegant, really.
Finally, in the regular pages we include this link tag; wishful thinking I suspect:
<link rel="alternate" media="handheld" href="https://www.philadelphia-reflections.com/reflectionsHandheld.php?type=blog&key=####" />
» Index Page
The generic handheld index page (https://www.philadelphia-reflections.com/indexhandheld.php) is an even-more stripped down version of the iPhone index page (https://www.philadelphia-reflections.com/indexiphone.php).
Testing and Validating
The place to start testing your new pages is the Opera Mini Simulator: https://www.opera.com/mini/demo/. Elegant in its simplicity, it has never choked or failed, unlike most other emulators. Plus, it is completely intuitive; unlike all other emulators. And free.
Once you get the basic design underway, you will want to validate ... at https://www.ready.mobi/.
For fine-tuning of displays on cell phones ... https://www.wap-proof.com.
To run the Blackberry emulators on a Windows machine:
I found help for this ridiculous process at https://www.cantoni.org/2007/12/18/blackberrysimulator You may, too.
Only a sadistic socially-crippled geek-savant could have dreamed up such a convoluted mess, but ultimately it does work and does allow you to see how the different models operate. Actually, once you get it working,it's sort of fun to try different models.
(my thanks to https://centricle.com/tools/html-entities/ for HTML encoding)
Originally published: Wednesday, April 15, 2009; most-recently modified: Wednesday, March 27, 2019