Ropa Vieja

Ropa Vieja is Spanish for “Old Clothes.” It’s a Mexican dish that you probably won’t find at many restaurants because, well, it’s not glamorous.  It’s peasant food and the prep could not be simpler: get a big pot, a very cheap piece of meat, throw in stock, vegetables and seasoning, and cook on low heat for a day, give or take a few hours.

The tough meat falls apart in strands that look like torn, worn out clothes. Hence the name.

What on earth does this have to do with design, and specifically design tools?

I tweeted out yesterday that the more I use great tools like SASS and the libraries that it has on client projects, the more I enjoy using plain old vanilla CSS on personal stuff.

SASS is wonderful – I am in no way anti-SASS.  I use the libsass port of Foundation on nearly every client project now because doing so allows me to

  1. become more efficient by doing (repetitive actions get faster)
  2. reuse snippets for common components (saving time, which ultimately means more profit and/or cost savings)
  3. ensures my code is standards compliant (because Foundation is built by really smart developers and a lot of people use it)
  4. Helps me automate performance testing and performance improvements (the libsass version uses Grunt to manage tasks, and is totally configurable.  Again, this saves time and makes adding value easier)

To extend the cooking analogy,  if you’ve ever worked in a kitchen before you know –  lots and lots of prep goes in before the house opens. Some ingredients and dishes can even be par-cooked, so the speed of service (i.e. production) can be sped up to increase profitability. You also know that every dish in every restaurant has a recipe and that every prep cook, line cook and sous chef is expected to follow the recipe.  Following the recipe is not that difficult.

When I write production code,  I am basically following recipes so that I can serve them quickly, with a smile and try to leave my guests (clients) planning when they are coming back next.   But following a recipe and writing a recipe are two very different tasks. Understanding why a recipe works is different than following the recipe.

Which takes me back to vanilla CSS.  Whenever I want to learn how to do something with SASS, and really understand it, I’m going to practice it a lot with vanilla CSS.  The flaws of CSS actually make it a very good learning tool.  To write all this by hand is time consuming, far more than applying snippets.  The action of writing it all out helps me to understand it. It’s a simple method to reintroduce mindfulness and focus to tasks that can be pretty rote once you’ve done them a few times.  By slow cooking my CSS,  I begin to understand what it is I’m doing better and as an extension, can find novel ways of doing things.

Production and practice are two very different tasks, and the tools we use can be different.   If you look at any sport or craft,  most of the practice time is spent on activities that aren’t actually the competitive or production environment.  It’s totally worthwhile to practice isolated tasks (such as, say, making a block grid list) in a slower,  simpler environment.  It’s analogous to taking batting practice, or doing a table read for a scene, or peeling potatoes.  Ultimately, the best in the world at anything aren’t all that special: they happen to be flawless at the rudiments of their profession, and this only comes from lots of dedicated practice time.

So, the next time you set out to learn a new skill, put away the command line and the fancy tools and the things that make your competition or production better. Get back to basics, slow down, and enjoy some old clothes.

 

Word Camp STL 2015

Here’s the Power Point Slides and Notes from My Presentation at Word Camp STL 2015

Notes, links, and analysis of WordCamp STL coming very soon, as well as video on WordPress.tv!

Notes:

Slide 3:

In the next five years, a billion more people will come online. 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.

 

Slide 4:

Same reference Source also notes 60.7% of all CMS installs are WordPress.

 

Slide 5:

I want to make the point here, in my notes,  that it isn’t simply about Mobile First.  It’s that Mobile usage is a lagging indicator of how people use what we build.  What I’m making an argument for is better serving these people.

 

Slide 6:

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.

I will probably write a post on how to avoid bad fits.

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.

 

Slide 7:

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.

— It should be noted that WP can also make for a very useful app platform. In which case, all of this still applies, plus additional concerns about interaction design.

 

Slide 8:

We do not work with anyone who won’t allow us to do research. We are problem solvers and strategists, not production artists.

Common Objections:

“We’ve been in business for X decades, what else will we learn?”  “Isn’t that costly?”

Answers:

“You may know your business cold but I don’t” and

“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.

Business Model Analysis – if the goal of the site is to make money, you need to understand how they make it, and where your project can fit (or better, how their shit is broken and how you can help)

AVOID:

Surveys. -qualitative data dressed up as quantitative.  requires large n for representative sample.

Focus Groups. – worse than useless

Copying.- this isn’t research but some people pass it off as

Meaningless Data or cheap analysis – If you’re going to involve hard metrics you have to be willing to investigate those thoroughly.  Most designers don’t have that skill set or time allotted, plus they are easily manipulated.

For more,  pick up Erika Hall’s amazing book.

 

Slide 9:

I’ll let the content experts at WCSTL talk more about this but the four basic considerations you want to have thought out are:

  1. What is the substance?
  2. What’s the style?
  3. Who will produce it?
  4. 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.  One other point: having less or micro copy does not mean you get to skimp here.  Also, Content Strategy is not Content Marketing.  I have no idea how to do the latter.

What we’re also talking about here is Content Priority – what goes where and why.  The why will be based on the people you want to read or complete the action.  Which leads us back to the question of how do we best serve them.

 

Slide 10:

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 (yours and your clients.

How?
For More: Tim Kadlec

  1. Define Early On – should arise from research. -aim for 20% faster than your competitor, as a benchmark.
  2. Focus on Perceived Performance (http://alistapart.com/events).  Keeps focus on people.
  3. Use a set of benchmarks, not a single number.
    1. There’s several different types of measures like
      1. Time Measures – Load Time, DomContent, Total Load – perceived performance will favor faster render rather than shorter total.
      2. Quantity – HTTP Requests, Page Weight  – Weight is fantastic for using with designers to make tradeoffs, especially fonts/images
      3. Speed Index https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
    2. But what’s more important than how much is how you load.

 

 

Slide 11:

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!

 

Slide 12:

Four things:

  1. I forgot to mention GZIP.  You should be doing it.
  2. 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 Yesenia Perez Cruz: https://vimeo.com/108328247 For a LOT more on the actual techniques.
  3. What I was explaining about task runners seemed to lose some people.  Basically We have a source or assets folder with our raw, commented,  partialized code; whether that’s JavaScript, SASS/LESS/CSS, Images, or HTML/PHP templates.  We set up a Grunt or Gulp File that will do several things, but chiefly it will – compile SASS/LESS into CSS; Concatenate all of the CSS/JS into one file each; Minify that File; and place the new, minified file in the root. Each step of that will improve performance.  see gulpjs.com for more.
  4. These will help any site but the more decision making you make ahead of production the better the result.

 

Slide 13:

If you want more information about pattern libs, I highly suggest you check out Brad Frost and his work, as well as Joe McGill’s presentation.

 

I’ll make a sample testing matrix soon.

 

Slide 15:

I didn’t go as fire & brimstone as this, but the intellectual, ethical, and political basis for my talk is Mike Monteiro’s call to arms, How Designers Destroyed The World.

You should also read everything the guy has put out – they’ve been my beacon in these murky seas.

ICYMI: How to Set a Static Front Page in WordPress

Flywheel is the best managed WordPress Hosting in the land

A while ago I wrote a short, simple post to show how to set a static front page in WordPress. I really enjoyed writing this post and am glad I got a chance to put it out on Flywheel’s amazing blog, the layout.
If you missed it the first time around you should definitely read my article, and then read through a bunch of the rest of them. It’s the perfect resource for agency owners, freelancers, designers, developers, and potential clients to learn more and understand better how to work with WordPress.

Here’s a link to my article: How to set a Static Front Page in WordPress.

How to Set a Static Front Page in WordPress
Find my article on The Layout!

 

And here’s a link to the rest of their posts: The Layout.

PS:  I’m an affiliate of  Flywheel – if you’re looking for bar none the best managed WP hosting around, use this link to sign up!