Your SlideShare is downloading. ×
0
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Design Disrepair
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Design Disrepair

3,649

Published on

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/

Published in: Technology, Design
3 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,649
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
128
Comments
3
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Design Disrepair The keys to a successful website renovation.
  • 2. 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
  • 3. There are about 126 million homes in the United States. * http://quickfacts.census.gov/qfd/states/00000.html
  • 4. There are over 172 million websites. *http://news.netcraft.com/archives/web_server_survey.html
  • 5. Homes and websites both need to be maintained…even these.
  • 6. 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.
  • 7. Is it time to swing the hammer?
  • 8. Some of the top reasons for renovating a home are: Outdated Finishes Obsolete Appliances Dysfunctional Floor Plan Inefficient Energy Use Lack of Square Footage
  • 9. The top reasons for renovating a website are similar:
  • 10. Outdated Content…
  • 11. 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]; } } }
  • 12. Dysfunctional Navigation…
  • 13. Inefficient to Update…
  • 14. & Lack of Scalability.
  • 15. The worst are the old websites that were built “One piece at a time”
  • 16. 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.
  • 17. Coronado Catastrophe http://uglyhousephotos.com/wordpress/?p=1386
  • 18. 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
  • 19. 1 Learn the Building Codes Building codes regulate the structural design, energy efficiency, construction quality, and overall safety of structures occupied by the public.
  • 20. 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
  • 21. “Make it Right” -Mike Holmes Holmes on Homes
  • 22. 2 Set Realistic Goals …because overdue and over budget is not good for business.
  • 23. “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…
  • 24. 3 Have the Right Tools “When your only tool is a reciprocating saw, every project looks like demolition.”
  • 25. My Essential Toolkit
  • 26. But do you really know how to use the tools? This guy did…
  • 27. 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>
  • 28. 4 Invest your Resources Wisely If your website was a home, where would you want to spend your time and money?
  • 29. “Spend your money where the water is.” Kitchens and bathrooms sell homes.
  • 30. Spend your time/budget where the functionality is. Style and whiz bang won’t make it work better!
  • 31. 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
  • 32. 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
  • 33. Compaq (2001) – http://www.compaq.com
  • 34. Compaq (2008) – http://h18000.www1.hp.com/
  • 35. Apple (2000) – http://www.apple.com/
  • 36. Apple (2008) – http://www.apple.com/
  • 37. Herbert Bayer, Kandinsky Poster, 1926
  • 38. Jason Santa Maria, 2008
  • 39. Remember: Maintenance Sucks… Especially on outdated homes and websites.
  • 40. Happy Renovating!

×