Mobile first with digital brands, responsive design and Drupal

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

I’m a developer

Why should I care?

Why?

Developers Designers Brand owners

The web is not just a desktop PC any more

Why?


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

Why?


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

Why?


But there’s only one web

Why?


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

Why?


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


Why?

Why?

Growth


Why?

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


Why?

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


Why?

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


Why?

And there’s more


Why?

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


Why?

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


- 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.


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.


Why?

Growth = opportunity


Why?

What is different?

What to do?

Issues

What is different?

Adaptive layouts

(responsive design)


What is different?

Proportional (percentages) instead of fixed (pixels)


What is different?

Media queries

Flexible images

Fluid grids


What is different?

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

tablet.css (min-width: 768px)

desktop.css (min-width: 1024px)


What is different?

Responsive themes for Drupal


What is different?

Flexible device-independent solutions


What is different?

Multiple pixel perfect layouts?


What is different?

Content firstContent choreography

‘Network of content’

Re-arranging content


- Trent Walton

What is different?

Design for contextUser posture

Input method

Display size


What is different?

Reduce

Reduce

Reduce


What is different?

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


What is different?

User goalsOn - demanding – asap

First to know

Killing time

Mobile management - access


What is different?

Define UI brand signatures which contribute to the brand identity


What is different?

Identify the core user stories which fulfill their goals


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


Issues

Small screen, bad input methods, low bandwidth

Issues


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

Issues


Capabilities = innovation

Issues


Requires extra effort

and experience

Issues


Workflow

Way of thinking

Not pixel perfect

Small screen

Issues


Constraints = focus

Issues


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

Issues


Why?

What is different?

What to do?

Issues

The only constant is change


What to do?

Difficult but necessary

What to do?


Dive in

What to do?


Not ‘future proof’ but ‘future friendly’

What to do?


- Brad Frost

Change your thinking


What to do?

Organize your content


What to do?

We need to make smarter content, not smarter containers


What to do?

- Stephanie Rieger


What to do?

Understand the available tools


What to do?

Help users to achieve their goals


What to do?

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

Act now!

Kiitos!

Saku Sairanen

call mobile+358 40 5926218

send [email protected]

Mobile first with digital brands, responsive design and Drupal

Documents

Transcript of Mobile first with digital brands, responsive design and Drupal