Stepping into Usable Web

2,549 views

Published on

A short presentation on usable web development practices for #ExperienceSharing event.

https://www.facebook.com/events/359469267397962/

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,549
On SlideShare
0
From Embeds
0
Number of Embeds
1,030
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Stepping into Usable Web

  1. 1. Stepping into Usable Web by Shajed EvanFriday, 27 January 12
  2. 2. Website is not only a frame of images, links or texts anymore! A website should so usable not only for it’s visitors but also for machines too!Friday, 27 January 12
  3. 3. What did you just said? Website usable for machines? What you been DRINKING?Friday, 27 January 12
  4. 4. OK WAIT!!!!!!! What elements a website really consists of?Friday, 27 January 12
  5. 5. Possible Elements we usually used to see • Texts • Links of other pages or websites • Images • Videos • AudioFriday, 27 January 12
  6. 6. Are we missing something?Friday, 27 January 12
  7. 7. Sure you have missed, YOU IDIOT!!! ★Flash Animation ★JavaScript games ★Colour ★Animated GIF ★Mouse pointersFriday, 27 January 12
  8. 8. Those Games or Flash animations are just an interactive form of visual or audio anyway!Friday, 27 January 12
  9. 9. Enough! Get into the business now!Friday, 27 January 12
  10. 10. Usable Web 1. Concentrate on User Goal 2. Develop Information Architecture 3. Make an Effective, Readable UI and accessible UI 4. Semantic Markups 5. Need for Speed 6. Make it social make it SE friendlyFriday, 27 January 12
  11. 11. User First! • Who will be visiting the website? • What do you want them to do? • What they will accomplish in your site?Friday, 27 January 12
  12. 12. Become an Architect! • Content (List of all possible contents) • Site Map Diagram (Page structure) • Wireframes • Prototypes (Screen Design) http://www.usabilityfirst.com/about-usability/information- architecture/Friday, 27 January 12
  13. 13. User Interface? • Converting wireframe and prototypes into final design format • Design for devices • Design for accessibility • Design for usability • Design for ExperienceFriday, 27 January 12
  14. 14. Semantic it • Your markup should not be alien codes • Readable for devices • Meaningful • Understandable • Device and robot friendly http://diveintohtml5.info/semantics.htmlFriday, 27 January 12
  15. 15. Speed & Performance • A single second delay can loose you thousand of $$$$ • Don’t overload your website • Use less HTTP calls • Use modern techniques • Load progressively http://www.bookofspeed.com/ http://www.smashingmagazine.com/learning-css3-useful-reference-guide/Friday, 27 January 12
  16. 16. Using Rich Tags • Microdata • SchemaFriday, 27 January 12
  17. 17. Example • https://github.com/smedevelopers/ SendMode-Web-Template • http://cl.ly/3f3g2V0O33371G3n0I1l • http://sendmode.com Use Firebug to see the differences on codes and resourcesFriday, 27 January 12
  18. 18. That’s all folks :DDD twitter: http://twitter.com/evanshajed on 27th January 2012 @ExperienceSharing eventFriday, 27 January 12

×