1. MOBILE FIRST WITH DIGITAL BRANDS,
RESPONSIVE DESIGN AND DRUPAL
CASE: COSTUME.FI
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. Results Concept
Issues Design

6. Concept
Results
Issues Design

7. Concept – Costume.fi brand
Brand owners Designers Developers
 New Fashion magazine in Finland
 Target audience young women
who are ‘diginatives’
 Readers participate in creating
content for the magazine
 Project kick-off: 15.5.2012
 Hard deadline: 21.8.2012

8. Concept – Costume.fi brand
Brand owners Designers Developers
Democratic
Two-
Users Content Tools
way
Community
Social
Content Us
media

9. Concept
Brand owners Designers Developers
‘A tiled wall created
from pictures from
users’

10. Concept – references / benchmarking
Brand owners Designers Developers
Fashion Spot
TagBrand
HelloGiggles
SnapGuide
Behance

11. Concept
Brand owners Designers Developers
Functionality the same
across all devices

12. Results Concept
Issues
Design

13. Design
Brand owners Designers Developers
Identify the core user
stories which fulfill
their goals

14. Design
Brand owners Designers Developers
Main desktop goal:
content creation

15. Design
Brand owners Designers Developers
Main mobile goal:
browse easily

16. Design
Brand owners Designers Developers
Content first
Content choreography
‘Network of content’
Re-arranging content

27. Design
Brand owners Designers Developers
Multiple pixel perfect
layouts?

31. DESKTOP WIREFRAMES MOBILE WIREFRAMES

34. DESKTOP LAYOUT MOBILE LAYOUT

39. Design
Brand owners Designers Developers
Media queries
Flexible images
Fluid grids

40. Design
Brand owners Designers Developers
Media queries
Flexible images
Fluid grids

41. Design
Brand owners Designers Developers
Stacked CSS, mobile first
global.css (default, mobile)
tablet.css (min-width: 768px)
desktop.css (min-width: 1024px)

42. Design
Brand owners Designers Developers
Multiple CSS:s
global.css
mobile.css
tablet.css
desktop.css (default)

43. Design
Brand owners Designers Developers
Responsive
themes for Drupal

44. Design
Brand owners Designers Developers
Theme
from scratch

45. Design
Brand owners Designers Developers
All media elements fully
scalable - all images in at
least two sizes

46. Design
Brand owners Designers Developers
Different tool elements
for different devices – for
example navigation

47. Design - modules
Brand owners Designers Developers
 Panels
 Views
 VIews Loadmore
 Services
 Feeds
 + other minor modules

48. Design – modules, other
Brand owners Designers Developers
Masonry for displaying lists.
Also, the sites uses Cache control
module with Nginx's static HTML
caching instead of traditional
Varnish caching.

49. Results Concept
Design
Issues

50. Issues
Brand owners Designers Developers
Compromises in
functionality
- Cost issue

51. Issues
Brand owners Designers Developers
Adopting new
workflow

52. Issues
Brand owners Designers Developers
 Banners don’t scale
 Wallpaper always 980px
 Masonry plugin integration to
Views load more plugin
 Switch between mobile and tablet size –
Masonry on/off
 FacebookConnect contrib module useless
 Poll modules lacking in functionality
 A lot of work from small details

53. Results
Concept
Issues Design

54. Results
Goal: 50 000 – 60 000
weekly unique visitors

55. Results
Launched on week 34
Week 37 – TNS Metrix:
63 814 unique visitors

56. Results
Fastest growing
Facebook community
3 000 Likes (launch, 21.8.)
7 667 Likes (21.9.)

61. Q&A

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