Building Responsible Wordpress Sites
Download as PPTX, PDF1 like768 views
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.
Building Responsible Wordpress Sites
- 1. Building Responsible WordPress Sites Brian Goldstein
- 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”
Editor's Notes
- #2: Hello everyone! Thank you for attending WordCamp St. Louis, and thank you especially for coming to see me talk.
- #3: 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.
- #4: 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.
- #6: 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.
- #7: 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.
- #8: 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.
- #9: “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
- #10: 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.
- #11: 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:
- #12: 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!
- #13: Lara Hogan: http://larahogan.me/design/ Scott Jehl: http://abookapart.com/products/responsible-responsive-design AND http://www.filamentgroup.com/lab/performance-rwd.html
- #15: And Just being able to explain why it is you did what you did. Don’t ever forget that we’re communications professionals.