RESPONSIVE WEB DESIGN               Miika Puputti, designer                       @miikapWEB         WEB              WEB ...
WHAT ISRESPONSIVEWEB DESIGN ?
FLUID GRID SYSTEMS    Think percentage, not pixels
FLEXIBLE MEDIA   PICTURES, VIDEOS, DIVS  Think percentage, not pixels
MEDIA QUERIESControl the rendering of webpages based on conditions such as               screen resolution or dimensions
WHY IS ITIMPORTANT ?
WE ARE LIVINGIN THE ERA OFMULTI SCREENCONSUMERISM
MAJORITY OF OUR DAILYMEDIA INTERACTIONS ARE    SCREEN BASED    38%        9%                     24%          Google study...
USERS ARE   INTERACTING                   AND                 SERVICES WITHYOURBRAND           IN             MULTIPLE    ...
SO CONTENT ISKING
Good experiencesare built fromthe 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 TOIMPROVE
PERFOMANCE     IS  DESIGN
THE PITFALLS DEDICATED   MOBILE  WEBSITES
m.hs.fi!                  DON’T                  SHOW                  CONTENT                  ON MOBILE                  ...
m.yle.fi!           OFFER           YOUR           USERS           JUST           LINKS            ???
m.opera.com!                SPLASH               SCREENS?
WE DON’T KNOW THE FUTURE
“ACKNOWLEDGE  AND EMBRACEUNPREDICTABILITY.”
RESPONSIVE    DESIGN  IS A PART OFADAPTIVE DESIGN
SO RESPONSIVE DESIGN IS A   FIRST STEP TOWARDS    ADAPTIVE MINDSET     Image courtesy of Brad Frost – http://bradfrostweb....
THANKS, FOLKS!Special thanks to:          Miika Puputti, designerhttp://ethanmarcotte.com/           @miikaphttp://bradfro...
Upcoming SlideShare
Loading in …5
×

Responsive web design

512 views

Published on

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

Published in: Design, Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
512
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive web design

  1. 1. RESPONSIVE WEB DESIGN Miika Puputti, designer @miikapWEB WEB WEB WEB
  2. 2. WHAT ISRESPONSIVEWEB DESIGN ?
  3. 3. FLUID GRID SYSTEMS Think percentage, not pixels
  4. 4. FLEXIBLE MEDIA PICTURES, VIDEOS, DIVS Think percentage, not pixels
  5. 5. MEDIA QUERIESControl the rendering of webpages based on conditions such as screen resolution or dimensions
  6. 6. WHY IS ITIMPORTANT ?
  7. 7. WE ARE LIVINGIN THE ERA OFMULTI SCREENCONSUMERISM
  8. 8. MAJORITY OF OUR DAILYMEDIA INTERACTIONS ARE SCREEN BASED 38% 9% 24% Google study, August 2012 http://goo.gl/fd21F
  9. 9. USERS ARE INTERACTING AND SERVICES WITHYOURBRAND IN MULTIPLE SCREENS
  10. 10. SO CONTENT ISKING
  11. 11. Good experiencesare built fromthe ground UP And not the other way around
  12. 12. USERS WANT GOOD EXPERIENCES REGARDLESS OF CONTEXT
  13. 13. kokoomus.fi!
  14. 14. yle.fi/uutiset!
  15. 15. anderssonwise.com!
  16. 16. THERE IS STILL LOTS TOIMPROVE
  17. 17. PERFOMANCE IS DESIGN
  18. 18. THE PITFALLS DEDICATED MOBILE WEBSITES
  19. 19. m.hs.fi! DON’T SHOW CONTENT ON MOBILE SITE AT ALL?! MULTIPLE CLICKS UNTIL USER CAN REACH THE CONTENT
  20. 20. m.yle.fi! OFFER YOUR USERS JUST LINKS ???
  21. 21. m.opera.com! SPLASH SCREENS?
  22. 22. WE DON’T KNOW THE FUTURE
  23. 23. “ACKNOWLEDGE AND EMBRACEUNPREDICTABILITY.”
  24. 24. RESPONSIVE DESIGN IS A PART OFADAPTIVE DESIGN
  25. 25. SO RESPONSIVE DESIGN IS A FIRST STEP TOWARDS ADAPTIVE MINDSET Image courtesy of Brad Frost – http://bradfrostweb.com/
  26. 26. THANKS, FOLKS!Special thanks to: Miika Puputti, designerhttp://ethanmarcotte.com/ @miikaphttp://bradfrostweb.com/ www.frantic.comhttp://www.lukew.com

×