Mobile first and Drupal. The future is already here              Kristof Orts - Anthony Ringoet
helloAnthony Ringoet     Kristof Orts                                   2
3
What happened?
Not too long ago
The mobileexperienceback then.
Today
Today is the future
Today• Computer market owned by  smartphones in 2010 already• Hardware prices dropping• Mobile data prices dropping• Lots ...
Responsive web design
Responsive websites      respondto their environment
Real clients
The Flexible Grid
Media Queries
@media all and (max-width: 699px) and (min-width: 520px) { body {    background: #ccc;   } }                           ext
Fluid media
Mobile first              19
"Designing for mobile first not onlyprepares you for the explosive growthand opportunities in this space, itforces you to f...
Mobile first• Design and development process• Mobile first thinking should influence all  your decisions when building• You c...
Benefits• Supporting multiple platforms in a  financial attractive way• Sustainable • one article = one url • updates happen...
Focus• Lots of constraints• Focus on what really matters• “People’s capacity for bullshit is rapidly  diminishing.” @brad_...
Mooaaar junk please
Mobile first is hard•   Lots of problems still to be solved•   Best practices are emerging    •   mobilewebbestpractices.co...
Future proof?• Fragmentation will only get worse• Standards will not be able to keep up• Future friend.ly manifest• Build ...
Responsive workflow
IA
Wireframes
Design
Trends and patterns
Is there a module for that?                              46
47
Implementation• Cleanup Drupal’s sensible defaults• Front-end performance• Fluid grids• Browsersupport and polyfills       ...
Cleanup Drupal’s defaults• Stop repeating yourself• Tweak the defaults so they work for you• I like mothership with some t...
Mothership• “Keelhaul the div!”• html5 base that removes cruft• uses theme settings • break stuff and fix it really quick :...
Front-end performance• How Compass and Sass help me
Spriting• http requests are lame and slow (esp.  on mobile)• Automatic sprite generation ftw!• Beware of sprite size for c...
Inline data uri’s • Embed files inside your css as raw data • No extra http request for the filecompass syntax:inline-image(...
Fluid grids• Tricky when nesting because of % • Susy (for Compass)   • http://susy.odbird.net • Zen Grids (for Sass)   • h...
Browser support• lame browsers = old IE + FF < 3.6
Browser support• lame browsers = old IE + FF < 3.6
Browser support• lame browsers = old IE + FF < 3.6
Browser support• lame browsers = old IE + FF < 3.6
Browser support• lame browsers = old IE + FF < 3.6
Browser support• Can I use• Html5 please• Quirksmode
Thanks.         Let’s talk!@kristoforts - @mylittletony                               59
CC photo creditshttp://upstatement.com/wp-content/themes/ace/_img/device-array-1200.pnghttp://www.flickr.com/photos/adactio...
Feedback & follow-up:http://drupalcampgent.be/feedback
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
×

Mobile first and Drupal.

921 views

Published on

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
921
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mobile first and Drupal.

  1. 1. Mobile first and Drupal. The future is already here Kristof Orts - Anthony Ringoet
  2. 2. helloAnthony Ringoet Kristof Orts 2
  3. 3. 3
  4. 4. What happened?
  5. 5. Not too long ago
  6. 6. The mobileexperienceback then.
  7. 7. Today
  8. 8. Today is the future
  9. 9. Today• Computer market owned by smartphones in 2010 already• Hardware prices dropping• Mobile data prices dropping• Lots of websites still suck
  10. 10. Responsive web design
  11. 11. Responsive websites respondto their environment
  12. 12. Real clients
  13. 13. The Flexible Grid
  14. 14. Media Queries
  15. 15. @media all and (max-width: 699px) and (min-width: 520px) { body { background: #ccc; } } ext
  16. 16. Fluid media
  17. 17. Mobile first 19
  18. 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. 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. 20. Benefits• Supporting multiple platforms in a financial attractive way• Sustainable • one article = one url • updates happen once
  21. 21. Focus• Lots of constraints• Focus on what really matters• “People’s capacity for bullshit is rapidly diminishing.” @brad_frost
  22. 22. Mooaaar junk please
  23. 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. 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. 25. Responsive workflow
  26. 26. IA
  27. 27. Wireframes
  28. 28. Design
  29. 29. Trends and patterns
  30. 30. Is there a module for that? 46
  31. 31. 47
  32. 32. Implementation• Cleanup Drupal’s sensible defaults• Front-end performance• Fluid grids• Browsersupport and polyfills 48
  33. 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. 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. 35. Front-end performance• How Compass and Sass help me
  36. 36. Spriting• http requests are lame and slow (esp. on mobile)• Automatic sprite generation ftw!• Beware of sprite size for caching on mobile
  37. 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. 38. Fluid grids• Tricky when nesting because of % • Susy (for Compass) • http://susy.odbird.net • Zen Grids (for Sass) • http://zengrids.com
  39. 39. Browser support• lame browsers = old IE + FF < 3.6
  40. 40. Browser support• lame browsers = old IE + FF < 3.6
  41. 41. Browser support• lame browsers = old IE + FF < 3.6
  42. 42. Browser support• lame browsers = old IE + FF < 3.6
  43. 43. Browser support• lame browsers = old IE + FF < 3.6
  44. 44. Browser support• Can I use• Html5 please• Quirksmode
  45. 45. Thanks. Let’s talk!@kristoforts - @mylittletony 59
  46. 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. 47. Feedback & follow-up:http://drupalcampgent.be/feedback

×