This was the presentation I gave at Adobe MAX 2008 in San Francisco.

1. Designing Effective
CSS & HTML
Websites in Fireworks
Adobe MAX Conference - San Francisco, CA - November 18, 2008

2. Hi. I’m Nathan Smith, a designer and
front-end developer at Viewzi.com

3. Today I’d like
to talk to you
about using
Fireworks to
design HTML
and CSS sites.
But first, let me
ask you this...

4. Do standards
really ma er?

8. Apple’s Me.com

9. What is the
de nition of
a standard?

10. Standard: “Something
considered by an authority
or by general consent as a
basis of comparison; an
approved model.”
— Dictionary.com

11. Ajaxian.com word frequency
(via Wordle.net)

12. “
Standards exist for the benefit
of the web worker almost more
so than the end user, and by
following the best practices set
forth by the best people in our
industry, we ensure we are
equipping ourselves with a
versatile skill-set which we can
take into any environment.
— Mike Davidson Newsvine founder
http://www.mikeindustries.com/blog/archive/2004/06/march-to-your-own-standard

16. When it comes to standards,
it’s all about the distribution.
(non-metric countries)
United States - Liberia - Myanmar

17. Flash is a de facto standard
Mozilla holds a Guinness World Record for the most
software downloaded in 24 hours. On June 17, 2008
approximately 8 million people downloaded Firefox 3.
“In July 2008, successful downloads averaged
about 33 million per day, and successful installs
averaged around 18 million per day.”
— Emmy Huang Adobe Product Mgr
http://tinyurl.com/flash-stats

19. Macro vs. Micro Semantics
– Correct tags – ID, class names
– Accessibility – Microformats
– Attribute usage – Machine code
– Search Engines – HTML / XHTML
http://flickr.com/photos/leoffreitas/332360959/ http://flickr.com/photos/kennysarmy/2493464978/

20. Web Design
Work- ow

21. Enterprise Corporations
– Stakeholders preview centralized PNGs
– Smaller file-size, storage goes further
– Maintain lower total cost of ownership
Agencies & Small Teams
– Rapidly move from prototype to design
– Test out FW PNGs directly in a browser
– Easily export PDF overviews for clients
Freelance Web Designers
– Integrate with multiple document types
– Display PNG comps via HTML mockups
– Less time spent switching between apps

22. “
As a general rule of thumb,
anything that can read JPG or
GIF files will usually support
PNG as well. Unlike the PSD
format used by Photoshop, PNG
files are readable by a variety of
freely available applications,
including the most important:
web browsers.
— Nathan Smith Front-End Developer
http://www.adobe.com/devnet/fireworks/articles/enterprise_it.html

23. Rough Wireframes
High Detail Design
http://www.bartelme.at/journal/archive/flow_wallpaper

24. App Integration

25. FW now looks akin to its CS4 siblings
CS3 CS4

26. Cra ing
Interfaces

27. Visual Style Corporate
Guidelines Branding
HTML
CSS

28. Prototype form elements in Win/Mac

29. Create a vector based drawing
9-slicing
Example

30. Convert vector group to symbol

31. Use 9-slicing on symbol
Preserves the outer
corners and edges

32. Resize element without distortion
Widescreen!

33. The align Especially
panel is for doing
useful for animated
all sorts “Web 2.0”
of shapes Ajax GIFs

34. #rating_widget_hate,
#rating_widget_dislike,
CSS
#rating_widget_ok,
#rating_widget_like,
#rating_widget_love {
background: url(../img/faces.gif) no-repeat;
}
Sprites
#rating_widget_hate {
background-position: -250px 5px;
}
#rating_widget_hate:hover {
background-position: 0 5px;
}
#rating_widget_dislike {
background-position: -300px 5px;
}
#rating_widget_dislike:hover {
background-position: -50px 5px;
}
#rating_widget_ok {
background-position: -350px 5px;
}
#rating_widget_ok:hover {
background-position: -100px 5px;
}
#rating_widget_like {
background-position: -400px 5px;
}
#rating_widget_like:hover {
background-position: -150px 5px;
}
#rating_widget_love {
background-position: -450px 5px;
}
#rating_widget_love:hover {
background-position: -200px 5px;
}

35. Use grid guides to keep
items arranged properly

38. Slice + optimize
all your images

39. Image export is a time saver
More efficient than cropping

40. PDF export is quite handy
Great for client feedback

41. Export code with caution
Prototyping, not production

42. Code automation is okay, in moderation
http://flickr.com/photos/polvero/2656367141/

43. Front–End
Frameworks

44. Bene ts of Frameworks
•Consistent coding style.
• Increases maintainability.
• Rapidly prototype ideas.
• Improvements made to core.
• Not re-inventing the wheel.

45. www.960.gs

46. “Embrace Constraints”
css
– Mark Kraemer
All modern monitors support at
least 1024×768 pixel resolution.
960 is divisible by 2, 3, 4, 5, 6,
8, 10, 12, 15, 16, 20, 24, 30, 32,
40, 48, 60, 64, 80, 96, 120, 160,
192, 240, 320 and 480.

47. The 960 Grid System is an effort to streamline
web development by providing commonly used
dimensions, based on a width of 960 pixels.
There are two variants: 12 and 16 columns,
which can be used separately or in tandem.

48. The basis of the grid is ideally suited to rapid
prototyping, but it would work equally well
for workflow in a production environment.
There are printable sketch sheets, Photoshop
and Fireworks templates, and a CSS framework
that contain identical column measurements.

49. Inspiration: Khoi Vinh

50. Inspiration: Cameron Moll

51. Inspiration: Olav Bjørkøy

52. Inspiration: Brandon Schauer

53. The 12 column grid is divided into portions
that are 60 pixels wide, whereas the 16
column grid consists 40 pixel increments.
Each column has 10 pixels of margin to either
side, which stack to create gutters that are
20 pixels wide between each of the columns.

54. <div class="container_12">
<div class="grid_7 prefix_1">
<div class="grid_2 alpha">
...
</div>
<div class="grid_3">
...
</div>
<div class="grid_2 omega">
...
</div>
</div>
<div class="grid_3 suffix_1">
...
</div>
</div>

55. 12 column grid measurements

56. 16 column grid measurements

61. If today’s topic was JavaScript, I’d push...

62. Summation of Presentation
•FW = ideal for web design.
•Plays well with Adobe apps.
•Great for rapid prototyping.
•Efficiently export images.
•Write good code by hand.
•Homework: check out jQuery.

63. That’s a wrap. Keep in touch!
sonspring.com
twitter.com/nathansmith