Sample XHTML Code
Docs version: 2.0 Version date 7/29/2009
Contents
• Introduction • Home page • General page structure • Tabbed content • Navigation lists • iPhone action links
Introduction
These code samples illustrate how we designed and developed the user for the MIT Mobile Web.
These code samples are taken from the original XHTML design mockups which were the basis of the final implementation of the live MIT Mobile Web. We’re presenting these design mockups here because showing the final functional code with its back-end integration would make it harder to read the actual markup as the web browser sees it – which is what determines what the end user actually sees and interacts with. The XHTML and CSS generated by the functional code is in any case very close to these original design mockups.
We’re not presenting every page for every module here. Rather, we’re showing representative pages that illustrate user-interface patterns that appear throughout the MIT Mobile Web. After studying these code snippets and the patterns they represent, you should be able to easily understand how specific pages in the MIT Mobile Web were built, as well as how to go about building new page layouts sharing a consistent basic structure, function and building blocks.
For background on why we optimized the UI for three different categories of devices, please read the Introduction to the Mobile Web document.
Commented source code, images and other assets for the entire MIT Mobile Web – including functional code for back-end integration – is online as a SourceForge project at http://sourceforge.net/projects/mitmobileweb/.
Important note: This document is intended for Web designers and client-side developers. As such, its contents, especially the code samples, are intentionally presented as static HTML as it would be rendered into the end-user’s device. The server-side (and, in some cases, client-side) logic that generates this HTML is not discussed here, and is instead the subject of the developer-centric documentation available elsewhere in this open- source project.
Homepage
The homepage provides quick and simple access to the major modules within the MIT Mobile Web.
Homepage – Webkit
For the Webkit versions of the homepage, we present the homepage as a space-efficient and touch- friendly grid of labeled icons. From left to right: iPhone, Palm Pre, Android. Note that only the iPhone, which supports certificates for authentication, shows the TechCASH (cashless payment system) and MIT Certificates icons; the Pre and Android (which do not yet support certificates) do not.
HTML preamble.
xml:lang="en">
The viewport tag governs how content is initially scaled and whether it can be rescaled and reflowed:
Link to the global platform-specific stylesheet (styles/webkit.css):
javascript">
The optional apple-touch-icon tag lets you define a graphic that will appear on the iPhone device’s main homepage if you tap the ‘+’ button in the browser toolbar and choose to add the site to home:
Inline styles were used extensively here only because this is the only page where these are used, and we wanted to minimize the number of separate files to download. These styles format the grid of icons and other homepage-specific formatting:
The iPhone web browser by default displays its titlebar and location at the top of the screen. This scrolls away along if the user scrolls a long page down. To reclaim this screen space, we have every page in our site automatically scroll to 1px from the top of the body, which effectively hides the titlebar and location and increases the height of the visible page area by 60 pixels. The empty onunload event handler addresses a usability issue where, if the user customizes their homepage settings and returns to the homepage using the browser’s Back button, the homepage may not refresh correctly.
Header with MIT branding:
Mobile Web
Large “What’s New” badge in upper right corner, which only appears if there is a recent announcement:
Primary navigation grid, using floated DIVs to create the evenly spaced grid. Whereas the initial build of the MIT Mobile Web used a table here, the page was converted to floating DIVs to better support rotated screens today and other screen resolutions in the future.Whereas the feature-phone and smartphone versions use a secondary navigation list to present the ‘About this Site’ link, here it’s presented as the last of the primary links.
Note that certificate-requiring content and links (in this case, the TechCASH and MIT Certificates links) must be hidden from devices that we know not to support certificates (Pre and Android). The required code is not shown here, but can be easily implemented using client- or server-side code.
Within the “About”
Sitewide footer, with branding for IS&T (the MIT department responsible for the mobile web):
Homepage – TouchscreenLike the Webkit category, the Touchscreen category is defined by large touch-driven interfaces. Thus the Touchscreen-optimized version of the site is adapted from the Webkit version, with modifications to support the less capable web browsers (Internet Explorer, Opera, NetFront, Teleca, etc.) typical of these devices. From left to right: LG Dare, Samsung Instinct, T-Mobile Wing, Samsung Omnia
HTML preamble. Note declaration of XHTML Basic doctype in line 2:
The viewport tag governs how content is initially scaled and whether it can be rescaled and reflowed:
The HandeheldFriendly tag is used by older Palm and BlackBerry browsers to flag the page as containing mobile-optimized content. The MobileOptimized tag plays a similar role for Internet Explorer Mobile, allowing the developer to specify an optimal (or baseline) display width.
Page title and link to the platform-specific stylesheet (home-touch.css):
Beginning of HTML body and overall container div:
Header with MIT branding:
Primary navigation grid, which like the Webkit build uses floated DIVs to create the evenly spaced grid. Note that the image size is smaller here than in the Webkit build. Also note that certificate-requiring content and links (in this case, the link) must be hidden from devices that we know not to support certificates. The required code is not shown here, but can be easily implemented using client- or server- side code.
Within the “About”
Sitewide footer, with branding for IS&T (the MIT department responsible for the mobile web):
Homepage – Basic
For the Basic class, we present the homepage as a simple list of links to the major functional modules. From left to right, top to bottom: BlackBerry 9000 (Bold), Blackberry 8310 (Curve), Palm Treo 755p, Motorola Q9h (Windows Mobile), Sony Ericsson 580i, and Motorola RAZR v3xxx.
HTML preamble, including doctype declaration and link to global CSS file:
Sitewide header with MIT branding:
Mobile Web
A BlackBerry-specific hack (grr!) to accommodate older (pre-4.5) BlackBerry devices’ refusal to respect vertical padding or margin for
,
and
elements in sequence do create vertical whitespace. The CSS class="bb" is used to hide this extra
element on everything that respects CSS size, margin and padding rules – which is all smartphones other than Blackberry:
Primary navigation list. In the UI, this is styled to be large and high-contrast to indicate that it presents the primary navigational options on this page. Note the ‘accesskey’ property on each element. The accesskey allows users of compatible devices to quickly activate that link by pressing the corresponding key. Here there are nine major modules in the MIT Mobile Web, which corresponds perfectly to keys 1-9 on a typical feature phone’s keypad. Key 0 (zero) is always reserved for coming back to this global homepage:
Secondary navigation lists. In the UI, this is styled as slightly smaller, with a slightly tinted background, to visually indicate that the items in this navigation block are of secondary importance on the page.
Pervasive footer-area links to change the font size (handled with a combination of server-side PHP and client-side cookies):
Sitewide footer, with branding for IS&T (the MIT department responsible for the mobile web) :
General page structure
All pages in the MIT Mobile Web share basic overall structure and major types of elements. These include page header, title, and footer; primary and secondary navigation; and focal and secondary content.
Note: screen snapshots below are taken from a web browser ‘impersonating’ a smartphone-class browser, and are shown full-length to show overall structure of the page. From here on, we will show the smartphone and feature phone code samples together, since they share almost all of their fundamental code structure. Where there are notable exceptions, those will be specifically called out.
Aside from the home screen, there are two major page types:
• Navigation pages exist primarily to help the user get to other pages, either by navigation links, search form, or both. Page titles are displayed outside the focal content or navigation block. Most modules’ homepages are navigation pages.
• Destination pages contain focal content of likely interest to the user. Page titles are displayed inside the focal content block. Examples include person details in the People Directory; event details in the Events Calendar; shuttle route schedule and map in the Shuttle Schedule; and so on.
General page structure – Webkit
XHTML code sample (Webkit) – navigation page
HTML preamble:
On the server side, condtional logic is used to insert extra CSS to adapt the Webkit build for specific devices. Currently this is only used to slightly simplify the styling for the Palm Pre, which lacks support for some proprietary Webkit CSS extensions that the iPhone and Android phone support:
Remaining HTML head, including link to iPhone shortcut icon:
tag with auto-scroll to hide browser location bar:
Page header / navigation bar with branding, breadcrumb navigation, current page name, and module Help button:
Overall container for page content:
Page title:
Monday, June 1, 2009
Main navigation:
Search form:
End of overall content container:
Sitewide page footer:
XHTML code sample (Webkit) – destination page
HTML preamble and HTML head:
Page header / navigation bar with branding, breadcrumb navigation, current page name, and module Help button:
Overall container for page content:
Focal content area:
Page title:
Advanced Music Performance Student Recital: Joyce Kwan '10, violin
Content within focal content area (formatted here as a navigation list, since much of the focal content consists of links that invoke other modules or device applications). Note the CSS classes on the tags (class=”map”, class=”phone”, etc.), which add icons indicating what sort of action each link invokes:
Categorized as: music, theater
End of focal content area:
End of overall content container:
Sitewide page footer:
General page structure – Touchscreen
XHTML code sample (Touchscreen) – navigation page
HTML preamble and head:
Page header / navigation bar with branding, breadcrumb navigation and current page name:
Note that in the page name, nonbreaking spaces ( ) are used in place of normal spaces, to address a rendering bug in some browsers in this category.
Overall container for page content:
Page title:
Monday, June 1, 2009
Main navigation:
Search form:
End of overall content container:
Sitewide page footer:
XHTML code sample (Touchscreen) – destination page
HTML preamble and head:
Page header / navigation bar with branding, breadcrumb navigation and current page name:
Overall container for page content:
Focal content area (styled here as a
- )
End of overall content container:
Sitewide page footer:
General page structure – Basic
XHTML code sample (Basic) – navigation page
HTML preamble and head:
Server-side insertion of CSS to set personalized global font size:
Page header with branding and module name:
Events Calendar
Blackberry-specific workaround to enforce vertical spacing between page header and focal area (smartphone only):
Overall container for page content:
End of overall content container:
Sitewide footer-area links to change font size (see notes on homepage code):
Sitewide page footer:
XHTML code sample – destination page
HTML preamble and head:
Server-side insertion of CSS to set personalized global font size:
Page header with branding and module name:
Event Detail
Blackberry-specific workaround to enforce vertical spacing between page header and focal area (smartphone only):
Overall container for page content:
Focal content area:
Page title:
Advanced Music Performance Student Recital: Joyce Kwan '10, violin
Content within focal content area:
Monday, June 1, 2009
5:00pm-6:00pm
Location: 14W-11, Killian Hall
MIT Advanced Music Performance students appear in recital as part of their course requirements. Students enrolled in this subject receive full funding from Emerson Music Fellowships for private study on their instrument.
For info call: 617-555-1234
Website: http://artscal.mit.edu
Categorized as: music, theater
End of focal content area:
Paging / Back:
Secondary navigation:
Sitewide navigation:
0: MIT Mobile Web Home
1: Events Calendar Home
End of overall content container:
Sitewide footer-area links to change font size (see notes on homepage code):
Sitewide page footer:
Tabbed content
Tabbed content allows a single logical web page to show multiple types or groupings of content without requiring extensive scrolling. Tabbed content also has the benefit of clearly showing what content groupings are available on the page in a very space-efficient manner.
Tabbed content – Webkit
In Webkit-based browsers, the tabs are fully implemented, both visually and functionally. All of the content for all of the tabs is loaded in the initial page load, and switching between tabs is instantaneous.
The following code is required to implement these tabs for Webkit-based browsers:
1. In the HTML
, the following Javascript file must be referenced:[...] [...]
2. The focal content
[...]
3. The actual tab bar is implemented as an unordered list with ID “tabs”. The currently active tab is highlighted with the CSS class “active”. Tabs are activated using the Javascript function “showTab()”, which is defined in the uiscripts-ip.js file referenced above:
[...]
[...]4. The actual content of each tab is contained in a
[...]
[...]
5. The following inline Javascript at the bottom of the page (just before the tag) activates the default tab as soon as the HTML has finished loading (note that other Javascript may be placed in this inline block as well, as is the case with the map detail page; this is left out of this code sample for clarity’s sake):
[...] [...]
Tabbed content – Touchscreen
On Touchscreen devices, “tabbed” content is implemented as a set of separate web pages, all sharing the same header, page title, overall structure, and row of links serving as “tabs”, but containing different content.
The “tab bar” is implemented as follows. Note that the currently active “tab” is highlighted using the CSS class “active”:
[...]
[...] Tabbed content – Basic phoneOn Basic phones, “tabbed” content is implemented as a set of separate web pages, all sharing the same header, page title, overall structure, and row of links serving as “tabs”, but containing different content.
The “tab bar” is implemented as follows. Note that the currently active “tab” is highlighted using the CSS class “active”:
[...]
Map | Photo | What's Here
[...]Navigation lists
For all platforms, navigation blocks are generally implemented as lists. This linearizes navigation options, making it easier to scroll and scan them on small, typically vertically oriented screens.
Navigation lists come in two versions: primary and secondary. Primary navigation lists are slightly larger and higher-contrast to indicate that they are the most important navigation options on the page. Secondary navigation lists, where they appear, are slightly smaller and lower-contrast (e.g., with a slightly tinted background) to indicate that they are supporting or less important navigation options.
Basic devices have a secondary-navigation variant used for sitewide navigation. This appears near the bottom of each page and contains quick links (with accesskeys for one-button navigation) back to the module homepage and the main MIT Mobile Web homepage. These accesskeys are always 1 and 0, respectively.
For code samples, see “General page structure”, above.
Webkit and Touchscreen action links
For Webkit and Touchscreen devices, links that invoke actions (such as opening a different MIT Mobile Web module, opening an external website, or launching the device’s native email, Google Maps, or phone applications) are identified with icons on the right side of the link. Links that simply navigate to deeper content are identified with a right-facing carat. In the sampler below, two normal content links are followed by four action links that, in order, open the Map module to a building; dial a phone number; launch the Mail app with an email addressed to a specific recipient; and open an external website.
The basic presentation and code structure are similar for the Webkit and Touchscreen versions.
Normal content links require no special CSS styling; any link within a
- or
- will automatically be styled with the right-facing carat. Action links are identified using the appropriate CSS classes, as shown in the code snippet below: