My second presentation for DrupalCamp about responsive design with Costume.fi case study added

1. MOBILE FIRST WITH DIGITAL BRANDS,
RESPONSIVE DESIGN AND DRUPAL
CASE: COSTUME.FI
Saku Sairanen
CEO, EXOVE DESIGN
DrupalCamp Helsinki, September 21st 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. 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

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!