.Mobile Friendly Web Application

Mobile Development

"Two important elements in mobile web development are the viewport tag in HTML5 and media queries in CSS3. Bootstrap and jQuery Mobile are two of the most widely used frameworks for mobile development."

<meta name= "viewport" content="width=device-width, initial-scale=1.0">

@media screen and (min-width: 480px) { }

Web page by Kevin Harris of Homer IL

Please contact Kevin Harris of Homer IL concerning this web site

Viewport Element

A viewport is a virtual window thru which a web page is viewed. When the web page is larger than the viewport, the user must scroll to be able to see all portions of the web page. Before the use of mobile devices to access the Internet, web pages had a static design with a fixed size for display on computer monitors. When mobile devices encounter these static web pages, they typically scale the entire page to fit the display size of the mobile device. The scaling often rendered the page too small to be read, so users would have to zoom and then scroll around on the page to read the text. To address this problem, the viewport element of the meta tag was release as part of the HTML5 specification. The W3C Mobile Web Application Bes Practices recommends the use of the viewport meta tag.

The viewport element instructs the browser how to control a web page's dimension and scaling. Browsers for mobile devices will interpret the viewport element, while desktop browser simply ignore the viewport element. In ASP.NET the MVC 4 template will put the following viewport meta tag in the _Layout.cshtml file.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

Attributes for the vewport metatag include:

Attribute Description
width The width of the virtual viewport of the device.
device-width The physical width of the device's screen.
height The height of the "virtual viewport" of the device.
device-height The physical height of the device's screen.
initial-scale The initial zoom when visiting the page. 1.0 does not zoom.
minimum-scale The minimum amount the visitor can zoom on the page. 1.0 does not zoom.
maximum-scale The maximum amount the visitor can zoom on the page. 1.0 does not zoom.
user-scalable Allows the device to zoom in and out. Values are yes or no.

The width=device-width attribute sets the width of the page to use the screen-width of the device. Sometimes this does not always render the page as expected. If you are targeting for a specific device, you can set the width to a hard-coded value. The site lists the physical display widths for many mobile devices. The attribute initial-scale=1.0 instructs browsers to establish a 1:1 relationship between CSS pixels and device independent pixels regardless of device orientation, and allows the page to take advantage of the full landscape width. The Google Developers - Configure the Viewport page discourages the use of minimum-scale, maximum-scale, and user-scalable attributes as they could negatively impact accessibility.

Media Queries

Media Queries were added in CSS3 to enable the presentation of the content to be tailored to a specific range of device widths. The media query can specify a media type and one or more expressions. If the media-type matches and all the expressions evaluate to true, then a block of style rules are applied. If the media type is not listed, then all media types are implied. A typical media query might specify a max-width and orientation. When the device width is equal or less than the specified width when being held in a landscape position, then a block of style rules are applied.

@media (min-width: 700px) and (orientation: landscape) { ... style rules ... }

In ASP.NET MVC 4, the following media query is located in the Site.css file.

*   Mobile Styles   *
@media only screen and (max-width: 850px)

The attributes for a media query are listed below.

media_query_list: <media_query> [, <media_query> ]*
media_query: [[only | not]? <media_type> [ and <expression> ]*]
  | <expression> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print |
  projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid

The W3C Media Queries page provides the formal specifications for meda queries. The Media Queries for Standard Devices page provides snippets for media queries to use with various devices. There is a Mobile First Design strategy which recommends designing a web page for mobile devices before designing the page for desktops. However not everyone agrees with the strategy for all design situations:
Mobile First Design: Why It's Great and Why it Sucks.

. jQuery Mobile

Bootstrap and jQuery Mobile

It used to be that two versions of a website were developed, one for mobile and one for desktop. Today there is support in HTML5, CSS3, and with frameworks that allows one version of the website to be built which will provide good user experiences for both mobile and desktop users. There are several frameworks for developing mobile websites, with Bootstrap and jQuery Mobile being two of the most popular. Bootstrap and jQuery Mobile provide different functionalities and some websites use them both.

Bootstrap is a user interface framework which is an open source project hosted on GitHub. It contains CSS, Components, and jQuery for mobile development. Components include images, Dropdowns, Buttons, Navs, Navbar, BreadCrumb, Pagination, Thumbnils, Progress Bars, Panels, etc. jQuery includes code for Modal Windows, Transistions, Tooltips, Carousels, etc. You can use the Bootstrap web site to create a custom compiled version of Bootstrap which only contains the components you desire.

Responsive Web Design is adapting the display of the website based upon the width of the user's display device. In recent years Responsive Web Design has been implemented by a series of media queries for different device widths ranging from the largest to the smallest. The last media query to evaluate true wins and is used for the final rendering. However the devices with the smallest screen also tend to be the devices with the least computing power. So this technique requires the smaller devices to do more processing to obtain the correct CSS. The method of responsive design (Graceful Degradation) also hides large controls and images from the mobile devices. So the mobile devices still have to download the large images and potentially run the JavaScript for large controls which are not being displayed. Bootstrap 3 has an alternative method for responsive design which is more efficient.

Bootstrap 3 uses the Mobile First philosophy for responsive design, which focuses on Progressive Enhancement (instead of Graceful Degradation). This means the web site should scale up, instead of scaling down. Bootstrap 3 uses five widths for responsive designs.

  1. 0-480px - Main CSS (Common Design)
  2. >480px
  3. >768px
  4. >992px
  5. >1200px

It should be noted versions before Bootstrap 3 used the graceful degradation philosophy to responsive design and they did not perform as well. Bootstrap 3 is a breaking change to prior versions because of its change to the progressive enhancements philosophy to responsive design. Converting from Bootstrap 2 to Bootstrap 3 is possible, but it is a big task. Bootstrap provides a default template to get your web site started. Some developers leave the default template in their production website, so these sites all look similar. Bootstrap allows custom layouts and themes to customize the look and feel of websites. A good example of a skinned bootstrap website is the current version of

jQuery Mobile is a jQuery library (build on top of JavaScript) which is optimized for mobile devices but also supports desktop browsers. jQuery creates HTML5 "data-" elements to convey instructions to jQuery for rendering the page. For example a simple $lt;ul$gt; tag for an unorderlisted list can be changed to a jQuery listview widget by adding a "data-" tag, such as $lt;ul data-role="listview"$gt; that is formatted and contains behaviors for a mobile device. Additional features or behaviors can be added to widgets with "data-" tags aa well.

jQuery Mobile provides a ThemeRoller web site which allows you to interactively create custom themes using different colors, fonts, style, and effects. Opera Mobile is a good desktop browser to use because it will run on the desktop and contains mobile views and behaviors. This is an alternative to running the code in a mobile emulator.

jQuery Mobile provides many finger-friendly controls and enhances form elements in various mobile-friendly ways. It implements asynchronous navigation controls by default. These Ajax features can cause problems if not used correctly. But there is an option to disable the Ajax features in jQuery Mobile.

.jQuery Mobile Theme Roller