Front end-design and best practices
Upcoming SlideShare
Loading in...5
×
 

Front end-design and best practices

on

  • 1,561 views

Front-end design and best practices

Front-end design and best practices

Statistics

Views

Total Views
1,561
Views on SlideShare
1,561
Embed Views
0

Actions

Likes
1
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Front end-design and best practices Presentation Transcript

  • 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 2
  • 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
  • <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
  • #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
  • The Markup 6
  • <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
  • #container #header #navigation #preface#content #sidebar #footer 8
  • 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 Designers Dan Cederholm• Handcrafted CSS Dan Cederhols & Ethan Marcotte 13
  • 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/marequi/front- enddesign-and-best-practices 18