Mobile first and Drupal

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