Your SlideShare is downloading. ×
0
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
12 css for mobile devices
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

12 css for mobile devices

190

Published on

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

No Downloads
Views
Total Views
190
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • This is a media query
  • Look at these on subsequent pages
  • Increasing the font is counterintuitive
  • Transcript

    • 1. CSS for Mobile Devices Making web sites look good on mobile devices like iPhones, Android, and Windows Phones
    • 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.  sdf But if we create a web site, they can all browse to the web site
    • 4. Pros 1. One language, environment, IDE 2. Only one version of the code base exists 3. Super-easy deployment
    • 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. 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. Certain frameworks allow us to write our sites more abstractly  iui  Sencha Touch  Sencha jQTouch  jQuery Mobile
    • 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. 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. Options  Server-side detect  Client-side detect ◦ One stylesheet ◦ Multiple stylesheets
    • 11. Server-side detect  Using jsp, asp.net, php, or whatever, detect the browser and serve a different stylesheet based on the browser
    • 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. 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. What to change  Reduce content  Reduce bandwidth  Compensate for the small screen
    • 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. 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. 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. 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. Problems  Reduced bandwidth on cellular networks vs. WiFi or wired  Reduced screen real estate  Cross-platform compatibility – many browsers
    • 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. 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. Further study  Nice strategy for backward compatibility ◦ http://stuffandnonsense.co.uk/projects/320andu p/

    ×