Your SlideShare is downloading. ×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive design and Drupal, case Costume.fi

2,888

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
2,888
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×