My name is Janet. I am a Web Developer.

My interest to mobile technologies pushed me to take "Foundations of Mobile Business Technologies" course at the University of Toronto.

This is my first mobile website created as a final project for this course. The main goal of this site is demonstrating 20 mobile web features that I have learned and getting my next contract as a Mobile Web Developer.

20 mobile web features

  1. Making a Phone Call

    This page demonstrates using "tel:" i-Mode format to make a phone call by clicking a link on a web page (works only for phone-enabled devices).

  2. Sending Email

    The page demonstrates using "mailto:" protocol for sending email. Works for mobile phones and modern devices with browsers having mail applications that can react to classic "mailto:" protocol.

  3. Sending an SMS

    The page demonstrates using "sms:" protocol for sending SMS.

  4. Conditional Media Queries

    Every page of this website uses conditional media queries which include conditions about the screen size and media attribute values allowed. Currently, Media queries work for Safari, Android browser, Symbiam/S60 from 5-th edition, Nokia Series 40 from 6-th edition, webOS, Opera Mobile, Opera Mini.

  5. Using reset.css

    For this site, truncated version of reset.css is used as a start part of basic.css file, used on every page.

  6. Use of Pseudo-classes

    Pseudo-classes are used for every link on this mobile website excluding navigation links,
    a:link works for every browser,
    a:visited works for Safari, Nokia Series 40, IE, Motorola I.B., Opera (Mobile and Mini),
    a:focus works for IE and partilayy for Safari,
    a:active works for Safari, NetFront, IE, and Motorola I.B.,
    a: hover works for Android browser, Symbian/S60, Nokia Series 40 from 6-th edition, and Opera (Mobile and Mini)

  7. JavaScript for Mobile Browsers: Standard Dialogs

    JavaScript supports a list of standard dialogs. This page shows alert() standard dialog after clicking on any of test buttons. Works on all browsers.

  8. JavaScript for Mobile Browsers: Screen & Viewport Properties

    This page displays screen size, available screen size and viewport size of a window for your browser. Screen size is supported by major browsers (excluding Nokia Series 40 before 6-th edition and Blackberry before 4.6). Viewport size of a window is supported by all major browsers excluding Nokia before 6-th edition, BlackBerry, NetFront, InternetExplorer.

  9. Coding JavaScript for Mobile Browsers: History

    This feature is implemented in the footer of every page, "Back" link.

  10. AJAX Support Test, JavaScript Standard Dialogs

    AJAX support varies from device to device. The page represents AJAX support test.

    XMLHTTPRequest is supported by Safari, Android browser, Symbian/S60 since 3-d edition, Nokia Series 40 starting with 6-th edition, webOS, BlackBerry after version 4.6, NetFront starting version 3.5, IE starting Windows Mobile 5, Opera Mobile starting version 8.0, and Opera Mini starting version 3.0.

  11. AJAX Support: JSON Parsing Support Test

    AJAX support varies from device to device. The page represents JSON Parsing Support test.

  12. Detecting the Location: W3C Geolocation API

    This page allows to find the latitude and longitude for your current location based on W3C Geolocation API (status "Candidate Recomendation". Works for major mobile browsers including Safari, BlackBerry, and Android browsers.

  13. Using Google Maps: Google Maps API v3 & GoogleMaps Static API

    This page will deliver Google Map API v3 for Safari on iOS (for iPad, iPhone, iPod Touch), Android browser and Google Chrome browser on desktop and Google Maps Static API for other browsers.

  14. Using Ordered Lists with Access Keys

    Accesskeys enable a user to navigate a site using keyboard shortcuts, improving both the usability and accessibility of the site.

    Accesskeys are used on every page of this site for top and bottom navigation lists.

  15. Use of Marquee

    Based on my tests, HTML marquee tag works fine on all tested browsers excluding Opera Mini; -wap-marquee WCSS extension works fine on Opera Mobile on Android and on Opera emulator.

  16. Using Border Images

    The page demonstrates using border images for mobile web. Safari, Android, webOS, and partially Symbian/S60 support this feature (as at time of writing, April 20, 2012).

  17. Using Text Stroke and Fill

    This page demonstrates using Text Stroke and Fill WebKit Extensions. Works for WebKit browsers: Safari, Android browser, Google Chrome. text-fill-color works on webOS and Symbian/S60 from 5-th edition.

  18. CSS3 Gradients

    CSS3 gradients are supported in WebKit browsers (Safari, Android, Google Chrome) with prefix.

  19. CSS3: Reflection Effects, Masked Images

    Reflection effects (box-reflect) and masked images are supported in WebKit browsers (Safari, Android, Google Chrome) with prefix.

  20. CSS3: Animation

    CSS3 animations are supported in WebKit browsers.