SlideShare a Scribd company logo
1 of 32
Lecture 9: Usability , Accessibility & professional practices SFDV2001 Web Development
What is usability? Why should we care about usability? Because if you don’t people won’t want to use your site. Remember there are millions of other web sites to use and they are all just a few clicks away. Usability is a quality used to refer to an interface’s ease of use.  Usability is about ensuring that something you create is usable. Usable not by you, but by the intended audience. Usability is about enhancing the experience for all   users.
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Creating successful web pages depends on your ability to  critically  analyse  pages that you create and encounter.
First Impression rule: You should be able to look at the home page of any site and figure out what the site is about within four seconds. If you can't, your site has failed. - Vincent Flanders ( Web Pages that Suck ) ,[object Object],[object Object],Some examples: ,[object Object],[object Object],Those who don’t get it: Those who do get it:
Content Quality content is vital.  Your site needs to contain things of use or interest to those who visit. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Backgrounds Flashing things Entrance pages Flash Intros Be careful with: Avoid: Music that starts up without warning Pop-up windows Required plug-ins Appearance Problems ,[object Object],[object Object],[object Object],[object Object],[object Object]
What is Accessibility ,[object Object],[object Object],[object Object],"The power of the Web is in its universality. Access by everyone regardless of  disability is an essential aspect." -- Tim Berners-Lee, W3C Director and inventor of the World Wide Web Accessibility is about measures you can take to make your pages easier to use for people with disabilities.  ,[object Object],[object Object]
WAI Principles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Who is involved? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Blind users ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Colour Blindness ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Colour Blindness test 25 45 29 56 6 8 5
Deaf users ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Mobility issues ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
PDAs and Wireless ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Issue - Separate pages ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Practical Steps ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
What are professional practices? Making a web page isn't hard - anybody can get something on the web. Making quality web pages requires skill, requires a professional. Some professional practices are things that by law you should conform to. Others are the things that distinguish your work from that of an amateur. We expect professionals to possess significant skills, that they produce work of a quality not obtainable by an amateur and that their knowledge is significant.
Web browsers will display any old rubbish.
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Use your comments to document what isn't obvious: When code is used for something other than its standard purpose. <form method=&quot;get&quot; action=&quot;/bin/search&quot;> <!-- Table controls layout of search form --> <table border=&quot;0&quot;> ,[object Object],[object Object],[object Object],[object Object],[object Object],Comments Developers who take the time to properly document their work make their lives, and the lives of others, much easier.
Use tabs to indent the different levels of your code: <table> <tr> <td> <p>Content</p> </td> </tr> </table> Code Layout Layout your code in a way that makes it easy to read. In the lab Taco will do this for you (with various degrees of success). You can, of course, alter Taco's attempt or forgo the automatic option altogether and do it manually.
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Fonts If you specify a specific font face, you should always provide a suitable generic font family name too: <font face=&quot;arial,  sans-serif &quot;> font-family: courier, monospace Images Use correct width and height specifications.  Resize your images with graphic editing software not with your HTML code. Use good  alt  values - descriptive sentences. alt=&quot;Percy the cat.&quot; alt=&quot;Giraffe in hiking gear.&quot;
Image size and the web Dialup (56k modem) = 56 kilo bits  per second, not kilobytes!  56 kilobits = 7 kilobytes per second. So, a single 32KB image will take at least 4.5 seconds. &quot;Broadband&quot; starts at 256 kilobits (32KB per second) maximum. 1 megabit (1024 kilobits) broadband = 128KB per second max.
Standards ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Don’t forget the text in your  <title> ,  alt , etc. Use a spell checker to help, but don’t rely on it alone.  Spelling and grammar Nothing suggests a sloppy attitude quite like failing to take the time to proof read the content of your pages.
Testing Check and double-check that  all  your links work. Before and after you upload to your web server. Test on every browser and operating system you can get your hands on. Test with different connection speeds. Test on different screen resolutions. Test on different monitor types. Usability testing.
Involvement Keep up with what’s new in the field. There is always something to learn. For web development, one of the best way to stay current is to participate in and read the many quality web-based publications in the profession. A List Apart ( http://alistapart.com/ ) Digital Web Magazine ( http://www.digital-web.com/ ) Style Gala  ( http://www.stylegala.com/ ) Mailing Lists: W3C  ( http://www.w3.org/Mail/ )
Recommended sites: Dey Alexander (user experience design specialist) http://www.deyalexander.com/ Jakob Nielsen’s website http://www.useit.com/ Vincent Flanders’ Web Pages That Suck http://www.webpagesthatsuck.com/ The Web Standards Project: http://www.webstandards.org/ Further reading: Don’t Make Me Think  by Steve Krug Web Bloopers  by Jeff Johnson

More Related Content

What's hot

Girl develop It Orlando HTML Remix
Girl develop It Orlando HTML RemixGirl develop It Orlando HTML Remix
Girl develop It Orlando HTML RemixHolly Akers
 
Everyday computer tips
Everyday computer tipsEveryday computer tips
Everyday computer tipsHolly Akers
 
Optimizing Library Resources for Screen Readers
Optimizing Library Resources for Screen ReadersOptimizing Library Resources for Screen Readers
Optimizing Library Resources for Screen ReadersNina McHale
 
Web 2.0 = Accessibility 2.0?
Web 2.0 = Accessibility 2.0?Web 2.0 = Accessibility 2.0?
Web 2.0 = Accessibility 2.0?Jared Smith
 
Responsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersResponsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersBootstrap Creative
 
Ruining The User Experience (The Ajax Experience Boston 2007)
Ruining The User Experience (The Ajax Experience Boston 2007)Ruining The User Experience (The Ajax Experience Boston 2007)
Ruining The User Experience (The Ajax Experience Boston 2007)Aaron Gustafson
 
Making The Most of Mobile
Making The Most of MobileMaking The Most of Mobile
Making The Most of Mobileguestca744f
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 Jeffrey Barke
 
Publishing Your Family History to the Web - Version 2
Publishing Your Family History to the Web - Version 2Publishing Your Family History to the Web - Version 2
Publishing Your Family History to the Web - Version 2Teresa Pask
 
Ruining The User Experience (The Rich Web Experience '07)
Ruining The User Experience (The Rich Web Experience '07)Ruining The User Experience (The Rich Web Experience '07)
Ruining The User Experience (The Rich Web Experience '07)Aaron Gustafson
 
How websites and search engines work
How websites and search engines workHow websites and search engines work
How websites and search engines workBrian Duffy
 
Code This, Not That: 10 Do's and Don'ts For Learning HTML
Code This, Not That: 10 Do's and Don'ts For Learning HTMLCode This, Not That: 10 Do's and Don'ts For Learning HTML
Code This, Not That: 10 Do's and Don'ts For Learning HTMLHubSpot
 
HTML email best practices
HTML email best practicesHTML email best practices
HTML email best practicesJeffrey Barke
 
Quick Web Accessibility - Sensory Therapy Gardens Manual
Quick Web Accessibility - Sensory Therapy Gardens ManualQuick Web Accessibility - Sensory Therapy Gardens Manual
Quick Web Accessibility - Sensory Therapy Gardens ManualKlausGroenholm
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1Shahrzad Peyman
 
Bruce Lawson HTML5 South By SouthWest presentation
Bruce Lawson HTML5 South By SouthWest presentationBruce Lawson HTML5 South By SouthWest presentation
Bruce Lawson HTML5 South By SouthWest presentationbrucelawson
 
Web Design Primer Sample - HTML CSS JS
Web Design Primer Sample - HTML CSS JSWeb Design Primer Sample - HTML CSS JS
Web Design Primer Sample - HTML CSS JSBootstrap Creative
 

What's hot (20)

Girl develop It Orlando HTML Remix
Girl develop It Orlando HTML RemixGirl develop It Orlando HTML Remix
Girl develop It Orlando HTML Remix
 
Everyday computer tips
Everyday computer tipsEveryday computer tips
Everyday computer tips
 
Optimizing Library Resources for Screen Readers
Optimizing Library Resources for Screen ReadersOptimizing Library Resources for Screen Readers
Optimizing Library Resources for Screen Readers
 
Web 2.0 = Accessibility 2.0?
Web 2.0 = Accessibility 2.0?Web 2.0 = Accessibility 2.0?
Web 2.0 = Accessibility 2.0?
 
Responsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersResponsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for Beginners
 
Ruining The User Experience (The Ajax Experience Boston 2007)
Ruining The User Experience (The Ajax Experience Boston 2007)Ruining The User Experience (The Ajax Experience Boston 2007)
Ruining The User Experience (The Ajax Experience Boston 2007)
 
Making The Most of Mobile
Making The Most of MobileMaking The Most of Mobile
Making The Most of Mobile
 
CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3 CSS3 and a brief introduction to Google Maps API v3
CSS3 and a brief introduction to Google Maps API v3
 
Publishing Your Family History to the Web - Version 2
Publishing Your Family History to the Web - Version 2Publishing Your Family History to the Web - Version 2
Publishing Your Family History to the Web - Version 2
 
Html class-01
Html class-01Html class-01
Html class-01
 
Html
HtmlHtml
Html
 
Ruining The User Experience (The Rich Web Experience '07)
Ruining The User Experience (The Rich Web Experience '07)Ruining The User Experience (The Rich Web Experience '07)
Ruining The User Experience (The Rich Web Experience '07)
 
How websites and search engines work
How websites and search engines workHow websites and search engines work
How websites and search engines work
 
Code This, Not That: 10 Do's and Don'ts For Learning HTML
Code This, Not That: 10 Do's and Don'ts For Learning HTMLCode This, Not That: 10 Do's and Don'ts For Learning HTML
Code This, Not That: 10 Do's and Don'ts For Learning HTML
 
HTML email best practices
HTML email best practicesHTML email best practices
HTML email best practices
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Quick Web Accessibility - Sensory Therapy Gardens Manual
Quick Web Accessibility - Sensory Therapy Gardens ManualQuick Web Accessibility - Sensory Therapy Gardens Manual
Quick Web Accessibility - Sensory Therapy Gardens Manual
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1
 
Bruce Lawson HTML5 South By SouthWest presentation
Bruce Lawson HTML5 South By SouthWest presentationBruce Lawson HTML5 South By SouthWest presentation
Bruce Lawson HTML5 South By SouthWest presentation
 
Web Design Primer Sample - HTML CSS JS
Web Design Primer Sample - HTML CSS JSWeb Design Primer Sample - HTML CSS JS
Web Design Primer Sample - HTML CSS JS
 

Similar to Accessibility Usability Professional Summry

corePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignatarocorePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignataroJohn Coonen
 
Performance Optimisation For Web & Mobile
Performance Optimisation For Web & MobilePerformance Optimisation For Web & Mobile
Performance Optimisation For Web & Mobileformfunction
 
Design.doc
Design.docDesign.doc
Design.docbutest
 
Get real results from your website
Get real results from your websiteGet real results from your website
Get real results from your websiteFlorizel Media
 
RBC Royal Bank : An Accessibility Evaluation & Recommendations
RBC Royal Bank : An Accessibility Evaluation & RecommendationsRBC Royal Bank : An Accessibility Evaluation & Recommendations
RBC Royal Bank : An Accessibility Evaluation & RecommendationsSivaprasad Paliyath (CUA - HFI)
 
Web Accessibility 101
Web Accessibility 101Web Accessibility 101
Web Accessibility 101Eric Malcolm
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Emagination ®
 
Successful Teams follow Standards
Successful Teams follow StandardsSuccessful Teams follow Standards
Successful Teams follow StandardsChristian Heilmann
 
Practical Accessibility - Midwest UX conference 2011
Practical Accessibility - Midwest UX conference 2011Practical Accessibility - Midwest UX conference 2011
Practical Accessibility - Midwest UX conference 2011Chris Merkel
 
Copyright, 1999 © Quinotaur Design. All rights reserved.
Copyright, 1999 © Quinotaur Design. All rights reserved.Copyright, 1999 © Quinotaur Design. All rights reserved.
Copyright, 1999 © Quinotaur Design. All rights reserved.webhostingguy
 
HCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, AbilitynetHCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, AbilitynetCity University London
 
Basic webpage layout and design
Basic webpage layout and designBasic webpage layout and design
Basic webpage layout and designAndz Bass
 
Top 10 Tips for Making Your Website Accessible
Top 10 Tips for Making Your Website AccessibleTop 10 Tips for Making Your Website Accessible
Top 10 Tips for Making Your Website AccessibleAEL Data
 
Interface Usability - Adding Schweppervescence
Interface Usability - Adding SchweppervescenceInterface Usability - Adding Schweppervescence
Interface Usability - Adding SchweppervescenceSSW
 
Do you have a website? Do you want to get sued?
Do you have a website?  Do you want to get sued?Do you have a website?  Do you want to get sued?
Do you have a website? Do you want to get sued?Devin Olson
 
Accessible Web Sites: What can you do?
Accessible Web Sites: What can you do?Accessible Web Sites: What can you do?
Accessible Web Sites: What can you do?Joseph Dolson
 

Similar to Accessibility Usability Professional Summry (20)

corePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignatarocorePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven Pignataro
 
Performance Optimisation For Web & Mobile
Performance Optimisation For Web & MobilePerformance Optimisation For Web & Mobile
Performance Optimisation For Web & Mobile
 
Design.doc
Design.docDesign.doc
Design.doc
 
Get real results from your website
Get real results from your websiteGet real results from your website
Get real results from your website
 
Designing usable forms
Designing usable formsDesigning usable forms
Designing usable forms
 
RBC Royal Bank : An Accessibility Evaluation & Recommendations
RBC Royal Bank : An Accessibility Evaluation & RecommendationsRBC Royal Bank : An Accessibility Evaluation & Recommendations
RBC Royal Bank : An Accessibility Evaluation & Recommendations
 
Accessibility for beginners
Accessibility for beginnersAccessibility for beginners
Accessibility for beginners
 
Web Accessibility 101
Web Accessibility 101Web Accessibility 101
Web Accessibility 101
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
 
Successful Teams follow Standards
Successful Teams follow StandardsSuccessful Teams follow Standards
Successful Teams follow Standards
 
Practical Accessibility - Midwest UX conference 2011
Practical Accessibility - Midwest UX conference 2011Practical Accessibility - Midwest UX conference 2011
Practical Accessibility - Midwest UX conference 2011
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Copyright, 1999 © Quinotaur Design. All rights reserved.
Copyright, 1999 © Quinotaur Design. All rights reserved.Copyright, 1999 © Quinotaur Design. All rights reserved.
Copyright, 1999 © Quinotaur Design. All rights reserved.
 
HCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, AbilitynetHCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, Abilitynet
 
Basic webpage layout and design
Basic webpage layout and designBasic webpage layout and design
Basic webpage layout and design
 
Top 10 Tips for Making Your Website Accessible
Top 10 Tips for Making Your Website AccessibleTop 10 Tips for Making Your Website Accessible
Top 10 Tips for Making Your Website Accessible
 
Interface Usability - Adding Schweppervescence
Interface Usability - Adding SchweppervescenceInterface Usability - Adding Schweppervescence
Interface Usability - Adding Schweppervescence
 
Do you have a website? Do you want to get sued?
Do you have a website?  Do you want to get sued?Do you have a website?  Do you want to get sued?
Do you have a website? Do you want to get sued?
 
Web Disigning
Web DisigningWeb Disigning
Web Disigning
 
Accessible Web Sites: What can you do?
Accessible Web Sites: What can you do?Accessible Web Sites: What can you do?
Accessible Web Sites: What can you do?
 

More from Sur College of Applied Sciences (10)

Lecture11 A Image
Lecture11 A ImageLecture11 A Image
Lecture11 A Image
 
Lecture 11 B Security
Lecture 11 B SecurityLecture 11 B Security
Lecture 11 B Security
 
Lecture 10 Image Format
Lecture 10  Image FormatLecture 10  Image Format
Lecture 10 Image Format
 
Lecture 8 Video
Lecture 8 VideoLecture 8 Video
Lecture 8 Video
 
Lecture 5 XML
Lecture 5  XMLLecture 5  XML
Lecture 5 XML
 
Lecture2 CSS 2
Lecture2  CSS 2Lecture2  CSS 2
Lecture2 CSS 2
 
Lecture2 CSS 3
Lecture2   CSS 3Lecture2   CSS 3
Lecture2 CSS 3
 
Lecture2 CSS1
Lecture2  CSS1Lecture2  CSS1
Lecture2 CSS1
 
Navigation1 A
Navigation1 ANavigation1 A
Navigation1 A
 
Lecture 3 Javascript1
Lecture 3  Javascript1Lecture 3  Javascript1
Lecture 3 Javascript1
 

Recently uploaded

A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...Marc Dusseiller Dusjagr
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Krashi Coaching
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon AUnboundStockton
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...M56BOOKSTORE PRODUCT/SERVICE
 
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppURLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppCeline George
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfsanyamsingh5019
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Educationpboyjonauth
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptxVS Mahajan Coaching Centre
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionSafetyChain Software
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsanshu789521
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 

Recently uploaded (20)

A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
 
URLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website AppURLs and Routing in the Odoo 17 Website App
URLs and Routing in the Odoo 17 Website App
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory Inspection
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha elections
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 

Accessibility Usability Professional Summry

  • 1. Lecture 9: Usability , Accessibility & professional practices SFDV2001 Web Development
  • 2. What is usability? Why should we care about usability? Because if you don’t people won’t want to use your site. Remember there are millions of other web sites to use and they are all just a few clicks away. Usability is a quality used to refer to an interface’s ease of use. Usability is about ensuring that something you create is usable. Usable not by you, but by the intended audience. Usability is about enhancing the experience for all users.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13. Colour Blindness test 25 45 29 56 6 8 5
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19. What are professional practices? Making a web page isn't hard - anybody can get something on the web. Making quality web pages requires skill, requires a professional. Some professional practices are things that by law you should conform to. Others are the things that distinguish your work from that of an amateur. We expect professionals to possess significant skills, that they produce work of a quality not obtainable by an amateur and that their knowledge is significant.
  • 20. Web browsers will display any old rubbish.
  • 21.
  • 22.
  • 23. Use tabs to indent the different levels of your code: <table> <tr> <td> <p>Content</p> </td> </tr> </table> Code Layout Layout your code in a way that makes it easy to read. In the lab Taco will do this for you (with various degrees of success). You can, of course, alter Taco's attempt or forgo the automatic option altogether and do it manually.
  • 24.
  • 25. Fonts If you specify a specific font face, you should always provide a suitable generic font family name too: <font face=&quot;arial, sans-serif &quot;> font-family: courier, monospace Images Use correct width and height specifications. Resize your images with graphic editing software not with your HTML code. Use good alt values - descriptive sentences. alt=&quot;Percy the cat.&quot; alt=&quot;Giraffe in hiking gear.&quot;
  • 26. Image size and the web Dialup (56k modem) = 56 kilo bits per second, not kilobytes! 56 kilobits = 7 kilobytes per second. So, a single 32KB image will take at least 4.5 seconds. &quot;Broadband&quot; starts at 256 kilobits (32KB per second) maximum. 1 megabit (1024 kilobits) broadband = 128KB per second max.
  • 27.
  • 28.
  • 29. Don’t forget the text in your <title> , alt , etc. Use a spell checker to help, but don’t rely on it alone. Spelling and grammar Nothing suggests a sloppy attitude quite like failing to take the time to proof read the content of your pages.
  • 30. Testing Check and double-check that all your links work. Before and after you upload to your web server. Test on every browser and operating system you can get your hands on. Test with different connection speeds. Test on different screen resolutions. Test on different monitor types. Usability testing.
  • 31. Involvement Keep up with what’s new in the field. There is always something to learn. For web development, one of the best way to stay current is to participate in and read the many quality web-based publications in the profession. A List Apart ( http://alistapart.com/ ) Digital Web Magazine ( http://www.digital-web.com/ ) Style Gala ( http://www.stylegala.com/ ) Mailing Lists: W3C ( http://www.w3.org/Mail/ )
  • 32. Recommended sites: Dey Alexander (user experience design specialist) http://www.deyalexander.com/ Jakob Nielsen’s website http://www.useit.com/ Vincent Flanders’ Web Pages That Suck http://www.webpagesthatsuck.com/ The Web Standards Project: http://www.webstandards.org/ Further reading: Don’t Make Me Think by Steve Krug Web Bloopers by Jeff Johnson

Editor's Notes

  1. Project 1 (and project 2) application of these concepts is very Important.
  2. Rules for personal sites are generally laxer but if you are working on something purely for your use, why publish it on the web? The act of placing something on the web invites an audience. Personal web sites can be read by potential employers. Commercial sites need to care about usability most - their viability relies on their ability to attract customers. Clubs and societies may have a reasonably limited audience and may wish to tailor their content to members.
  3. Tip: Hold your breath while you page loads.
  4. What’s the point of putting content on the web? To inform To advertise something To sell something To display your artistic ability To mislead
  5. Provide on/off controls for music.
  6. Show aboutsct.html as an example of a poor choice.
  7. Clicker Q 1
  8. Show sites if time.