This document provides tips for building responsible WordPress sites. It discusses how WordPress accounts for nearly a quarter of websites and therefore building sites better can significantly impact the web. It recommends having a clear content strategy defined and doing research on project assumptions and overcoming objections. It also suggests making budgets, properly managing scripts and styles, optimizing images and fonts, and performing quality assurance testing to ensure sites work well and are maintainable. The key is making informed decisions throughout the process.
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.
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
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
Hello everyone! Thank you for attending WordCamp St. Louis, and thank you especially for coming to see me talk.
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.
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.
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.
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.
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.
“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
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.
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:
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!
Lara Hogan: http://larahogan.me/design/
Scott Jehl: http://abookapart.com/products/responsible-responsive-design AND http://www.filamentgroup.com/lab/performance-rwd.html
And Just being able to explain why it is you did what you did. Don’t ever forget that we’re communications professionals.