Responsive design and Drupal, case Costume.fi

3,346 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,346
On SlideShare
0
From Embeds
0
Number of Embeds
961
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive design and Drupal, case Costume.fi

  1. 1. MOBILE FIRST WITH DIGITAL BRANDS, RESPONSIVE DESIGN AND DRUPAL CASE: COSTUME.FI Saku Sairanen CEO, EXOVE DESIGN
  2. 2. Exove is one of the leading Nordic andBaltic companies specialising in open source web services design and development.
  3. 3. 55 people Helsinki TallinnOver 120 customers overall
  4. 4. Results ConceptIssues Design
  5. 5. ConceptResultsIssues Design
  6. 6. 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
  7. 7. Concept – Costume.fi brand Brand owners Designers Developers Democratic Two- Users Content Tools way Community Social Content Us media
  8. 8. Concept Brand owners Designers Developers ‘A tiled wall created from pictures from users’
  9. 9. Concept – references / benchmarking Brand owners Designers Developers Fashion Spot TagBrand HelloGiggles SnapGuide Behance
  10. 10. Concept Brand owners Designers Developers Functionality the same across all devices
  11. 11. Results ConceptIssues Design
  12. 12. Design Brand owners Designers Developers Identify the core user stories which fulfill their goals
  13. 13. Design Brand owners Designers Developers Main desktop goal: content creation
  14. 14. Design Brand owners Designers Developers Main mobile goal: browse easily
  15. 15. Design Brand owners Designers Developers Content first Content choreography ‘Network of content’ Re-arranging content
  16. 16. Design Brand owners Designers Developers Multiple pixel perfect layouts?
  17. 17. DESKTOP WIREFRAMES MOBILE WIREFRAMES
  18. 18. DESKTOP LAYOUT MOBILE LAYOUT
  19. 19. Design Brand owners Designers Developers Media queries Flexible images Fluid grids
  20. 20. Design Brand owners Designers Developers Media queries Flexible images Fluid grids
  21. 21. Design Brand owners Designers Developers Stacked CSS, mobile first global.css (default, mobile) tablet.css (min-width: 768px) desktop.css (min-width: 1024px)
  22. 22. Design Brand owners Designers Developers Multiple CSS:s global.css mobile.css tablet.css desktop.css (default)
  23. 23. Design Brand owners Designers Developers Responsive themes for Drupal
  24. 24. Design Brand owners Designers Developers Theme from scratch
  25. 25. Design Brand owners Designers Developers All media elements fully scalable - all images in at least two sizes
  26. 26. Design Brand owners Designers Developers Different tool elements for different devices – for example navigation
  27. 27. Design - modules Brand owners Designers Developers  Panels  Views  VIews Loadmore  Services  Feeds  + other minor modules
  28. 28. Design – modules, other Brand owners Designers Developers Masonry for displaying lists. Also, the sites uses Cache control module with Nginxs static HTML caching instead of traditional Varnish caching.
  29. 29. Results Concept DesignIssues
  30. 30. Issues Brand owners Designers Developers Compromises in functionality - Cost issue
  31. 31. Issues Brand owners Designers Developers Adopting new workflow
  32. 32. 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
  33. 33. Results Concept Issues Design
  34. 34. Results Goal: 50 000 – 60 000 weekly unique visitors
  35. 35. Results Launched on week 34 Week 37 – TNS Metrix: 63 814 unique visitors
  36. 36. Results Fastest growing Facebook community 3 000 Likes (launch, 21.8.) 7 667 Likes (21.9.)
  37. 37. Q&A
  38. 38. Saku Sairanencall mobile+358 40 5926218send emailsaku@exovedesign.com Kiitos!

×