MOBILE FIRST WITH DIGITAL BRANDS,RESPONSIVE DESIGN AND DRUPAL

Saku SairanenCEO, EXOVE DESIGN

DrupalCamp Helsinki, June 2nd 2012

Exove is one of the leading Nordic and Baltic companies specialising in

open source web services design and development.

55 people

Helsinki

Tallinn

Over 120 customers overall

resumup.com

Why?

What is different?

What to do?

Issues

Why?

What is different?

What to do?

Issues

I’m a developer

Why should I care?

Why?

Developers Designers Brand owners

The web is not just a desktop PC any more

Why?

Developers Designers Brand owners

It’s PCs, tablets, mobile phones, watches and more

Why?

Developers Designers Brand owners

Currently there are sites like m.site.com and site.mobi

Why?

Developers Designers Brand owners

But there’s only one web

Why?

Developers Designers Brand owners

Wouldn’t it be nice if it just worked on all devices?

Why?

Developers Designers Brand owners

Well, the web is not just a desktop PC any more

Developers Designers Brand owners

Why?

Why?

Growth

Developers Designers Brand owners

Why?

Every day 371,124 children are born across the World.

Developers Designers Brand owners

Why?

Every day 377,900 iPhones are sold across the World.

Developers Designers Brand owners

Why?

Every day 700,000 Android devices are activated across the World.

Developers Designers Brand owners

Why?

And there’s more

Developers Designers Brand owners

Why?

Nokia sold 200,000+ smartphones a day and RIM sold 143,000 Blackberries a day at the end of 2011

Developers Designers Brand owners

Why?

Total of smartphones entering the World per day is about 1.45M devices compared to 317,124 births

Developers Designers Brand owners

- Luke Wroblewski

Why?

46% of U.S. adults use smartphones as of February 2012. This means smartphone owners now outnumber those with basic mobile devices.

Developers Designers Brand owners

Why?

50% of the World's second largest (Facebook) Web site's total audience (845 million) uses the service on mobile devices (425 million). More people access Facebook on the mobile web than from all their native mobile apps combined.

Developers Designers Brand owners

Why?

Growth = opportunity

Developers Designers Brand owners

Why?

What is different?

What to do?

Issues

Why?

What is different?

What to do?

Issues

What is different?

Adaptive layouts

(responsive design)

Developers Designers Brand owners

What is different?

Proportional (percentages) instead of fixed (pixels)

Developers Designers Brand owners

What is different?

Media queries

Flexible images

Fluid grids

Developers Designers Brand owners

What is different?

Stacked CSS, mobile firstglobal.css (default, mobile)

tablet.css (min-width: 768px)

desktop.css (min-width: 1024px)

Developers Designers Brand owners

What is different?

Responsive themes for Drupal

Developers Designers Brand owners

What is different?

Flexible device-independent solutions

Developers Designers Brand owners

What is different?

Multiple pixel perfect layouts?

Developers Designers Brand owners

What is different?

Content firstContent choreography

‘Network of content’

Re-arranging content

Developers Designers Brand owners

- Trent Walton

What is different?

Design for contextUser posture

Input method

Display size

Developers Designers Brand owners

What is different?

Reduce

Reduce

Reduce

Developers Designers Brand owners

What is different?

What is the minimum content required for this service? Mobile first

Developers Designers Brand owners

What is different?

User goalsOn - demanding – asap

First to know

Killing time

Mobile management - access

Developers Designers Brand owners

What is different?

Define UI brand signatures which contribute to the brand identity

Developers Designers Brand owners

What is different?

Identify the core user stories which fulfill their goals

Developers Designers Brand owners

Why?

What is different?

What to do?

Issues

Why?

What is different?

What to do?

Issues

Max-width in IE6

Windows image reduction

Bandwidth – download vs. display

Browser compatibility

Media queries

Available Drupal themes not perfect

Developers Designers Brand owners

Issues

Small screen, bad input methods, low bandwidth

Issues

Developers Designers Brand owners

Camera, GPS, touch-screen, gyro, NFC etc.

Issues

Developers Designers Brand owners

Capabilities = innovation

Issues

Developers Designers Brand owners

Requires extra effort

and experience

Issues

Developers Designers Brand owners

Workflow

Way of thinking

Not pixel perfect

Small screen

Issues

Developers Designers Brand owners

Constraints = focus

Issues

Developers Designers Brand owners

Things to considerSeparate mobile siteResponsive siteNative application“Why mobile?”

Issues

Developers Designers Brand owners

Why?

What is different?

What to do?

Issues

Why?

What is different?

What to do?

Issues

The only constant is change

Developers Designers Brand owners

What to do?

Difficult but necessary

What to do?

Developers Designers Brand owners

Dive in

What to do?

Developers Designers Brand owners

Not ‘future proof’ but ‘future friendly’

What to do?

Developers Designers Brand owners

- Brad Frost

Change your thinking

Developers Designers Brand owners

What to do?

Organize your content

Developers Designers Brand owners

What to do?

We need to make smarter content, not smarter containers

Developers Designers Brand owners

What to do?

- Stephanie Rieger

Developers Designers Brand owners

What to do?

Understand the available tools

Developers Designers Brand owners

What to do?

Help users to achieve their goals

Developers Designers Brand owners

What to do?

The web has moved beyond the desktop and it’s not turning back - Ethan Marcotte

Act now!

Q & A

Kiitos!

Saku Sairanen

call mobile+358 40 5926218

send emailsaku@exovedesign.com