SlideShare a Scribd company logo
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?

Recommended for you

CSS in React
CSS in ReactCSS in React
CSS in React

This document discusses different approaches for using CSS in React applications. It begins by outlining some of the issues with plain CSS, including lack of encapsulation and global namespace pollution. It then examines different methodologies for organizing CSS, including OOCSS, BEM, and SUIT CSS. Next, it covers pre/post-processors like Sass, LESS, and PostCSS. The document dives into examples of implementing styles in React using inline styles, CSS modules, Radium, and Styled Components. For each approach, it highlights the syntax and notes advantages and limitations. Finally, it closes with a brief look at emerging technologies that may impact future CSS practices.

babelreact-css-modulessass
Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework

Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web. How to use bootstrap, a framework for web design

websiteresponsiveweb design
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. What are CSS grids and media queries, how do they work and how integrate these in my APEX application design? These are the questions I want to answer during my presentation, build an example explication using Theme 25, the responsive theme provided in Oracle Application Express 4.2.

oracleresponsive web designogh
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Apple’s Me.com

Recommended for you

Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3

CSS3 isn't the future, it's the present. Learn the gamut of CSS3 properties from colors, web fonts, and visual effects, to transitions, animations and media queries. Find the inspiration and resources to go forth and implement the new properties with confidence.

browsersfront end developmentcoding
Responsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNN

DNN is an excellent platform for a responsive website, but its important to know the ''Do's'' and ''Don'ts'' when designing responsively. This presentation will cover all things responsive: from wireframes and mockups, to media queries and javascript snippets. Get valuable tips on how to create a responsive site following modern web standards, while harnessing the power of the DNN framework. Learn how to design and plan your site, develop layouts with a fluid grid, and test to ensure your site looks great on tons of devices!

web designdotnetnukeresponsive web design
Designing an Enterprise CSS Framework is Hard, Stephanie Rewis
Designing an Enterprise CSS Framework is Hard, Stephanie RewisDesigning an Enterprise CSS Framework is Hard, Stephanie Rewis
Designing an Enterprise CSS Framework is Hard, Stephanie Rewis

Taken from the Future of Web Design, San Francisco 2015 Conference. https://futureofwebdesign.com/san-francisco-2015/ It seems that not a week goes by without a shiny new framework of some type — be it CSS or JS. But no matter how awesome they are, each have shortcomings and idiosyncrasies that invariably make you ask, 'Why?' Now imagine someone gave you the ability to start from scratch to create your own framework. No strings. No preconceptions — well, except that it has to be enterprise scale, platform agnostic, and work in a whole host of disparate situations. In this session, Stephanie will talk about some of the challenges, hurdles, tradeoffs, and unique decisions Salesforce UX made on the way to building an enterprise framework.

frameworkweb designux
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.”
             — 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

Recommended for you

Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs

This presentation will give you an overview of the application of Responsive Web Designed. Obviously a live presentation would show you the application in Action

alcerofranco baosharepoint
Test-proof CSS
Test-proof CSSTest-proof CSS
Test-proof CSS

This document discusses different tools for testing CSS including CSSLint for syntax checking, ResembleJS for regression testing layouts, UnCSS for removing unused selectors, and StyleStats for analyzing CSS statistics. It explains how each tool works and recommends which tools to use based on the size and complexity of projects, considering objectives, budgets, and development priorities. CSSLint and UnCSS are recommended for smaller projects while CSSLint, ResembleJS, UnCSS, and StyleStats are suggested for larger, more complex projects.

cssnodejsfront-end
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3

This document summarizes different vector graphic options for use on the web. It discusses the differences between vector and raster graphics, and why vectors are preferable for resolution independence and smaller file sizes. It then examines SVG, Canvas, VML, and CSS3 as vector graphic options, outlining browser support, APIs, and common uses for each. While SVG is ideal theoretically, browser support is still limited, so libraries like SVG Web and Raphael.js are recommended to abstract cross-browser differences. In the end, SVG is generally better than Canvas for interactive graphics with events, while Canvas may be better for full-screen animations and games.

html5svgcanvas
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
When it comes to standards,
it’s all about the distribution.




           (non-metric countries)


   United States - Liberia - Myanmar

Recommended for you

Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applications

The talk it's about how failure is an occasion to learn scalability in CSS development and how your knowledge can be shared with the rest of the team.

style-guideteamcss
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)

In today's internet scenario responsive websites are the most popular way of putting a website in worldwide web, as this a form in which your website can be seen in multiple devices without any problem. In this slide we tried to explain step by step processes in responsive website design.

responsive web design
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design

Responsive web design is an approach to web design that makes web pages render well on a variety of devices and screen sizes. It uses flexible grids and layouts, flexible images and media queries. Media queries allow the page styling to adapt to different screen sizes and resolutions by applying different CSS styles. A responsive web design uses a flexible grid system, flexible images and media, and media queries to automatically adjust for different screen sizes and devices.

media querieshtml5responsive web design
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
Adobe MAX 2008: HTML/CSS + Fireworks
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/
Web Design
Work- ow

Recommended for you

How to develop a CSS Framework
How to develop a CSS FrameworkHow to develop a CSS Framework
How to develop a CSS Framework

The document discusses steps for developing a CSS framework, including defining layout rules, framework files, resets, grids and units, forms, tables, and generic classes. The framework is designed to be easily reusable, have a short source code, increase productivity, and decrease bugs. Key steps involve defining the layout, grids and units, resets, typography, forms and tables, and generic classes through separate CSS files.

frameworkcss
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation

html & css powerpoint slide show for presentation. Here, basic concept of css using with html. a webpage decorated by css. HTML- Hyper text markup language. CSS- Cascading Style sheet.

presentationscsshtml5
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS

Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.

cascadingstylesheetie7
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
“
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
Rough Wireframes




High Detail Design
         http://www.bartelme.at/journal/archive/flow_wallpaper
App Integration

Recommended for you

Bootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress MeetupBootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress Meetup

This document provides an overview and examples of Bootstrap, an open-source front-end framework for building responsive mobile-first websites and web apps. It discusses what Bootstrap is, the pre-built HTML and CSS components it contains, how to use its grid system including different screen sizes, and provides examples of websites built with Bootstrap. The speaker is Woratana Ngarmtrakulchol, a front-end developer and founder of Designil.com who is interested in topics like WordPress, front-end development, and web design.

wordpressbootstrapbangkok
Pemrograman Web 4 - Bootstrap 3
Pemrograman Web 4 - Bootstrap 3Pemrograman Web 4 - Bootstrap 3
Pemrograman Web 4 - Bootstrap 3

This document provides an overview of Bootstrap, a popular CSS framework. It discusses including Bootstrap via a CDN or by downloading files. It covers Bootstrap containers, grids for layouts using rows and columns, responsive typography styles, and common components like buttons, navigation bars, dropdown menus, and more. Setup and basic usage of these Bootstrap features are demonstrated with code examples.

bootstrapcssdesign
What's New in Adobe Fireworks Cs5
What's New in Adobe Fireworks Cs5 What's New in Adobe Fireworks Cs5
What's New in Adobe Fireworks Cs5

Latest update on Adobe Fireworks CS5

fireworksadobe
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

Recommended for you

Basics of JSON (JavaScript Object Notation) with examples
Basics of JSON (JavaScript Object Notation) with examplesBasics of JSON (JavaScript Object Notation) with examples
Basics of JSON (JavaScript Object Notation) with examples

This presentation deals with every possible topics under JSON (JavaScript Object Notation) which every web developers should know. It is presented by Rajasekhar who works at United Online as a Web Developer

jsonjson basicsxml
Slides on Wimax
Slides on Wimax Slides on Wimax
Slides on Wimax

WiMAX (802.16e) is a wireless technology that provides broadband internet access over long distances. It can provide speeds up to 40 Mbps for fixed access and 1 Gbps for updated versions. The document discusses the history and standards of 802.16/WiMAX, how a WiMAX network is architected, and technical details such as OFDMA and mobility support. WiMAX aims to wirelessly connect entire cities to high-speed broadband internet.

wimaxwireless networkwireless
VietRees_Newsletter_35_Tuan2_Thang06
VietRees_Newsletter_35_Tuan2_Thang06VietRees_Newsletter_35_Tuan2_Thang06
VietRees_Newsletter_35_Tuan2_Thang06
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!

Recommended for you

Animoto
AnimotoAnimoto
Animoto

Animoto is a video creation service that analyzes uploaded photos and music to automatically generate unique videos each time. Founded by producers and musicians seeking to bridge amateur and professional video production, Animoto uses artificial intelligence technology to synchronize photos with music. Users simply select their photos and music, and Animoto produces a video that can be shared online or downloaded.

Web2 0-SOA InterAct2008
Web2 0-SOA InterAct2008Web2 0-SOA InterAct2008
Web2 0-SOA InterAct2008

The document discusses Web 2.0 and service-oriented architecture (SOA). It provides examples of Web 2.0 concepts given by Tim O'Reilly and lists some common Web 2.0 patterns like tagging, mashups, and software as a service. The document also presents a reference architecture for Web 2.0 applications and discusses how SOA and service-oriented clients relate to Web 2.0. It identifies some potential anti-patterns for SOA and Web 2.0 applications.

web2.02.0web
Personal Digital Archives Development
Personal Digital Archives DevelopmentPersonal Digital Archives Development
Personal Digital Archives Development

This is a full paper version of "Personal Digital Archives Development" that i have presented in international conference "Archiving Culture in the Digital Age" hosted by Princess Maha Chakri Sirindhorn Anthropology Centre , Thailand during 6-7 August 2009. เอกสารนี้เป็นบทความฉบับเต็มเรื่อง "การจัดทำจดหมายเหตุดิจิทัลส่วนบุคคล" ที่ผมนำเสนอแนวคิดในการประยุกต์ใช้เครือข่ายอินเทอร์เน็ตและเครือข่ายสังคมในการพัฒนาคลังจดหมายเหตุดิจิทัลส่วนบุคคล เพื่อการจัดเก็บ จัดการ เชื่อมโยง แลกเปลี่ยน และเผยแพร่องค์ความรู้สู่สาธารณะ

newdigitizationsocial
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,
          #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;
          }
Use grid guides to keep
items arranged properly
Adobe MAX 2008: HTML/CSS + Fireworks

Recommended for you

Meet Clumsy
Meet ClumsyMeet Clumsy
Meet Clumsy

Clumsy is a new font that other designers are enjoying using for their projects. It can be downloaded from the website clumsy.kylesteed.com. The font Clumsy is available for download along with links shared by other designers who are using and enjoying the font in their work.

Etec 442 Timeline Kanesa4
Etec 442 Timeline Kanesa4Etec 442 Timeline Kanesa4
Etec 442 Timeline Kanesa4

The document provides a personal timeline of the author's experiences with educational technology from kindergarten through college. It describes the technologies used at different stages of her education, from felt boards and calculators in elementary school to computers, software programs, and the internet in high school and college. The author expresses her vision for incorporating more modern technologies like smart boards, microscopes connected to computers, and online resources into her future classroom.

Blue Eye
Blue EyeBlue Eye
Blue Eye

Blue eye is a personal area network intended to monitor and record an operator's brain and physiological condition to avoid disasters caused by human error. It consists of sensors to collect physiological data, a microcontroller to process the data, and a central system unit with connection manager and data analysis modules. The system analyzes sensor data in real-time to monitor an operator's condition and detect any alarm conditions.

Adobe MAX 2008: HTML/CSS + Fireworks
Slice + optimize
all your images
Image export is a time saver




More efficient than cropping
PDF export is quite handy




Great for client feedback

Recommended for you

VietRees_Newsletter_43_Tuan2_Thang08
VietRees_Newsletter_43_Tuan2_Thang08VietRees_Newsletter_43_Tuan2_Thang08
VietRees_Newsletter_43_Tuan2_Thang08
Wszczecinie Prezentacja
Wszczecinie PrezentacjaWszczecinie Prezentacja
Wszczecinie Prezentacja
Web Design
Web DesignWeb Design
Web Design

The document outlines initial objectives and improvements for a company website, including introducing strong branding, clear navigation, and high quality imagery. It discusses differentiating the site by providing additional online features for customers like an online stock checker and product purchase options. The document also covers making the content more robust by regularly updating business and industry blogs and articles, and optimizing the site structure and content for search engines.

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 made to core.
• Not re-inventing the wheel.

Recommended for you

Final Union Presentation Ntc Curriculum Devel And Delivery
Final Union Presentation Ntc Curriculum Devel And DeliveryFinal Union Presentation Ntc Curriculum Devel And Delivery
Final Union Presentation Ntc Curriculum Devel And Delivery

The document outlines NTC's curriculum development and delivery format, which is performance-based. It includes external standards, program outcomes, competencies, performance standards, learning objectives, and varied instructional and assessment activities. Curriculum components like the course outcome summary, performance standards, and performance assessment tasks (PATs) work together to ensure students can demonstrate competency mastery. Instructors prepare students for PATs through learning plans and assessments.

How’S Your Memory
How’S Your MemoryHow’S Your Memory
How’S Your Memory

The document describes a person's favorite memories from childhood, including playing with a Barbie princess toy, eating chocolate cake, listening to Britney music, and watching the TV show Rebelde. It also lists common childhood topics like home, family, food, friends, toys, school, and vacation.

Quintada Regaliera
Quintada RegalieraQuintada Regaliera
Quintada Regaliera

Quinta da Regaleira is a historic estate located in Sintra, Portugal, about 30 minutes from Lisbon. Built in the early 20th century, the 4-hectare estate was the result of the owner's mystical dreams and designed by architect Luigi Manini. The architecture incorporates Roman, Gothic, Renaissance, and Manueline styles. The grounds include a palace, ornate gardens, lakes, grottoes, and buildings believed to contain symbols related to subjects like alchemy, mythology, and astrology.

www.960.gs
“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.
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.

Recommended for you

Lights camera action orlando - october 2015 -slide upload
Lights camera action   orlando - october 2015 -slide uploadLights camera action   orlando - october 2015 -slide upload
Lights camera action orlando - october 2015 -slide upload

Video affords a wide variety of options for enhancing teaching and learning. Explore options for developing and using videos in your classroom. Presented at Online Learning Consortium International Conference - October 2015 - Orlando, FL

engage learnershigher educationfaculty support
VietRees_Newsletter_34_Tuan1_Thang06
VietRees_Newsletter_34_Tuan1_Thang06VietRees_Newsletter_34_Tuan1_Thang06
VietRees_Newsletter_34_Tuan1_Thang06
VietRees_Newsletter_54_Week4_Month10_Year08
VietRees_Newsletter_54_Week4_Month10_Year08VietRees_Newsletter_54_Week4_Month10_Year08
VietRees_Newsletter_54_Week4_Month10_Year08

www.hoangquan.com.vn Hung Thinh - www.hungthinh.com.vn Hanoi Coteccons - www.coteccons.com.vn Hanoi Vietland - www.vietland.com.vn Hoa Binh - www.hoabinhcorporation.com An Gia - www.angia.com.vn Dai Phuc - www.daiphuc.com.vn HUD - www.hud.com.vn Dat Xanh - www.datxanh.com.vn Dai Phuoc - www.daiphuoc.com.vn

Inspiration: Khoi Vinh
Inspiration: Cameron Moll
Inspiration: Olav Bjørkøy
Inspiration: Brandon Schauer

Recommended for you

VietRees_Newsletter_56_Tuan1_Thang11
VietRees_Newsletter_56_Tuan1_Thang11VietRees_Newsletter_56_Tuan1_Thang11
VietRees_Newsletter_56_Tuan1_Thang11
MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentation

This document discusses the benefits of using grid-based web design. It provides a brief history of grid design and influential designers like Emil Ruder and Josef Müller-Brockmann. Grids offer benefits to designers, developers, and content authors by providing structure and consistency. A case study of redesigning the Indianapolis Museum of Art's website using a grid is presented. Tools for implementing grids are also reviewed. The document argues that grids will remain a relevant design approach as new devices emerge.

gridsmuseums and the webmw2011
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript

- HTML, CSS, and JavaScript are becoming the new standard for building applications and interactive experiences on the web. - Best practices include using semantic HTML, clean CSS with a focus on maintainability, and JavaScript performance optimizations. - Key techniques discussed are image sprites, progressive enhancement, and jQuery selector chaining to reduce DOM lookups.

htmlficss
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

Recommended for you

Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3

This document discusses using CSS3 to create effective and efficient web designs. It provides an overview of CSS3 modules and capabilities like gradients, shadows, rounded corners. The benefits of CSS3 include decreased development time, improved performance through reduced file sizes and requests, and increased accessibility. A real-world example shows how CSS3 can reduce loading times versus images. Media queries allow responsive designs for different devices. The document encourages progressive enhancement and using stable CSS3 features now to improve user experience.

web designefficiencycss
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS

The document discusses organizing CSS for maintainability and readability. It recommends dividing CSS into separate style sheets for different media types, rule types, or site sections. Within style sheets, related rules should be indented and grouped with comments. Declarations should be formatted consistently, either each on its own line or all on one line. Class and ID names should be meaningful. Informational comments can provide context. The goal is to structure CSS so it is easily understood by anyone viewing it.

web designcssweb development
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...

Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks

Recommended for you

Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques

Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

cssweb design and developmentresponsive
Real-world CSS3
Real-world CSS3Real-world CSS3
Real-world CSS3

The document discusses using CSS3 in real-world projects. It recommends using stable CSS3 features that don't break without support, like border-radius, box-shadow, and multiple backgrounds. CSS3 can reduce development time through fewer images and HTTP requests. Media queries allow responsive designs for different devices. Features like gradients, transforms and animations can be used but require more testing. The document provides examples of CSS3 for navigation tabs, columns, and badges.

web designcssmedia queries
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive Design

This document introduces responsive design and discusses how to build websites flexibly for different screen sizes and devices. It answers common questions about responsive design, advocates flexibility over adapting to specific devices, and provides tips on content optimization, legacy browser support, responsive tools, and following a responsive design process.

valtechresponsive designmobile
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.
•Efficiently export images.
•Write good code by hand.
•Homework: check out jQuery.
That’s a wrap. Keep in touch!
        sonspring.com
        twitter.com/nathansmith

More Related Content

What's hot

Next Steps in Responsive Design
Next Steps in Responsive DesignNext Steps in Responsive Design
Next Steps in Responsive Design
Justin Avery
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
Chris Love
 
Roll Your Own CSS Framework
Roll Your Own CSS FrameworkRoll Your Own CSS Framework
Roll Your Own CSS Framework
Mike Aparicio
 
CSS in React
CSS in ReactCSS in React
CSS in React
Joe Seifi
 
Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework
Yaowaluck Promdee
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Christian Rokitta
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
Denise Jacobs
 
Responsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNN
gravityworksdd
 
Designing an Enterprise CSS Framework is Hard, Stephanie Rewis
Designing an Enterprise CSS Framework is Hard, Stephanie RewisDesigning an Enterprise CSS Framework is Hard, Stephanie Rewis
Designing an Enterprise CSS Framework is Hard, Stephanie Rewis
Future Insights
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
SEGIC
 
Test-proof CSS
Test-proof CSSTest-proof CSS
Test-proof CSS
Vittorio Vittori
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
Pascal Rettig
 
Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applications
Vittorio Vittori
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
admecindia1
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Justin Avery
 
How to develop a CSS Framework
How to develop a CSS FrameworkHow to develop a CSS Framework
How to develop a CSS Framework
Olivier Besson
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
joilrahat
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS
Russ Weakley
 
Bootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress MeetupBootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress Meetup
Woratana Perth Ngarmtrakulchol
 
Pemrograman Web 4 - Bootstrap 3
Pemrograman Web 4 - Bootstrap 3Pemrograman Web 4 - Bootstrap 3
Pemrograman Web 4 - Bootstrap 3
Nur Fadli Utomo
 

What's hot (20)

Next Steps in Responsive Design
Next Steps in Responsive DesignNext Steps in Responsive Design
Next Steps in Responsive Design
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
Roll Your Own CSS Framework
Roll Your Own CSS FrameworkRoll Your Own CSS Framework
Roll Your Own CSS Framework
 
CSS in React
CSS in ReactCSS in React
CSS in React
 
Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
Responsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNN
 
Designing an Enterprise CSS Framework is Hard, Stephanie Rewis
Designing an Enterprise CSS Framework is Hard, Stephanie RewisDesigning an Enterprise CSS Framework is Hard, Stephanie Rewis
Designing an Enterprise CSS Framework is Hard, Stephanie Rewis
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
 
Test-proof CSS
Test-proof CSSTest-proof CSS
Test-proof CSS
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
 
Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applications
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
How to develop a CSS Framework
How to develop a CSS FrameworkHow to develop a CSS Framework
How to develop a CSS Framework
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS
 
Bootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress MeetupBootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress Meetup
 
Pemrograman Web 4 - Bootstrap 3
Pemrograman Web 4 - Bootstrap 3Pemrograman Web 4 - Bootstrap 3
Pemrograman Web 4 - Bootstrap 3
 

Viewers also liked

What's New in Adobe Fireworks Cs5
What's New in Adobe Fireworks Cs5 What's New in Adobe Fireworks Cs5
What's New in Adobe Fireworks Cs5
linus_lim
 
Basics of JSON (JavaScript Object Notation) with examples
Basics of JSON (JavaScript Object Notation) with examplesBasics of JSON (JavaScript Object Notation) with examples
Basics of JSON (JavaScript Object Notation) with examples
Sanjeev Kumar Jaiswal
 
Slides on Wimax
Slides on Wimax Slides on Wimax
Slides on Wimax
Sanjeev Kumar Jaiswal
 
VietRees_Newsletter_35_Tuan2_Thang06
VietRees_Newsletter_35_Tuan2_Thang06VietRees_Newsletter_35_Tuan2_Thang06
VietRees_Newsletter_35_Tuan2_Thang06
internationalvr
 
Animoto
AnimotoAnimoto
Animoto
dboling
 
Web2 0-SOA InterAct2008
Web2 0-SOA InterAct2008Web2 0-SOA InterAct2008
Web2 0-SOA InterAct2008
guest1fb6e4
 
Personal Digital Archives Development
Personal Digital Archives DevelopmentPersonal Digital Archives Development
Personal Digital Archives Development
Rachabodin Suwannakanthi
 
Meet Clumsy
Meet ClumsyMeet Clumsy
Meet Clumsy
Nathan Smith
 
Etec 442 Timeline Kanesa4
Etec 442 Timeline Kanesa4Etec 442 Timeline Kanesa4
Etec 442 Timeline Kanesa4
kanesa
 
Blue Eye
Blue EyeBlue Eye
VietRees_Newsletter_43_Tuan2_Thang08
VietRees_Newsletter_43_Tuan2_Thang08VietRees_Newsletter_43_Tuan2_Thang08
VietRees_Newsletter_43_Tuan2_Thang08
internationalvr
 
Wszczecinie Prezentacja
Wszczecinie PrezentacjaWszczecinie Prezentacja
Wszczecinie Prezentacja
budyn86
 
Web Design
Web DesignWeb Design
Web Design
karlo
 
Final Union Presentation Ntc Curriculum Devel And Delivery
Final Union Presentation Ntc Curriculum Devel And DeliveryFinal Union Presentation Ntc Curriculum Devel And Delivery
Final Union Presentation Ntc Curriculum Devel And Delivery
Steve Kashdan
 
How’S Your Memory
How’S Your MemoryHow’S Your Memory
How’S Your Memory
Vivianna Andrade
 
Quintada Regaliera
Quintada RegalieraQuintada Regaliera
Quintada Regaliera
rauluis
 
Lights camera action orlando - october 2015 -slide upload
Lights camera action   orlando - october 2015 -slide uploadLights camera action   orlando - october 2015 -slide upload
Lights camera action orlando - october 2015 -slide upload
tsmeans
 
VietRees_Newsletter_34_Tuan1_Thang06
VietRees_Newsletter_34_Tuan1_Thang06VietRees_Newsletter_34_Tuan1_Thang06
VietRees_Newsletter_34_Tuan1_Thang06
internationalvr
 
VietRees_Newsletter_54_Week4_Month10_Year08
VietRees_Newsletter_54_Week4_Month10_Year08VietRees_Newsletter_54_Week4_Month10_Year08
VietRees_Newsletter_54_Week4_Month10_Year08
internationalvr
 
VietRees_Newsletter_56_Tuan1_Thang11
VietRees_Newsletter_56_Tuan1_Thang11VietRees_Newsletter_56_Tuan1_Thang11
VietRees_Newsletter_56_Tuan1_Thang11
internationalvr
 

Viewers also liked (20)

What's New in Adobe Fireworks Cs5
What's New in Adobe Fireworks Cs5 What's New in Adobe Fireworks Cs5
What's New in Adobe Fireworks Cs5
 
Basics of JSON (JavaScript Object Notation) with examples
Basics of JSON (JavaScript Object Notation) with examplesBasics of JSON (JavaScript Object Notation) with examples
Basics of JSON (JavaScript Object Notation) with examples
 
Slides on Wimax
Slides on Wimax Slides on Wimax
Slides on Wimax
 
VietRees_Newsletter_35_Tuan2_Thang06
VietRees_Newsletter_35_Tuan2_Thang06VietRees_Newsletter_35_Tuan2_Thang06
VietRees_Newsletter_35_Tuan2_Thang06
 
Animoto
AnimotoAnimoto
Animoto
 
Web2 0-SOA InterAct2008
Web2 0-SOA InterAct2008Web2 0-SOA InterAct2008
Web2 0-SOA InterAct2008
 
Personal Digital Archives Development
Personal Digital Archives DevelopmentPersonal Digital Archives Development
Personal Digital Archives Development
 
Meet Clumsy
Meet ClumsyMeet Clumsy
Meet Clumsy
 
Etec 442 Timeline Kanesa4
Etec 442 Timeline Kanesa4Etec 442 Timeline Kanesa4
Etec 442 Timeline Kanesa4
 
Blue Eye
Blue EyeBlue Eye
Blue Eye
 
VietRees_Newsletter_43_Tuan2_Thang08
VietRees_Newsletter_43_Tuan2_Thang08VietRees_Newsletter_43_Tuan2_Thang08
VietRees_Newsletter_43_Tuan2_Thang08
 
Wszczecinie Prezentacja
Wszczecinie PrezentacjaWszczecinie Prezentacja
Wszczecinie Prezentacja
 
Web Design
Web DesignWeb Design
Web Design
 
Final Union Presentation Ntc Curriculum Devel And Delivery
Final Union Presentation Ntc Curriculum Devel And DeliveryFinal Union Presentation Ntc Curriculum Devel And Delivery
Final Union Presentation Ntc Curriculum Devel And Delivery
 
How’S Your Memory
How’S Your MemoryHow’S Your Memory
How’S Your Memory
 
Quintada Regaliera
Quintada RegalieraQuintada Regaliera
Quintada Regaliera
 
Lights camera action orlando - october 2015 -slide upload
Lights camera action   orlando - october 2015 -slide uploadLights camera action   orlando - october 2015 -slide upload
Lights camera action orlando - october 2015 -slide upload
 
VietRees_Newsletter_34_Tuan1_Thang06
VietRees_Newsletter_34_Tuan1_Thang06VietRees_Newsletter_34_Tuan1_Thang06
VietRees_Newsletter_34_Tuan1_Thang06
 
VietRees_Newsletter_54_Week4_Month10_Year08
VietRees_Newsletter_54_Week4_Month10_Year08VietRees_Newsletter_54_Week4_Month10_Year08
VietRees_Newsletter_54_Week4_Month10_Year08
 
VietRees_Newsletter_56_Tuan1_Thang11
VietRees_Newsletter_56_Tuan1_Thang11VietRees_Newsletter_56_Tuan1_Thang11
VietRees_Newsletter_56_Tuan1_Thang11
 

Similar to Adobe MAX 2008: HTML/CSS + Fireworks

MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentation
Charlie Moad
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
David Lindkvist
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3
Zoe Gillenwater
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
Yandex
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Real-world CSS3
Real-world CSS3Real-world CSS3
Real-world CSS3
Zoe Gillenwater
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive Design
Valtech UK
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
Denise Jacobs
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
Wojtek Zając
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
David Manock
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
Larson Software Technology
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
Vera Kovaleva
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
GaziAhsan
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Ben MacNeill
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
mikeleeme
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
Brian Moon
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
Mike Wilcox
 
Wp responsive-theme-framework
Wp responsive-theme-frameworkWp responsive-theme-framework
Wp responsive-theme-framework
Damien Oh
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
Mario Noble
 

Similar to Adobe MAX 2008: HTML/CSS + Fireworks (20)

MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentation
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Real-world CSS3
Real-world CSS3Real-world CSS3
Real-world CSS3
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive Design
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Wp responsive-theme-framework
Wp responsive-theme-frameworkWp responsive-theme-framework
Wp responsive-theme-framework
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
 

More from Nathan Smith

Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with React
Nathan Smith
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
Nathan Smith
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with Serve
Nathan Smith
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive Design
Nathan Smith
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile Apps
Nathan Smith
 
Red Dirt JS
Red Dirt JSRed Dirt JS
Red Dirt JS
Nathan Smith
 
Refresh OKC
Refresh OKCRefresh OKC
Refresh OKC
Nathan Smith
 
DrupalCon jQuery
DrupalCon jQueryDrupalCon jQuery
DrupalCon jQuery
Nathan Smith
 
DSVC Design Talk
DSVC Design TalkDSVC Design Talk
DSVC Design Talk
Nathan Smith
 
Think Vitamin CSS
Think Vitamin CSSThink Vitamin CSS
Think Vitamin CSS
Nathan Smith
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
Nathan Smith
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid Theming
Nathan Smith
 
Urban Leadership Slides
Urban Leadership SlidesUrban Leadership Slides
Urban Leadership Slides
Nathan Smith
 
Themes from Ascent of a Leader
Themes from Ascent of a LeaderThemes from Ascent of a Leader
Themes from Ascent of a Leader
Nathan Smith
 
7 Storey Mountain
7 Storey Mountain7 Storey Mountain
7 Storey Mountain
Nathan Smith
 
Marketing 450 Guest Lecture
Marketing 450 Guest LectureMarketing 450 Guest Lecture
Marketing 450 Guest Lecture
Nathan Smith
 
Fundamental Design Principles
Fundamental Design PrinciplesFundamental Design Principles
Fundamental Design Principles
Nathan Smith
 
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentStriking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
Nathan Smith
 
Echo Conference 2008
Echo Conference 2008Echo Conference 2008
Echo Conference 2008
Nathan Smith
 
Bible Tech 2008
Bible Tech 2008Bible Tech 2008
Bible Tech 2008
Nathan Smith
 

More from Nathan Smith (20)

Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with React
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with Serve
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive Design
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile Apps
 
Red Dirt JS
Red Dirt JSRed Dirt JS
Red Dirt JS
 
Refresh OKC
Refresh OKCRefresh OKC
Refresh OKC
 
DrupalCon jQuery
DrupalCon jQueryDrupalCon jQuery
DrupalCon jQuery
 
DSVC Design Talk
DSVC Design TalkDSVC Design Talk
DSVC Design Talk
 
Think Vitamin CSS
Think Vitamin CSSThink Vitamin CSS
Think Vitamin CSS
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid Theming
 
Urban Leadership Slides
Urban Leadership SlidesUrban Leadership Slides
Urban Leadership Slides
 
Themes from Ascent of a Leader
Themes from Ascent of a LeaderThemes from Ascent of a Leader
Themes from Ascent of a Leader
 
7 Storey Mountain
7 Storey Mountain7 Storey Mountain
7 Storey Mountain
 
Marketing 450 Guest Lecture
Marketing 450 Guest LectureMarketing 450 Guest Lecture
Marketing 450 Guest Lecture
 
Fundamental Design Principles
Fundamental Design PrinciplesFundamental Design Principles
Fundamental Design Principles
 
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentStriking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
 
Echo Conference 2008
Echo Conference 2008Echo Conference 2008
Echo Conference 2008
 
Bible Tech 2008
Bible Tech 2008Bible Tech 2008
Bible Tech 2008
 

Recently uploaded

Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model SafePaharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
jiya khan$A17
 
Doc3boq.docx sjnnw wimow womowmmo wekmomopmp
Doc3boq.docx sjnnw wimow womowmmo wekmomopmpDoc3boq.docx sjnnw wimow womowmmo wekmomopmp
Doc3boq.docx sjnnw wimow womowmmo wekmomopmp
Dhio3
 
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model SafeVaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
anany pandey$A17
 
Glasgow University degree Certificate
Glasgow University degree CertificateGlasgow University degree Certificate
Glasgow University degree Certificate
tezeqes
 
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model SafeVasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
kumkum tuteja$A17
 
With Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent ShirtWith Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent Shirt
TeeFusion
 
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
Aditi Sh.
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Mostafa Abd Elrahman
 
Lajpat Nagar @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
Lajpat Nagar @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model SafeLajpat Nagar @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
Lajpat Nagar @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
anany pandey$A17
 
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model SafeMahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
hina ojha$A17
 
Malviya Nagar @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
Malviya Nagar @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model SafeMalviya Nagar @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
Malviya Nagar @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
bookmybebe1
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
NakulJain35
 
South Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
South Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model SafeSouth Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
South Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
nikhilkumarji0156
 
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
rightchoicelandscapi
 
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model SafeGreater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
kumkum tuteja$A17
 
Karol Bagh @ℂall @Girls ꧁❤ 9873777170 ❤꧂Glamorous sonam Mehra Top Model Safe
Karol Bagh @ℂall @Girls ꧁❤ 9873777170 ❤꧂Glamorous sonam Mehra Top Model SafeKarol Bagh @ℂall @Girls ꧁❤ 9873777170 ❤꧂Glamorous sonam Mehra Top Model Safe
Karol Bagh @ℂall @Girls ꧁❤ 9873777170 ❤꧂Glamorous sonam Mehra Top Model Safe
shoeb2926
 
S S Bhavikatti Civil Engineering Structural Designing
S S Bhavikatti Civil Engineering Structural DesigningS S Bhavikatti Civil Engineering Structural Designing
S S Bhavikatti Civil Engineering Structural Designing
SuvamoyPanja
 
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model SafeGhaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
nikhilkumarji0156
 
Nehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Nehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model SafeNehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Nehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
jiya khan$A17
 
Arch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural PortfolioArch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural Portfolio
ssusere235001
 

Recently uploaded (20)

Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model SafePaharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Paharganj @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
 
Doc3boq.docx sjnnw wimow womowmmo wekmomopmp
Doc3boq.docx sjnnw wimow womowmmo wekmomopmpDoc3boq.docx sjnnw wimow womowmmo wekmomopmp
Doc3boq.docx sjnnw wimow womowmmo wekmomopmp
 
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model SafeVaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
Vaishali @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
 
Glasgow University degree Certificate
Glasgow University degree CertificateGlasgow University degree Certificate
Glasgow University degree Certificate
 
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model SafeVasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Vasant Kunj @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
 
With Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent ShirtWith Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent Shirt
 
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
An Introduction to Housing: Core Concepts and Historical Evolution from Prehi...
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
 
Lajpat Nagar @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
Lajpat Nagar @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model SafeLajpat Nagar @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
Lajpat Nagar @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Akshra Ojha Top Model Safe
 
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model SafeMahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
Mahipalpur @ℂall @Girls ꧁❤ 9711199012 ❤꧂Glamorous sonam Mehra Top Model Safe
 
Malviya Nagar @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
Malviya Nagar @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model SafeMalviya Nagar @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
Malviya Nagar @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
 
South Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
South Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model SafeSouth Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
South Ex @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Jya Khan Top Model Safe
 
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
 
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model SafeGreater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
Greater Kailash @ℂall @Girls ꧁❤ 9873940964 ❤꧂VIP Vishakha Singla Top Model Safe
 
Karol Bagh @ℂall @Girls ꧁❤ 9873777170 ❤꧂Glamorous sonam Mehra Top Model Safe
Karol Bagh @ℂall @Girls ꧁❤ 9873777170 ❤꧂Glamorous sonam Mehra Top Model SafeKarol Bagh @ℂall @Girls ꧁❤ 9873777170 ❤꧂Glamorous sonam Mehra Top Model Safe
Karol Bagh @ℂall @Girls ꧁❤ 9873777170 ❤꧂Glamorous sonam Mehra Top Model Safe
 
S S Bhavikatti Civil Engineering Structural Designing
S S Bhavikatti Civil Engineering Structural DesigningS S Bhavikatti Civil Engineering Structural Designing
S S Bhavikatti Civil Engineering Structural Designing
 
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model SafeGhaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
Ghaziabad @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Neha Singla Top Model Safe
 
Nehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Nehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model SafeNehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
Nehru Place @ℂall @Girls ꧁❤ 9873777170 ❤꧂VIP Ruhi Singla Top Model Safe
 
Arch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural PortfolioArch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural Portfolio
 

Adobe MAX 2008: HTML/CSS + Fireworks

  • 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...
  • 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/
  • 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
  • 25. FW now looks akin to its CS4 siblings CS3 CS4
  • 27. Visual Style Corporate Guidelines Branding HTML CSS
  • 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/
  • 44. Bene ts of Frameworks •Consistent coding style. • Increases maintainability. • Rapidly prototype ideas. • Improvements made to core. • Not re-inventing the wheel.
  • 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.
  • 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