the PSD:

Thinking Through

Your Code

Rye Mason


Think through your code

(and your PSD, too)


Because it doesn't

make sense to

write code you

don't actually need.


Question the designs you make and the markup you write.






How is content related?

What is an element, or could it be?

Where would the element go in the document flow?

Why is the element there? What does it contribute?

Determine the

appropriate markup



  • Used for header content
  • Should contain more than just a heading
  • Can have more than one instance (e.g. nested in
    a section, article, etc.)


  • Contains footer content like nav & copyright info
  • Like header, can have multiple instances on a page


  • Used to mark up navigation
  • Headings can be included inside this element


  • Used to group distinct sections of content
  • Don't use solely as a styling hook
  • If the content can stand alone, use <article> instead


  • Used to contain individual pieces of content,
    like a blog post 
  • If something could stand alone, use an article


  • Used to contain secondary content related
    to the main content
  • Is not necessarily a sidebar
  • When used inside <article>, <aside>'s
    information should be directly related
    to that article (as a glossary, etc.)


  • Yes, it's still usable.
  • Use a div when there's no better element
    for grouping content - usually for styling


  • Meant to be paired with <figcaption>
    to mark up images, diagrams, code, etc.
    with an accompanying caption
  • Don't use it as license to throw <figure>
    around all your <img>s, though

Make it Code

  • Slice the graphics you need (use CSS
    where you can)
  • Mark up your HTML
  • Style using CSS

Take it Further

How would you turn an apartment building into code?

How would you code a mailbox? 

Keep Going

after the psd

By ryenotbread

after the psd

  • 465
Loading comments...