Statistics have noted that over 80% of adults own cell phones, and when we add to this the use of cell phones by teens, as well as other Internet ready devices such as i-pads/tablets, it quickly becomes evident that a website presence needs to be broader than the traditional computer format. If you are interested in having a mobile website for your own business or organization, read on.
Firstly, I wanted to discuss some of the specifics, and best practices. A mobile website can be created in most any doc-type format. So yes, you can code it in XHTML traditional or strict, XHTML Mobile 1.0, or the new HTML5 doc-type. From my research I found that most current mobile sites are being designed in HTML5 as a result of the support of CSS3 and Ajax. Assuming you’re not a designer this probably doesn’t mean much to you, so let me get down to the specifics.
A mobile website can simply be your normal website which renders content differently based upon the device/technology used to view it. In this case there are different CSS files that are applied based upon the device visiting the site. This is similar to what was done in the past to render a page based upon the browser version/type. The other option is to create a separate website specifically for mobile devices. My personal feeling is that it is better to have a separate mobile site than attempt to convert one’s current site for mobile. The primary reason is that most mobile phones have limited bandwith, and a website with lots of images, JavaScript or Flash slideshows, advanced menus, and other common web elements will result in a slow load time between pages. Of course web pratices are always in debate, but the general consensus is that it is better in most cases to offer a trimmed down version of one’s existing site, one specifically designed for mobile, … which is what I am illustrating here today.
Quick Reference of common mobile dimensions:
Feature Phone: 240×320
Smart Phone: 320×480
Tablets: 480×800 and larger
* note: in addition to viewing your site on your own mobile device, you can also search for “mobile phone emulators” and see how your site will look on new platforms. I personally use an android emulator for testing, primarily since the android is such a popular format.
The Structure of a Mobile Website:
Modern mobile websites are created by use of what is known as “cards”. One page will typically contain multiple cards as in the following example:
<div data-role=”page” id=”page”>
<div data-role=”header”>
<h1>Page One</h1>
</div>
<div data-role=”content”>
<ul data-role=”listview”>
<li><a href=”#page2″>Page Two</a></li>
<li><a href=”#page3″>Page Three</a></li>
<li><a href=”#page4″>Page Four</a></li>
</ul>
</div>
<div data-role=”footer”>
<h4>Page Footer</h4>
</div>
</div>
<div data-role=”page” id=”page2″>
<div data-role=”header”>
<h1>Page Two</h1>
</div>
<div data-role=”content”>
Content
</div>
<div data-role=”footer”>
<h4>Page Footer</h4>
</div>
</div>
<div data-role=”page” id=”page3″>
<div data-role=”header”>
<h1>Page Three</h1>
</div>
<div data-role=”content”>
Content
</div>
<div data-role=”footer”>
<h4>Page Footer</h4>
</div>
</div>
<div data-role=”page” id=”page4″>
<div data-role=”header”>
<h1>Page Four</h1>
</div>
<div data-role=”content”>
Content
</div>
<div data-role=”footer”>
<h4>Page Footer</h4>
</div>
</div>
What we have here is a single page with four cards divided into a “header”, “content”, and “footer” for each. The navigation is a list-menu at the very top portion which uses ID tags (#pagename) to move between the four cards when one selects/clicks a link. With a bit of CSS styling, and Ajax, this content will render effectively across the mobile media types. As for the content to be included, since we are in most cases dealing with very small screen sizes it is a best practice to keep the text brief on a given page, and keep the images sized small (I wouldn’t exceed 220px width); but testing on different mobile devices is the best practice here (you can find mobile phone emulators online). Assuming you do have a lot to say (I always do) one option is to create collapsible regions (referred to as a collapsible block), so in effect you have div layers that can be toggled open or closed. In the following example I have added three collapsible blocks into the “page2″ card on my mobile page. After the heading <h1>Page Two</h1> (title that renders at the very top of the page) one would see the first block open, and the second two closed as defined by the code: data-collapsed=”true”. Each block has its own header and content area, but since this is shown on one card, there is a singular top header with the list nav, and just the one bottom footer (effective for copyright, phone number, etc).
<div data-role=”page” id=”page2″>
<div data-role=”header”>
<h1>Page Two</h1>
</div>
<div data-role=”content”>
<div data-role=”collapsible-set”>
<div data-role=”collapsible”>
<h3>Header</h3>
<p>Content</p>
</div>
<div data-role=”collapsible” data-collapsed=”true”>
<h3>Header</h3>
<p>Content</p>
</div>
<div data-role=”collapsible” data-collapsed=”true”>
<h3>Header</h3>
<p>Content</p>
</div>
</div>
</div>
<div data-role=”footer”>
<h4>Page Footer</h4>
</div>
</div>
Adding content to the header, content, and footer areas is no different than what you would do with a regular web page. You can use paragraph tags, break tags, div layers, spans, and add images. The important thing here is the XML type structure; if one tag gets deleted the entire page may not render. In addition, you will also need the jQuery and CSS files associated with mobile applied to the header portion of your page. You can download these from the jQuery site at: https://jquerymobile.com/download/
The current “hosted” ones at the time I wrote this were:
<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css” />
<script src=”https://code.jquery.com/jquery-1.6.4.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js”></script>
Getting back to the mobile page design, … you will note that with the jquery files there is a .css file. With this comes some predefined mobile styles. These styles can be changed by adding them to your headers as follows:
<div data-role=”page” id=”page2″ data-theme=”b”>
Here I have the data-theme=”b” which is “blue”. You can learn more about theming your mobile site here: https://jquerymobile.com/test/docs/toolbars/bars-themes.html That being said, you can also define whether the headers and footers float (fullscreen) or are persistent (fixed in place), you can add icons to buttons, and create horizontal navigation bars instead of vertical buttons.
The next thing to consider is whether you want all of your content on this one page (index.html) or if you will be creating additional pages. The general consensus is that if you have a content area that is high on resources, such as an image gallery, then this content should be on its own separate page. In this case you would link to the page as typical (gallery.html) instead of linking to a card by an ID tag.
Another important option with jquery mobile is the option to add list items. This would be effective if you were a restaurant and wanted to list menu items with a picture adjacent.
<div data-role=”content”>
<ul data-role=”listview” data-inset=”true”>
<li data-role=”list-divider”>Restaurant Menu Pictures</li>
<li><img src=”images/image1.jpg” width=”” height=”” alt=”Picture1″><a href=”gallery.html#picture1″ title=”Picture1″ rel=”external”>Picture1</a></li>
<li><img src=”images/image2.jpg” width=”” height=”” alt=”Picture2″><a href=”gallery.html#picture2″ title=”Picture2″ rel=”external”>Picture2</a></li>
<li><img src=”images/image3.jpg” width=”” height=”” alt=”Picture3″><a href=”gallery.html#picture3″ title=”Picture3″ rel=”external”>Picture3</a></li>
</ul>
</div>
As you can see this is the standard “content” area, yet below the data-role=”content” area we apply the list menu with the the following: <ul data-role=”listview” data-inset=”true”> What is important to note is that when you link to the picture the Ajax will automatically resize the picture as a thumbnail when it is applied in a “listview”. The “href” for each list-menu item is to the same “gallery.html” page yet the ID tag (ex. #picture1) is added to the end of the page name so that only this specific section is shown (ID designation works the same as if in XHTML when you create an anchor tag). Note that I’ve also added “alt” and “title” tags for ADA accessibility. This is especially important since some older phones may not show images at all, and a text description is better than nothing. Note that the page layout on the gallery page is no different than the index page with the exception that you wouldn’t have the initial list menu at the top. It still uses the existing header, content, footer structure. So on this gallery page I would add the larger image size (approx 220px in width to provide room for default and applied margins) with a bit of text description in a paragraph tag in the content area, and we’re good. The linking to a specific gallery picture/text is done through the ID tag again as shown here:
<div data-role=”page” data-position=”fullscreen” id=”picture1″ data-theme=”b”>
And lastly, it is important to know that while the jQuery mobile will create the “back” button for card content automatically on the index page, when moving to a separate page (away from the index.html to the gallery.html) the navigation is no longer applied by default. In this case you will need to code it yourself. In my following example I have a “back” button which takes one to the index page to the “page2” ID card (index.html#page2) and I have a “home” button on the right that takes one directly to the first section of the home page which has the navigation structure. The “data-icon” you see for back is including a left arrow, and the “data-icon” of “home” is applied on the home button, and positioned “right” of the header title.
<div data-position=”fixed” data-role=”header”><a href=”index.html#page2″ data-icon=”arrow-l” data-rel=”back”>Back</a>
<h1>Picture1</h1>
<a href=”index.html” rel=”external” data-icon=”home” data-iconpos=”right”>Home</a></div>
At this point it is really just a matter of adding all your content, but as I’ve noted, don’t add too much content, especially not in one place. In addition to collapsible blocks, lists in “listview”, and separate pages, there is another option of adding a pop-out window/s. As for the layout, keep it one column, so avoid side-bars. You can use tables for layout, but my suggestion is to avoid it since you still need to consider ADA compliancy; floating a div layer is the better way for positioning. And finally, avoid adding too many images, flash animation, slideshows, etc. Remember the purpose of a mobile site is to provide the important primary website content, not recreate the existing website’s functionality. If you overload your mobile website it will become a nightmare to navigate, and the bandwith required will make it unavailable to many perspective visitors.
On a final note, once your mobile site is created, you will want to add a redirect link on your primary website to it. In many cases the mobile version of the site is created as an add-on or sub-domain of the primary one, something like www.m.mysite.com or www.mobile.mysite.com. You can also link to a folder within the primary site if you wish. To redirect a mobile device to this page you will need a script that does this, or use an .htaccess file for this purpose. My choice was the .htaccess file since the general consensus was that it did the redirect faster.
If you need the code, one I know that works is:
RewriteEngine On
RewriteCond %{REQUEST_URI} !^/mobile/.*$
RewriteCond %{HTTP_ACCEPT} “text/vnd.wap.wml|application/vnd.wap.xhtml+xml” [NC,OR]
RewriteCond %{HTTP_USER_AGENT} “acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-” [NC,OR]
RewriteCond %{HTTP_USER_AGENT} “dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-” [NC,OR]
RewriteCond %{HTTP_USER_AGENT} “maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv” [NC,OR]
RewriteCond %{HTTP_USER_AGENT} “palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany” [NC,OR]
RewriteCond %{HTTP_USER_AGENT} “sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo” [NC,OR]
RewriteCond %{HTTP_USER_AGENT} “teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi” [NC,OR]
RewriteCond %{HTTP_USER_AGENT} “wapp|wapr|webc|winw|winw|xda|xda-” [NC,OR]
RewriteCond %{HTTP_USER_AGENT} “up.browser|up.link|windowssce|iemobile|mini|mmp” [NC,OR]
RewriteCond %{HTTP_USER_AGENT} “symbian|midp|wap|phone|pocket|mobile|pda|psp” [NC]
RewriteRule ^(.*)$ /mobile/ [L,R=302]