Your SlideShare is downloading. ×
0
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
Mobile first and Drupal.
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

Mobile first and Drupal.

806

Published on

Mobile first and Drupal. The future is already here. …

Mobile first and Drupal. The future is already here.

Session on Drupalcamp Gent 25.05.2012
Anthony Ringoet and Kristof Orts

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

No Downloads
Views
Total Views
806
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
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

Transcript

  • 1. Mobile first and Drupal. The future is already here Kristof Orts - Anthony Ringoet
  • 2. helloAnthony Ringoet Kristof Orts 2
  • 3. 3
  • 4. What happened?
  • 5. Not too long ago
  • 6. The mobileexperienceback then.
  • 7. Today
  • 8. Today is the future
  • 9. Today• Computer market owned by smartphones in 2010 already• Hardware prices dropping• Mobile data prices dropping• Lots of websites still suck
  • 10. Responsive web design
  • 11. Responsive websites respondto their environment
  • 12. Real clients
  • 13. The Flexible Grid
  • 14. Media Queries
  • 15. @media all and (max-width: 699px) and (min-width: 520px) { body { background: #ccc; } } ext
  • 16. Fluid media
  • 17. Mobile first 19
  • 18. "Designing for mobile first not onlyprepares you for the explosive growthand opportunities in this space, itforces you to focus and enables you toinnovate."@lukew
  • 19. Mobile first• Design and development process• Mobile first thinking should influence all your decisions when building• You can’t be everything everywhere• X-ray vision + enhancements• Trying not to make assumptions
  • 20. Benefits• Supporting multiple platforms in a financial attractive way• Sustainable • one article = one url • updates happen once
  • 21. Focus• Lots of constraints• Focus on what really matters• “People’s capacity for bullshit is rapidly diminishing.” @brad_frost
  • 22. Mooaaar junk please
  • 23. Mobile first is hard• Lots of problems still to be solved• Best practices are emerging • mobilewebbestpractices.com• Drupal: check out how mobile friendly contrib is before adding• Diversity • quirksmode.org/mobile• Aim for universal acces
  • 24. Future proof?• Fragmentation will only get worse• Standards will not be able to keep up• Future friend.ly manifest• Build with progressive enhancement
  • 25. Responsive workflow
  • 26. IA
  • 27. Wireframes
  • 28. Design
  • 29. Trends and patterns
  • 30. Is there a module for that? 46
  • 31. 47
  • 32. Implementation• Cleanup Drupal’s sensible defaults• Front-end performance• Fluid grids• Browsersupport and polyfills 48
  • 33. Cleanup Drupal’s defaults• Stop repeating yourself• Tweak the defaults so they work for you• I like mothership with some tweaks on top of it
  • 34. Mothership• “Keelhaul the div!”• html5 base that removes cruft• uses theme settings • break stuff and fix it really quick : )• http://drupal.org/project/mothership
  • 35. Front-end performance• How Compass and Sass help me
  • 36. Spriting• http requests are lame and slow (esp. on mobile)• Automatic sprite generation ftw!• Beware of sprite size for caching on mobile
  • 37. Inline data uri’s • Embed files inside your css as raw data • No extra http request for the filecompass syntax:inline-image($image, $mime-type)result:background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAOR.......)
  • 38. Fluid grids• Tricky when nesting because of % • Susy (for Compass) • http://susy.odbird.net • Zen Grids (for Sass) • http://zengrids.com
  • 39. Browser support• lame browsers = old IE + FF < 3.6
  • 40. Browser support• lame browsers = old IE + FF < 3.6
  • 41. Browser support• lame browsers = old IE + FF < 3.6
  • 42. Browser support• lame browsers = old IE + FF < 3.6
  • 43. Browser support• lame browsers = old IE + FF < 3.6
  • 44. Browser support• Can I use• Html5 please• Quirksmode
  • 45. Thanks. Let’s talk!@kristoforts - @mylittletony 59
  • 46. CC photo creditshttp://upstatement.com/wp-content/themes/ace/_img/device-array-1200.pnghttp://www.flickr.com/photos/adactio/6152947625/http://www.flickr.com/photos/48625620@N00/3663572712/http://www.flickr.com/photos/justinbaeder/247117023/ 60
  • 47. Feedback & follow-up:http://drupalcampgent.be/feedback

×