• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Designing for the Mobile Web
 

Designing for the Mobile Web

on

  • 1,882 views

Our December Refresh event was led by web and mobile designer Michael Dick who discussed how to extend the experience from the desktop to the mobile web, as well as tips & tricks you may utilize ...

Our December Refresh event was led by web and mobile designer Michael Dick who discussed how to extend the experience from the desktop to the mobile web, as well as tips & tricks you may utilize during the design & development of your mobile site.

More info at http://RefreshBmore.org

Statistics

Views

Total Views
1,882
Views on SlideShare
1,882
Embed Views
0

Actions

Likes
1
Downloads
7
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • ’Designing for the Mobile Web’ by Michael Dick (December 2010) from Refresh Bmore on Vimeo

    http://vimeo.com/17690234
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Designing for the Mobile Web Designing for the Mobile Web Presentation Transcript

    • Designing for theMOBILEWEB@michaeldickhttp://m1k3.net RefreshBmore Dec. 2010
    • @michaeldickcssiphone.com ncludweb inspiration for mobile a creative web design agency
    • 1) Design & UX2) Viewports3) Detection4) Tips & Tricks5) Questions & Discussion
    • Mobile Web 2.0* Compare it to* the browser wars* from the 90’s
    • CSS = CSSHTML = HTML JS = JS
    • (Technical only, not applied to the user interaction)
    • XConte__t is king
    • is the iPad “Mobile” ?
    • “ It’s so much more intimate than a laptop ” — Steve Jobs
    • Jobs demonstrated the iPadwhile sitting on a couch.
    • Good.
    • Good.
    • Good.
    • :(
    • Good.
    • Design &Experience
    • BAD EXPERIENCE
    • GracefulDegradation
    • Desktop
    • Mobile “2.0”
    • Mobile “WAP”
    • Opt-in / Opt-out
    • opt-in
    • opt to go back
    • opt-out
    • opt to go back
    • opt to go back
    • Viewportsand why fixed positioning doesn’t work!
    • <meta name="viewport" content=""/> (at its most basic state)
    • content=” width = ; initial-scale = ; maximum-scale = ; user-scalable = ;”
    • VIEWPORT STARTS
    • VIEWPORT ENDS
    • VIEWPORTNOT!
    • DeviceDetection
    • Specific vsOptimized(and responsive)
    • Optimized Specificsame markup new markup both use new CSS
    • Stylesheet (HTML)<link rel="stylesheet" href=""media="only screen and(max-device-width: 480px)"/>
    • @media (CSS)@media only screen and (max-device-width: 480px){ /* iphone css goes here */}
    • @import (CSS)@import url(‘mobile.css’) only screenand (max-device-width: 480px);
    • User Agent Sniffing JS: navigator.userAgentPHP: $_SERVER[HTTP_USER_AGENT]
    • detectMobileBrowsers.mobi
    • require(detect.php);$mobile = detect();
    • OrientationDetection
    • <body id=”portrait”>
    • body#portrait{ width:320px; color:green;}
    • body#landscape{ width:480px; color:red;}
    • QuickTips & Tricks
    • HTML 5 Inputs type=”url” type=”email”type=”number” type=”tel”
    • Disable..autocorrect="off"autocapitalize="off"autocomplete="off"
    • uselarge hit areas
    • BAD HIT AREAS
    • Keeps the text from adjusting on orientation changebody { -webkit-text- size-adjust:none;}
    • Hide the Address Bar onload<body onload=” window.scrollTo(0, 1);”>
    • Don’t use fixed widths/heights
    • Discussion &Questions
    • Google Keywords✓ iphone detection✓ iphone orientation javascript✓ iphone psd✓ detect mobile browsers✓ android / iphone sdk✓ mobile safari dev center *
    • Thank You.@michaeldickhttp://m1k3.net