responsive web design
DESCRIPTION
TRANSCRIPT
![Page 1: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/1.jpg)
RESPONSIVE WEB DESIGN Miika Puputti, designer
@miikap
WEB WEB WEB WEB
![Page 2: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/2.jpg)
WHAT IS RESPONSIVE
WEB DESIGN ?
![Page 3: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/3.jpg)
FLUID GRID SYSTEMS
Think percentage, not pixels
![Page 4: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/4.jpg)
FLEXIBLE MEDIA
Think percentage, not pixels
PICTURES, VIDEOS, DIVS
![Page 5: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/5.jpg)
MEDIA QUERIES
Control the rendering of webpages based on conditions such as screen resolution or dimensions
![Page 6: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/6.jpg)
WHY IS IT IMPORTANT ?
![Page 7: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/7.jpg)
WE ARE LIVING IN THE ERA OF MULTI SCREEN CONSUMERISM
![Page 8: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/8.jpg)
MAJORITY OF OUR DAILY MEDIA INTERACTIONS ARE
SCREEN BASED
Google study, August 2012 http://goo.gl/fd21F
24% 38% 9%
![Page 9: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/9.jpg)
USERS ARE INTERACTING
WITH YOUR
BRAND
AND SERVICES
IN MULTIPLE SCREENS
![Page 10: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/10.jpg)
SO CONTENT IS
KING
![Page 11: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/11.jpg)
Good experiences
are built from the ground UP
And not the other way around
![Page 12: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/12.jpg)
USERS WANT GOOD EXPERIENCES
REGARDLESS OF CONTEXT
![Page 13: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/13.jpg)
kokoomus.fi
![Page 14: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/14.jpg)
yle.fi/uutiset
![Page 15: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/15.jpg)
anderssonwise.com
![Page 16: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/16.jpg)
THERE IS STILL
LOTS TO IMPROVE
![Page 17: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/17.jpg)
PERFOMANCE IS
DESIGN
![Page 18: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/18.jpg)
THE PITFALLS DEDICATED
MOBILE WEBSITES
![Page 19: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/19.jpg)
m.hs.fi
MULTIPLE CLICKS UNTIL USER CAN REACH THE CONTENT
DON’T SHOW CONTENT ON MOBILE SITE AT ALL?
![Page 20: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/20.jpg)
OFFER YOUR USERS JUST LINKS
???
m.yle.fi
![Page 21: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/21.jpg)
SPLASH SCREENS?
m.opera.com
![Page 22: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/22.jpg)
WE DON’T KNOW THE FUTURE
![Page 23: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/23.jpg)
“ACKNOWLEDGE AND EMBRACE
UNPREDICTABILITY.”
![Page 24: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/24.jpg)
RESPONSIVE DESIGN
IS A PART OF
ADAPTIVE DESIGN
![Page 25: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/25.jpg)
Image courtesy of Brad Frost – http://bradfrostweb.com/
SO RESPONSIVE DESIGN IS A FIRST STEP TOWARDS
ADAPTIVE MINDSET
![Page 26: Responsive web design](https://reader034.vdocument.in/reader034/viewer/2022051819/54c7628d4a7959a7348b45a0/html5/thumbnails/26.jpg)
THANKS, FOLKS!
Special thanks to:
http://ethanmarcotte.com/
http://bradfrostweb.com/
http://www.lukew.com
Miika Puputti, designer
@miikap
www.frantic.com