CSS for Mobile Devices 
Making web sites look good on mobile devices 
like iPhones, Android, and Windows Phones
Programming for mobile devices is 
difficult 
 iOS 
 Objective-C 
 Cocoa 
Touch 
 XCode IDE 
• Android 
• Java 
• ADT ...
 sdf 
But if we create a 
web site, they can all 
browse to the web 
site
Pros 
1. One language, environment, IDE 
2. Only one version of the code base exists 
3. Super-easy deployment
Cons 
 It will not be in the AppStore/Play 
Market/etc. 
 It won't have the native look and feel 
 Must be connected to...
We can mitigate some of those 
weaknesses 
 Use a web-to-native solution to create a 
native app 
 Use offline caching f...
Certain frameworks allow us to write 
our sites more abstractly 
 iui 
 Sencha Touch 
 Sencha jQTouch 
 jQuery Mobile
Many sites use a header/body/footer 
layout for consistency 
<div id="header"> 
<div id="topbar">...</div> 
<div id="menub...
Here's a typical header layout 
<div id="nav"> 
#nav ul li { 
<ul> 
<li><a 
href="/activity">Activity</a> 
</li> 
<li><a 
...
Options 
 Server-side detect 
 Client-side detect 
◦ One stylesheet 
◦ Multiple stylesheets
Server-side detect 
 Using jsp, asp.net, php, or whatever, 
detect the browser and serve a different 
stylesheet based on...
Client-side detect – different 
stylesheets 
<link rel="stylesheet" 
href="site.css" media="screen" /> 
<link rel="stylesh...
Client-side detect – single 
stylesheet 
@media screen and (min-width: 650px) { 
body { 
background-color: #e4e3a5; } 
#ma...
What to change 
 Reduce content 
 Reduce bandwidth 
 Compensate for the small screen
Reduce content 
 Remove sidebars 
display: none; 
 Move navigation links to the bottom 
instead of the left side 
 Redu...
Reduce bandwidth 
 Remove backgrounds 
 Replace images with plain text 
 Use lower-res versions of some images 
 Load ...
Compensate for the small screen 
 Increase font 
 Increase padding on buttons and anything 
else that the user will be t...
Viewport 
 All browsers have a viewport that changes 
based on the size 
 Tiny browsers allow a large viewport 
 To mak...
Problems 
 Reduced bandwidth on cellular networks 
vs. WiFi or wired 
 Reduced screen real estate 
 Cross-platform comp...
tl;dr 
 To avoid the pain of multiple source codes 
in multiple languages with multiple 
frameworks, we can publish a mob...
Oh and one more thing ... iPhone 
icons come for free for your 
websites! 
 57X57 png 
<link rel="apple-touch-icon" 
href...
Further study 
 Nice strategy for backward compatibility 
◦ http://stuffandnonsense.co.uk/projects/320andu 
p/
Upcoming SlideShare
Loading in …5
×

12 css for mobile devices

377 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
377
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • This is a media query
  • Look at these on subsequent pages
  • Increasing the font is counterintuitive
  • 12 css for mobile devices

    1. 1. CSS for Mobile Devices Making web sites look good on mobile devices like iPhones, Android, and Windows Phones
    2. 2. Programming for mobile devices is difficult  iOS  Objective-C  Cocoa Touch  XCode IDE • Android • Java • ADT plugin • Eclipse IDE • Windows Phone • C# or VB.Net • Silverlight • Visual Studio IDE
    3. 3.  sdf But if we create a web site, they can all browse to the web site
    4. 4. Pros 1. One language, environment, IDE 2. Only one version of the code base exists 3. Super-easy deployment
    5. 5. Cons  It will not be in the AppStore/Play Market/etc.  It won't have the native look and feel  Must be connected to the Internet to run  Slower  Cannot access some native resources ◦ Accelerometer ◦ Proximity sensor ◦ GPS (sometimes) ◦ Camera ◦ Telephone (sometimes)
    6. 6. We can mitigate some of those weaknesses  Use a web-to-native solution to create a native app  Use offline caching for offline apps  Use JavaScript/jQuery to push most of the processing to client-side
    7. 7. Certain frameworks allow us to write our sites more abstractly  iui  Sencha Touch  Sencha jQTouch  jQuery Mobile
    8. 8. Many sites use a header/body/footer layout for consistency <div id="header"> <div id="topbar">...</div> <div id="menubar"> <ul> <li><a href="home.html">Home</a></li> <li><a href="aboutus.html">About us</a></li> <li><a href="catalog.html">Catalog</a></li> <li><a href="login.html">Log in</a></li> <ul> </div> <!-- end of menubar --> </div> <!-- end of menubar --> <div id="content"> <div id="page_menu">...</div> <div id="page">...</div> </div> <!-- end of content --> <div id="footer">...</div>
    9. 9. Here's a typical header layout <div id="nav"> #nav ul li { <ul> <li><a href="/activity">Activity</a> </li> <li><a href="/you">You</a></li> <li><a href="/contacts">Contacts</a> </li> <li><a href="/more">More</a></li> <ul> </div> display: inline; width:25%; text-align: center; ... } #nav ul li a {display:block;}
    10. 10. Options  Server-side detect  Client-side detect ◦ One stylesheet ◦ Multiple stylesheets
    11. 11. Server-side detect  Using jsp, asp.net, php, or whatever, detect the browser and serve a different stylesheet based on the browser
    12. 12. Client-side detect – different stylesheets <link rel="stylesheet" href="site.css" media="screen" /> <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 650px" />
    13. 13. Client-side detect – single stylesheet @media screen and (min-width: 650px) { body { background-color: #e4e3a5; } #mainContent { float: left; padding: 10px; width: 65%; } #sidebar { clear: none; float: right; margin: 0 0 0 0; width: 30%; } } @media screen and (max-width: 650px) { input[type=button] { font-size: 1.2em; } }
    14. 14. What to change  Reduce content  Reduce bandwidth  Compensate for the small screen
    15. 15. Reduce content  Remove sidebars display: none;  Move navigation links to the bottom instead of the left side  Reduce bandwidth  No mouse events; mouseover, mousein, mouseout  No :hover pseudo-class
    16. 16. Reduce bandwidth  Remove backgrounds  Replace images with plain text  Use lower-res versions of some images  Load resources using Ajax after the page loads if ($(document).width() > 640) { // do lazy loading here }
    17. 17. Compensate for the small screen  Increase font  Increase padding on buttons and anything else that the user will be touching  Convert all horizontal layouts to vertical – no side-scrolling!  Make the site minimalist so that it isn't confusing and busy
    18. 18. Viewport  All browsers have a viewport that changes based on the size  Tiny browsers allow a large viewport  To make the page look bigger on the the device, set viewport to be small <meta name="viewport" content="width=device-width" />
    19. 19. Problems  Reduced bandwidth on cellular networks vs. WiFi or wired  Reduced screen real estate  Cross-platform compatibility – many browsers
    20. 20. tl;dr  To avoid the pain of multiple source codes in multiple languages with multiple frameworks, we can publish a mobile website instead of a mobile app  Separate presentation from layout  Use media queries to detect the device and simply rearrange the layout  Setting viewport will keep the user from scrolling horizontally on a phone
    21. 21. Oh and one more thing ... iPhone icons come for free for your websites!  57X57 png <link rel="apple-touch-icon" href="/customIcon.png"/>  The iPhone creates rounded corners and the 3D effect
    22. 22. Further study  Nice strategy for backward compatibility ◦ http://stuffandnonsense.co.uk/projects/320andu p/

    ×