Adobe MAX 2008: HTML/CSS + Fireworks

Adobe MAX Conference - San Francisco, CA - November 18, 2008

Designing EffectiveCSS & HTMLWebsites in Fireworks

Hi. I’m Nathan Smith, a designer andfront-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 standardsreally ma"er?

Apple’s Me.com

What is the de!nition ofa standard?

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

— Dictionary.com

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 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

When it comes to standards,it’s all about the distribution.

(non-metric countries)

United States - Liberia - Myanmar

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

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

Web DesignWork-!ow

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

“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

http://www.bartelme.at/journal/archive/flow_wallpaper

Rough Wireframes

High Detail Design

App Integration

FW now looks akin to its CS4 siblings

CS3 CS4

Cra"ingInterfaces

CorporateBranding

Visual StyleGuidelines

HTMLCSS

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 panel is useful for all sorts of shapes

Especially for doinganimated “Web 2.0” Ajax GIFs

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;}

Use grid guides to keepitems arranged properly

Slice + optimizeall your images

Image export is a time saver

More efficient than cropping

PDF export is quite handy

Great for client feedback

Prototyping, not production

Export code with caution

Code automation is okay, in moderation

http://flickr.com/photos/polvero/2656367141/

Front–EndFrameworks

•Consistent coding style.

•Increases maintainability.

•Rapidly prototype ideas.

•Improvements made to core.

•Not re-inventing the wheel.

Bene#ts of Frameworks

www.960.gs

“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

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.

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.

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 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.

<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>

12 column grid measurements

16 column grid measurements

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

•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

sonspring.comtwitter.com/nathansmith

That’s a wrap. Keep in touch!