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
Top Related