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
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
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
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