Design Disrepair

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

Replacing a leaky faucet.

Putting on a new roof.

Steam cleaning carpets.

Clearing gutters.

Repairing rotten wood.

Unclogging toilets

...putting up with the past.

Renovation is Exciting

Knocking down walls.

Reconfiguring a kitchen.

Installing a walk-in shower.

Replacing light fixtures.

Modernizing finishes.

Improving functionality.

…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…

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("#")!=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];

}

}

}

Obsolete Code…

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

Learn the Building Codes Building codes regulate the structural design, energy efficiency, construction quality, and overall safety of structures occupied by the public. 1

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

Set Realistic Goals …because overdue and over budget

is not good for business. 2

“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…

Have the Right Tools “When your only tool is a reciprocating saw,

every project looks like demolition.” 3

My Essential Toolkit

But do you really know how to use the tools?

This guy did…

BGCOLOR? SPACER GIF?

<td><table align="right" border="0" cellpadding="0" cellspacing="0" width="229”>

<tr>

<td width="30" bgcolor="#F5F4EB"><img src="images/menu_arrow2.gif" width="30"

height="26"></td>

<td class="menu" bgcolor="#F5F4EB" colspan="2">

<a href="javascript:Hide_Menu(-1);" class="menu">All Articles</a>

</td>

</tr>

<tr>

<td colspan="3" bgcolor="#036CAE"><img src="images/spacer.gif" width="1"

height="1"></td>

</tr>

<tr>

<td width="30" bgcolor="#F5F4EB"><img src="images/spacer.gif" width="30"

height="26"></td>

<td class="menu" bgcolor="#F5F4EB" colspan="2">

<a href="javascript:Hide_Menu(-1);" class="menu">Back</a>

</td>

</tr>

<tr>

<td colspan="3" bgcolor="#036CAE"><img src="images/spacer.gif" width="1"

height="1"></td>

</tr>

</table>

</td>

Invest your Resources Wisely If your website was a home, where would you

want to spend your time and money? 4

“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!

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 5

What is Timeless Design?

Eames Lounge Chair and Ottoman

Designed by Charles & Ray Eames

in 1956

A visual concept that could simultaneously exist in both the past and the future.

Ball Chair

Designed by Eero Aarnio

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!