Front end-design and best practices
•Transferir como KEY, PDF•
2 gostaram•1,298 visualizações
Front-end design and best practices
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Front end-design and best practices
Semelhante a Front end-design and best practices (20)
Mais de Mario Hernandez
Mais de Mario Hernandez (14)
Último
Último (20)
Front end-design and best practices
- 1. Front-end Design and Best Practices by Mario Hernandez. California Central 1
- 2. Agenda • State of the web in the Courts • HTML & CSS best practices • The markup • My design process • Tools & Resources 2
- 3. State of the web in the Courts • Very little emphasis in standards and design in general (Windows & Web) • Little to no emphasis on usability and accessibility (Section 508 & Plain Language Bill) • Lack of best practices 3
- 4. <html /> best practices • Use lower case when naming your html elements • Use DIVs to divide your layout • Use ALT attributes with images • Separate content from presentation (no inline styling) • Use well structured code (will demo) • Use proper semantic (will demo) • Use heading elements wisely (h1, h2, h3, etc) 4
- 5. #css { } best practices • Use lower case when writing your css • Use shorthand as much as possible • Keep an organized hierarchy when composing your css (top to bottom) • Always use a reset.css file • Order your css files properly • Use conditional css files when possible <!--[if IE 7]> <link rel="stylesheet" href="css/ie-7.css" media="all"><![endif]--> 5
- 6. The Markup 6
- 7. <div id=”container”> <div id=”header”> header content goes here </div> <div id=”navigation”> navigation content goes here </div> <div id=”preface”> preface content goes here </div> <div id=”content”> main content goes here </div> <div id=”sidebar”> sidebar content goes here </div> <div id=”footer”> footer goes here </div> </div> 7
- 8. #container #header #navigation #preface #content #sidebar #footer 8
- 9. 9
- 10. My design process 10
- 11. Tools & resources 11
- 12. Tools • Firebug • Web Developer Toolbox • YSlow • Delicious • CSS Compressor • Adobe Browser Lab • Lorem Lipsum • Lorem Pixum 12
- 13. Books • Designing with Web Standards by Jeffrey Zeldman (3rd edition) • HTML5 for Web Designers Jeremy Keith • CSS3 for Web Designers Dan Cederholm • Handcrafted CSS Dan Cederhols & Ethan Marcotte 13
- 14. Other online resources • Read blogs (Six Revisions, Smashing Magazine) • WebStandards.org • W3c.org 14
- 15. Twitter • @zeldman • @jasonsantamaria • @meyerweb • @aaron • @chrisspooner • @smashingmag 15
- 16. A design collaboration forum? 16
- 17. “Design for where the web is going, not for where it has been” 17
- 18. Contact me • mario_hernandez@cacd.uscourts.gov • Twitter: @designsdrive • Download slides from: http://www.slideshare.net/marequi/front- enddesign-and-best-practices 18
Notas do Editor
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n