Responsive Web design
1 like1,017 views
The document discusses responsive web design (RWD) and its significance in UI architecture, emphasizing the importance of flexibility for various devices and screen sizes. It details past and present web experiences, technology considerations, and outlines RWD principles, along with frameworks such as Twitter Bootstrap. Additionally, it compares RWD with adaptive design and mobile-specific sites, highlighting benefits and essential factors for project selection.
Responsive Web design
- 1. Responsive Web Design WHAT WHICH WHEN HOW
- 2. From - Neha Sharma Front- end Developer Technology Stack - HTML5,CSS3, JS, jQuery, RWD Feedback/Questions nehha255@gmail.com
- 3. Agenda • Introduction to UI Architecture • Key Factors • Past, Present, Future • Anatomy of a Webpage • Presentation layer • Logic Layer
- 4. What is UI Architecture “UI Architecture is a collection of processes. Which plan, develop, manage a reusable code, modules, components, flexible to use and provide useful & meaningful solution” Principle of GOOD UI Architecture: SOLUTION KISS DRY REUSEABLE MODULES
- 5. PAST, PRESENT , and FUTURE
- 6. Lifecycle of Project USER TEST VISUAL WIREFRA ME CONCEPT RESEARCH DEVELOP REQUIREME NT DOCUMENT WATERFALL APPROACH
- 7. Yesterday One Browser and One Screen size to focus
- 8. Present – More than Web TV, Console, Watch Non-Flash Animation JavaScriptCSS3HTML5 Devices , Tabs, Phones Range of Browsers
- 9. Present • Technology vs Browsers vs Size • Prototype, Sketch, UI Architecture, Frameworks • Content strategy • User Experience • Digital Experience
- 10. What’s the FUTURE? • more and beyond the web • Responsive • Digital • One solution fit in all
- 11. Key Factors for Selection Project Context Complexity & Functionality Budget Timeline Target Audience ?
- 12. Anatomy of a Webpage UI Architecture
- 13. HTML + CSS (Presentation Layer) JavaScript (Behavior) BACKEND CODE + DATABASE
- 14. Presentation Layer MARKUP & STYLING WHAT WHICH WHEN HOW
- 15. Structure + Presentation = HTML + CSS
- 16. Blast from the Past Websites 3 years ago … Limited Device support Cross Browser Compatibility issues Lot of Workaround Less user experience No Mobile Support
- 18. HTML5 vs XHTML Requirement : Required a Clean, Semantic, devices and future support markup. Options: HTML5 or XHTML? Key Factor for Selection: • Semantic Code • Clean Code • Easily Readable • Devices/Mobile Support
- 20. XHTML HTML5 Not Semantic tags Semantic tags Not Clean Clean Limited tags Lot of Tags Limited Attributes Lot of new attributes Not 100% support to Devices/Mobiles Support on Mobile/Devices No Future Future HTML5 vs XHTML Solution: HTML5
- 21. Future – more than web…
- 22. Same Contents, Different Shapes
- 23. Shape of Digital Experience
- 25. RWD- One Solution for all Sizes Responsive Web Design
- 26. Responsive Website Design (RWD) means designing your website so that it responds to your user environment based on the screen-size, platform and orientation.
- 27. What We got in RWD? • Flexible grids • Responsive images and Videos • Flexible Content • View port specific user experience
- 28. Frameworks • Twitter Bootstrap • Foundation 4 • Create your Own Solution
- 29. Adaptive In adaptive – we do not make any changes in the site look and feel . The same user experience and the same content, site will render on each and every device irrespective of the size and the OS.
- 30. M(dot) • M(dot) is all together a different website for the mobile with the different URL starting from the m.xyz.com
- 31. RWD vs Adaptive vs m(dot) RWD Adaptive m(dot) Cost Medium Medium High Time Medium High High Code Reuse 100% - Code Maintainability Easy Medium Complex Content Reuse 100% - - Consistency of Design 100% - -
- 32. What is the Present and Future? HTML5 + Responsive
- 33. References • Stack overflow • Slide share • Google • Own Experience