The document provides guidance on preparing comps for collaboration and handoff. It discusses including details like intended devices, frameworks used, fonts, graphic assets, interactions and links. Designers are advised to include notes, labels, avoid flattening layers and provide context to help others interpret the comp. Basic HTML concepts of block and inline elements are covered as well as CSS techniques like floats and positioning. Additional topics touched on include images, sprites, fonts, interactions using jQuery, new technologies like responsive design and retina displays.

1. Comps into Pages 101
www.refresh-hilo.org

2. Comp readiness checklist
● What are the intended devices?
○ Desktop, Tablet, Mobile
● Built with framework?
○ Column sizes, UI elements, Form elements
● Fonts?
○ Device or Web fonts
● Graphic Assets
○ Layered Comp, Correct Canvas Size

3. Comp readiness checklist
● Interactions?
○ Examples, details… good time to have a
conversation with designer
● Links?
○ Where the F$*& does this link go?

4. Designers Note
Good information on how to prep a file for
collaboration and/or handoff
http://www.dtelepathy.com/blog/design/25-best-
practices-collaborative-work-photoshop
● Notes help always
● Labels and groupings
● Don’t flatten layers

5. Interpreting
the Comp

6. Start with the basics
HTML : block and inline
CSS : floats and position
http://learnlayout.com/

7. HTML : Blocks and Inline
Block Level Elements - width defined by parent
and height by content (default - no css). Main
building blocks are block level.
Inline Elements - width and height define
space, often used to define blocks of text.

8. HTML : Blocks and Inline
Block level elements
build the structure
similar to lego blocks.
Adding more blocks
gives more detailed
control, but can get
bloated. Find balance.

9. CSS : Floats & Position
Floats
● Not Magic
● Always Clear
Position
● Fixed - I am staying right
here no matter what
● Absolute - I’m going to
hang out over here
● Relative - Can you hold
my place in line?

10. Comp into blocks
Boxes inside
boxes inside
boxes….

11. Comp into blocks
Boxes inside
boxes inside
boxes….

12. Images
Embedded images - <img> should be used if
related to content. Has alt attribute to help
define.
Background images - visual storytelling only,
have no document value.

13. Images - Sprites
Great for lowing page requests - easy to do and
don’t require a bunch of tags anymore.
.block div:before {
content: ‘’;
}

14. Fonts & Web Fonts
Subject too large to cover - but here is a start:
http://vitamintalent.com/vitabites/all-you-ever-
wanted-to-know-about-web-fonts-but-were-
afraid-to-ask

15. Interactions
jQuery - handles most of your basic actions
● Click
● Hover
● Change
CSS3 Transitions - new awesome but bleeding
edge

16. New Tech
Responsive (Media Query)
Retina Display
Mobile First - http://zurb.com/word/mobile-first