Responsive Design And You
0 likes613 views
The document discusses responsive design, questioning whether it is a temporary trend and providing insights on its application in web development. It covers advantages, pitfalls, and the importance of a content-driven approach tailored to different devices, highlighting the need for collaboration among stakeholders. Additionally, it offers resources for further exploration of responsive web design principles.
Responsive Design And You
- 1. Responsive Design and You Michelle Dash, Joe Hass, Bill Welense
- 2. Tonight’s Agenda How We Got Here Is Responsive Design A Fad? DeconstrucCng Responsive Design Approaching The Design Process Benefits and PiFalls The One Slide Answer To “Should You Use Responsive Design?” • Looking Into The Future • ReconstrucCng Responsive Design • • • • • •
- 3. 1996: The Desktop hRp://www2.warnerbros.com/spacejam/movie/jam.htm
- 6. “This is the real Web!”
- 7. “Mobile Web”
- 8. Is Responsive Design a Fad?
- 9. How Responsive Do You Want To Get?
- 10. Fluid Design Images adjust their size based on the viewport size. In an 600-‐pixel view, you see this. In a 768-‐pixel view, you see this.
- 11. Contextual Design Design the experience based on how people generally use the device. I want to check I want to immerse I want to manage hRp://whitneyhess.com/blog/2012/02/07/locaCon-‐agnosCc-‐context-‐specific/
- 12. Contextual Design Display Common elements inherit look and feel of the device they are used on. Example: Drop downs take on interface of different device types hRp://www.lukew.com/ff/entry.asp?1000
- 13. Responsive Design With Server Side Components The page redesigns itself based on the viewable width of the browser. It only sends the appropriate pieces needed. hRp://www.lukew.com/ff/entry.asp?1509
- 14. Jakob Nielsen & Responsive Design www.useit.com/alertbox/mobile-‐vs-‐full-‐sites.html www.useit.com/alertbox/repurposing
- 15. Jakob Nielsen & Responsive Design “I was wriCng about user experience, not implementaCon. ... Responsive design is one of the ways to achieve different user interfaces for different devices. It should be up to the engineers to determine the most efficient way of achieving the user experience goals. All we usability people should decide is how the site should work for users, not how this is implemented.” hRp://www.netmagazine.com/interviews/nielsen-‐responds-‐mobile-‐criCcism
- 16. Approaching The Design Process: Mobile vs Tablet vs Desktop • Content-‐Driven Design • Approximate Designs • Mobile First
- 17. Content-‐Driven Design Instead of looking at pieces of funcConality individually, a site becomes a series of components that shii as needed depending on the content on the site.
- 18. Approximate Designs As you design a page, define a small, medium and large point of view.
- 19. Mobile First A designer should focus on the core set of tasks for a mobile device, then add addiConal funcConality when using tablets and desktop.
- 20. Benefits • • • • Creates a cohesive experience for users Content and funcConality is targeted PotenCal management efficiencies Longer shelf life
- 21. PiFalls • • • • • Longer to design Longer to develop (and harder to do right) Costs more Paradigm shii for clients, especially in the approval process Faith in the device-‐sensing capabiliCes on the server
- 22. Should We Use Responsive Design?
- 23. It Depends. • • • • • • Site needs Site architecture User needs User environment User flows Time available
- 24. Examples • • • • • • • • • roundarchisobar.com goang.com sCtch.hermones.com thereturn.adidas.com bostonglobe.com barackobama.com sony.com starbucks.com londonandpartners.com
- 25. Looking Into The Future
- 26. ReconstrucCng Responsive Design • It’s a method. It can be the right method, but not always. • Bring and keep the key factors top of mind when determining how to go about this. • Whether to go with responsive design is an everyone decision (client, user experience, creaCve, producCon).
- 27. Websites To Help You • www.netmagazine.com/features/50-‐fantasCc-‐ tools-‐responsive-‐web-‐design • bradfrost.github.com/this-‐is-‐responsive/ • www.awwwards.com/7-‐essenCal-‐books-‐on-‐ responsive-‐web-‐design-‐you-‐do-‐not-‐want-‐to-‐ miss.html
- 28. Every Single Link From Tonight On One Page goo.gl/2Hiu
- 29. Responsive Design and You Michelle Dash, Joe Hass, Bill Welense