Front-end Designand Best Practicesby Mario Hernandez. California Central                  1
Agenda• State of the web in the Courts• HTML & CSS best practices• The markup• My design process• Tools & Resources       ...
State of the web in the Courts   • Very little emphasis in standards and     design in general (Windows & Web)   • Little ...
<html /> best practices• Use lower case when naming your html elements• Use DIVs to divide your layout• Separate content f...
#css { } best practices• Use lower case when writing your css• Use shorthand as much as possible• Keep an organized hierar...
The Markup    6
<div id=”container”>         <div id=”header”>          header content goes here         </div>         <div id=”navigatio...
#container            #header           #navigation            #preface#content                 #sidebar             #foot...
9
My design process        10
Tools & resources        11
Tools• Firebug• Web Developer Toolbox• YSlow• Delicious• CSS Compressor• Adobe Browser Lab• Lorem Lipsum• Lorem Pixum     12
Books• Designing with Web Standards  by Jeffrey Zeldman (3rd edition)• HTML5 for Web Designers  Jeremy Keith• CSS3 for Web...
Other online resources• Read blogs (Six Revisions, Smashing  Magazine)• WebStandards.org• W3c.org                     14
Twitter• @zeldman• @jasonsantamaria• @meyerweb• @aaron• @chrisspooner• @smashingmag                     15
A design collaboration       forum?          16
“Design for where the web is going, not for where it         has been”             17
Contact me• mario_hernandez@cacd.uscourts.gov• Twitter: @designsdrive• Download slides from:  http://www.slideshare.net/ma...
Upcoming SlideShare
Loading in …5
×

Front end-design and best practices

1,657 views
1,544 views

Published on

Front-end design and best practices

Published in: Design, Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,657
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Front end-design and best practices

    1. 1. Front-end Designand Best Practicesby Mario Hernandez. California Central 1
    2. 2. Agenda• State of the web in the Courts• HTML & CSS best practices• The markup• My design process• Tools & Resources 2
    3. 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. 4. <html /> best practices• Use lower case when naming your html elements• Use DIVs to divide your layout• 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. 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 (IE hacks) 5
    6. 6. The Markup 6
    7. 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. 8. #container #header #navigation #preface#content #sidebar #footer 8
    9. 9. 9
    10. 10. My design process 10
    11. 11. Tools & resources 11
    12. 12. Tools• Firebug• Web Developer Toolbox• YSlow• Delicious• CSS Compressor• Adobe Browser Lab• Lorem Lipsum• Lorem Pixum 12
    13. 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. 14. Other online resources• Read blogs (Six Revisions, Smashing Magazine)• WebStandards.org• W3c.org 14
    15. 15. Twitter• @zeldman• @jasonsantamaria• @meyerweb• @aaron• @chrisspooner• @smashingmag 15
    16. 16. A design collaboration forum? 16
    17. 17. “Design for where the web is going, not for where it has been” 17
    18. 18. Contact me• mario_hernandez@cacd.uscourts.gov• Twitter: @designsdrive• Download slides from: http://www.slideshare.net/marequi/front- enddesign-and-best-practices 18

    ×