1. MOBILE FIRST WITH DIGITAL BRANDS,
RESPONSIVE DESIGN AND DRUPAL
Saku Sairanen
CEO, EXOVE DESIGN
DrupalCamp Helsinki, June 2nd 2012

2. Exove is one of the leading Nordic
and Baltic companies specialising in
open source web services design
and development.

3. 55 people
Helsinki
Tallinn
Over 120 customers overall

4. resumup.com

5. What to do? Why?
Issues What is
different?

6. What to do? Why?
Issues What is
different?

7. Why?
Developers Designers Brand owners
I’m a developer
Why should I care?

8. Why?
Developers Designers Brand owners
The web is not just a
desktop PC any
more

9. Why?
Developers Designers Brand owners
It’s PCs, tablets,
mobile phones,
watches
and more

10. Why?
Developers Designers Brand owners
Currently there are
sites like
m.site.com and
site.mobi

11. Why?
Developers Designers Brand owners
But there’s only
one web

12. Why?
Developers Designers Brand owners
Wouldn’t it be
nice if it just
worked on all
devices?

13. Why?
Developers Designers Brand owners
Well, the web is not
just a desktop PC
any more

14. Why?
Developers Designers Brand owners
Growth

15. Why?
Developers Designers Brand owners
Every day 371,124
children are born
across the World.

16. Why?
Developers Designers Brand owners
Every day 377,900
iPhones are sold
across the World.

17. Why?
Developers Designers Brand owners
Every day 700,000
Android devices are
activated across the
World.

18. Why?
Developers Designers Brand owners
And there’s more

19. Why?
Developers Designers Brand owners
Nokia sold 200,000+
smartphones a day and
RIM sold 143,000
Blackberries a day at
the end of 2011

20. Why?
Developers Designers Brand owners
Total of smartphones
entering the World per
day is about 1.45M
devices compared to
317,124 births
- Luke Wroblewski

21. Why?
Developers Designers Brand owners
46% of U.S. adults use
smartphones as of February
2012. This means smartphone
owners now outnumber those
with basic mobile devices.

22. Why?
Developers Designers Brand owners
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.

23. Why?
Developers Designers Brand owners
Growth = opportunity

24. What to do? Why?
Issues What is
different?

25. What to do? Why?
Issues
What is
different?

26. What is different?
Developers Designers Brand owners
Adaptive layouts
(responsive design)

27. What is different?
Developers Designers Brand owners
Proportional
(percentages)
instead of fixed
(pixels)

28. What is different?
Developers Designers Brand owners
Media queries
Flexible images
Fluid grids

29. What is different?
Developers Designers Brand owners
Stacked CSS, mobile
first
global.css (default, mobile)
tablet.css (min-width: 768px)
desktop.css (min-width: 1024px)

30. What is different?
Developers Designers Brand owners
Responsive themes
for Drupal

31. What is different?
Developers Designers Brand owners
Flexible device-
independent
solutions

32. What is different?
Developers Designers Brand owners
Multiple pixel perfect
layouts?

33. What is different?
Developers Designers Brand owners
Content first
Content choreography
‘Network of content’
Re-arranging content
- Trent Walton

34. What is different?
Developers Designers Brand owners
Design for context
User posture
Input method
Display size

35. What is different?
Developers Designers Brand owners
Reduce
Reduce
Reduce

36. What is different?
Developers Designers Brand owners
What is the minimum
content required for
this service? Mobile
first

37. What is different?
Developers Designers Brand owners
User goals
On - demanding – asap
First to know
Killing time
Mobile management - access

38. What is different?
Developers Designers Brand owners
Define UI brand
signatures which
contribute to the
brand identity

39. What is different?
Developers Designers Brand owners
Identify the core user
stories which fulfill
their goals

40. What to do? Why?
Issues What is
different?

41. What to do? Why?
Issues What is
different?

42. Issues
Developers Designers Brand owners
Max-width in IE6
Windows image reduction
Bandwidth – download vs. display
Browser compatibility
Media queries
Available Drupal themes not perfect

43. Issues
Developers Designers Brand owners
Small screen, bad
input methods, low
bandwidth

44. Issues
Developers Designers Brand owners
Camera, GPS, touch-
screen, gyro, NFC
etc.

45. Issues
Developers Designers Brand owners
Capabilities =
innovation

46. Issues
Developers Designers Brand owners
Requires extra effort
and experience

47. Issues
Developers Designers Brand owners
Workflow
Way of thinking
Not pixel perfect
Small screen

48. Issues
Developers Designers Brand owners
Constraints = focus

49. Issues
Developers Designers Brand owners
Things to consider
Separate mobile site
Responsive site
Native application
“Why mobile?”

50. What to do? Why?
Issues What is
different?

51. What to do? Why?
Issues What is
different?

52. What to do?
Developers Designers Brand owners
The only constant is
change

53. What to do?
Developers Designers Brand owners
Difficult but
necessary

54. What to do?
Developers Designers Brand owners
Dive in

55. What to do?
Developers Designers Brand owners
Not ‘future proof’ but
‘future friendly’
- Brad Frost

56. What to do?
Developers Designers Brand owners
Change your
thinking

57. What to do?
Developers Designers Brand owners
Organize your
content

58. What to do?
Developers Designers Brand owners
We need to make
smarter content, not
smarter containers
- Stephanie Rieger

59. What to do?
Developers Designers Brand owners
Understand the
available tools

60. What to do?
Developers Designers Brand owners
Help users to
achieve their goals

61. What to do?
Developers Designers Brand owners
The web has moved
beyond the desktop
and it’s not turning
back - Ethan Marcotte

62. Act now!

63. Q&A

64. Saku Sairanen
call mobile
+358 40 5926218
send email
saku@exovedesign.com
Kiitos!