How to go mobile first with digital brands, responsive design, and Drupal. Presentation held in Drupalcamp Finland 2012.

1. MOBILE FIRST WITH DIGITAL BRANDS,
RESPONSIVE DESIGN AND DRUPAL
Saku Sairanen
CEO, EXOVE DESIGN

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

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!