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.

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

17. Now? Not
Just Web
Digital
Experience
Different
Viewport
Fast
Performance
Broadband
to
4G

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

19. Skeleton of HTML5

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

24. Solutions
RWD Adaptive m.(dot)

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