2. MELINDA LINI
@MELINDALINI
FELIPE KAUFMANN
@EFFKAY

3. WHY ARE WE HERE?

4. WE STRIVE TO
MAKE OUR USERS
LIVES EASIER.
EVERY DAY.
‚

6. THE DIGITAL WORLD IN
60 SECONDS

7. THE DIGITAL WORLD IN
60 SECONDS
278000
204 MILLIONEN
EMAILS

8. 2000000
THE DIGITAL WORLD IN
60 SECONDS
278000
83000 204 MILLIONEN
EMAILS

9. WORLDWIDE MOBILE
TRAFFIC
11%
2012 2013
17%
SOURCE: HTTP://BLOG.XEIT.CH/WP-CONTENT/UPLOADS/2013/08/MOBILETRAFFIC-WELTWEIT.JPG

10. WORLDWIDE MOBILE
TRAFFIC
NORDAMERIKA
SÜDAMERIKA
10
EUROPA
AFRIKA
OZEANIEN
ASIEN 15
7 24
27
15
SOURCE: HTTP://BLOG.XEIT.CH/WP-CONTENT/UPLOADS/2013/08/MOBILETRAFFIC-WELTWEIT.JPG

11. SWITZERLAND IS A
MOBILE PARADISE

12. SWITZERLAND IS A
MOBILE PARADISE
SOURCE: MEDIA USE INDEX 2013: ¾ DER SCHWEIZER NUTZEN DAS INTERNET PER MOBILE DEVICE

13. ‚
A LOOK ON 100 000
SHOPS ON SHOPIFY
SOURCE: HTTP://WWW.SHOPIFY.COM/BLOG/15206517-MOBILE-NOW-ACCOUNTS-FOR-50-3-OF-ALL-ECOMMERCE-TRAFFIC

14. >50% of U.S. adults use
smartphones to make
purchase decisions in-store
SOURCE: IBM

15. ARE YOU AFRAID OF A
SOURCE: HTTP://WWW.EMARKETER.COM/ARTICLE/WHO-REAL-MOBILE-ONLY-AUDIENCE/1010390

16. QUELLE: HTTP://WWW.EMARKETER.COM/ARTICLE/WHO-REAL-MOBILE-ONLY-AUDIENCE/1010390

17. WHAT DOES THE
MOBILE USER WANT
TO SEE
?

18. WHAT DOES THE
MOBILE USER WANT
TO SEE?
EVERYTHING

19. WHAT DOES THE
MOBILE USER WANT
TO SEE?
EVERYTHING
MOBILE WEBSEITE

20. REMEMBER?

21. MOBILE MYTH:
WE DON'T HAVE TIME

22. MOBILE MYTH:
I NEED AN
APP.

23. MOBILE MYTH:
I NEED AN
APP.
For which device?

24. MOBILE MYTH:
I NEED AN
APP.
iOS?
Android?
Windows Mobile?
Nokia?
Blackberry?

25. MOBILE MYTH:
I NEED AN
APP.
iOS?
Android?
Windows Mobile?
Nokia?
Blackberry

26. SCREEN SIZES
2010 97 2013 232

27. FOR MORE MOBILE
MYTHS:
JOSH CLARK
QUELLE: VIMEO.COM/48327889

28. THE SOLUTION:
RESPONSIVE

29. THE CHALLANGE

30. RESPONSIVE MEANS
PERFORMANCE FIRST
Speed is the most important feature.
FRED WILSON
The goal is to load in under 1000ms.
It‘s worth because speed is also a ranking
criterion for Google.

31. IF THE USER LEAVES
YOUR FANCY SITE
BEFORE WON ‚
IT LOADS, IT
T SHOW IN
GOOGLE ANALYTICS.

32. IF YOUR STATS SAY
THAT NOBODY USES
YOUR MOBILE SITE
MAYBE THIS IS
BECAUSE IT ‚
S
CRAPPY.

33. CUSTOMER
EXPECTATIONS
85% of mobile user expect the same speed as on
their desktop.
QUELLE: WWW.STRANGELOOPNETWORKS.COM/ASSETS/IMAGES/INFOGRAPHIC1.JPG

34. CUSTOMER
EXPECTATIONS
57% will leave the page if it doesn‘t load in 3
seconds.
And they are not likely to come back.
QUELLE: WWW.STRANGELOOPNETWORKS.COM/ASSETS/IMAGES/INFOGRAPHIC1.JPG

35. SPEED IS
MONEY.

37. -11% PAGE VIEWS
SOURCE: T3N.DE/NEWS/60-SEKUNDEN-INTERNET-484021/INTERNET-DIENSTE/

38. -7% CONVERSION
SOURCE: T3N.DE/NEWS/60-SEKUNDEN-INTERNET-484021/INTERNET-DIENSTE/

39. ‚
833 000 CHF
less per month
SOURCE: HTTP://WWW.HANDELSZEITUNG.CH/UNTERNEHMEN/ZALANDO-250-MILLIONEN-UMSATZ-DER-SCHWEIZ-514814

40. WOULD YOU DESIGN A
POSTER IF YOU DIDN‘T
KNOW FOR WHICH
EVENT?

41. RESPONSIVE MEANS
CONTENT FIRST
The tight space on mobile is an advantage. It forces
us to prioritize our content.

42. BUT…

43. PROCESS UND TOOLS

44. HOW OFTEN DO WE
BUILD THE SAME THING?
WIREFRAMES DESIGNS FRONTEND

45. EVERYBODY WANTS
DESIGNING IN THE
BROWSER …but nobody does it.

47. PASCAL KUSTER MELINDA LINI
Frontend Specialist Design and Usability
Specialist

48. KUSCHTINI

50. DESIGNING IN THE
BROWSER =
PRESENTING IN THE
BROWSER
…early prototyping.

52. WAITING FOR THE
NEXT GENERATION OF
WEB DESIGNING
TOOLS.

54. = MODULAR

55. THE CODE IS THE
STYLE GUIDE

56. = CATALOG OF ELEMENTS

57. DEMO
TIME

58. THE CLOSER DESIGNER
AND DEVELOPER
COLLABORATE, THE
BETTER THE RESULT.

59. THE RESPONSIVE
DEVELOPER

61. ETHAN MARCOTTE
alistapart.com/article/responsive-web-design

62. WHAT IS RESPONSIVE?
• 1 HTML layout
• Media queries targeting screen size
@media screen and (max-width:48em)
FLUID BETWEEN BREAKPOINTS

63. REMEMBER?

64. THE RISE OF FRONTEND
DEVELOPMENT
.

66. DON‘T START
FROM SCRAT(CH)
1

67. DON‘T START
FROM SCRATCH
- HTML 5 BOILERPLATE
BY PAUL IRISH
- WEB STARTER KIT
BY GOOGLE
1

68. GOOGLE WEB STARTER KIT

69. FRAMEWORKS LIKE
FOUNDATION AND
BOOTSTRAP

71. FRAMEWORKS AND
PERFORMANCE
Cheetah – very fast Framework – not so fast

72. MIXIN LIBRARIES +
CUSTOM CODE

73. 2 USE A GRID

74. USE A GRID
ANY GRID
2

75. SCREEN SIZES &
COLUMNS
NOT
DEVICES &
PIXELS

76. REMEMBER?

77. USE A
PREPROCESSOR
3

78. USE A
PREPROCESSOR
Syntactically Awesome Stylesheets
3

79. MIXIN EXAMPLE

80. 4
PROGRESSIVE
ENHANCEMENT
GRACEFUL
DEGRADATION

81. EXAMPLE PROGRESSIVE
ENHANCEMENT:
ROUNDED CORNERS
Button

82. A QUESTION OF PRICIPLE
dowebsitesneedtolookexactlythesameineverybrowser.com

84. IN DIFFERENT BROWSERS

85. CANIUSE.COM ?

86. CANIUSE.COM

87. BUILDING A BRIDGE
WITH
POLYFILLS, SHIMS
MODERNIZR
old browsers new features
java script libraries

88. 5 MODULARISE

89. 5 MODULARISE
SMACSS
BEM

90. Don‘t start from scratch
Think columns & devices
Use a preprocessor
Progressive enhancement
Modularize

91. SO, ONCE YOU HAVE
THE BASICS…
WHAT NEXT?

92. SPEED & PERFORMANCE
– Google PageSpeed Insights
– Google Web Starter Kit

93. RESPONSIVE IMAGES
– responsiveimages.org
– scottjehl.github.io/picturefill

94. THE DIGITAL WORLD
IS GETTING BETTER

95. … WE ARE PART OF IT.
WE MAKE THE USERS’
LIVES EASIER.

96. THX

97. SLIDES AND LINKS
screenconcept.com

98. TWEET US YOUR QUESTIONS
MELINDA LINI
@MELINDALINI
FELIPE KAUFMANN
@EFFKAY