• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Design Disrepair
 

Design Disrepair

on

  • 5,060 views

Slides from my presentation at the 2008 Webmaster Jam Session in Atlanta, GA: http://2008.webjamsession.com/sessions/design-disrepair/

Slides from my presentation at the 2008 Webmaster Jam Session in Atlanta, GA: http://2008.webjamsession.com/sessions/design-disrepair/

Statistics

Views

Total Views
5,060
Views on SlideShare
5,033
Embed Views
27

Actions

Likes
9
Downloads
127
Comments
3

4 Embeds 27

http://franksworld.com 18
http://dataoven.x-y.net 6
http://www.franksworld.com 2
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Design Disrepair Design Disrepair Presentation Transcript

    • Design Disrepair The keys to a successful website renovation.
    • Who is Jason? • Designer & Front-End Developer at Cyberwoven in South Carolina • Author of the Sitepoint book The Principles of Beautiful Web Design • Founding member &president of Refresh Columbia • University of Central Florida Alum •Personal Site: Jasongraphix.com
    • There are about 126 million homes in the United States. * http://quickfacts.census.gov/qfd/states/00000.html
    • There are over 172 million websites. *http://news.netcraft.com/archives/web_server_survey.html
    • Homes and websites both need to be maintained…even these.
    • The Dilemma Maintenance Sucks Renovation is Exciting Replacing a leaky faucet. Knocking down walls. Putting on a new roof. Reconfiguring a kitchen. Steam cleaning carpets. Installing a walk-in shower. Clearing gutters. Replacing light fixtures. Repairing rotten wood. Modernizing finishes. Unclogging toilets Improving functionality. ...putting up with the past. …making it your own.
    • Is it time to swing the hammer?
    • Some of the top reasons for renovating a home are: Outdated Finishes Obsolete Appliances Dysfunctional Floor Plan Inefficient Energy Use Lack of Square Footage
    • The top reasons for renovating a website are similar:
    • Outdated Content…
    • Obsolete Code… function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf(quot;#quot;)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3){ if ((x=MM_findObj(a[i]))!=null){ document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2]; } } }
    • Dysfunctional Navigation…
    • Inefficient to Update…
    • & Lack of Scalability.
    • The worst are the old websites that were built “One piece at a time”
    • kludge or kluge (kl j) n. Slang 1. A system, especially a computer system, that is constituted of poorly matched elements or of elements originally intended for other applications. 2. A clumsy or inelegant solution to a problem.
    • Coronado Catastrophe http://uglyhousephotos.com/wordpress/?p=1386
    • Five Lessons I’ve Learned From Home Renovation 1. Learn the Building Codes 2. Set Realistic Goals 3. Have the Right Tools 4. Invest your Resources wisely 5. Make Lasting Changes
    • 1 Learn the Building Codes Building codes regulate the structural design, energy efficiency, construction quality, and overall safety of structures occupied by the public.
    • New Construction • Separation of Content, Style & Behavior • Valid HTML & CSS • Section 508 Compliance • Graceful Degradation • Design consistency with no CSS hacks. Web Standards in a Nutshell By Natalie Jost –www.nataliejost.com
    • “Make it Right” -Mike Holmes Holmes on Homes
    • 2 Set Realistic Goals …because overdue and over budget is not good for business.
    • “Kitchen Sink Syndrome” Original Client Request: Add an estimate request form. Eventual Solution: • Design new page with form. • No CSS? Add stylesheet to page. • Nav is image based? …Rebuild with CSS. • Site is static? Global find & replace to add new nav to all pages. • New nav gets approved with changes… OF COURSE! • Create include file for nav and add that to all pages…etc…
    • 3 Have the Right Tools “When your only tool is a reciprocating saw, every project looks like demolition.”
    • My Essential Toolkit
    • But do you really know how to use the tools? This guy did…
    • BGCOLOR? SPACER GIF? <td><table align=quot;rightquot; border=quot;0quot; cellpadding=quot;0quot; cellspacing=quot;0quot; width=quot;229”> <tr> <td width=quot;30quot; bgcolor=quot;#F5F4EBquot;><img src=quot;images/menu_arrow2.gifquot; width=quot;30quot; height=quot;26quot;></td> <td class=quot;menuquot; bgcolor=quot;#F5F4EBquot; colspan=quot;2quot;> <a href=quot;javascript:Hide_Menu(-1);quot; class=quot;menuquot;>All Articles</a> </td> </tr> <tr> <td colspan=quot;3quot; bgcolor=quot;#036CAEquot;><img src=quot;images/spacer.gifquot; width=quot;1quot; height=quot;1quot;></td> </tr> <tr> <td width=quot;30quot; bgcolor=quot;#F5F4EBquot;><img src=quot;images/spacer.gifquot; width=quot;30quot; height=quot;26quot;></td> <td class=quot;menuquot; bgcolor=quot;#F5F4EBquot; colspan=quot;2quot;> <a href=quot;javascript:Hide_Menu(-1);quot; class=quot;menuquot;>Back</a> </td> </tr> <tr> <td colspan=quot;3quot; bgcolor=quot;#036CAEquot;><img src=quot;images/spacer.gifquot; width=quot;1quot; height=quot;1quot;></td> </tr> </table> </td>
    • 4 Invest your Resources Wisely If your website was a home, where would you want to spend your time and money?
    • “Spend your money where the water is.” Kitchens and bathrooms sell homes.
    • Spend your time/budget where the functionality is. Style and whiz bang won’t make it work better!
    • 5 Make Lasting Changes “Too many designers get caught up in the visuals needing to be representative of the time and current design movements…when in reality, design needs to be timeless.” -Nick Finck
    • What is Timeless Design? A visual concept that could simultaneously exist in both the past and the future. Eames Lounge Chair and Ottoman Ball Chair Designed by Charles & Ray Eames Designed by Eero Aarnio in 1956 in 1966
    • Compaq (2001) – http://www.compaq.com
    • Compaq (2008) – http://h18000.www1.hp.com/
    • Apple (2000) – http://www.apple.com/
    • Apple (2008) – http://www.apple.com/
    • Herbert Bayer, Kandinsky Poster, 1926
    • Jason Santa Maria, 2008
    • Remember: Maintenance Sucks… Especially on outdated homes and websites.
    • Happy Renovating!