SlideShare una empresa de Scribd logo
1 de 15
Building Responsible
WordPress Sites
Brian Goldstein
Who Am I? Why Do You Care?
● Using WP since 07
● ⅓ of Our Collective
● Wear Many Hats
● Messed up a whole
lot
Responsibility!
● By 2020, smartphones may cost as little as
$10
● Mobile page loads already outpaces desktop
● Data costs $ http://whatdoesmysitecost.com/
● Average page weight = 2MB
● We went to the moon with 16kb.
But wait, there’s more!
WordPress accounts for 23.5% of the web!
(source: http://w3techs.com/technologies/details/cm-wordpress/all/all)
With that deep of an impact, building WP sites
better can make a huge impact on the web’s
future.
Choose Your Own Adventure
So, how do we do better?
1. Don’t take on clients who you know will be a
pain. (no judgement)
2. Don’t use WordPress as a site builder.
a. A site builder gives a menu of options but little
control and decisions
b. a CMS gives a lot of implicit flexibility but requires
lots of decision making
Decision Making!
It’s what using WordPress responsibly
ultimately comes down to.
But How?
Mental Models
Having a real research phase:
● What are the project assumptions? How do
we test them?
Overcoming Objections:
“Would you rather?”
Why they go to your site
Two reasons:
1. Read/Watch Something
2. Do Something
The more clearly you define your content
strategy, the more you’ll get out of WP.
Be an Adult: Make a Budget
Use webpagetest.com to establish baseline,
see what’s going on (filmstrip view)
Simple Math: 10 sec on 3G/768Kbps.
768Kbps/8B = 96kB/s
96kB/s X 10sec = 960 kB page weight.*
Got to keep it moving
I LOVE functions.php
● properly enqueue scripts and styles
● remove/filter things we don’t need
● lots of control - the WP traffic cop
SWAT for Sites
HTML: leverage PHP by creating dynamic
content and if possible load async
CSS + JS: you can use Grunt/Gulp to Conc +
Minify + Shorten Path
Images: PS + ImageOptim + Task Runner =
Win
Fonts: Discretion
Quality Assurance
Not just after you send a link to client…
1. Pattern Library - ensures clean
code/maintainability
2. Continuous Testing - Chrome Dev
Tools/Firebug
3. Testing Matrix - helps keep track of what
works and needs fixin’
No Walking Dead
Worst thing ever?
Beautiful site client can’t
use.
● Code My Mother Can Read
● Docs
● Training Session
There is so, so so much more...
But my time has drawn to a close.
Just remember:
“Make New Mistakes”

Más contenido relacionado

La actualidad más candente

Hugo in Action: website creation made painless
Hugo in Action: website creation made painlessHugo in Action: website creation made painless
Hugo in Action: website creation made painlessManning Publications
 
Gutenberg: Pros and Cons for this big change in WordPress
Gutenberg: Pros and Cons for this big change in WordPressGutenberg: Pros and Cons for this big change in WordPress
Gutenberg: Pros and Cons for this big change in WordPressMauricio Gelves
 
Career on WordPress: How to get started with WordPress
Career on WordPress: How to get started with WordPressCareer on WordPress: How to get started with WordPress
Career on WordPress: How to get started with WordPressEunus Hosen
 
Top 10 website optimizations tips
Top 10 website optimizations tipsTop 10 website optimizations tips
Top 10 website optimizations tipskatyaweb
 
How i acheived a pretty good google page speed insights score
How i acheived a pretty good google page speed insights scoreHow i acheived a pretty good google page speed insights score
How i acheived a pretty good google page speed insights scoreMatt Bailey
 
The Internet Is Slowing Down, Fast
The Internet Is Slowing Down, FastThe Internet Is Slowing Down, Fast
The Internet Is Slowing Down, FastChristian Bochicchio
 
5 Easy Things To Be Just A Bit More Agile
5 Easy Things To Be Just A Bit More Agile5 Easy Things To Be Just A Bit More Agile
5 Easy Things To Be Just A Bit More AgileBrian Prince
 
Ben Marks: The Care and Feeding of Magento Developers
Ben Marks: The Care and Feeding of Magento DevelopersBen Marks: The Care and Feeding of Magento Developers
Ben Marks: The Care and Feeding of Magento DevelopersMeet Magento Italy
 
WooCommerce: Customization FAQ
WooCommerce: Customization FAQWooCommerce: Customization FAQ
WooCommerce: Customization FAQRodolfo Melogli
 
MVA Transcript with Certificate - 2017-Jan-27
MVA Transcript with Certificate - 2017-Jan-27MVA Transcript with Certificate - 2017-Jan-27
MVA Transcript with Certificate - 2017-Jan-27Mohammed Subbirul Muksud
 
Responsive Web Time Machine 2
Responsive Web Time Machine 2Responsive Web Time Machine 2
Responsive Web Time Machine 2bootnumlock
 
High performance websites session1
High performance websites  session1High performance websites  session1
High performance websites session1amr elgarhy
 
The art of website layout
The art of website layoutThe art of website layout
The art of website layoutmilika866666
 
Better than google
Better than googleBetter than google
Better than googlevitalhst
 
Google Quality Guidelines 101 for WordPress Bloggers
Google Quality Guidelines 101 for WordPress BloggersGoogle Quality Guidelines 101 for WordPress Bloggers
Google Quality Guidelines 101 for WordPress BloggersNile Flores
 
Website Speed :: Fox Valley Computing Professionals, September 2014
Website Speed :: Fox Valley Computing Professionals, September 2014Website Speed :: Fox Valley Computing Professionals, September 2014
Website Speed :: Fox Valley Computing Professionals, September 2014Straight North
 

La actualidad más candente (20)

Hugo in Action: website creation made painless
Hugo in Action: website creation made painlessHugo in Action: website creation made painless
Hugo in Action: website creation made painless
 
Hello world web
Hello world webHello world web
Hello world web
 
Gutenberg: Pros and Cons for this big change in WordPress
Gutenberg: Pros and Cons for this big change in WordPressGutenberg: Pros and Cons for this big change in WordPress
Gutenberg: Pros and Cons for this big change in WordPress
 
Career on WordPress: How to get started with WordPress
Career on WordPress: How to get started with WordPressCareer on WordPress: How to get started with WordPress
Career on WordPress: How to get started with WordPress
 
Top 10 website optimizations tips
Top 10 website optimizations tipsTop 10 website optimizations tips
Top 10 website optimizations tips
 
How i acheived a pretty good google page speed insights score
How i acheived a pretty good google page speed insights scoreHow i acheived a pretty good google page speed insights score
How i acheived a pretty good google page speed insights score
 
The Internet Is Slowing Down, Fast
The Internet Is Slowing Down, FastThe Internet Is Slowing Down, Fast
The Internet Is Slowing Down, Fast
 
5 Easy Things To Be Just A Bit More Agile
5 Easy Things To Be Just A Bit More Agile5 Easy Things To Be Just A Bit More Agile
5 Easy Things To Be Just A Bit More Agile
 
Frame or not to Frame
Frame or not to FrameFrame or not to Frame
Frame or not to Frame
 
Ben Marks: The Care and Feeding of Magento Developers
Ben Marks: The Care and Feeding of Magento DevelopersBen Marks: The Care and Feeding of Magento Developers
Ben Marks: The Care and Feeding of Magento Developers
 
Sketches and Notes from CascadiaJS 2013
Sketches and Notes from CascadiaJS 2013Sketches and Notes from CascadiaJS 2013
Sketches and Notes from CascadiaJS 2013
 
Itjs124
Itjs124Itjs124
Itjs124
 
WooCommerce: Customization FAQ
WooCommerce: Customization FAQWooCommerce: Customization FAQ
WooCommerce: Customization FAQ
 
MVA Transcript with Certificate - 2017-Jan-27
MVA Transcript with Certificate - 2017-Jan-27MVA Transcript with Certificate - 2017-Jan-27
MVA Transcript with Certificate - 2017-Jan-27
 
Responsive Web Time Machine 2
Responsive Web Time Machine 2Responsive Web Time Machine 2
Responsive Web Time Machine 2
 
High performance websites session1
High performance websites  session1High performance websites  session1
High performance websites session1
 
The art of website layout
The art of website layoutThe art of website layout
The art of website layout
 
Better than google
Better than googleBetter than google
Better than google
 
Google Quality Guidelines 101 for WordPress Bloggers
Google Quality Guidelines 101 for WordPress BloggersGoogle Quality Guidelines 101 for WordPress Bloggers
Google Quality Guidelines 101 for WordPress Bloggers
 
Website Speed :: Fox Valley Computing Professionals, September 2014
Website Speed :: Fox Valley Computing Professionals, September 2014Website Speed :: Fox Valley Computing Professionals, September 2014
Website Speed :: Fox Valley Computing Professionals, September 2014
 

Destacado

Актив Ист
Актив ИстАктив Ист
Актив ИстFoxytim2
 
Soycomil корма животных
Soycomil корма животныхSoycomil корма животных
Soycomil корма животныхFoxytim2
 
Eγκατάσταση (Clean install) Λ.Σ. Windows
Eγκατάσταση (Clean install) Λ.Σ. WindowsEγκατάσταση (Clean install) Λ.Σ. Windows
Eγκατάσταση (Clean install) Λ.Σ. Windowsgogosf
 
Ccss training of the trainers
Ccss training of the trainers Ccss training of the trainers
Ccss training of the trainers Toby Price
 
Bend and Snap you into a Great Public Speaker by Alexi Zloof
Bend and Snap you into a Great Public Speaker by Alexi ZloofBend and Snap you into a Great Public Speaker by Alexi Zloof
Bend and Snap you into a Great Public Speaker by Alexi ZloofAlexi Zloof
 
Il riscontro per le aziende delle attività sostenibili
Il riscontro per le aziende delle attività sostenibiliIl riscontro per le aziende delle attività sostenibili
Il riscontro per le aziende delle attività sostenibilieAmbiente
 
Il progetto Green Site
Il progetto Green SiteIl progetto Green Site
Il progetto Green SiteeAmbiente
 
Extra credit
Extra creditExtra credit
Extra creditTamarL88
 
PROTOCOLLO OPERATIVO PER LA CARATTERIZZAZIONE DEI SITI AI SENSI DEL D. LGS. 1...
PROTOCOLLO OPERATIVO PER LA CARATTERIZZAZIONE DEI SITI AI SENSI DEL D. LGS. 1...PROTOCOLLO OPERATIVO PER LA CARATTERIZZAZIONE DEI SITI AI SENSI DEL D. LGS. 1...
PROTOCOLLO OPERATIVO PER LA CARATTERIZZAZIONE DEI SITI AI SENSI DEL D. LGS. 1...eAmbiente
 
Мобильные технологии для современного города
Мобильные технологии для современного городаМобильные технологии для современного города
Мобильные технологии для современного городаMoscow IT Department
 
eAmbiente partner di hiWHIM
eAmbiente partner di hiWHIMeAmbiente partner di hiWHIM
eAmbiente partner di hiWHIMeAmbiente
 
Newsletter 10/12 Porto di Venezia
Newsletter 10/12 Porto di VeneziaNewsletter 10/12 Porto di Venezia
Newsletter 10/12 Porto di VeneziaeAmbiente
 
Qtp Mgl Presentation
Qtp Mgl PresentationQtp Mgl Presentation
Qtp Mgl Presentationtechgajanan
 
نسخ من بشار مهم
نسخ من بشار مهمنسخ من بشار مهم
نسخ من بشار مهمahmad1990hanoon
 
Demo 03.04.13
Demo 03.04.13Demo 03.04.13
Demo 03.04.13Foxytim2
 
рпи новая
рпи новаярпи новая
рпи новаяFoxytim2
 

Destacado (20)

Актив Ист
Актив ИстАктив Ист
Актив Ист
 
Soycomil корма животных
Soycomil корма животныхSoycomil корма животных
Soycomil корма животных
 
Eγκατάσταση (Clean install) Λ.Σ. Windows
Eγκατάσταση (Clean install) Λ.Σ. WindowsEγκατάσταση (Clean install) Λ.Σ. Windows
Eγκατάσταση (Clean install) Λ.Σ. Windows
 
Yuk saudaraku...
Yuk saudaraku...Yuk saudaraku...
Yuk saudaraku...
 
Ccss training of the trainers
Ccss training of the trainers Ccss training of the trainers
Ccss training of the trainers
 
Fm growth 7 11-11
Fm growth 7 11-11Fm growth 7 11-11
Fm growth 7 11-11
 
Bend and Snap you into a Great Public Speaker by Alexi Zloof
Bend and Snap you into a Great Public Speaker by Alexi ZloofBend and Snap you into a Great Public Speaker by Alexi Zloof
Bend and Snap you into a Great Public Speaker by Alexi Zloof
 
Il riscontro per le aziende delle attività sostenibili
Il riscontro per le aziende delle attività sostenibiliIl riscontro per le aziende delle attività sostenibili
Il riscontro per le aziende delle attività sostenibili
 
Il progetto Green Site
Il progetto Green SiteIl progetto Green Site
Il progetto Green Site
 
Extra credit
Extra creditExtra credit
Extra credit
 
PROTOCOLLO OPERATIVO PER LA CARATTERIZZAZIONE DEI SITI AI SENSI DEL D. LGS. 1...
PROTOCOLLO OPERATIVO PER LA CARATTERIZZAZIONE DEI SITI AI SENSI DEL D. LGS. 1...PROTOCOLLO OPERATIVO PER LA CARATTERIZZAZIONE DEI SITI AI SENSI DEL D. LGS. 1...
PROTOCOLLO OPERATIVO PER LA CARATTERIZZAZIONE DEI SITI AI SENSI DEL D. LGS. 1...
 
Мобильные технологии для современного города
Мобильные технологии для современного городаМобильные технологии для современного города
Мобильные технологии для современного города
 
eAmbiente partner di hiWHIM
eAmbiente partner di hiWHIMeAmbiente partner di hiWHIM
eAmbiente partner di hiWHIM
 
Newsletter 10/12 Porto di Venezia
Newsletter 10/12 Porto di VeneziaNewsletter 10/12 Porto di Venezia
Newsletter 10/12 Porto di Venezia
 
Cgc3 prytula копія
Cgc3 prytula копіяCgc3 prytula копія
Cgc3 prytula копія
 
Qtp Mgl Presentation
Qtp Mgl PresentationQtp Mgl Presentation
Qtp Mgl Presentation
 
نسخ من بشار مهم
نسخ من بشار مهمنسخ من بشار مهم
نسخ من بشار مهم
 
الزمرة
الزمرةالزمرة
الزمرة
 
Demo 03.04.13
Demo 03.04.13Demo 03.04.13
Demo 03.04.13
 
рпи новая
рпи новаярпи новая
рпи новая
 

Similar a Building Responsible Wordpress Sites

How To Make Your Wordpress Website Load Faster - 20 Tips
How To Make Your Wordpress Website Load Faster - 20 TipsHow To Make Your Wordpress Website Load Faster - 20 Tips
How To Make Your Wordpress Website Load Faster - 20 TipsWorkurious
 
Adapting to a Responsive Design at Untangle the Web on 29th July 2013
Adapting to a Responsive Design at Untangle the Web on 29th July 2013Adapting to a Responsive Design at Untangle the Web on 29th July 2013
Adapting to a Responsive Design at Untangle the Web on 29th July 2013Matt Gibson
 
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...Otto Kekäläinen
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowWordPress
 
Myths & true stories about JavaScript for SEO
Myths & true stories about JavaScript for SEOMyths & true stories about JavaScript for SEO
Myths & true stories about JavaScript for SEOSara Moccand-Sayegh
 
Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Christian Heilmann
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performanceSagar Desarda
 
Websites for Hackers
Websites for HackersWebsites for Hackers
Websites for HackersChris Antes
 
Developing high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web workerDeveloping high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web workerSuresh Patidar
 
10 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 201610 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 2016Chris Love
 
Word press optimizations
Word press optimizations Word press optimizations
Word press optimizations Shawn DeWolfe
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013Achieve Internet
 
Website & Internet + Performance testing
Website & Internet + Performance testingWebsite & Internet + Performance testing
Website & Internet + Performance testingRoman Ananev
 
Performance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For SpeedPerformance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For SpeedVijay Rayapati
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...Doug Gapinski
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...Dave Olsen
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereChris Love
 
WPblog's Ultimate WordPress Guide to Boost Your Website Performance
WPblog's Ultimate WordPress Guide to Boost Your Website Performance WPblog's Ultimate WordPress Guide to Boost Your Website Performance
WPblog's Ultimate WordPress Guide to Boost Your Website Performance Jessica Ervin
 

Similar a Building Responsible Wordpress Sites (20)

How To Make Your Wordpress Website Load Faster - 20 Tips
How To Make Your Wordpress Website Load Faster - 20 TipsHow To Make Your Wordpress Website Load Faster - 20 Tips
How To Make Your Wordpress Website Load Faster - 20 Tips
 
Adapting to a Responsive Design at Untangle the Web on 29th July 2013
Adapting to a Responsive Design at Untangle the Web on 29th July 2013Adapting to a Responsive Design at Untangle the Web on 29th July 2013
Adapting to a Responsive Design at Untangle the Web on 29th July 2013
 
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
 
WordPress optimization
WordPress optimizationWordPress optimization
WordPress optimization
 
Myths & true stories about JavaScript for SEO
Myths & true stories about JavaScript for SEOMyths & true stories about JavaScript for SEO
Myths & true stories about JavaScript for SEO
 
Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performance
 
Websites for Hackers
Websites for HackersWebsites for Hackers
Websites for Hackers
 
Developing high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web workerDeveloping high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web worker
 
10 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 201610 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 2016
 
Word press optimizations
Word press optimizations Word press optimizations
Word press optimizations
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
Website & Internet + Performance testing
Website & Internet + Performance testingWebsite & Internet + Performance testing
Website & Internet + Performance testing
 
Performance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For SpeedPerformance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For Speed
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices...
 
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
Everything You Know is Not Quite Right Anymore: Rethinking Best Practices to ...
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
WPblog's Ultimate WordPress Guide to Boost Your Website Performance
WPblog's Ultimate WordPress Guide to Boost Your Website Performance WPblog's Ultimate WordPress Guide to Boost Your Website Performance
WPblog's Ultimate WordPress Guide to Boost Your Website Performance
 

Último

10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfAlasAlthaher
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道yrolcks
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy ysrajece
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementMd. Shariful Hoque
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxNitish292041
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 

Último (20)

10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdf
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy y
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 

Building Responsible Wordpress Sites

  • 2. Who Am I? Why Do You Care? ● Using WP since 07 ● ⅓ of Our Collective ● Wear Many Hats ● Messed up a whole lot
  • 3. Responsibility! ● By 2020, smartphones may cost as little as $10 ● Mobile page loads already outpaces desktop ● Data costs $ http://whatdoesmysitecost.com/ ● Average page weight = 2MB ● We went to the moon with 16kb.
  • 4. But wait, there’s more! WordPress accounts for 23.5% of the web! (source: http://w3techs.com/technologies/details/cm-wordpress/all/all) With that deep of an impact, building WP sites better can make a huge impact on the web’s future.
  • 5. Choose Your Own Adventure
  • 6. So, how do we do better? 1. Don’t take on clients who you know will be a pain. (no judgement) 2. Don’t use WordPress as a site builder. a. A site builder gives a menu of options but little control and decisions b. a CMS gives a lot of implicit flexibility but requires lots of decision making
  • 7. Decision Making! It’s what using WordPress responsibly ultimately comes down to. But How?
  • 8. Mental Models Having a real research phase: ● What are the project assumptions? How do we test them? Overcoming Objections: “Would you rather?”
  • 9. Why they go to your site Two reasons: 1. Read/Watch Something 2. Do Something The more clearly you define your content strategy, the more you’ll get out of WP.
  • 10. Be an Adult: Make a Budget Use webpagetest.com to establish baseline, see what’s going on (filmstrip view) Simple Math: 10 sec on 3G/768Kbps. 768Kbps/8B = 96kB/s 96kB/s X 10sec = 960 kB page weight.*
  • 11. Got to keep it moving I LOVE functions.php ● properly enqueue scripts and styles ● remove/filter things we don’t need ● lots of control - the WP traffic cop
  • 12. SWAT for Sites HTML: leverage PHP by creating dynamic content and if possible load async CSS + JS: you can use Grunt/Gulp to Conc + Minify + Shorten Path Images: PS + ImageOptim + Task Runner = Win Fonts: Discretion
  • 13. Quality Assurance Not just after you send a link to client… 1. Pattern Library - ensures clean code/maintainability 2. Continuous Testing - Chrome Dev Tools/Firebug 3. Testing Matrix - helps keep track of what works and needs fixin’
  • 14. No Walking Dead Worst thing ever? Beautiful site client can’t use. ● Code My Mother Can Read ● Docs ● Training Session
  • 15. There is so, so so much more... But my time has drawn to a close. Just remember: “Make New Mistakes”

Notas del editor

  1. Hello everyone! Thank you for attending WordCamp St. Louis, and thank you especially for coming to see me talk.
  2. These are my two partners and me - this is a totally normal, ordinary day for us. My first WP project was a wp.com blog called “The Suit” where I complained about my girlfriend and my terrible short stint in life insurance. It’s gotten better from there, but it took a while. I’m also married and a father… to a cat. I’ve been a developer at some amazing agencies, a freelancer, and now I’m the chief people person for Our Collective. This gives me the experience to look at a problem a lot of different ways, which has helped improve design, development, and people skills.
  3. In the next five years, a billion more people will come on line. Mobile page loads will dwarf desktop page loads. The average page load from http archive in the last year grew to 2MB with 100 requests. Consider that we went to the moon with only 16kb of memory. The point is, we can no longer consider these as edge cases; these are actually becoming the new norm.
  4. We can continue the trend of making sites that don’t work or that are too slow and costly for people to use, or we can take a stand. All we have is our reputation, and it’s on the line.
  5. Real quickly on the first point: every single time I’ve taken on a design project where the best thing about it was the money, I’ve regretted it. I don’t begrudge anyone making a living, but you have to stand for more than money if you want to stick around long enough to make a difference. Site builders are great. I’m not slamming site builders. Squarespace is a fantastic product to quickly turn around a site. But the degree of control that you ultimately get to exercise is quite limited. WP never was a site builder, and is now closer to a full fledged CMS - albeit one that’s easy to train a client team on and comparatively easy to maintain - two of the many reasons we love it.
  6. Because, at least for our purposes, WordPress is a CMS, and requires lots of decisions to be used to the proper effect, making good decisions becomes the most important thing.
  7. “Would you rather sink a lot of money on untested assumptions or spend a few bucks checking them out?” Research methods worth using: Ethnographic Research - in person, open-ended interviews (works best with a partner: one to talk and one to write) Usability testing - watch people use what you’re designing and note problems The Bladder Test - “accidentally” run into people on their way to the bathroom and try to get them to complete a task Comparative research - know the tropes to subvert them. Writers are always reading AVOID: Surveys. Focus Groups. Copying. Meaningless Data or cheap analysis
  8. I’ll let the content experts at WCSTL talk more about this but the four basic considerations you want to have thought out are: What is the substance? What’s the style? Who will produce it? Who will make sure it’s working? (http://www.usability.gov/what-and-why/content-strategy.html) This is a deep topic and one absolutely worth diving much deeper into, but I’ve got to keep going.
  9. Your household and company probably have a budget, so why shouldn’t your next project? Obviously time and money are important; and the performance of your site effects both. How? Define Early On - should arise from research. -aim for 20% faster than your competitor, as a benchmark. Focus on Perceived Performance (http://alistapart.com/events). Keeps focus on people. Use a set of benchmarks, not a single number. There’s several different types of measures like Time Measures - Load Time, DomContent, Total Load - perceived performance will favor faster render rather than shorter total. Quantity - HTTP Requests, Page Weight - Weight is fantastic for using with designers to make tradeoffs, especially fonts/images Speed Index https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index But what’s more important than how much is how you load:
  10. For WP, we can actually make this very very easy. With some simple modifications to functions.php we can: 1) register and enqueue only the js/css we need 2) do so conditionally - such as with outdated browsers. (modernizr is a good example) 3) remove a bunch of feeds and other ephemera that WP spits out by default: http://nicolasgallagher.com/anatomy-of-an-html5-wordpress-theme/ 4) unlocks some really cool features in WP - menus, widgets, featured images --- the list goes on and on and you get to decide!
  11. Lara Hogan: http://larahogan.me/design/ Scott Jehl: http://abookapart.com/products/responsible-responsive-design AND http://www.filamentgroup.com/lab/performance-rwd.html
  12. And Just being able to explain why it is you did what you did. Don’t ever forget that we’re communications professionals.