Your SlideShare is downloading. ×
Stepping into Usable Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Stepping into Usable Web

1,864
views

Published on

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

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
1,864
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Stepping into Usable Web by Shajed EvanFriday, 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 • AudioFriday, 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 pointersFriday, 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 friendlyFriday, 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 ExperienceFriday, 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.htmlFriday, 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 • SchemaFriday, 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 resourcesFriday, 27 January 12
  • 18. That’s all folks :DDD twitter: http://twitter.com/evanshajed on 27th January 2012 @ExperienceSharing eventFriday, 27 January 12