Original Post 04.23.2008
Scott Fegette (Adobe Systems Inc.)
10:50am – 11:40am Wednesday, 04/23/2008
It’s not enough to be a strong visual designer these days- web design has increasingly become a more technical discipline. In this session, we’ll explore the current standards and best practices for web design, along with a sneak peek at how the upcoming release of Adobe Dreamweaver will address some of these growing concerns facing today’s web professionals.
Scott Fegette
Adobe Systems Inc.
Scott Fegette is the Technical Product Manager for Dreamweaver at Adobe. Before joining the Dreamweaver team, he was both a Flash Video evangelist and an engineering manager on the Macromedia web team responsible for building the site infrastructure, services and architecture that delivers Adobe.com to this day. Before joining Macromedia in 2000, Scott spent 6 years building his skills at web design and development from it’s very beginning as the director of online services for former Santa Barbara-based software developers MetaCreations- contributing both global site design and server-side framework code, and managing a team of 8 designers and developers to support the site. Aside from speaking worldwide on web development and standards, video production and online communities, Scott’s also a professional musician and independent photographer/videographer in his off-hours.
Conference Notes
What is responsible Web Design?
· Staying current with web standards and web best practices
· Assuring consistent display and behaviors across browsers
· Using cutting-edge technology in a degradable manner
· Constantly revisiting individual and group workflows
The Web circa 2000
· Table – based layouts still prevalent at major sites
· Java Sctipt used for effect , not for function
· Swiss Army Knife designer /developers
· Poor markup principles making redesigns painful
Examples of bad sites via 2000 = google, yahoo, adobe, all using tables….
The Purist view
Cold Fusion/PHP/JSP
XHTML/HTML Content Data Layer
CSS Design layer
XHTML – Content Layer
· Good solid semantics – solid foundation
· POSH – Plain Old Semantic HTML – new movement
· An unofficial subset of HTML 4.01 XHTML 1.0
· Sematic markup only not presentational
· Aviod Bed and Breakfast markup – Use Strong (it’s the new bold)
· POSH must validate
Thinking Semantically
· Selectors used to precisely target content elements
· CSS rules for visual charateristics
· JavaSctipt for behavioral charateristics
· Name elements for purpose
Microformats
· Microformats.org
· Simple , open data formats
· Built on published structure
· Vcard
· Hcard – Contact info
· Export Events – Using Hevent allow easily downloadable information directly into Calendars on work station and or phone.
· Hcalendar – events
· Hreviews – for establishing reviews
CSS – Presentation Layers
· Bad for is rules placed inline
· Good is rules placed in separate files
CSS – Semantic CSS
· Your code is a roadmap – Does it make sense? Name for a styles intent not is visual representation
CSS Workflow and Management
· Work iteratively and strategically = iterate design with Head tag based styles and migrate externally for implementation
· Separate CSS rules by category/function = postitionl/layout rules/Typographic rules/Application and functional rules
JavaScript – Behavior Layer
· Design is becoming a technical discipline
· Pages are rarely just page anymore
· Frameworks proliferating at a breadkneck pace
· On the dark days of DHTML =
· We are stuck in 1998 with javascript
Progressive Enhancement / Graceful Degradation
· Increase page functionality as browser permits
· Build solid base experience first, enhance second
· Your page should remain functional regardless of the browser’s capabilities
Unobtrusive JavaScript
· Fully separate behavior from markup
· Say goodbye to inline vent handlers
· Attach behavior at runtime via DOM
New Workflow
· Browsers are evenmore central to workflow today
· Firefox/firebug becoming more popular
Pulling it all together
· Effectively designing stateful experiences
· Working with code, not against it
· Managing compound documents
· Managing Javascript
NEW Dreamweaver 4 preview
· Enable full browers (what you see is what you get) with in the view panels
· Code navigator allows on the fly CSS changes and full browser view of new changes in the product
· F6 can freeze onstates and show live view to allow you to effectively develop for rich apps and interactive areas.