Comps into pages 101
Download as PPTX, PDF1 like485 views
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.
Comps into pages 101
- 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
- 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