How to build_a_mobile_site_with_drupal

286 views
223 views

Published on

Published in: Software, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
286
On SlideShare
0
From Embeds
0
Number of Embeds
59
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How to build_a_mobile_site_with_drupal

  1. 1. How to Build a Mobile Site with Drupal Andrew Berry, Lullabot Harris Rashid, Chapter Three
  2. 2. About Us
  3. 3. BADCAMP11 $20 off 1st month, good until October 28
  4. 4. We're still figuring out how to "do mobile" https://secure.flickr.com/photos/3059349393/3786855827/in/photostream/
  5. 5. Adaptive and Responsive
  6. 6. Mobile Apps and Mobile Web
  7. 7. ● An App is typically something that you distribute to your users by pointing them to a store ● A website loads in a browser such as Mobile Safari ● Some apps use web technologies (HTML, JavaScript, CSS) while some websites can be installed as Apps!
  8. 8. Build an App? Write for multiple platforms, test on multiple platforms
  9. 9. Build a website? Write one website, but test in multiple browsers
  10. 10. Why not just target Webkit?
  11. 11. There is no "one" Webkit
  12. 12. The Great WebKit Comparison Table http://quirksmode.org/webkit_mobile.html
  13. 13. Developing for Mobile (with HTML and JavaScript)
  14. 14. Let your website join the party https://secure.flickr.com/photos/moogan/2976043573/
  15. 15. A Mobile Web App Is: 1. An name and icon for the home screen or launcher 2. An indication that the application should run in full-screen mode (iOS only) 3. The size of the viewport 4. A startup image (iOS only as well) 5. A list of the files needed for offline use (not just mobile, but need a fallback for IE)
  16. 16. 1. Set your site name! drush -y vset site_name for the hardcore
  17. 17. Home Screen Icon
  18. 18. 2. iOS Enhancements
  19. 19. 3. Ω Rocks (it set the <viewport> for us)
  20. 20. 4. More iOS Enhancements
  21. 21. 5. A Cache Manifest ● A plain text file ● <html manifest="/cache.manifest"> ○ Might need to have your server admin add the content type to Apache ● First line is CACHE MANIFEST ● NETWORK:, CACHE:, FALLBACK:
  22. 22. Danger! Caveats abound! https://secure.flickr.com/photos/22490717@N02/2317974773/
  23. 23. http://cheezburger.com/View/5241774848
  24. 24. HTML5 Web Storage ● Supported by all major mobile browsers! ○ (still a W3C draft) ● Two types of storage: localStorage and sessionStorage ● localStorage is permanent unless the user clears it ● sessionStorage is temporary, and per tab or window of the site ● Use Web Storage to store data and save on HTTP requests and page size, at the expense of local CPU resources
  25. 25. Web Storage... ... is key-value pairs only ... and is strings only
  26. 26. User searches your site
  27. 27. HTML5 Local Storage Example https://drupal. org/sandbox/deviantintegral/131140 6
  28. 28. http://lb.cm/badapp (who designed this mess?)
  29. 29. Theming for Mobile
  30. 30. Two approaches 1) Create a mobile version for an existing site 2) Build a new site with a mobile first approach (responsive web design)
  31. 31. Mobile Tools Module http://drupal.org/project/mobile_tools
  32. 32. Mobile Tools Module ● Redirection to a mobile domain ● User-Agent Detection ● Theme Switching ● Integration with Panels and Context http://drupal.org/project/mobile_tools
  33. 33. Mobile Tools Module Redirection to a mobile domain
  34. 34. Mobile Tools Module User-Agent Detection
  35. 35. Mobile Tools Module Theme Switching
  36. 36. Mobile Tools Module Integration with Panels
  37. 37. CSS Media Queries Detect a device screen size and load a stylsheet media="screen and (max-device-width: 480px)" <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="style.css" />
  38. 38. CSS Media Queries Portrait vs. Landscape /* Portrait */ @media screen and (orientation:portrait) { /* Portrait styles */ } /* Landscape */ @media screen and (orientation:landscape) { /* Landscape styles */ }
  39. 39. Google Bookmark Bubble Create your own: http://code.google.com/p/mobile-bookmark-bubble/
  40. 40. Responsive Web Design One Site & Theme for any device
  41. 41. Responsive Drupal Themes Omega Adaptive http://drupal.org/project/omega http://drupal.org/project/adaptivetheme
  42. 42. Responsive jQuery Plugins Fittext FitVids http://fittextjs.com http://fitvids.js
  43. 43. Responsive jQuery Code Snippets Elastislide Image Gallery http://tympanus.net/codrops/
  44. 44. Testing Tools
  45. 45. Firefox User Agent Add-on Supports iPad and iPhone Great for testing mobile browser detection, url and theme switching
  46. 46. Apple XCode iOS Simulator http://developer.apple.com/xcode/
  47. 47. Awesome Resources http://lb.cm/bc11-mobile-notes
  48. 48. Discussion

×