Responsive web design
1 like418 views
Responsive web design focuses on creating websites that adapt to various screen sizes using fluid grid systems, flexible media, and media queries. It is crucial in today's multi-screen environment where users expect consistent and high-quality experiences across devices. The document highlights common pitfalls in mobile web design and underscores the importance of responsive design as a stepping stone towards an adaptive approach.
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