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

1,109 views

Published on

Published in: Business, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,109
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
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

×