Docstoc

Bulletproof Web Design - July 16 2007_payday

Document Sample
Bulletproof Web Design - July 16 2007_payday Powered By Docstoc
					Bulletproof Web Design
Fort Worth Web Design
Meetup Group
July 16, 2007
Book Information
Bulletproof Web Design
Dan Cederholm
ISBN 0-321-34693-9
http://www.peachpit.com/title/0321346939

FWWDMG members get 30% off* Peachpit purchases using coupon code:
UE-23AA-PEUF (case-sensitive)


* Disclaimer: Please note that all of the book discount offers contained within this message
    are made by the publisher(s). The Fort Worth Web Design Meetup Group, its
    organizer(s), its member(s), its sponsor(s), and its other partner(s) do not offer any
    guarantee on any of the offers noted within this message. All of these offers are subject
    to change immediately without notice.
Presenter
Mark Leon Watson

Organizer – Fort Worth Web Design Meetup Group
http://webdesign.meetup.com/148

Asst. Organizer – Fort Worth .NET User Group
http://www.fwdnug.com

Principal Consultant – BIZWAX SOLUTIONS
http://www.bizwax.com

Senior Software Developer – Payday One Holdings
http://www.paydayone.com

18+ Years Experience – Software Development

11+ Years Experience – Web Development
Bulletproof?

   Bulletproof means being prepared for
    whatever is thrown at your design.1
Introduction

   No such thing as a bulletproof website
   Measures can be taken to protect web
    designs
   Bulletproof vest
   Better off with one that without one
   Improve flexibility
   Prepare for worst-case scenarios
Bulletproof Concept

   Ongoing process
   Becomes easier using web standards
   Construct adaptable designs
   Less code
   Increased accessibility
   Easier maintenance
Two Important Pieces

   Components (Design, Content, etc.)
   Bulletproof Implementation

   Implemented using CSS, XHTML and
    web standards
CSS and XHTML

   Using it doesn’t means things are
    better
   Provides flexibility
   Separating core content from design
Flexible Text

   Size text using keywords and
    percentages to allow user control and
    maximum flexibility.
Flexible Text:
A Bulletproof Approach
   Use keywords in the font-size
    property
   Let go of “pixel precision”
   Use “hacks” when necessary to
    support older browsers
    (i.e. Box model hack for IE5)
   Use a base font size using a keyword
   Use percentages to stray from base
Flexible Text: Working with
Keywords and Percentages
   Set an in-between keyword base using
    a container
   Be careful when nesting percentages
   Experiment with percentage values for
    consistency
Flexible Text:
Points to Remember
   Allow user to control the size of text on any
    given page.
   IE/Win users cannot resize text set with px.
   Keywords offer a simple method of sizing
    text that permits resizing.
   Percentages can make future site updates
    quick and easy.
   Using the keyword/percentage combination
    can still allow a certain level of precision.
Flexible Text:
Other References
   http://www.w3.org/TR/REC-
    CSS2/syndata.html#pixel-units
   http://www.w3.org/TR/CSS21/fonts.html#font-size-
    props
   http://www.tantek.com/CSS/Examples/boxmodelha
    ck.html
   http://www.alistapart.com/articles/sizematters/
   http://www.info.com.ph/~etan/w3pantheon/style/
    modifiedsbmh.html
   http://www.thenoodleincident.com/tutorials/box_le
    sson/font/method.html
Scalable Navigation

   Provide site navigation that scales to
    any text size or content amount.
Scalable Navigation:
Why It’s Not Bulletproof
Using images and JavaScript rollovers:
 Mountains of Code

 Inaccessibility Issues

 Scalability Issues

 Lack of Flexibility
Scalable Navigation:
A Bulletproof Approach
Using XHTML and CSS:
 Reduces Code Bloat

 Supports many devices

 Flexible, Scalable Text

 Easy to update text
Scalable Navigation:
Additional Examples
   MOZILLA.ORG
    http://www.mozilla.org
   SLANTS
    http://www.simplebits.com/bits/bullet
    proof_slants.html
   ESPN.COM SEARCH
    http://www.espn.com
Scalable Navigation:
Points to Remember
   Using image-based navigation means users
    cannot adjust its text size.
   Simple markup ensure greater accessibility
    to a wider range of devices.
   Text-based navigation is easily updated or
    edited without the need to create new
    images.
   Creative placement of background images
    can add detail to a navigation’s design
    without sacrificing flexibility.
Scalable Navigation:
Other References
   http://www.freedomscientific.com/fs_
    products/Surfs_Up/Navigating.htm
   http://www.w3.org/TR/REC-
    CSS2/selector.html
   http://www.alistapart.com/articles/slidi
    ngdoors/
Expandable Rows

   Resist specifying height, and plan for
    vertical expansion of horizontal page
    components.
Expandable Rows Example:
Why It’s Not Bulletproof
   Nonessential graphics
   Thinking in fixed height
   Code bloat
Expandable Rows Example:
Why It’s Bulletproof
   Separation of Structure and Design
   No More Fixed Heights
Expandable Rows:
Points to Remember
   Taking nonessential graphics out of the markup and
    using background images within the CSS can help
    control code bloat.
   Use the “opposing floats” method for positioning
    content on opposite sides of a container.
   When the amount of content to be placed inside a
    design component is unknown, use two background
    images to let that component expand and contract.
   Plan for more space than you think you need.
Creative Floating

   Use floats to achieve grid-like results.
Creative Floating:
Points to Remember
   Choose optimal markup from the start.
   Consider the “opposing floats” method
    for aligning items on either side of
    each other.
   Be aware of clearing floats.
Creative Floating:
Other References
   http://www.complexspiral.com/publica
    tions/containing-floats/
   http://www.positioniseverything.net/e
    xplorer/doubled-margin.html
Indestructible Boxes

   Plan for the unknown when
    constructing styles boxes.
Indestructible Boxes:
Points to Remember
   Fixed-width, rounded corner boxes are
    usually easy to create using lean markup
    and just two background images.
   Fluid-width, rounded corner boxes require a
    little more markup in order to reference
    background images on all four corners.
   Combine background images and use
    positioning to reveal only the desired
    portion of the image.
   Build in extra width and height to
    background images.
Indestructible Boxes:
Other References
   http://www.w3.org/TR/REC-
    CSS2/box.html
   http://browsehappy.com
No images? No CSS?
No problem.
   Ensure that content is still readable in
    the absence of images or CSS.
No images? No CSS?:
Points to Remember
   Routinely use the “10-second usability test”
    to check your page’s readability in the
    absence of images and/or CSS.
   Remember to specify background color
    equivalents for any background images.
   Use favelets and/or browser toolbars to
    make the process quick and easy.
   Embrace validation during the design phase.
No images? No CSS?:
Other References
   http://www.accessify.com/tools-and-
    wizards/accessibility-checking-favelets.asp
   http://tantek.com/favelets/
   http://www.andy-budd.com/bookmarklets
   http://www.chrispederick.com/work/firefox/
    webdeveloper
   http://htmlhelp.com/tools/validator/doctype.
    html
   http://validator.w3.org
   http://jigsaw.w3.org/css-validator/
Convertible Tables

   Strip the presentation from data
    tables, and refinish with CSS.
Convertible Tables:
Points to Remember
   Collapse the table using <table cellspacing=“0”>
    (or the border-collapse property), and move all
    other borders, background and spacing to the style
    sheet.
   Use the <caption> element to properly align a title
    to a table.
   Use <th> elements to properly denote the table’s
    headers.
   Create grid lines by adding borders to the <th>
    and/or <td> elements.
   Add background colors to rows by styling the <tr>
    elements.
Convertible Tables:
Other References
   http://www.w3.org/TR/html401/struct
    /tables.html
   http://www.456bereaststreet.com/arc
    hive/200410/bring_on_the_tables/
   http://www.alistapart.com/articles/zeb
    ratables/
Fluid Layouts

   Experiment with page layouts that
    expand and contract.
Fluid Layouts:
Why It’s Not Bulletproof
   An Abundance of Code
   A Maintenance Nightmare
   Nonoptimal Content Ordering
Fluid Layouts:
Points to Remember
   Use the float property in order to build multi-
    column layouts that can be cleared with a full-width
    footer.
   Subtract a percentage from column widths for
    gutters, or add an extra wrapper <div> to set
    padding separate from column width.
   Set min-width and max-width on the layout to
    prevent extreme dimensions in both directions.
   Experiment with the Sliding Faux Columns approach
    to create the appearance equal-height (but flexible)
    columns with borders and backgrounds that meet
    the footer.
Fluid Layouts:
Other References
   http://www.shauninman.com/plete/2004/07/absolu
    tely-positive/
   http://www.tantek.com/CSS/Examples/boxmodelha
    ck.html
   http://www.clagnut.com/sandbox/imagetest/
   http://www.alistapart.com/articles/fauxcolumns/
   http://www.stopdesign.com/log/2004/09/03/liquid-
    bleach.html
   http://www.meyerweb.com/eric/thoughts/2004/09/
    03/sliding-faux-columns/
Putting It Together

   Apply bulletproof concepts to and
    entire page design.
Putting It Together:
Why It’s Bulletproof
   Fluid layout
   Flexible text
   No Images? No CSS? No problem
Putting It Together:
Other References
   http://www.htmldog.com/articles/elast
    icdesign/demo/
   http://positioniseverything.net/easycle
    aring.html
   http://www.informit.com/articles/articl
    e.asp?p=170511
Questions?
Contact

Mark Leon Watson
Voice/Fax: 817-231-0105
Mobile: 817-320-8006
Email: info@markwatson.net
IM:
  MarkLeonWatson@hotmail.com, MarkL
  eonWatson@yahoo.com
Web:
  http://markwatson.net, http://bizwax.
  com

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:2
posted:5/29/2010
language:English
pages:44