Responsive web design
description
Transcript of Responsive web design
RESPONSIVE WEB DESIGN Miika Puputti, designer
@miikap
WEB WEB WEB WEB
WHAT IS RESPONSIVE
WEB DESIGN ?
FLUID GRID SYSTEMS
Think percentage, not pixels
FLEXIBLE MEDIA
Think percentage, not pixels
PICTURES, VIDEOS, DIVS
MEDIA QUERIES
Control the rendering of webpages based on conditions such as screen resolution or dimensions
WHY IS IT IMPORTANT ?
WE ARE LIVING IN THE ERA OF MULTI SCREEN CONSUMERISM
MAJORITY OF OUR DAILY MEDIA INTERACTIONS ARE
SCREEN BASED
Google study, August 2012 http://goo.gl/fd21F
24% 38% 9%
USERS ARE INTERACTING
WITH YOUR
BRAND
AND SERVICES
IN MULTIPLE SCREENS
SO CONTENT IS
KING
Good experiences
are built from the ground UP
And not the other way around
USERS WANT GOOD EXPERIENCES
REGARDLESS OF CONTEXT
kokoomus.fi!
yle.fi/uutiset!
anderssonwise.com!
THERE IS STILL
LOTS TO IMPROVE
PERFOMANCE IS
DESIGN
THE PITFALLS DEDICATED
MOBILE WEBSITES
m.hs.fi!
MULTIPLE CLICKS UNTIL USER CAN REACH THE CONTENT
DON’T SHOW CONTENT ON MOBILE SITE AT ALL?!
OFFER YOUR USERS JUST LINKS
???
m.yle.fi!
SPLASH SCREENS?
m.opera.com!
WE DON’T KNOW THE FUTURE
“ACKNOWLEDGE AND EMBRACE
UNPREDICTABILITY.”
RESPONSIVE DESIGN
IS A PART OF
ADAPTIVE DESIGN
Image courtesy of Brad Frost – http://bradfrostweb.com/
SO RESPONSIVE DESIGN IS A FIRST STEP TOWARDS
ADAPTIVE MINDSET
THANKS, FOLKS!
Special thanks to:
http://ethanmarcotte.com/
http://bradfrostweb.com/
http://www.lukew.com
Miika Puputti, designer
@miikap
www.frantic.com