Posted by CANbike on Fri, 24 Jan 2014

Mobile CANbike (940px, 600px, and 320px)

CANbike.ca is now mobile friendly! There are now three fixed width modes of 940px, 600px, and 320px. The mode is automatically selected based on the detected CSS pixel width of the browser.


Mobile CANbike

940px

The original width used since the creation of the website. CANbike.ca was first designed for desktop use, but with a width of 940px, it was usable, but not ideal, on mobile devices like tablets. Due to the nature of the content and articles, it was optimized for a desktop monitor.

The menu bar would float, and still does, at the top of the screen for convenient access.

However to improve readability, the menu bar becomes static and scrolls with the page when the browser height is 600 CSS pixels or less. The static menu, increases screen real estate for the main content (articles, etc).

600px

The new 600px mode reduces the website to two columns. Sidebars containing quick links to extra content have been eliminated. However, the extra content is still accessible through the main navigation system.

The top menu bar, has been reorganized into two static rows at the top of the page. They scroll with the rest of the page to increase screen real estate.

Automatic proportional scaling reduces larger dimension images to less than 600 pixels wide.

The width of 600 CSS pixels was optimized for tablets in portrait mode.

320px

The new 320px mode reduces the website to a single column. All content remains accessible via the main navigation system. The sidebars containing shortcuts were eliminated. The bottom footer was reorganized into a linear mode to improve accessibility. Social media links, however, were eliminated as they took up too much space.

Focus remains on the article and content. Font sizes were reduced for some titles and headers. In addition, word wrapping and word breaking help to fit overly long content onto the screen.

The menu bar, has been reorganized into three rows in a static position at the top of the page. It scrolls with the rest of the page.

Automatic proportional scaling reduces larger dimension images to less than 320 pixels wide.

The width of 320px was optimized for cell phone use.

Cell Phone Screen Captures

The following are screen captures from a Blackberry Bold 9780. Screen resolution is 480×360 using the BlackBerry OS 6 web browser.

Visiting the Homepage

Mobile Screenshot 480x360 01

Srolling Down the Single Column Homepage

Mobile Screenshot 480x360 02

Reading an Article with Scaled Images

Mobile Screenshot 480x360 03

Checking Out the Mobile www.canbike.ca/trails

Mobile Screenshot 480x360 04

CANbike.ca on Mobile Devices

A Netbook, a Tablet, and a Cell Phone

CANbike On Mobile Devices

Brief Notes on Making a Mobile Website

Media Queries

  • Use CSS media queries to selectively alter the presentation
  • Reference Guide: W3C Media Queries
  • My Template:
@media (max-height: 600px)
{
/* Alternate CSS Styling for heights less than or equal to 600 pixels*/
}

@media (max-width: 940px) 
{
/* Alternate 600px CSS Styling */
}

@media (max-width: 599px)
{
/* Alternate 320px CSS Styling */
}

Viewport for HD Mobile Displays

  • A CSS Pixel is not the same as physical pixel
    • Apple’s Retina Devices (iPod, iPhone, iPad) will still render the 940px website on a small display
    • Mobile HD displays will still render the 940px website on a small display
  • Apple invented the meta viewport to solve this issue for iPhone web developers
    • Apple Reference Guide: Configuring the Viewport
      • Viewport widths of 980px or 320px
      • Default width is 980px
        • Add one line of HTML to the webpage to change the display and rendering settings
          • <meta name="viewport" content="width=device-width"> sets the viewport width to 320px
            • With this set, the above CSS media query template 320px styling shall be used
    • Other mobile browsers have adopted the meta viewport tag