4. Prototyping
• Photoshop mock-ups are an approximation
of a web page.
• Wireframes are boring.
5. Prototyping
• Photoshop mock-ups are an approximation
of a web page.
• Wireframes are boring.
• Designers who develop have all the power.
6. Prototyping
• Photoshop mock-ups are an approximation
of a web page.
• Wireframes are boring.
• Designers who develop have all the power.
• Mock-ups are just guesses.
8. Haml
Haml takes your gross, ugly templates and
replaces them with veritable Haiku.
9. Haml
Haml takes your gross, ugly templates and
replaces them with veritable Haiku.
<div id="content"> #content
<h1 class="big_header">My Cat's Web Page</h1> %h1.big_header My Cat's Web Page
<p> %p
<img src="/images/mittens.jpg" align="right"/> %img(src="/images/mittens.jpg" align="right")
Say hello to Mittens! Say hello to Mittens!
</p> #sidebar
</div> %h2 Mittens' Favourite Food
<div id="sidebar"> %ul
<h2>Mittens' Favourite Food</h2> %li Meow Mix
<ul> %li Rodents
<li>Meow Mix</li> %li Grass
<li>Rodents</li>
<li>Grass</li>
</ul>
</div>
10. Haml
#content
• Elements always start with % %h1.big_header My Cat's Web Page
%p
• Classes and IDs use CSS syntax %img(src="/images/mittens.jpg" align="right")
Say hello to Mittens!
#sidebar
• Classes and IDs not used on elements %h2 Mittens' Favourite Food
%ul
are assumed to be DIVs %li Meow Mix
%li Rodents
%li Grass
• Elements are nested with indentation -
no closing tags!
• You can use HTML tags
• Any line not started with something is
just plain text.
14. Sass
!bright_blue = #00aeff
• No semicolons or brackets
=list_defaults
• All properties on one line margin: 0
padding: 0
list-style: none
• Nests selectors for scoping
#content
h1.big_header
• Allows use of variables, mixins, and font-size: 1.6em
color: = !bright_blue
other advanced features for DRY code
ul.navigation
+list_defaults
• Easy syntax for referencing parent li
display: inline
selectors margin-right: 0
&.last
margin: 0
• Support for Sass partials
15. Haml & Sass: Best Practices
• Organize your Sass.
• Use classes on <body> to identify pages.
• Use descriptive Class and ID names.
• Use semantic Classes and HTML.
• Donʼt over identify - scope instead.
• Hacks are OK.
• Start with barebones HTML.
- Photoshop isn&#x2019;t an ideal tool for prototyping
- Fonts don&#x2019;t look right, it only shows one state forcing you to make many pages - extra work sucks
- Managing feedback and revisions is a nightmare - editing multiple files for the same change
- Wireframes are good for quickly sketching out ideas internally among team members
- Stakeholders often don&#x2019;t understand wireframes
- Stakeholders get more excited playing with the real thing
- Designers who develop have total control
- The more people your design goes through, the more it can go wrong - developers don&#x2019;t pay attention to things like margins and grids
- Prototyping allows developers and copywriters to be involved early in the process - no waiting around for you to get approval
- Be involved in the entire process - refine and improve your work as things change
- Plans are just guesses that take a long time
- Do a quick design to get you going then dive into code
- Make changes as feedback is given and new information comes to light
Organize - Keep number of stylesheets to a minimum, group sections together, keep properties consistent
Names - don&#x2019;t use shortforms
Sematics - describe content, not appearance. HTML - use appropriate tags to describe content, not appearance i.e. <strong> vs <b>
