pantalk: responsive web design
TRANSCRIPT
![Page 1: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/1.jpg)
![Page 2: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/2.jpg)
MELINDA LINI @MELINDALINI
FELIPE KAUFMANN @EFFKAY
![Page 3: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/3.jpg)
WHY ARE WE HERE?
![Page 4: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/4.jpg)
WE STRIVE TO MAKE OUR USERS LIVES EASIER. EVERY DAY.
‚
![Page 5: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/5.jpg)
![Page 6: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/6.jpg)
THE DIGITAL WORLD IN 60 SECONDS
![Page 7: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/7.jpg)
THE DIGITAL WORLD IN 60 SECONDS
278000
204MILLIONENEMAILS
![Page 8: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/8.jpg)
THE DIGITAL WORLD IN 60 SECONDS
2000000
278000
83000 204MILLIONENEMAILS
![Page 9: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/9.jpg)
11%
2012 2013
17%
SOURCE: HTTP://BLOG.XEIT.CH/WP-CONTENT/UPLOADS/2013/08/MOBILETRAFFIC-WELTWEIT.JPG
WORLDWIDE MOBILE TRAFFIC
![Page 10: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/10.jpg)
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
![Page 11: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/11.jpg)
SWITZERLAND IS A MOBILE PARADISE
![Page 12: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/12.jpg)
SWITZERLAND IS A MOBILE PARADISE
SOURCE: MEDIA USE INDEX 2013: ¾ DER SCHWEIZER NUTZEN DAS INTERNET PER MOBILE DEVICE
![Page 13: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/13.jpg)
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
‚
![Page 14: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/14.jpg)
>50% of U.S. adults use smartphones to make purchase decisions in-store SOURCE: IBM
![Page 15: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/15.jpg)
SOURCE: HTTP://WWW.EMARKETER.COM/ARTICLE/WHO-REAL-MOBILE-ONLY-AUDIENCE/1010390
ARE YOU AFRAID OF A
![Page 16: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/16.jpg)
QUELLE: HTTP://WWW.EMARKETER.COM/ARTICLE/WHO-REAL-MOBILE-ONLY-AUDIENCE/1010390
![Page 17: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/17.jpg)
WHAT DOES THE MOBILE USER WANT TO SEE
?
![Page 18: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/18.jpg)
WHAT DOES THE MOBILE USER WANT TO SEE?
EVERYTHING
![Page 19: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/19.jpg)
WHAT DOES THE MOBILE USER WANT TO SEE?
EVERYTHING MOBILE WEBSEITE
![Page 20: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/20.jpg)
REMEMBER?
![Page 21: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/21.jpg)
MOBILE MYTH: WE DON'T HAVE TIME
![Page 22: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/22.jpg)
MOBILE MYTH:
I NEED AN APP.
![Page 23: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/23.jpg)
MOBILE MYTH:
I NEED AN APP. For which device?
![Page 24: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/24.jpg)
MOBILE MYTH:
I NEED AN APP. iOS? Android? Windows Mobile? Nokia? Blackberry?
![Page 25: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/25.jpg)
MOBILE MYTH:
I NEED AN APP. iOS? Android? Windows Mobile? Nokia? Blackberry
![Page 26: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/26.jpg)
SCREEN SIZES
2010
97 2013
232
![Page 27: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/27.jpg)
FOR MORE MOBILE MYTHS:
QUELLE: VIMEO.COM/48327889
JOSH CLARK
![Page 28: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/28.jpg)
THE SOLUTION: RESPONSIVE
![Page 29: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/29.jpg)
THE CHALLANGE
![Page 30: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/30.jpg)
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.
![Page 31: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/31.jpg)
IF THE USER LEAVES YOUR FANCY SITE BEFORE IT LOADS, IT WON T SHOW IN GOOGLE ANALYTICS.
‚
![Page 32: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/32.jpg)
IF YOUR STATS SAY THAT NOBODY USES YOUR MOBILE SITE MAYBE THIS IS BECAUSE IT S CRAPPY.
‚
![Page 33: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/33.jpg)
CUSTOMER EXPECTATIONS
QUELLE: WWW.STRANGELOOPNETWORKS.COM/ASSETS/IMAGES/INFOGRAPHIC1.JPG
85% of mobile user expect the same speed as on their desktop.
![Page 34: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/34.jpg)
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
![Page 35: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/35.jpg)
SPEED IS MONEY.
![Page 36: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/36.jpg)
![Page 37: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/37.jpg)
-11% PAGE VIEWS
SOURCE: T3N.DE/NEWS/60-SEKUNDEN-INTERNET-484021/INTERNET-DIENSTE/
![Page 38: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/38.jpg)
-7% CONVERSION
SOURCE: T3N.DE/NEWS/60-SEKUNDEN-INTERNET-484021/INTERNET-DIENSTE/
![Page 39: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/39.jpg)
SOURCE: HTTP://WWW.HANDELSZEITUNG.CH/UNTERNEHMEN/ZALANDO-250-MILLIONEN-UMSATZ-DER-SCHWEIZ-514814
833 000 CHF less per month
‚
![Page 40: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/40.jpg)
WOULD YOU DESIGN A POSTER IF YOU DIDN‘T KNOW FOR WHICH EVENT?
![Page 41: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/41.jpg)
RESPONSIVE MEANS CONTENT FIRST The tight space on mobile is an advantage. It forces us to prioritize our content.
![Page 42: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/42.jpg)
BUT…
![Page 43: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/43.jpg)
PROCESS UND TOOLS
![Page 44: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/44.jpg)
HOW OFTEN DO WE BUILD THE SAME THING?
WIREFRAMES DESIGNS FRONTEND
![Page 45: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/45.jpg)
EVERYBODY WANTS DESIGNING IN THE BROWSER
…but nobody does it.
![Page 46: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/46.jpg)
![Page 47: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/47.jpg)
Frontend Specialist Design and Usability Specialist
PASCAL KUSTER MELINDA LINI
![Page 48: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/48.jpg)
KUSCHTINI
![Page 49: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/49.jpg)
![Page 50: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/50.jpg)
DESIGNING IN THE BROWSER = PRESENTING IN THE BROWSER
…early prototyping.
![Page 51: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/51.jpg)
![Page 52: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/52.jpg)
WAITING FOR THE NEXT GENERATION OF WEB DESIGNING TOOLS.
![Page 53: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/53.jpg)
![Page 54: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/54.jpg)
= MODULAR
![Page 55: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/55.jpg)
THE CODE IS THE STYLE GUIDE
![Page 56: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/56.jpg)
= CATALOG OF ELEMENTS
![Page 57: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/57.jpg)
DEMOTIME
![Page 58: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/58.jpg)
THE CLOSER DESIGNER AND DEVELOPER COLLABORATE, THE BETTER THE RESULT.
![Page 59: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/59.jpg)
THE RESPONSIVE DEVELOPER
![Page 60: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/60.jpg)
WER IST DIESER TYP?
![Page 61: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/61.jpg)
ETHAN MARCOTTE alistapart.com/article/responsive-web-design
![Page 62: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/62.jpg)
WHAT IS RESPONSIVE?
• 1 HTML layout • Media queries targeting screen size
@media screen and (max-width:48em) FLUID BETWEEN BREAKPOINTS
![Page 63: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/63.jpg)
REMEMBER?
![Page 64: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/64.jpg)
THE RISE OF FRONTEND DEVELOPMENT
.
![Page 65: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/65.jpg)
![Page 66: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/66.jpg)
DON‘T START FROM SCRAT(CH)
1
![Page 67: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/67.jpg)
- HTML 5 BOILERPLATE BY PAUL IRISH
- WEB STARTER KIT BY GOOGLE
DON‘T START FROM SCRATCH
1
![Page 68: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/68.jpg)
GOOGLE WEB STARTER KIT
![Page 69: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/69.jpg)
FRAMEWORKS LIKE FOUNDATION AND BOOTSTRAP
![Page 70: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/70.jpg)
![Page 71: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/71.jpg)
FRAMEWORKS AND PERFORMANCE Cheetah – very fast Framework – not so fast
![Page 72: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/72.jpg)
MIXIN LIBRARIES + CUSTOM CODE
![Page 73: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/73.jpg)
USE A GRID 2
![Page 74: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/74.jpg)
USE A GRID
ANY GRID 2
![Page 75: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/75.jpg)
SCREEN SIZES & COLUMNS NOT DEVICES & PIXELS
![Page 76: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/76.jpg)
REMEMBER?
![Page 77: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/77.jpg)
USE A PREPROCESSOR
3
![Page 78: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/78.jpg)
Syntactically Awesome Stylesheets
USE A PREPROCESSOR
3
![Page 79: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/79.jpg)
MIXIN EXAMPLE
![Page 80: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/80.jpg)
PROGRESSIVE ENHANCEMENT
4
GRACEFUL DEGRADATION
![Page 81: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/81.jpg)
EXAMPLE PROGRESSIVE ENHANCEMENT: ROUNDED CORNERS
Button
![Page 82: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/82.jpg)
A QUESTION OF PRICIPLE
dowebsitesneedtolookexactlythesameineverybrowser.com
![Page 83: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/83.jpg)
![Page 84: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/84.jpg)
IN DIFFERENT BROWSERS
![Page 85: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/85.jpg)
CANIUSE.COM
?
![Page 86: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/86.jpg)
CANIUSE.COM
![Page 87: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/87.jpg)
BUILDING A BRIDGE WITH POLYFILLS, SHIMS MODERNIZR
java script libraries
old browsers new features
![Page 88: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/88.jpg)
MODULARISE 5
![Page 89: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/89.jpg)
MODULARISE 5
SMACSS
BEM
![Page 90: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/90.jpg)
Use a preprocessor
Think columns & devices
Don‘t start from scratch
Progressive enhancement
Modularize
![Page 91: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/91.jpg)
SO, ONCE YOU HAVE THE BASICS… WHAT NEXT?
![Page 92: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/92.jpg)
SPEED & PERFORMANCE
– Google PageSpeed Insights – Google Web Starter Kit
![Page 93: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/93.jpg)
RESPONSIVE IMAGES
– responsiveimages.org – scottjehl.github.io/picturefill
![Page 94: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/94.jpg)
THE DIGITAL WORLD IS GETTING BETTER
![Page 95: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/95.jpg)
… WE ARE PART OF IT. WE MAKE THE USERS’ LIVES EASIER.
![Page 96: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/96.jpg)
THX
![Page 97: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/97.jpg)
SLIDES AND LINKS screenconcept.com
![Page 98: Pantalk: Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060119/558e00701a28ab5b518b45bb/html5/thumbnails/98.jpg)
MELINDA LINI @MELINDALINI
FELIPE KAUFMANN @EFFKAY
TWEET US YOUR QUESTIONS