This presentation was held by our designer Miika Puputti in Markkinointiviestinnän viikko in September 2012.

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