0
Designing Effective
CSS & HTML
Websites in Fireworks
Adobe MAX Conference - San Francisco, CA - November 18, 2008
Hi. I’m Nathan Smith, a designer and
 front-end developer at Viewzi.com
Today I’d like
to talk to you
about using
Fireworks to
design HTML
and CSS sites.

But first, let me
ask you this...
Do standards
really ma er?
Apple’s Me.com
What is the
de nition of
a standard?
Standard: “Something
considered by an authority
or by general consent as a
basis of comparison; an
approved model.”
      ...
Ajaxian.com word frequency




     (via Wordle.net)
“
    Standards exist for the benefit
    of the web worker almost more
    so than the end user, and by
    following the...
When it comes to standards,
it’s all about the distribution.




           (non-metric countries)


   United States - Li...
Flash is a de facto standard
Mozilla holds a Guinness World Record for the most
software downloaded in 24 hours. On June 1...
Macro vs. Micro Semantics


 –   Correct tags                                   –   ID, class names
 –   Accessibility    ...
Web Design
Work- ow
Enterprise Corporations

– Stakeholders preview centralized PNGs
– Smaller file-size, storage goes further
– Maintain lowe...
“
As a general rule of thumb,
anything that can read JPG or
GIF files will usually support
PNG as well. Unlike the PSD
for...
Rough Wireframes




High Detail Design
         http://www.bartelme.at/journal/archive/flow_wallpaper
App Integration
FW now looks akin to its CS4 siblings




             CS3                   CS4
Cra ing
Interfaces
Visual Style          Corporate
 Guidelines           Branding




               HTML
                CSS
Prototype form elements in Win/Mac
Create a vector based drawing




      9-slicing
      Example
Convert vector group to symbol
Use 9-slicing on symbol




  Preserves the outer
  corners and edges
Resize element without distortion




    Widescreen!
The align    Especially
panel is     for doing
useful for   animated
all sorts    “Web 2.0”
of shapes    Ajax GIFs
#rating_widget_hate,
          #rating_widget_dislike,



CSS
          #rating_widget_ok,
          #rating_widget_like,
...
Use grid guides to keep
items arranged properly
Slice + optimize
all your images
Image export is a time saver




More efficient than cropping
PDF export is quite handy




Great for client feedback
Export code with caution




Prototyping, not production
Code automation is okay, in moderation




http://flickr.com/photos/polvero/2656367141/
Front–End
Frameworks
Bene ts of Frameworks
•Consistent coding style.
• Increases maintainability.
• Rapidly prototype ideas.
• Improvements mad...
www.960.gs
“Embrace Constraints”
css
      – Mark Kraemer

      All modern monitors support at
      least 1024×768 pixel resolution...
The 960 Grid System is an effort to streamline
web development by providing commonly used
dimensions, based on a width of ...
The basis of the grid is ideally suited to rapid
prototyping, but it would work equally well
for workflow in a production ...
Inspiration: Khoi Vinh
Inspiration: Cameron Moll
Inspiration: Olav Bjørkøy
Inspiration: Brandon Schauer
The 12 column grid is divided into portions
that are 60 pixels wide, whereas the 16
column grid consists 40 pixel incremen...
<div class="container_12">
    <div class="grid_7 prefix_1">
        <div class="grid_2 alpha">
            ...
        </...
12 column grid measurements
16 column grid measurements
If today’s topic was JavaScript, I’d push...
Summation of Presentation
•FW = ideal for web design.
•Plays well with Adobe apps.
•Great for rapid prototyping.
•Efficien...
That’s a wrap. Keep in touch!
        sonspring.com
        twitter.com/nathansmith
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Upcoming SlideShare
Loading in...5
×

Adobe MAX 2008: HTML/CSS + Fireworks

3,350

Published on

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

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,350
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
116
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Adobe MAX 2008: HTML/CSS + Fireworks"

  1. 1. Designing Effective CSS & HTML Websites in Fireworks Adobe MAX Conference - San Francisco, CA - November 18, 2008
  2. 2. Hi. I’m Nathan Smith, a designer and front-end developer at Viewzi.com
  3. 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. 4. Do standards really ma er?
  5. 5. Apple’s Me.com
  6. 6. What is the de nition of a standard?
  7. 7. Standard: “Something considered by an authority or by general consent as a basis of comparison; an approved model.” — Dictionary.com
  8. 8. Ajaxian.com word frequency (via Wordle.net)
  9. 9. “ 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
  10. 10. When it comes to standards, it’s all about the distribution. (non-metric countries) United States - Liberia - Myanmar
  11. 11. 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
  12. 12. 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/
  13. 13. Web Design Work- ow
  14. 14. 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
  15. 15. “ 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
  16. 16. Rough Wireframes High Detail Design http://www.bartelme.at/journal/archive/flow_wallpaper
  17. 17. App Integration
  18. 18. FW now looks akin to its CS4 siblings CS3 CS4
  19. 19. Cra ing Interfaces
  20. 20. Visual Style Corporate Guidelines Branding HTML CSS
  21. 21. Prototype form elements in Win/Mac
  22. 22. Create a vector based drawing 9-slicing Example
  23. 23. Convert vector group to symbol
  24. 24. Use 9-slicing on symbol Preserves the outer corners and edges
  25. 25. Resize element without distortion Widescreen!
  26. 26. The align Especially panel is for doing useful for animated all sorts “Web 2.0” of shapes Ajax GIFs
  27. 27. #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; }
  28. 28. Use grid guides to keep items arranged properly
  29. 29. Slice + optimize all your images
  30. 30. Image export is a time saver More efficient than cropping
  31. 31. PDF export is quite handy Great for client feedback
  32. 32. Export code with caution Prototyping, not production
  33. 33. Code automation is okay, in moderation http://flickr.com/photos/polvero/2656367141/
  34. 34. Front–End Frameworks
  35. 35. Bene ts of Frameworks •Consistent coding style. • Increases maintainability. • Rapidly prototype ideas. • Improvements made to core. • Not re-inventing the wheel.
  36. 36. www.960.gs
  37. 37. “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.
  38. 38. 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.
  39. 39. 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.
  40. 40. Inspiration: Khoi Vinh
  41. 41. Inspiration: Cameron Moll
  42. 42. Inspiration: Olav Bjørkøy
  43. 43. Inspiration: Brandon Schauer
  44. 44. 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.
  45. 45. <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>
  46. 46. 12 column grid measurements
  47. 47. 16 column grid measurements
  48. 48. If today’s topic was JavaScript, I’d push...
  49. 49. 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.
  50. 50. That’s a wrap. Keep in touch! sonspring.com twitter.com/nathansmith
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×