A short presentation on usable web development practices for #ExperienceSharing event. https://www.facebook.com/events/359469267397962/

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