Download - Adobe MAX 2008: HTML/CSS + Fireworks
![Page 1: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/1.jpg)
Adobe MAX Conference - San Francisco, CA - November 18, 2008
Designing EffectiveCSS & HTMLWebsites in Fireworks
![Page 2: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/2.jpg)
Hi. I’m Nathan Smith, a designer andfront-end developer at Viewzi.com
![Page 3: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/3.jpg)
Today I’d like to talk to you about using Fireworks to design HTML and CSS sites.
But first, let me ask you this...
![Page 4: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/4.jpg)
Do standardsreally ma"er?
![Page 5: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/5.jpg)
![Page 6: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/6.jpg)
![Page 7: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/7.jpg)
![Page 8: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/8.jpg)
Apple’s Me.com
![Page 9: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/9.jpg)
What is the de!nition ofa standard?
![Page 10: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/10.jpg)
Standard: “Something considered by an authority or by general consent as a basis of comparison; an approved model.”
— Dictionary.com
![Page 11: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/11.jpg)
Ajaxian.com word frequency
(via Wordle.net)
![Page 12: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/12.jpg)
“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
![Page 13: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/13.jpg)
![Page 14: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/14.jpg)
![Page 15: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/15.jpg)
![Page 16: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/16.jpg)
When it comes to standards,it’s all about the distribution.
(non-metric countries)
United States - Liberia - Myanmar
![Page 17: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/17.jpg)
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
Flash is a de facto standard
http://tinyurl.com/flash-stats
![Page 18: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/18.jpg)
![Page 19: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/19.jpg)
Macro vs. Micro Semantics
http://flickr.com/photos/leoffreitas/332360959/ http://flickr.com/photos/kennysarmy/2493464978/
– ID, class names– Microformats– Machine code– HTML / XHTML
– Correct tags– Accessibility– Attribute usage– Search Engines
![Page 20: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/20.jpg)
Web DesignWork-!ow
![Page 21: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/21.jpg)
Enterprise Corporations
Agencies & Small Teams
Freelance Web Designers
– Stakeholders preview centralized PNGs
– Smaller file-size, storage goes further
– Maintain lower total cost of ownership
– Rapidly move from prototype to design
– Test out FW PNGs directly in a browser
– Easily export PDF overviews for clients
– Integrate with multiple document types
– Display PNG comps via HTML mockups
– Less time spent switching between apps
![Page 22: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/22.jpg)
“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
![Page 23: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/23.jpg)
http://www.bartelme.at/journal/archive/flow_wallpaper
Rough Wireframes
High Detail Design
![Page 24: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/24.jpg)
App Integration
![Page 25: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/25.jpg)
FW now looks akin to its CS4 siblings
CS3 CS4
![Page 26: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/26.jpg)
Cra"ingInterfaces
![Page 27: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/27.jpg)
CorporateBranding
Visual StyleGuidelines
HTMLCSS
![Page 28: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/28.jpg)
Prototype form elements in Win/Mac
![Page 29: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/29.jpg)
Create a vector based drawing
9-slicing Example
![Page 30: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/30.jpg)
Convert vector group to symbol
![Page 31: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/31.jpg)
Use 9-slicing on symbol
Preserves the outer corners and edges
![Page 32: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/32.jpg)
Resize element without distortion
Widescreen!
![Page 33: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/33.jpg)
The align panel is useful for all sorts of shapes
Especially for doinganimated “Web 2.0” Ajax GIFs
![Page 34: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/34.jpg)
CSSSprites
#rating_widget_hate,#rating_widget_dislike,#rating_widget_ok,#rating_widget_like,#rating_widget_love { background: url(../img/faces.gif) no-repeat;}
#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;}
![Page 35: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/35.jpg)
Use grid guides to keepitems arranged properly
![Page 36: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/36.jpg)
![Page 37: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/37.jpg)
![Page 38: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/38.jpg)
Slice + optimizeall your images
![Page 39: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/39.jpg)
Image export is a time saver
More efficient than cropping
![Page 40: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/40.jpg)
PDF export is quite handy
Great for client feedback
![Page 41: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/41.jpg)
Prototyping, not production
Export code with caution
![Page 42: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/42.jpg)
Code automation is okay, in moderation
http://flickr.com/photos/polvero/2656367141/
![Page 43: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/43.jpg)
Front–EndFrameworks
![Page 44: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/44.jpg)
•Consistent coding style.
•Increases maintainability.
•Rapidly prototype ideas.
•Improvements made to core.
•Not re-inventing the wheel.
Bene#ts of Frameworks
![Page 46: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/46.jpg)
“Embrace Constraints”– 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.
css
![Page 47: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/47.jpg)
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.
![Page 48: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/48.jpg)
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.
![Page 49: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/49.jpg)
Inspiration: Khoi Vinh
![Page 50: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/50.jpg)
Inspiration: Cameron Moll
![Page 51: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/51.jpg)
Inspiration: Olav Bjørkøy
![Page 52: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/52.jpg)
Inspiration: Brandon Schauer
![Page 53: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/53.jpg)
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.
![Page 54: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/54.jpg)
<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>
![Page 55: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/55.jpg)
12 column grid measurements
![Page 56: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/56.jpg)
16 column grid measurements
![Page 57: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/57.jpg)
![Page 58: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/58.jpg)
![Page 59: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/59.jpg)
![Page 60: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/60.jpg)
![Page 61: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/61.jpg)
If today’s topic was JavaScript, I’d push...
![Page 62: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/62.jpg)
•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.
Summation of Presentation
![Page 63: Adobe MAX 2008: HTML/CSS + Fireworks](https://reader034.vdocuments.us/reader034/viewer/2022042607/54c7f7414a79594f2e8b4592/html5/thumbnails/63.jpg)
sonspring.comtwitter.com/nathansmith
That’s a wrap. Keep in touch!