Responsive web design allows websites to automatically adjust their layout and content depending on the screen size of the device used to access the site. It uses fluid grid systems and flexible images so that content fits any screen, along with media queries that apply different CSS rules based on screen dimensions. Responsive design is important because most digital interactions now occur on multiple screens and users expect a good experience regardless of device. While responsive design is a first step, adaptive design that changes based on other factors like network speed will be needed to fully meet unpredictable user needs in the future.

1. RESPONSIVE WEB DESIGN
Miika Puputti, designer
@miikap
WEB
WEB WEB
WEB

2. WHAT IS
RESPONSIVE
WEB DESIGN ?

3. FLUID GRID SYSTEMS
Think percentage, not pixels

4. FLEXIBLE MEDIA
PICTURES, VIDEOS, DIVS
Think percentage, not pixels

5. MEDIA QUERIES
Control the rendering of webpages based on conditions such as
screen resolution or dimensions

6. WHY IS IT
IMPORTANT ?

7. WE ARE LIVING
IN THE ERA OF
MULTI SCREEN
CONSUMERISM

8. MAJORITY OF OUR DAILY
MEDIA INTERACTIONS ARE
SCREEN BASED
38% 9% 24%
Google study, August 2012
http://goo.gl/fd21F

9. USERS ARE
INTERACTING
AND
SERVICES
WITH
YOUR
BRAND IN
MULTIPLE
SCREENS

10. SO CONTENT IS
KING

11. Good
experiences
are built from
the ground UP
And not the other way around

12. USERS WANT GOOD
EXPERIENCES
REGARDLESS OF CONTEXT

13. kokoomus.fi

14. yle.fi/uutiset

15. anderssonwise.com

16. THERE IS
STILL
LOTS TO
IMPROVE

17. PERFOMANCE
IS
DESIGN

18. THE PITFALLS
DEDICATED
MOBILE
WEBSITES

19. m.hs.fi
DON’T
SHOW
CONTENT
ON MOBILE
SITE AT ALL?
MULTIPLE CLICKS
UNTIL USER CAN
REACH THE
CONTENT

20. m.yle.fi
OFFER
YOUR
USERS
JUST
LINKS
???

21. m.opera.com
SPLASH
SCREENS?

22. WE DON’T KNOW
THE FUTURE

23. “ACKNOWLEDGE
AND EMBRACE
UNPREDICTABILITY.”

24. RESPONSIVE
DESIGN
IS A PART OF
ADAPTIVE
DESIGN

25. SO RESPONSIVE DESIGN IS A
FIRST STEP TOWARDS
ADAPTIVE MINDSET
Image courtesy of Brad Frost – http://bradfrostweb.com/

26. THANKS, FOLKS!
Special thanks to: Miika Puputti, designer
http://ethanmarcotte.com/ @miikap
http://bradfrostweb.com/ www.frantic.com
http://www.lukew.com