Stepping into Usable Web

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

The slider was divided into six main sections.

- Concentrate on User Goal
- Develop Information Architecture
- Make an Effective, Readable UI and accessible UI
- Semantic Markups
- Need for Speed (The Book)
- Make it social make it SE friendly

Transcript

1. Stepping into Usable Web by Shajed Evan Friday, 27 January 12
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. What did you just said? Website usable for machines? What you been DRINKING? Friday, 27 January 12
4. OK WAIT!!!!!!! What elements a website really consists of? Friday, 27 January 12
5. Possible Elements we usually used to see • Texts • Links of other pages or websites • Images • Videos • Audio Friday, 27 January 12
6. Are we missing something? Friday, 27 January 12
7. Sure you have missed, YOU IDIOT!!! ★Flash Animation ★JavaScript games ★Colour ★Animated GIF ★Mouse pointers Friday, 27 January 12
8. Those Games or Flash animations are just an interactive form of visual or audio anyway! Friday, 27 January 12
9. Enough! Get into the business now! Friday, 27 January 12
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 friendly Friday, 27 January 12
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. 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. User Interface? • Converting wireframe and prototypes into final design format • Design for devices • Design for accessibility • Design for usability • Design for Experience Friday, 27 January 12
14. Semantic it • Your markup should not be alien codes • Readable for devices • Meaningful • Understandable • Device and robot friendly http://diveintohtml5.info/semantics.html Friday, 27 January 12
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. Using Rich Tags • Microdata • Schema Friday, 27 January 12
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 resources Friday, 27 January 12
18. That’s all folks :DDD twitter: http://twitter.com/evanshajed on 27th January 2012 @ExperienceSharing event Friday, 27 January 12