SlideShare une entreprise Scribd logo
1  sur  27
Télécharger pour lire hors ligne
HTML/CSS
Adapting to Mobile Development
Best Practices
Difference in Mobile & Web media
Mobile
• Smaller Screen Sizes (e.g. 320px)
• Tenuous Connectivity (e.g. 2G net)
• Limited Resources (e.g. Memory)
• Browser Compatibility
(e.g. Native Android)
• Different Operating System
(e.g. Symbian/Andy)
• Browsing Mechanism
(eg Touch/Focus/Navigational)
Desktop
• Ample Screen Sizes (e.g. 1024x768px)
• Good Connectivity (e.g. 16 mbps )
• Resources Availability (e.g. Memory)
• Compliance for Modern browser
(e.g. IE/Chrome/FF)
• Different Operating System
(e.g. Linux/Windows)
• Browsing Mechanism
(eg Pointing)
Benefits of using Standards
– Maintainability
– Efficiency
– Clear Scope of Work
– Ease of issue identification
– Separation of Structure,
Presentation and Logic
The fantastic 4
Don’t repeat yourself
(DRY)
Keep it simple
(KIS)
Optimize
Test not Trust
(TNT)
DRY
First and Foremost
Don’t repeat yourself
Separation of Structure, Presentation and
Logic
Reuse the code by breaking it into
procedures
• Separate Data (Structure) from Style
(Presentation) and Behavior
(Themeable)
• Don't use HTML/XHTML Deprecated
Tags and Attributes and
• avoid presentational Tags. Use CSS
instead
• http://www.tutorialspoint.com/html/ht
ml_deprecated_tags.htm
• e.g: <center> can be replaced by :
margin: 0 auto;
• width: ... and text-align: ...
DRY : Example
Wrong
<h1>
<u>
<i>Heading</i>
</u>
</h1>
Right
<style>
h1 {
font-style: italic;
text-decoration: underline;
}
</style>
<h1>Heading</h1>
DRY : Example
Wrong
<p>
<img src="image.jpg"
align="left"> Hoctudau.com ...
</p>
Right
<style>
.thumbnail {
float: left;
}
</style>
<p>
<img src="image.jpg"
class="thumbnail">
Hoctudau.com ...
</p>
DRY : ExampleWrong
<table>
<tr>
<td bgcolor=red width=500 height=50
colspan=2> ... </td>
</tr>
<tr>
<td bgcolor=red width=100 height=300> ... </td>
<td bgcolor=red width=400 height=300> ... </td>
</tr>
<tr>
<td bgcolor=red width=500 height=50
colspan=2> ... </td>
</tr>
</table>
Right
<link rel="stylesheet"
href="style.css">
<div id="header">
<div id="sidebar">
<div id="content">
<div id="footer">
DRY : Example
Wrong
<ul style="padding-left:
5px" >
Right
CSS (styles.css)
#menu {
padding-left: 5px;
}
HTML (index.php)
<ul id="menu">
KIS/Ease of issue identification
– Somebody need to understand your code
– You need to understand your code ... after a long time
Give id and class right spelling and understandable names.
Know some kinds of naming -
• http://sixrevisions.com/css/css-tips/css-tip-2-
structuralnaming-convention-in-css/
• Prefer structural name: describe what elements are
header
sidebar
• to styling (presentational) name: describe how element
look like
right_column
red_link
Comment (in HTML, CSS) when needed to explain the reason
(why?)
KIS : Example
Wrong
<div id="xxx">
<p class="abc">
<div id="middle-left-and-
thena-little-lower">
Right
<div id="header">
<div id="left_column">
<div id="sidebar">
<p class="first">
<p class="intro">
<div class="section">
KIS : Example
Wrong
<ul>
<li class="active_menu_item"
<li class="menu_item">
<li class="menu_item">
<li class="menu_item">
<li class="menu_item">
<li class="menu_item">
<li class="menu_item">
</ul>
Right
<ul id="menu">
<li class="active">
<li>
<li>
<li>
<li>
<li>
<li>
</ul>
KIS : ExampleWrong
<div>
<div>
<div>
<h1>
<div>heading</div><br></h1>
<div>
<div>
paragraph<br>
<div>
paragraph
</div>
<br><br>
</div>
</div>
</div>
</div>
</div>
Right
<div>
<h1>heading</h1>
<p>
paragraph
</p>
<p>
paragraph
</p>
</div>
KIS, suggestion
Naming short enough to keep it sensible
Simpler = Shorter ([a] Less code to type [b] Less code to read [c] Less data to send)
Good CSS skills enough to: know how to use CSS Selector
http://www.w3.org/TR/CSS2/selector.html
 html selector
 id selector
 class selector
 descendant selector
• avoid classitis
• use CSS Shorthand
• keep as little as nested elements as possible.
• know how to solve issues by adding more CSS instead of HTML
Optimize
Faster
 Users load your web faster
 Users feel more comfortable
 Your web can satisfy more users
What affect web speed?
 Request time
 Server processing time
 Data Transfer time
 Web Rendering time
 Client processing time
Optimize : Example
Wrong
* {
margin: 0;
padding: 0;
}
Right
Body {
margin: 0;
padding: 0;
}
P {
margin-bottom:5px;
}
Optimize, suggestion
Use css classes for presentation purpose (embedded css preferred)
Reduce/remove, redundant/unused css classes
Don’t use inline css (DRY also)
Don’t add javascript before the HTML element definition(preload element)
Add external css links in HTML <head>
Add external or embedded Javascript at the end of the document
Try to load external javascript asynchronously
Try to use lesser nested elements (KIS also)
Structure HTML markup so that the DOM is loaded faster (e.g. use lazy.js)
Combine stylesheets, Javascript & Images so to reduce HTTP requests
http://code.google.com/speed/page-speed/docs/rules_intro.html
http://developer.yahoo.com/performance/rules.html
TnT/ Avoid hanging your head
– Reduced risk of failures (or incidents)
once systems are transferred to live
operation;
– Demonstrative proof that business
requirements have been met;
– Assurance that the system will
function appropriately with existing
legacy systems where required and will
integrate with other systems as
necessary;
– Assurance that the users for which the
solution was designed are able to
operate productively.
Widescreen Pictures
Material DesignMaterial
Surfaces and edges
of the material
provide visual cues
that are grounded
in reality. The use
of familiar tactile
attributes helps
users quickly
understand
affordances.
Bold,graphic,intentional
create hierarchy,
meaning, and
focus. Deliberate
color choices,
edge-to-edge
imagery, large-
scale typography,
and intentional
white space create
a bold and graphic
interface
Motionprovidesmeaning
Motion respects
and reinforces the
user as the prime
mover. Primary
user actions are
inflection points
that initiate
motion,
transforming the
whole design.
Material Design
Material
• Surfaces and
edges of the
material provide
visual cues that
are grounded in
reality. The use
of familiar tactile
attributes helps
users quickly
understand
affordances.
Bold, graphic,
intentional
• create hierarchy,
meaning, and focus.
Deliberate color
choices, edge-to-
edge imagery, large-
scale typography,
and intentional
white space create a
bold and graphic
interface
Motion provides
meaning
• Motion respects
and reinforces the
user as the prime
mover. Primary user
actions are inflection
points that initiate
motion,
transforming the
whole design.
Material Design: Example
Wrong
• Linear motion feels mechanical. An
abrupt change in velocity at both the
beginning and end
• Speed up when entering or slow
down when exiting.
• Breaking relationship with input
• Avoid hard cuts. Hard cuts are jarring
and make the user work too hard to
understand the transition
Right
• Motion with swift acceleration and
gentle deceleration
• Enter and exit frame at peak velocity.
• Material appears from touch point
• Cross-fades are not desirable, but are
preferred over cuts
• Direct the user's attention with
coordinated, orderly motion.
• Avoid inconsistent or disorderly
motion and objects leaving/entering
Material Design, suggestion
Avoid these five common mistakes
1. Too much information
2. Fear of white space
3. Too many fonts
4. The wrong effect
5. Off colour
http://www.google.com/design/spec/material-
design/introduction.html
http://webonize.com.au/5-common-design-mistakes/
Material Design, suggestion
1. Too much information
2. Fear of white space
3. Too many fonts
4. The wrong effect
5. Off colour
http://www.google.com/design/spec/material-
design/introduction.html
http://webonize.com.au/5-common-design-mistakes/
Guru mantra
Smart people follow the targets, not the rules!
Sometimes we should break the rules!
Warning:
We have to learn to follow the rules before learning to break them!
Think about what you want, but do what you can.
Reference and Further Reading
Reference:
http://www.slideshare.net/hoctudau/html-css-bestpractices-5865752
http://www.bcs.org/content/conwebdoc/7942
Further Reading:
http://sixrevisions.com/web-standards/20-html-best-practices-you-should-follow/
http://msdn.microsoft.com/en-us/scriptjunkie/ff679957.aspx
Help & Support:
minhal.s@mauj.com / +91 9987364540
PEOPLE INFOCOM
Presentation for HTML/CSS Coding Standard Awareness
Author: Sayed Minhal - Frontend Designer/UI developer

Contenu connexe

Similaire à Sayed minhal-best practice

Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Centurydreamwidth
 
User Interface Design Chapter 2 Galiz
User Interface Design Chapter 2 GalizUser Interface Design Chapter 2 Galiz
User Interface Design Chapter 2 GalizLatesh Malik
 
UX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data VisualizationsUX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data VisualizationsMichelle Michael
 
A Case for Outside-In Design
A Case for Outside-In DesignA Case for Outside-In Design
A Case for Outside-In DesignSandro Mancuso
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignDebra Shapiro
 
RDVO - Building UX Pattern Libraries
RDVO - Building UX Pattern LibrariesRDVO - Building UX Pattern Libraries
RDVO - Building UX Pattern LibrariesBen Zipkin
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive DesignNexer Digital
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive DesignLiam Richardson
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Emagination ®
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devicesjameswillweb
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!Embolden
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!Embolden
 
From Website To Webapp Shane Morris
From Website To Webapp   Shane MorrisFrom Website To Webapp   Shane Morris
From Website To Webapp Shane MorrisShane Morris
 
My presentation at Kent State IAKM
My presentation at Kent State IAKMMy presentation at Kent State IAKM
My presentation at Kent State IAKMKeith Instone
 
Mobile User Interface Design
Mobile User Interface DesignMobile User Interface Design
Mobile User Interface Designrita
 

Similaire à Sayed minhal-best practice (20)

Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Century
 
Website Migration Planning
Website Migration PlanningWebsite Migration Planning
Website Migration Planning
 
User Interface Design Chapter 2 Galiz
User Interface Design Chapter 2 GalizUser Interface Design Chapter 2 Galiz
User Interface Design Chapter 2 Galiz
 
Product Layouts And Group Technologies Essay
Product Layouts And Group Technologies EssayProduct Layouts And Group Technologies Essay
Product Layouts And Group Technologies Essay
 
UX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data VisualizationsUX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data Visualizations
 
A Case for Outside-In Design
A Case for Outside-In DesignA Case for Outside-In Design
A Case for Outside-In Design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Dfg Intranet Development
Dfg Intranet DevelopmentDfg Intranet Development
Dfg Intranet Development
 
RDVO - Building UX Pattern Libraries
RDVO - Building UX Pattern LibrariesRDVO - Building UX Pattern Libraries
RDVO - Building UX Pattern Libraries
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive Design
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive Design
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
 
Product Vs Process Layout
Product Vs Process LayoutProduct Vs Process Layout
Product Vs Process Layout
 
Usability
UsabilityUsability
Usability
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devices
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!
 
From Website To Webapp Shane Morris
From Website To Webapp   Shane MorrisFrom Website To Webapp   Shane Morris
From Website To Webapp Shane Morris
 
My presentation at Kent State IAKM
My presentation at Kent State IAKMMy presentation at Kent State IAKM
My presentation at Kent State IAKM
 
Mobile User Interface Design
Mobile User Interface DesignMobile User Interface Design
Mobile User Interface Design
 

Dernier

Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxAutus Cyber Tech
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?AmeliaSmith90
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Incrobinwilliams8624
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 
Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxJoão Esperancinha
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Jaydeep Chhasatia
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampVICTOR MAESTRE RAMIREZ
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...OnePlan Solutions
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native BuildpacksVish Abrams
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 

Dernier (20)

Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptx
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in Trivandrum
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
Salesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptxSalesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptx
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Inc
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 
Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptx
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - Datacamp
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native Buildpacks
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 

Sayed minhal-best practice

  • 1. HTML/CSS Adapting to Mobile Development Best Practices
  • 2. Difference in Mobile & Web media Mobile • Smaller Screen Sizes (e.g. 320px) • Tenuous Connectivity (e.g. 2G net) • Limited Resources (e.g. Memory) • Browser Compatibility (e.g. Native Android) • Different Operating System (e.g. Symbian/Andy) • Browsing Mechanism (eg Touch/Focus/Navigational) Desktop • Ample Screen Sizes (e.g. 1024x768px) • Good Connectivity (e.g. 16 mbps ) • Resources Availability (e.g. Memory) • Compliance for Modern browser (e.g. IE/Chrome/FF) • Different Operating System (e.g. Linux/Windows) • Browsing Mechanism (eg Pointing)
  • 3. Benefits of using Standards – Maintainability – Efficiency – Clear Scope of Work – Ease of issue identification – Separation of Structure, Presentation and Logic
  • 4. The fantastic 4 Don’t repeat yourself (DRY) Keep it simple (KIS) Optimize Test not Trust (TNT)
  • 5. DRY First and Foremost Don’t repeat yourself Separation of Structure, Presentation and Logic Reuse the code by breaking it into procedures • Separate Data (Structure) from Style (Presentation) and Behavior (Themeable) • Don't use HTML/XHTML Deprecated Tags and Attributes and • avoid presentational Tags. Use CSS instead • http://www.tutorialspoint.com/html/ht ml_deprecated_tags.htm • e.g: <center> can be replaced by : margin: 0 auto; • width: ... and text-align: ...
  • 6. DRY : Example Wrong <h1> <u> <i>Heading</i> </u> </h1> Right <style> h1 { font-style: italic; text-decoration: underline; } </style> <h1>Heading</h1>
  • 7. DRY : Example Wrong <p> <img src="image.jpg" align="left"> Hoctudau.com ... </p> Right <style> .thumbnail { float: left; } </style> <p> <img src="image.jpg" class="thumbnail"> Hoctudau.com ... </p>
  • 8. DRY : ExampleWrong <table> <tr> <td bgcolor=red width=500 height=50 colspan=2> ... </td> </tr> <tr> <td bgcolor=red width=100 height=300> ... </td> <td bgcolor=red width=400 height=300> ... </td> </tr> <tr> <td bgcolor=red width=500 height=50 colspan=2> ... </td> </tr> </table> Right <link rel="stylesheet" href="style.css"> <div id="header"> <div id="sidebar"> <div id="content"> <div id="footer">
  • 9. DRY : Example Wrong <ul style="padding-left: 5px" > Right CSS (styles.css) #menu { padding-left: 5px; } HTML (index.php) <ul id="menu">
  • 10. KIS/Ease of issue identification – Somebody need to understand your code – You need to understand your code ... after a long time Give id and class right spelling and understandable names. Know some kinds of naming - • http://sixrevisions.com/css/css-tips/css-tip-2- structuralnaming-convention-in-css/ • Prefer structural name: describe what elements are header sidebar • to styling (presentational) name: describe how element look like right_column red_link Comment (in HTML, CSS) when needed to explain the reason (why?)
  • 11. KIS : Example Wrong <div id="xxx"> <p class="abc"> <div id="middle-left-and- thena-little-lower"> Right <div id="header"> <div id="left_column"> <div id="sidebar"> <p class="first"> <p class="intro"> <div class="section">
  • 12. KIS : Example Wrong <ul> <li class="active_menu_item" <li class="menu_item"> <li class="menu_item"> <li class="menu_item"> <li class="menu_item"> <li class="menu_item"> <li class="menu_item"> </ul> Right <ul id="menu"> <li class="active"> <li> <li> <li> <li> <li> <li> </ul>
  • 14. KIS, suggestion Naming short enough to keep it sensible Simpler = Shorter ([a] Less code to type [b] Less code to read [c] Less data to send) Good CSS skills enough to: know how to use CSS Selector http://www.w3.org/TR/CSS2/selector.html  html selector  id selector  class selector  descendant selector • avoid classitis • use CSS Shorthand • keep as little as nested elements as possible. • know how to solve issues by adding more CSS instead of HTML
  • 15. Optimize Faster  Users load your web faster  Users feel more comfortable  Your web can satisfy more users What affect web speed?  Request time  Server processing time  Data Transfer time  Web Rendering time  Client processing time
  • 16. Optimize : Example Wrong * { margin: 0; padding: 0; } Right Body { margin: 0; padding: 0; } P { margin-bottom:5px; }
  • 17. Optimize, suggestion Use css classes for presentation purpose (embedded css preferred) Reduce/remove, redundant/unused css classes Don’t use inline css (DRY also) Don’t add javascript before the HTML element definition(preload element) Add external css links in HTML <head> Add external or embedded Javascript at the end of the document Try to load external javascript asynchronously Try to use lesser nested elements (KIS also) Structure HTML markup so that the DOM is loaded faster (e.g. use lazy.js) Combine stylesheets, Javascript & Images so to reduce HTTP requests http://code.google.com/speed/page-speed/docs/rules_intro.html http://developer.yahoo.com/performance/rules.html
  • 18. TnT/ Avoid hanging your head – Reduced risk of failures (or incidents) once systems are transferred to live operation; – Demonstrative proof that business requirements have been met; – Assurance that the system will function appropriately with existing legacy systems where required and will integrate with other systems as necessary; – Assurance that the users for which the solution was designed are able to operate productively.
  • 20. Material DesignMaterial Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Bold,graphic,intentional create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large- scale typography, and intentional white space create a bold and graphic interface Motionprovidesmeaning Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.
  • 21. Material Design Material • Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Bold, graphic, intentional • create hierarchy, meaning, and focus. Deliberate color choices, edge-to- edge imagery, large- scale typography, and intentional white space create a bold and graphic interface Motion provides meaning • Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.
  • 22. Material Design: Example Wrong • Linear motion feels mechanical. An abrupt change in velocity at both the beginning and end • Speed up when entering or slow down when exiting. • Breaking relationship with input • Avoid hard cuts. Hard cuts are jarring and make the user work too hard to understand the transition Right • Motion with swift acceleration and gentle deceleration • Enter and exit frame at peak velocity. • Material appears from touch point • Cross-fades are not desirable, but are preferred over cuts • Direct the user's attention with coordinated, orderly motion. • Avoid inconsistent or disorderly motion and objects leaving/entering
  • 23. Material Design, suggestion Avoid these five common mistakes 1. Too much information 2. Fear of white space 3. Too many fonts 4. The wrong effect 5. Off colour http://www.google.com/design/spec/material- design/introduction.html http://webonize.com.au/5-common-design-mistakes/
  • 24. Material Design, suggestion 1. Too much information 2. Fear of white space 3. Too many fonts 4. The wrong effect 5. Off colour http://www.google.com/design/spec/material- design/introduction.html http://webonize.com.au/5-common-design-mistakes/
  • 25. Guru mantra Smart people follow the targets, not the rules! Sometimes we should break the rules! Warning: We have to learn to follow the rules before learning to break them! Think about what you want, but do what you can.
  • 26. Reference and Further Reading Reference: http://www.slideshare.net/hoctudau/html-css-bestpractices-5865752 http://www.bcs.org/content/conwebdoc/7942 Further Reading: http://sixrevisions.com/web-standards/20-html-best-practices-you-should-follow/ http://msdn.microsoft.com/en-us/scriptjunkie/ff679957.aspx Help & Support: minhal.s@mauj.com / +91 9987364540
  • 27. PEOPLE INFOCOM Presentation for HTML/CSS Coding Standard Awareness Author: Sayed Minhal - Frontend Designer/UI developer