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