Embed Size (px)
Citation preview
MELINDA LINI @MELINDALINI
FELIPE KAUFMANN @EFFKAY
WHY ARE WE HERE?
WE STRIVE TO MAKE OUR USERS LIVES EASIER. EVERY DAY.
‚
THE DIGITAL WORLD IN 60 SECONDS
THE DIGITAL WORLD IN 60 SECONDS
278000
204MILLIONENEMAILS
THE DIGITAL WORLD IN 60 SECONDS
2000000
278000
83000 204MILLIONENEMAILS
11%
2012 2013
17%
SOURCE: HTTP://BLOG.XEIT.CH/WP-CONTENT/UPLOADS/2013/08/MOBILETRAFFIC-WELTWEIT.JPG
WORLDWIDE MOBILE TRAFFIC
NORDAMERIKA
SÜDAMERIKA
EUROPA
AFRIKAOZEANIEN
ASIEN15
7 24
1027
15
SOURCE: HTTP://BLOG.XEIT.CH/WP-CONTENT/UPLOADS/2013/08/MOBILETRAFFIC-WELTWEIT.JPG
WORLDWIDE MOBILE TRAFFIC
SWITZERLAND IS A MOBILE PARADISE
SWITZERLAND IS A MOBILE PARADISE
SOURCE: MEDIA USE INDEX 2013: ¾ DER SCHWEIZER NUTZEN DAS INTERNET PER MOBILE DEVICE
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
‚
>50% of U.S. adults use smartphones to make purchase decisions in-store SOURCE: IBM
SOURCE: HTTP://WWW.EMARKETER.COM/ARTICLE/WHO-REAL-MOBILE-ONLY-AUDIENCE/1010390
ARE YOU AFRAID OF A
QUELLE: HTTP://WWW.EMARKETER.COM/ARTICLE/WHO-REAL-MOBILE-ONLY-AUDIENCE/1010390
WHAT DOES THE MOBILE USER WANT TO SEE
?
WHAT DOES THE MOBILE USER WANT TO SEE?
EVERYTHING
WHAT DOES THE MOBILE USER WANT TO SEE?
EVERYTHING MOBILE WEBSEITE
REMEMBER?
MOBILE MYTH: WE DON'T HAVE TIME
MOBILE MYTH:
I NEED AN APP.
MOBILE MYTH:
I NEED AN APP. For which device?
MOBILE MYTH:
I NEED AN APP. iOS? Android? Windows Mobile? Nokia? Blackberry?
MOBILE MYTH:
I NEED AN APP. iOS? Android? Windows Mobile? Nokia? Blackberry
SCREEN SIZES
2010
97 2013
232
FOR MORE MOBILE MYTHS:
QUELLE: VIMEO.COM/48327889
JOSH CLARK
THE SOLUTION: RESPONSIVE
THE CHALLANGE
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.
IF THE USER LEAVES YOUR FANCY SITE BEFORE IT LOADS, IT WON T SHOW IN GOOGLE ANALYTICS.
‚
IF YOUR STATS SAY THAT NOBODY USES YOUR MOBILE SITE MAYBE THIS IS BECAUSE IT S CRAPPY.
‚
CUSTOMER EXPECTATIONS
QUELLE: WWW.STRANGELOOPNETWORKS.COM/ASSETS/IMAGES/INFOGRAPHIC1.JPG
85% of mobile user expect the same speed as on their desktop.
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
SPEED IS MONEY.
-11% PAGE VIEWS
SOURCE: T3N.DE/NEWS/60-SEKUNDEN-INTERNET-484021/INTERNET-DIENSTE/
-7% CONVERSION
SOURCE: T3N.DE/NEWS/60-SEKUNDEN-INTERNET-484021/INTERNET-DIENSTE/
SOURCE: HTTP://WWW.HANDELSZEITUNG.CH/UNTERNEHMEN/ZALANDO-250-MILLIONEN-UMSATZ-DER-SCHWEIZ-514814
833 000 CHF less per month
‚
WOULD YOU DESIGN A POSTER IF YOU DIDN‘T KNOW FOR WHICH EVENT?
RESPONSIVE MEANS CONTENT FIRST The tight space on mobile is an advantage. It forces us to prioritize our content.
BUT…
PROCESS UND TOOLS
HOW OFTEN DO WE BUILD THE SAME THING?
WIREFRAMES DESIGNS FRONTEND
EVERYBODY WANTS DESIGNING IN THE BROWSER
…but nobody does it.
Frontend Specialist Design and Usability Specialist
PASCAL KUSTER MELINDA LINI
KUSCHTINI
DESIGNING IN THE BROWSER = PRESENTING IN THE BROWSER
…early prototyping.
WAITING FOR THE NEXT GENERATION OF WEB DESIGNING TOOLS.
= MODULAR
THE CODE IS THE STYLE GUIDE
= CATALOG OF ELEMENTS
DEMOTIME
THE CLOSER DESIGNER AND DEVELOPER COLLABORATE, THE BETTER THE RESULT.
THE RESPONSIVE DEVELOPER
WER IST DIESER TYP?
ETHAN MARCOTTE alistapart.com/article/responsive-web-design
WHAT IS RESPONSIVE?
• 1 HTML layout • Media queries targeting screen size
@media screen and (max-width:48em) FLUID BETWEEN BREAKPOINTS
REMEMBER?
THE RISE OF FRONTEND DEVELOPMENT
.
DON‘T START FROM SCRAT(CH)
1
- HTML 5 BOILERPLATE BY PAUL IRISH
- WEB STARTER KIT BY GOOGLE
DON‘T START FROM SCRATCH
1
GOOGLE WEB STARTER KIT
FRAMEWORKS LIKE FOUNDATION AND BOOTSTRAP
FRAMEWORKS AND PERFORMANCE Cheetah – very fast Framework – not so fast
MIXIN LIBRARIES + CUSTOM CODE
USE A GRID 2
USE A GRID
ANY GRID 2
SCREEN SIZES & COLUMNS NOT DEVICES & PIXELS
REMEMBER?
USE A PREPROCESSOR
3
Syntactically Awesome Stylesheets
USE A PREPROCESSOR
3
MIXIN EXAMPLE
PROGRESSIVE ENHANCEMENT
4
GRACEFUL DEGRADATION
EXAMPLE PROGRESSIVE ENHANCEMENT: ROUNDED CORNERS
Button
A QUESTION OF PRICIPLE
dowebsitesneedtolookexactlythesameineverybrowser.com
IN DIFFERENT BROWSERS
CANIUSE.COM
?
CANIUSE.COM
BUILDING A BRIDGE WITH POLYFILLS, SHIMS MODERNIZR
java script libraries
old browsers new features
MODULARISE 5
MODULARISE 5
SMACSS
BEM
Use a preprocessor
Think columns & devices
Don‘t start from scratch
Progressive enhancement
Modularize
SO, ONCE YOU HAVE THE BASICS… WHAT NEXT?
SPEED & PERFORMANCE
– Google PageSpeed Insights – Google Web Starter Kit
RESPONSIVE IMAGES
– responsiveimages.org – scottjehl.github.io/picturefill
THE DIGITAL WORLD IS GETTING BETTER
… WE ARE PART OF IT. WE MAKE THE USERS’ LIVES EASIER.
THX
SLIDES AND LINKS screenconcept.com
MELINDA LINI @MELINDALINI
FELIPE KAUFMANN @EFFKAY
TWEET US YOUR QUESTIONS
