Responsive web design
4 likes821 views
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.
Responsive web design
- 1. RESPONSIVE WEB DESIGN Miika Puputti, designer @miikap WEB WEB WEB WEB
- 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
- 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
- 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