SlideShare una empresa de Scribd logo
1 de 43
Descargar para leer sin conexión
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
Design Disrepair
“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…
Design Disrepair
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.
Design Disrepair
Happy Renovating!

Más contenido relacionado

Similar a Design Disrepair

Style Your Site Part 2
Style Your Site Part 2Style Your Site Part 2
Style Your Site Part 2Ben MacNeill
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)Future Insights
 
UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012impulsedev
 
081204 Virtual Design & Construction
081204 Virtual Design & Construction081204 Virtual Design & Construction
081204 Virtual Design & ConstructionRocio Gonzalez
 
The Future Of CSS
The Future Of CSSThe Future Of CSS
The Future Of CSSAndy Budd
 
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveDesign4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveSalem Ghoweri
 
11 Amazing things I Learnt At Word Camp Sydney 2014
11 Amazing things I Learnt At Word Camp Sydney 201411 Amazing things I Learnt At Word Camp Sydney 2014
11 Amazing things I Learnt At Word Camp Sydney 2014WordPressBrisbane
 
Operation Mindshift Corenet 08
Operation Mindshift Corenet 08Operation Mindshift Corenet 08
Operation Mindshift Corenet 08GomindSHIFT
 
KatieAlbers-Portfolio
KatieAlbers-PortfolioKatieAlbers-Portfolio
KatieAlbers-PortfolioKatie Albers
 
Resilient Enterprise Design (Craig Villamor at Enterprise UX 2017)
Resilient Enterprise Design (Craig Villamor at Enterprise UX 2017)Resilient Enterprise Design (Craig Villamor at Enterprise UX 2017)
Resilient Enterprise Design (Craig Villamor at Enterprise UX 2017)Rosenfeld Media
 
The Anchor Store: Four Confluence Examples to Root Your Deployment
The Anchor Store: Four Confluence Examples to Root Your DeploymentThe Anchor Store: Four Confluence Examples to Root Your Deployment
The Anchor Store: Four Confluence Examples to Root Your DeploymentAtlassian
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive WebMatt Carver
 
Static site gen talk
Static site gen talkStatic site gen talk
Static site gen talkBen Adam
 
Gw Pres Agile 4slideshare
Gw Pres Agile 4slideshareGw Pres Agile 4slideshare
Gw Pres Agile 4slideshareDave Burke
 
6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your WebsiteFloown
 

Similar a Design Disrepair (20)

Style Your Site Part 2
Style Your Site Part 2Style Your Site Part 2
Style Your Site Part 2
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
 
UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012UTEP AITP Presentation - 10/17/2012
UTEP AITP Presentation - 10/17/2012
 
081204 Virtual Design & Construction
081204 Virtual Design & Construction081204 Virtual Design & Construction
081204 Virtual Design & Construction
 
The Future of CSS
The Future of CSSThe Future of CSS
The Future of CSS
 
The Future Of CSS
The Future Of CSSThe Future Of CSS
The Future Of CSS
 
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveDesign4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
11 Amazing things I Learnt At Word Camp Sydney 2014
11 Amazing things I Learnt At Word Camp Sydney 201411 Amazing things I Learnt At Word Camp Sydney 2014
11 Amazing things I Learnt At Word Camp Sydney 2014
 
Operation Mindshift Corenet 08
Operation Mindshift Corenet 08Operation Mindshift Corenet 08
Operation Mindshift Corenet 08
 
KatieAlbers-Portfolio
KatieAlbers-PortfolioKatieAlbers-Portfolio
KatieAlbers-Portfolio
 
Resilient Enterprise Design (Craig Villamor at Enterprise UX 2017)
Resilient Enterprise Design (Craig Villamor at Enterprise UX 2017)Resilient Enterprise Design (Craig Villamor at Enterprise UX 2017)
Resilient Enterprise Design (Craig Villamor at Enterprise UX 2017)
 
The Anchor Store: Four Confluence Examples to Root Your Deployment
The Anchor Store: Four Confluence Examples to Root Your DeploymentThe Anchor Store: Four Confluence Examples to Root Your Deployment
The Anchor Store: Four Confluence Examples to Root Your Deployment
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
 
Static site gen talk
Static site gen talkStatic site gen talk
Static site gen talk
 
Gw Pres Agile 4slideshare
Gw Pres Agile 4slideshareGw Pres Agile 4slideshare
Gw Pres Agile 4slideshare
 
I Care Because You Do
I Care Because You DoI Care Because You Do
I Care Because You Do
 
6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website6 Things to Think About Before Building Your Website
6 Things to Think About Before Building Your Website
 
SEO and Accessibility
SEO and AccessibilitySEO and Accessibility
SEO and Accessibility
 
DjangoCon09: No! Bad Pony!
DjangoCon09: No! Bad Pony!DjangoCon09: No! Bad Pony!
DjangoCon09: No! Bad Pony!
 

Más de Jason Beaird

Design Pattern Craftsmanship
Design Pattern CraftsmanshipDesign Pattern Craftsmanship
Design Pattern CraftsmanshipJason Beaird
 
Creating a Balanced UX Workflow
Creating a Balanced UX WorkflowCreating a Balanced UX Workflow
Creating a Balanced UX WorkflowJason Beaird
 
The Fleeting Myth of Universal Appeal
The Fleeting Myth of Universal AppealThe Fleeting Myth of Universal Appeal
The Fleeting Myth of Universal AppealJason Beaird
 
Design 4 Developers
Design 4 DevelopersDesign 4 Developers
Design 4 DevelopersJason Beaird
 

Más de Jason Beaird (7)

Design Pattern Craftsmanship
Design Pattern CraftsmanshipDesign Pattern Craftsmanship
Design Pattern Craftsmanship
 
Creating a Balanced UX Workflow
Creating a Balanced UX WorkflowCreating a Balanced UX Workflow
Creating a Balanced UX Workflow
 
Email jitsu
Email jitsuEmail jitsu
Email jitsu
 
The Fleeting Myth of Universal Appeal
The Fleeting Myth of Universal AppealThe Fleeting Myth of Universal Appeal
The Fleeting Myth of Universal Appeal
 
HTML5 is...Now!
HTML5 is...Now!HTML5 is...Now!
HTML5 is...Now!
 
The Beautiful Web
The Beautiful WebThe Beautiful Web
The Beautiful Web
 
Design 4 Developers
Design 4 DevelopersDesign 4 Developers
Design 4 Developers
 

Último

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 

Último (20)

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 

Design Disrepair

  • 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:
  • 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]; } } }
  • 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.
  • 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
  • 22. “Make it Right” -Mike Holmes Holmes on Homes
  • 23. 2 Set Realistic Goals …because overdue and over budget is not good for business.
  • 24. “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…
  • 26. 3 Have the Right Tools “When your only tool is a reciprocating saw, every project looks like demolition.”
  • 28. But do you really know how to use the tools? This guy did…
  • 29. 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>
  • 30. 4 Invest your Resources Wisely If your website was a home, where would you want to spend your time and money?
  • 31. “Spend your money where the water is.” Kitchens and bathrooms sell homes.
  • 32. Spend your time/budget where the functionality is. Style and whiz bang won’t make it work better!
  • 33. 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
  • 34. 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
  • 35. Compaq (2001) – http://www.compaq.com
  • 36. Compaq (2008) – http://h18000.www1.hp.com/
  • 37. Apple (2000) – http://www.apple.com/
  • 38. Apple (2008) – http://www.apple.com/
  • 39. Herbert Bayer, Kandinsky Poster, 1926
  • 41. Remember: Maintenance Sucks… Especially on outdated homes and websites.