HTML: Facilitating User's Life

12
<HTML> Facilitating User’s Life Improving Web User Experience with Web Standards Miguel López C.E.O. Symbia IT: www.symbiait.com Blog: www.augurarte.com

description

Easy tips to success in HTML design (with standards!)

Transcript of HTML: Facilitating User's Life

Page 1: HTML: Facilitating User's Life

<HTML>Facilitating User’s Life

Improving Web User Experience with Web Standards

Miguel LópezC.E.O.

Symbia IT: www.symbiait.com Blog: www.augurarte.com

Page 2: HTML: Facilitating User's Life

< html >

Page 3: HTML: Facilitating User's Life

< Web Standards Matters >

< Good Practices >

Page 4: HTML: Facilitating User's Life

< Expression Web ><Visual Studio 2010><Internet Explorer 9>

Page 5: HTML: Facilitating User's Life

< More people/users use>< MultiPlatform/Devices >< Better user experience >< Less cost -more benefits >

Page 6: HTML: Facilitating User's Life

Bad use of Web Standards174 tables84 <br>

245 <img>60 <font>

116 Kb filesize

Page 7: HTML: Facilitating User's Life

< Less people use>< No Multi Platform>< Bad user experience >< Loosing money! >

Page 8: HTML: Facilitating User's Life

The solutionWORDS • structure

PICTURES • presentation

CODE • behavior

(X)HTML

CSS, XSLT

ECMAScript

Page 9: HTML: Facilitating User's Life

Magic? transformations…

< t a b l e > 174 1< b r > 8 4 7< i m g > 24 5 15< f o n t > 6 0 0Filesize 1 15 Kb 18 Kb

Page 10: HTML: Facilitating User's Life

Microsoft Expression Web is your friendUse a DOCTYPE!Structure <> Presentation <> BehaviorUse tags semantically

Easy tipsValid (X)HTML

Valid CSSCorrect use of JavaScript

Page 11: HTML: Facilitating User's Life

Summing up<Web Standards Matters>• More users use applications• Multiple platforms / devices• Better user experience• Quick Return Of Investment (ROI)

<Follow Good Practices>• Separate HTML/CSS/JavaScript• Use DOCTYPE• Expression Web | VS2010

Page 12: HTML: Facilitating User's Life

<h1>

</h1>