Mobile first and Drupal.
-
Upload
anthony-ringoet -
Category
Technology
-
view
811 -
download
0
description
Transcript of Mobile first and Drupal.
![Page 1: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/1.jpg)
Mobile first and Drupal. The future is already hereKristof Orts - Anthony Ringoet
![Page 2: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/2.jpg)
2
hello
Anthony Ringoet Kristof Orts
![Page 3: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/3.jpg)
3
![Page 4: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/4.jpg)
![Page 5: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/5.jpg)
What happened?
![Page 6: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/6.jpg)
Not too long ago
![Page 7: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/7.jpg)
The mobile experience back then.
![Page 8: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/8.jpg)
Today
![Page 9: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/9.jpg)
Today is the future
![Page 10: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/10.jpg)
Today
•Computer market owned by smartphones in 2010 already
•Hardware prices dropping
•Mobile data prices dropping
• Lots of websites still suck
![Page 11: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/11.jpg)
Responsive web design
![Page 12: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/12.jpg)
Responsive websitesrespond
to their environment
![Page 13: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/13.jpg)
Real clients
![Page 14: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/14.jpg)
![Page 15: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/15.jpg)
The Flexible Grid
![Page 16: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/16.jpg)
Media Queries
![Page 17: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/17.jpg)
@media all and (max-width: 699px) and (min-width: 520px) { body { background: #ccc;
}}
ext
![Page 18: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/18.jpg)
Fluid media
![Page 19: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/19.jpg)
Mobile first
19
![Page 20: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/20.jpg)
"Designing for mobile first not only prepares you for the explosive growth and opportunities in this space, it forces you to focus and enables you to innovate."@lukew
![Page 21: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/21.jpg)
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
![Page 22: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/22.jpg)
Benefits
• Supporting multiple platforms in a financial attractive way
• Sustainable
• one article = one url
• updates happen once
![Page 23: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/23.jpg)
Focus
• Lots of constraints
• Focus on what really matters
• “People’s capacity for bullshit is rapidly diminishing.” @brad_frost
![Page 24: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/24.jpg)
Mooaaar junk please
![Page 25: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/25.jpg)
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
![Page 26: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/26.jpg)
Future proof?
• Fragmentation will only get worse
• Standards will not be able to keep up
• Future friend.ly manifest
• Build with progressive enhancement
![Page 27: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/27.jpg)
Responsive workflow
![Page 28: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/28.jpg)
IA
![Page 29: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/29.jpg)
Wireframes
![Page 30: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/30.jpg)
![Page 31: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/31.jpg)
![Page 32: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/32.jpg)
Design
![Page 33: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/33.jpg)
![Page 34: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/34.jpg)
![Page 35: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/35.jpg)
![Page 36: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/36.jpg)
![Page 37: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/37.jpg)
![Page 38: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/38.jpg)
![Page 39: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/39.jpg)
Trends and patterns
![Page 40: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/40.jpg)
![Page 41: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/41.jpg)
![Page 42: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/42.jpg)
![Page 43: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/43.jpg)
![Page 44: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/44.jpg)
![Page 45: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/45.jpg)
![Page 46: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/46.jpg)
Is there a module for that?
46
![Page 47: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/47.jpg)
47
![Page 48: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/48.jpg)
Implementation
48
•Cleanup Drupal’s sensible defaults
•Front-end performance
•Fluid grids
•Browsersupport and polyfills
![Page 49: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/49.jpg)
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
![Page 50: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/50.jpg)
Mothership
• “Keelhaul the div!”
• html5 base that removes cruft
• uses theme settings
• break stuff and fix it really quick : )
• http://drupal.org/project/mothership
![Page 51: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/51.jpg)
![Page 52: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/52.jpg)
![Page 53: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/53.jpg)
Front-end performance
•How Compass and Sass help me
![Page 54: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/54.jpg)
Spriting
• http requests are lame and slow (esp. on mobile)
• Automatic sprite generation ftw!
• Beware of sprite size for caching on mobile
![Page 55: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/55.jpg)
Inline data uri’s
• Embed files inside your css as raw data
•No extra http request for the file
compass syntax:inline-image($image, $mime-type)
result:background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAOR.......)
![Page 56: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/56.jpg)
Fluid grids
• Tricky when nesting because of %
• Susy (for Compass)
• http://susy.odbird.net
• Zen Grids (for Sass)
• http://zengrids.com
![Page 57: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/57.jpg)
Browser support
• lame browsers = old IE + FF < 3.6
![Page 58: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/58.jpg)
Browser support
• lame browsers = old IE + FF < 3.6
![Page 59: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/59.jpg)
Browser support
• lame browsers = old IE + FF < 3.6
![Page 60: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/60.jpg)
Browser support
• lame browsers = old IE + FF < 3.6
![Page 61: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/61.jpg)
Browser support
• lame browsers = old IE + FF < 3.6
![Page 62: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/62.jpg)
Browser support
•Can I use
•Html5 please
•Quirksmode
![Page 63: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/63.jpg)
Thanks.
59
Let’s talk!@kristoforts - @mylittletony
![Page 64: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/64.jpg)
CC photo credits
60
http://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/
![Page 65: Mobile first and Drupal.](https://reader033.fdocuments.net/reader033/viewer/2022052901/5564c9bed8b42a565b8b4f96/html5/thumbnails/65.jpg)
Feedback & follow-up:http://drupalcampgent.be/feedback