Upload
anthony-ringoet
View
811
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Mobile first and Drupal. The future is already here.Session on Drupalcamp Gent 25.05.2012Anthony Ringoet and Kristof Orts
Citation preview
Mobile first and Drupal. The future is already hereKristof Orts - Anthony Ringoet
2
hello
Anthony Ringoet Kristof Orts
3
What happened?
Not too long ago
The mobile experience back then.
Today
Today is the future
Today
•Computer market owned by smartphones in 2010 already
•Hardware prices dropping
•Mobile data prices dropping
• Lots of websites still suck
Responsive web design
Responsive websitesrespond
to 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 only prepares you for the explosive growth and opportunities in this space, it forces you to focus and enables you to innovate."@lukew
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
Benefits
• Supporting multiple platforms in a financial attractive way
• Sustainable
• one article = one url
• updates happen once
Focus
• Lots of constraints
• Focus on what really matters
• “People’s capacity for bullshit is rapidly diminishing.” @brad_frost
Mooaaar junk please
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
Future proof?
• Fragmentation will only get worse
• Standards will not be able to keep up
• Future friend.ly manifest
• Build with progressive enhancement
Responsive workflow
IA
Wireframes
Design
Trends and patterns
Is there a module for that?
46
47
Implementation
48
•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 tweaks on top of it
Mothership
• “Keelhaul the div!”
• html5 base that removes cruft
• uses theme settings
• break stuff and fix it really quick : )
• http://drupal.org/project/mothership
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 caching on mobile
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.......)
Fluid grids
• Tricky when nesting because of %
• Susy (for Compass)
• http://susy.odbird.net
• Zen Grids (for Sass)
• http://zengrids.com
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.
59
Let’s talk!@kristoforts - @mylittletony
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/
Feedback & follow-up:http://drupalcampgent.be/feedback