SlideShare una empresa de Scribd logo
1 de 23
Descargar para leer sin conexión
a presentation by
June 16, 2014
@ambersiscoe
Sustainable
Web Design &
Coding
Amber Vasquez
Who is Mightybytes?
The big problem we’re facing:
THE INTERNET IS NOT A GREEN MEDIUM
Via: MNN
The world’s data centers will surpass the airline industry as a greenhouse
gas polluter by 2020.
Source: New York Times
Pixels are powered by electricity
As of 2011, only about 19% of electricity generated in the world and 12.7%
of energy generated in the United States comes from renewable resources.
Most electricity sources are not renewable
Source: US Energy Information Administration
Because you want your users to have an efficient site experience
and deliver a great product to your client.
Why should you care?
Because efficient sites = happy customers = conversions.
Why should your clients care?
a presentation by
What is Sustainable
Web Design?
So, what is Sustainable Web Design?
Core Components
• Design Techniques
• User Testing
• Green Hosting
A set of practices defining how to build websites that meet present
and future performance and energy efficiency standards.
a presentation by
Design
Techniques
Design Techniques Overview
• Use carousels
• Use share buttons and social plugins
• Use Flash
Sustainable design is accessible across platforms and efficient as well.
• Design Mobile First
• Use Sprites
• Compress/optimize images
Do: Don’t:
Design Techniques > Mobile First!
Mobile traffic makes up nearly 30% of all internet traffic - and it’s
growing all the time.
Design Techniques > Use Sprites
Sprites are useful to sustainability and page speed because it reduces
the number of HTTP requests needed to load that specific page.
Via: NCCGroup
Design Techniques > Compress &
Optimize Images
One quick and easy step
that you can take to
minimize a website’s carbon
footprint is to optimize
images, making them
smaller and faster to load.
Design Techniques > Avoid Carousels
From usability issues to massive increases in bandwidth, carousels
often come packaged with problems.
The Grid Approach
A Single, Primary Banner
Equivalent Buckets
Design Techniques > Limit Share Buttons &
Social Plugins
Yes, widgets and plug-ins can save you time as a designer, but the
costs to the user experience can be detrimental.
Load Time 1.38s

with share icons
Load Time 0.24s

without share icons
Via: Stack Overflow
Design Techniques > Avoid Flash
For the most part, everything that can be done in Flash can be done
in HTML instead.
a presentation by
User
Testing
User Testing
• A/B testing
• 5 second test
• Site architecture testing
• Prototyping
Testing your site designs & prototypes, and using expected design
patterns all help you create a design that gets your users to the
content, and creates a more efficient site.
a presentation by
Green
Hosting
Green Hosting
The servers that host your website require power 24 hours a day, so
the single biggest positive impact you can make through your website
is to host it with a provider that runs on 100% renewable energy.
• Canvas Dreams – 100% wind powered and a B Corporation
• AISO.net – 100% solar energy powered
• Host Gator – Buys Renewable Energy Certificates (REC)
Go forth and conquer the web!
a presentation by
June 16, 2014
@ambersiscoe
Thank you
Smashing!
Amber Vasquez

Más contenido relacionado

Destacado

Smashing Conf Review - Part 1
Smashing Conf Review - Part 1Smashing Conf Review - Part 1
Smashing Conf Review - Part 1Kathleen MacAinsh
 
Hard-Won Lessons In Responsive Email Design - SmashingConf Oxford 2014
Hard-Won Lessons In Responsive Email Design - SmashingConf Oxford 2014Hard-Won Lessons In Responsive Email Design - SmashingConf Oxford 2014
Hard-Won Lessons In Responsive Email Design - SmashingConf Oxford 2014Fabio Carneiro
 
Technical Analysis: Oscillators by NSFX
Technical Analysis: Oscillators by NSFXTechnical Analysis: Oscillators by NSFX
Technical Analysis: Oscillators by NSFXNSFX
 
Ci curano o ci curiamo. Il malato tra crisi economica e responsabilità indivi...
Ci curano o ci curiamo. Il malato tra crisi economica e responsabilità indivi...Ci curano o ci curiamo. Il malato tra crisi economica e responsabilità indivi...
Ci curano o ci curiamo. Il malato tra crisi economica e responsabilità indivi...Giuseppe Fattori
 
Getting started summer 2012
Getting started summer 2012Getting started summer 2012
Getting started summer 2012jgardne4
 
Comics and health education un’opportunità per promuovere la salute
Comics and health education  un’opportunità per promuovere la salute Comics and health education  un’opportunità per promuovere la salute
Comics and health education un’opportunità per promuovere la salute Giuseppe Fattori
 
Закрепление пройденного Пропись с. 24
Закрепление пройденного Пропись с. 24Закрепление пройденного Пропись с. 24
Закрепление пройденного Пропись с. 24МКОУ СОШ № 1 г. Сим
 
Presentacio vestuari
Presentacio vestuariPresentacio vestuari
Presentacio vestuarisilviaprofe56
 
Com descarregar musica acbat per presentar 1
Com descarregar musica acbat per presentar 1Com descarregar musica acbat per presentar 1
Com descarregar musica acbat per presentar 1silviaprofe56
 
Euram 2013 Conference
Euram 2013 ConferenceEuram 2013 Conference
Euram 2013 ConferenceTero Peltola
 
ภาษาไทย (สำรอง)
ภาษาไทย (สำรอง)ภาษาไทย (สำรอง)
ภาษาไทย (สำรอง)shompu
 
A2 level evaluation
A2 level evaluationA2 level evaluation
A2 level evaluationBillysmedia
 
Brand Quarterly 18 Highlights
Brand Quarterly 18 HighlightsBrand Quarterly 18 Highlights
Brand Quarterly 18 HighlightsAndrew Vesey
 

Destacado (20)

Smashing Conf Review - Part 1
Smashing Conf Review - Part 1Smashing Conf Review - Part 1
Smashing Conf Review - Part 1
 
Hard-Won Lessons In Responsive Email Design - SmashingConf Oxford 2014
Hard-Won Lessons In Responsive Email Design - SmashingConf Oxford 2014Hard-Won Lessons In Responsive Email Design - SmashingConf Oxford 2014
Hard-Won Lessons In Responsive Email Design - SmashingConf Oxford 2014
 
Письмо букв Рр
Письмо букв РрПисьмо букв Рр
Письмо букв Рр
 
Числа 1,2,3. знаки +, ,=
Числа 1,2,3. знаки +, ,=Числа 1,2,3. знаки +, ,=
Числа 1,2,3. знаки +, ,=
 
Technical Analysis: Oscillators by NSFX
Technical Analysis: Oscillators by NSFXTechnical Analysis: Oscillators by NSFX
Technical Analysis: Oscillators by NSFX
 
Ci curano o ci curiamo. Il malato tra crisi economica e responsabilità indivi...
Ci curano o ci curiamo. Il malato tra crisi economica e responsabilità indivi...Ci curano o ci curiamo. Il malato tra crisi economica e responsabilità indivi...
Ci curano o ci curiamo. Il malato tra crisi economica e responsabilità indivi...
 
Getting started summer 2012
Getting started summer 2012Getting started summer 2012
Getting started summer 2012
 
Comics and health education un’opportunità per promuovere la salute
Comics and health education  un’opportunità per promuovere la salute Comics and health education  un’opportunità per promuovere la salute
Comics and health education un’opportunità per promuovere la salute
 
Закрепление пройденного Пропись с. 24
Закрепление пройденного Пропись с. 24Закрепление пройденного Пропись с. 24
Закрепление пройденного Пропись с. 24
 
Presentacio vestuari
Presentacio vestuariPresentacio vestuari
Presentacio vestuari
 
Poster music
Poster musicPoster music
Poster music
 
Число 2. Цифра 2
Число 2. Цифра 2Число 2. Цифра 2
Число 2. Цифра 2
 
ашик кериб
ашик керибашик кериб
ашик кериб
 
Com descarregar musica acbat per presentar 1
Com descarregar musica acbat per presentar 1Com descarregar musica acbat per presentar 1
Com descarregar musica acbat per presentar 1
 
Digipak
DigipakDigipak
Digipak
 
Euram 2013 Conference
Euram 2013 ConferenceEuram 2013 Conference
Euram 2013 Conference
 
ภาษาไทย (สำรอง)
ภาษาไทย (สำรอง)ภาษาไทย (สำรอง)
ภาษาไทย (สำรอง)
 
A2 level evaluation
A2 level evaluationA2 level evaluation
A2 level evaluation
 
Биография А.П. Чехова
Биография А.П. ЧеховаБиография А.П. Чехова
Биография А.П. Чехова
 
Brand Quarterly 18 Highlights
Brand Quarterly 18 HighlightsBrand Quarterly 18 Highlights
Brand Quarterly 18 Highlights
 

Similar a Smashing Conference Short Talk on Sustainable Webdesign and coding practices

Do UX designers have a role in reducing digital waste?
Do UX designers have a role in reducing digital waste?Do UX designers have a role in reducing digital waste?
Do UX designers have a role in reducing digital waste?User Vision
 
Website development & it's trends
Website development & it's trendsWebsite development & it's trends
Website development & it's trendsSunCart Store
 
Ahead of the Curve: How 23andMe Improved UX with Performance Edge
Ahead of the Curve: How 23andMe Improved UX with Performance EdgeAhead of the Curve: How 23andMe Improved UX with Performance Edge
Ahead of the Curve: How 23andMe Improved UX with Performance EdgeOptimizely
 
Boosting your conversion rate through web performance improvements
Boosting your conversion rate through web performance improvementsBoosting your conversion rate through web performance improvements
Boosting your conversion rate through web performance improvementsAlyss Noland
 
7 Ways to Maximize ROI on your Digital Experience Investement
7 Ways to Maximize ROI on your Digital Experience Investement7 Ways to Maximize ROI on your Digital Experience Investement
7 Ways to Maximize ROI on your Digital Experience InvestementGlenn Kline
 
Beyond CDNs: How to Harness the Next Phase of Innovation in Web Performance
Beyond CDNs: How to Harness the Next Phase of Innovation in Web PerformanceBeyond CDNs: How to Harness the Next Phase of Innovation in Web Performance
Beyond CDNs: How to Harness the Next Phase of Innovation in Web PerformanceYottaa
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performanceSagar Desarda
 
A Designer's Guide to Web Performance
A Designer's Guide to Web PerformanceA Designer's Guide to Web Performance
A Designer's Guide to Web PerformanceKevin Mandeville
 
Designing Web Experiences - Eyecatch
Designing Web Experiences - EyecatchDesigning Web Experiences - Eyecatch
Designing Web Experiences - EyecatchVishnu Vallabh
 
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...Sencha
 
User Experience Design Heuristics
User Experience Design HeuristicsUser Experience Design Heuristics
User Experience Design HeuristicsNathanael Boehm
 
Agile and data driven product development oleh Dhiku VP Product KMK Online
Agile and data driven product development oleh Dhiku VP Product KMK OnlineAgile and data driven product development oleh Dhiku VP Product KMK Online
Agile and data driven product development oleh Dhiku VP Product KMK OnlineRein Mahatma
 
How BiggerPockets runs experiments faster with performance edge
How BiggerPockets runs experiments faster with performance edgeHow BiggerPockets runs experiments faster with performance edge
How BiggerPockets runs experiments faster with performance edgeOptimizely
 
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
20 Tips for High Performance Responsive Design that the Pros Won’t Tell YouPatrick Collins
 
ICT203 Human Computer Interaction.docx
ICT203 Human Computer Interaction.docxICT203 Human Computer Interaction.docx
ICT203 Human Computer Interaction.docxwrite4
 
Put the client on the client
Put the client on the clientPut the client on the client
Put the client on the clientAndré Heie Vik
 
5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5 Simple Actions to Make a Measurable Impact on Your Responsive Site5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5 Simple Actions to Make a Measurable Impact on Your Responsive Site5th Finger
 

Similar a Smashing Conference Short Talk on Sustainable Webdesign and coding practices (20)

Do UX designers have a role in reducing digital waste?
Do UX designers have a role in reducing digital waste?Do UX designers have a role in reducing digital waste?
Do UX designers have a role in reducing digital waste?
 
Website development & it's trends
Website development & it's trendsWebsite development & it's trends
Website development & it's trends
 
Ahead of the Curve: How 23andMe Improved UX with Performance Edge
Ahead of the Curve: How 23andMe Improved UX with Performance EdgeAhead of the Curve: How 23andMe Improved UX with Performance Edge
Ahead of the Curve: How 23andMe Improved UX with Performance Edge
 
Boosting your conversion rate through web performance improvements
Boosting your conversion rate through web performance improvementsBoosting your conversion rate through web performance improvements
Boosting your conversion rate through web performance improvements
 
7 Ways to Maximize ROI on your Digital Experience Investement
7 Ways to Maximize ROI on your Digital Experience Investement7 Ways to Maximize ROI on your Digital Experience Investement
7 Ways to Maximize ROI on your Digital Experience Investement
 
Beyond CDNs: How to Harness the Next Phase of Innovation in Web Performance
Beyond CDNs: How to Harness the Next Phase of Innovation in Web PerformanceBeyond CDNs: How to Harness the Next Phase of Innovation in Web Performance
Beyond CDNs: How to Harness the Next Phase of Innovation in Web Performance
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performance
 
Web performance e-book
Web performance e-bookWeb performance e-book
Web performance e-book
 
Designers Guide to Web Performance Yotta 2013
Designers Guide to Web Performance Yotta 2013Designers Guide to Web Performance Yotta 2013
Designers Guide to Web Performance Yotta 2013
 
A Designer's Guide to Web Performance
A Designer's Guide to Web PerformanceA Designer's Guide to Web Performance
A Designer's Guide to Web Performance
 
Designing Web Experiences - Eyecatch
Designing Web Experiences - EyecatchDesigning Web Experiences - Eyecatch
Designing Web Experiences - Eyecatch
 
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...
SenchaCon 2016: Using Ext JS 6 for Cross-Platform Development on Mobile - And...
 
User Experience Design Heuristics
User Experience Design HeuristicsUser Experience Design Heuristics
User Experience Design Heuristics
 
Agile and data driven product development oleh Dhiku VP Product KMK Online
Agile and data driven product development oleh Dhiku VP Product KMK OnlineAgile and data driven product development oleh Dhiku VP Product KMK Online
Agile and data driven product development oleh Dhiku VP Product KMK Online
 
Web development
Web developmentWeb development
Web development
 
How BiggerPockets runs experiments faster with performance edge
How BiggerPockets runs experiments faster with performance edgeHow BiggerPockets runs experiments faster with performance edge
How BiggerPockets runs experiments faster with performance edge
 
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
 
ICT203 Human Computer Interaction.docx
ICT203 Human Computer Interaction.docxICT203 Human Computer Interaction.docx
ICT203 Human Computer Interaction.docx
 
Put the client on the client
Put the client on the clientPut the client on the client
Put the client on the client
 
5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5 Simple Actions to Make a Measurable Impact on Your Responsive Site5 Simple Actions to Make a Measurable Impact on Your Responsive Site
5 Simple Actions to Make a Measurable Impact on Your Responsive Site
 

Más de Mightybytes

Integrating Content Strategy into Your User Experience (UX) Design Process
Integrating Content Strategy into Your User Experience (UX) Design ProcessIntegrating Content Strategy into Your User Experience (UX) Design Process
Integrating Content Strategy into Your User Experience (UX) Design ProcessMightybytes
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezMightybytes
 
Library Content Strategy and Metrics Model
Library Content Strategy and Metrics ModelLibrary Content Strategy and Metrics Model
Library Content Strategy and Metrics ModelMightybytes
 
Content Jam Measure What Matters 06/14/12
Content Jam Measure What Matters 06/14/12Content Jam Measure What Matters 06/14/12
Content Jam Measure What Matters 06/14/12Mightybytes
 
Columbia Corporate Strategy Retreat 03.14.12
Columbia Corporate Strategy Retreat 03.14.12Columbia Corporate Strategy Retreat 03.14.12
Columbia Corporate Strategy Retreat 03.14.12Mightybytes
 
Content Marketing Retreat: Measurement with Google Analytics
Content Marketing Retreat: Measurement with Google Analytics Content Marketing Retreat: Measurement with Google Analytics
Content Marketing Retreat: Measurement with Google Analytics Mightybytes
 

Más de Mightybytes (6)

Integrating Content Strategy into Your User Experience (UX) Design Process
Integrating Content Strategy into Your User Experience (UX) Design ProcessIntegrating Content Strategy into Your User Experience (UX) Design Process
Integrating Content Strategy into Your User Experience (UX) Design Process
 
Wireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber VasquezWireframing Basics - UX and the Design Process by Amber Vasquez
Wireframing Basics - UX and the Design Process by Amber Vasquez
 
Library Content Strategy and Metrics Model
Library Content Strategy and Metrics ModelLibrary Content Strategy and Metrics Model
Library Content Strategy and Metrics Model
 
Content Jam Measure What Matters 06/14/12
Content Jam Measure What Matters 06/14/12Content Jam Measure What Matters 06/14/12
Content Jam Measure What Matters 06/14/12
 
Columbia Corporate Strategy Retreat 03.14.12
Columbia Corporate Strategy Retreat 03.14.12Columbia Corporate Strategy Retreat 03.14.12
Columbia Corporate Strategy Retreat 03.14.12
 
Content Marketing Retreat: Measurement with Google Analytics
Content Marketing Retreat: Measurement with Google Analytics Content Marketing Retreat: Measurement with Google Analytics
Content Marketing Retreat: Measurement with Google Analytics
 

Último

Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 

Último (18)

Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 

Smashing Conference Short Talk on Sustainable Webdesign and coding practices

  • 1. a presentation by June 16, 2014 @ambersiscoe Sustainable Web Design & Coding Amber Vasquez
  • 3. The big problem we’re facing: THE INTERNET IS NOT A GREEN MEDIUM Via: MNN
  • 4. The world’s data centers will surpass the airline industry as a greenhouse gas polluter by 2020. Source: New York Times Pixels are powered by electricity
  • 5. As of 2011, only about 19% of electricity generated in the world and 12.7% of energy generated in the United States comes from renewable resources. Most electricity sources are not renewable Source: US Energy Information Administration
  • 6. Because you want your users to have an efficient site experience and deliver a great product to your client. Why should you care?
  • 7. Because efficient sites = happy customers = conversions. Why should your clients care?
  • 8. a presentation by What is Sustainable Web Design?
  • 9. So, what is Sustainable Web Design? Core Components • Design Techniques • User Testing • Green Hosting A set of practices defining how to build websites that meet present and future performance and energy efficiency standards.
  • 11. Design Techniques Overview • Use carousels • Use share buttons and social plugins • Use Flash Sustainable design is accessible across platforms and efficient as well. • Design Mobile First • Use Sprites • Compress/optimize images Do: Don’t:
  • 12. Design Techniques > Mobile First! Mobile traffic makes up nearly 30% of all internet traffic - and it’s growing all the time.
  • 13. Design Techniques > Use Sprites Sprites are useful to sustainability and page speed because it reduces the number of HTTP requests needed to load that specific page. Via: NCCGroup
  • 14. Design Techniques > Compress & Optimize Images One quick and easy step that you can take to minimize a website’s carbon footprint is to optimize images, making them smaller and faster to load.
  • 15. Design Techniques > Avoid Carousels From usability issues to massive increases in bandwidth, carousels often come packaged with problems. The Grid Approach A Single, Primary Banner Equivalent Buckets
  • 16. Design Techniques > Limit Share Buttons & Social Plugins Yes, widgets and plug-ins can save you time as a designer, but the costs to the user experience can be detrimental. Load Time 1.38s
 with share icons Load Time 0.24s
 without share icons Via: Stack Overflow
  • 17. Design Techniques > Avoid Flash For the most part, everything that can be done in Flash can be done in HTML instead.
  • 19. User Testing • A/B testing • 5 second test • Site architecture testing • Prototyping Testing your site designs & prototypes, and using expected design patterns all help you create a design that gets your users to the content, and creates a more efficient site.
  • 21. Green Hosting The servers that host your website require power 24 hours a day, so the single biggest positive impact you can make through your website is to host it with a provider that runs on 100% renewable energy. • Canvas Dreams – 100% wind powered and a B Corporation • AISO.net – 100% solar energy powered • Host Gator – Buys Renewable Energy Certificates (REC)
  • 22. Go forth and conquer the web!
  • 23. a presentation by June 16, 2014 @ambersiscoe Thank you Smashing! Amber Vasquez