I love Canada. I grew up within driving distance of Windsor, which meant I got to watch the CBC and listen to 89X CIMX. I had visited other places tot he east of of the Saltwater City, but had not yet been to the west coast town. I was in for a very pleasant time in a city with amazing food, just the nicest people and a really hip vibe, and I even got to marched in the Climate Strike as I visited the city for WordCamp Vancouver 2019!
Food and Fun
Speaker Dinner
I was excited to meet up with the organizers and speakers for the traditional Speaker Dinner and I walked the short hop over to them at
The Blackbird Public House. There was an unexpected DJ, who wasn’t bad, but was rather overpowering for the room. Not complaining here, as the drinks and the food, especially the cauliflower was very good. But it was a little loud. Heads up for other organizers, make sure you ask if there is any live music or DJ the night of your events.
Saturday
Two kinds of really well made conference coffee, dark and medium roast, and a fine selection of teas met us as we started our conference day. We also had fruit and sone light parties. They even had vegan and gluten free cookies available. Lunch was a selection of sandwiches, including a jackfruit based ‘tuna’ vegan sandwich. That and a broccoli slaw made a terrific mid day meal. We even had a snack break that featured build your own bruschetta and hummus.
After Party
After the last session we traveled up to Gastown, home of the steam clock, to get together for the after party at Rogue Kitchen & Wetbar. This is in the same transit station as the SeaBus, which I took for an inexpensive sightseeing cruise the next day. Appetizers of all sorts flowed and so did the drink tickets. Eventually a real meal was needed and we concluded the recorded part of the event. It was a good night.
Since no tweets of the after party exist, so here is a post camp pic of a good looking dog.
Sessions
Opening Remarks:
Understanding Your Customer Using Personas and Empathy Maps
Chris David Miles
This is a new talk for Chris but it seemed he had been talking about this topic for years, given the grace and comfort with the material. I have heard the jet seat story before, but I liked how he tied it in with the work they do at BlueHost and how it helps them scale. Don’t design for ‘average’ because no one matches those measurements. Design for ‘Bob’ or ‘Alice’ or any specific persona.
Raw Notes:
Who is making a product to reach customers?
Are you using data to do it?
It’s hard to be a good listener
If your method of listening to customers does not scale with you, the harder it is to hear your customers
Disastrous results from US Airforce
new planes in the late 40s lot of wrecks
blamed pilots, pilots blamed planes
cockpit design for a regular plane vs jet seat
anthropologist measured people’s hands at Harvard
no two people were alike and average represented no one
Anthropometric data
found that less than 3.5% of pilots were in the average
asked for Boeing to build a seats for each size
they were confident they could do it or were going to cancel all contracts
they made adjustable seats
turned out it was cheaper for Boeing too
It’s hard to be a good listener
Data is how we listen to our customers
We can do this too
Customer Avatars
Have a picture of specific users and clients in mind
put a name to the them and a face
align your goals according to avatars rather than averages
1) goals and values
2) Challenges and Pain Points
what is keeping them up at night?
3) Objections and role in purchase process
what are the perceptions, do they know who you are?
timing is important
Why AirBnB succeeded because of age of the internet
Role in the purchase process
is that person going to cut the check
4) Sources of Information
why do they trust?
what do they need?
who is going to get in an argument about this on Twitter?
There are other models
but how do you make sure you are seeing blind spots?
Empathy mapping
At center, customer avatar
See, Say and do, Hear, Think
Jif Peanut butter
asked about what people wanted in a coffee
what they said was opposite of what they actually wanted
Breaking Think into 2 category
Pains vs Gains
without a lot of cognitive load you can jump into other ways of thinking
Understanding what customers are Really telling you
“If I had asked people what they wanted, they would have asked for a faster horse”
What would they were really thinking of?
Faster point a to point b
if you plug it into the mapping, really is good information
study behavior
sell the coffee they are buying
Real world examples
Design case study
Ancestry.com
it is a search engine for dead people
researching, found people were looking for same name often
seemed weird
people searching for themselves
because they were not dead yet, so not there
what people were after was building family trees
tried to change copy to make people behave differently
came up with way to search for yourself
then add your parents and grandparents
search was way way better after that
listend to the customer
the way people anticipated the product
Case study Bluehost
one giant page originally
13 pages of skittles
biggest question was “what do I do now?” after logging in
how do they want to manage sites?
new layout and step by step helps new users much better
retention went up
My Session
Let’s Learn Git. No More Excuses.
This is likely the last time I am going to give this talk. It was a talk that took me from talking about business topics to technical ones. It taught me so, so much about Git along the way. I can only hope it helped others understand this powerful but ‘stupid’ tool a little better. I have been the most encouraged by the folks who tell me later they embraced Git for document management and it changed how they work. Knowing that I helped multiple people see that light makes everything I have ever done in this space feel very worth it. It was an honor to talk about this subject as many times as I got to and I hope others pick up the banner for their communities by speaking about it too.
Having Fun (But Not Too Much Fun) with Viewport Units
Richard Gilbert
Have you ever seen a talk that made you mad you had not seen it a few weeks prior. I am 100% serious that CSSCMS would look a heck of a lot different on the CSS end if I had seen this sooner and understood what viewports can do. As we enter into an age where I see CSS returning to the front and center of the conversation along with HTML, viewports are an easy way into making everything responsive. As I write this I am debating spending the cycles to rewrite my joke CMS to make better use of the tooling. My notes are not the best as I kept playing with stuff as he presented it. Go see his slides at bixgomez.com.
Raw Notes:
From Drupal
junkdrawerphotography
Uses Twig
Viewports are all over
no matter CMS
units of measure, where you use px or % or em
vh, vw, 5vmax
view width
1vw 1/100th (1% of the viewport
vmav = 1/100th of viewport height or width, whichever is larger
why?
change dynamically as change shape
oonjuntion with font size, etc
px static
% is relative to the container
vw/vh
examples – see his slides
pracacle use cases
sticky footer v1
css calc function
.page-wrapper {
min-height: 100vh //this makes sure uses full screen, invisible to us. set to 200 for scrool 2x size
}
.region–content {
min-height: calc)100vh ….(missed it)
Version2
flexbox
,page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
(missed it)
full browser header experience
breakpoints (mixin breakpointsass)
real world examples
see his code, it is awesome
… max width fixed.
stopping when you get to max viewport
html {
font-size; 2vw;
}
body {
font-size: 1em;
}
not a good way to do it, but is fun and there is a use case for it
gentle text enlarment
html { font-size: calc(12px +0.75vw); }
gentle text reducer
calc(24px – 0.6vw);
built in easy reader mode
not ideal either
2 way enlarger
calc(24px – 01.25vw);
@include breakpoints($md)
calc(7px + 1.25vs);
wrote his sass function, wants too write a plugin
Design Principles for Web Developers: How to Make Your Websites Look Good
Anne Emberline
Anne is a true expert in her field of design. I really appreciate the skills designers have but honestly, I don’t get it for the most part. As we picked apart various websites for flaws, all I could hear in my head was the old Oscar Wilde quote ““Fashion is a form of ugliness so intolerable that we have to alter it every six months.” The most important take away for me was to trust designers who pick color pallets and make font pairing choices. Overall, people will like your output better if they are not caught up in not liking it for aesthetic reasons.
Raw Notes:
how rounded corners work was her intro to CSS
design concept examples
having the eye to see what is not good specifically is the skill of a designer
bit.ly/wordcampdesign
Concept 1
Visual Communication
red slide
what does it communicate
stop, error, passion, energy
blue slide
calm, learn more, peaceful
Lorem Ipsum
feminine soft font
shouty, bold
monospace, technical, small print
lot of screenshots of websites from local companies
see slides, lot of examples
issue sometimes is no piece of visual interest
maybe add interesting typefaces
6 visually interesting things on a page = ugly
one consistent thing repeated over the site is good
keep it overall simple
hierarchy and Emphasis
path eye takes through something
we naturally see differences first
need a strong nav
Spacing and alignment
area where people know something is off but can’t say why
kinda zig zag
looks messy means not lining up
remember to think view in motion, enough vertical space
colour and typography
it is something you might need help with
pay designers to make a custom color pallet and stick with it
or get one online
same with fonts
type and color consistently
headline and body font all you need
Tempted by the Dark Side
Rose Cass
Dark Mode is now a thing. Major browsers expect it. You can use CSS to turn it on when the page is loaded in such browsers. The why you would want to do that is a subject I am going to need to look into a but more. I know theoretically it saves energy or might be easier to read. Still, an excellent presentation on a topic I knew nothing about going in.
Raw Notes:
CSS
prefers-color-scheme
github page
rcacc.github.io/darkside-talk
light theme and dark theme
like a media query
apply preferred-color-scheme: value
dark, light, no-preference
example
but why?
where do you use it?
another tool in the toolbox
maybe clients have need
Support
support IE and EDGE not well supported
obscure mobile browsers, no
flashy thing on main websites
can’t affect favicons with css only per theme
can’t use it with old browsers
Closing Keynote: Where We Go From Here
Morten Rand-Hendriksen
I had seen a previous version of this talk back at PressNomics but this one seemed much more hopeful and made me want to learn CSS even more. I feel it an honor above honors to have seen what Morten calls his last WordPress talk and am just as excited to call Morten a friend. There is a lot to ponder in this talk and I hope that this one makes it to WordPress.tv to inspire others to embrace the future that is fat arriving.
Raw Notes:
it has been less 10 years since Responsive Web Design become a thing
The future keeps arriving
it is faster and faster
the end of WP themes is in sight
concept of themes is over when the block editor controls everything
themes are different in the future at least
block areas
live demo prototype
year from now it looks like that video
everything we know about themes are about to change
all of us need to be part of the conversation
build it and define a path
Death of the monolithic CMS
this is not how the web works and will not be
treating WP as a data source
jekyll, 11ty, NuxtJS, Gatsby, HUgo
the Gatsbyfication of the echosystem is just geting started
The APIfication of the web and the internet
process info differently
assuming APIs exist
GraphQL, became the replacement of REST
WPgraphQL is how to do it,
REST is old hat
what query language wins is GraphQL
using the front end ot collect data from sources is how the web now works
WP is not going to be the one thing to buld a site
2012 end of the web as we know it article
content smushed together
content stream from multiple sources is the new norm
OSS Hippocratic License
Stallman had to step down in last few weeks
definition of who is in charge of OSS
OSS is privileged position to have
time and money, ethically not good
MIT license with a moral clause
people pushed back that they can’t control OSS like that
Open Source is evolving or devolving
this is an active conversation
Corporatization of open source
Automattic and Acquia raising money
OSS is a privileged, paid volunteers
step up in the ranks and you control it
easy to manipulate with money
Corps will consolidate their control over large OSS
accept it or do something
the Tech Reckoning
Pope felt it necessary to say something about it
in lieu of meaningful tech ethics, we’ll end up with onerous regulation
not in the conversation about how the intent and the web should be regulated
VRARMRXR
FB and Ready Player One
FB is building Oasis the way the book says
want to make HTML element a Geo location in space
AR glasses or app on phone
html appears at door
the age of web-content-consumed-through-rectangle-screens is already over, we are at the nd of it
the CSS Revolution
Variable Fonts
emerging tech
CSS houdini
low level JS API for the browser’s render engine
low level
all of it is happen
future is constantly arriving
visBug for Chrome
visual design in the browser, right now
CSS is about to become way more magical
the Next generation
this is likely his last WC talk
you need to build the future, not the old geezers
how will you build the future for yourself and the world?
he believes in this community
Wrapping up
I saw Nardwuar the Human Serviette perform with his band The Evaporators during Nard Gets A Star. There are many bands that influenced me over the years to believe in the DIY ethos and further, to believe in the power of punk rock. The Evaporators hold a super special place in my heart as I discovered them as a college radio DJ at 88.1FM WBGU. The first time I played Slap Ham it blew my mind and that is pretty much how I learned that punk was more then angry and loud. It could also be silly and positive.
Here is the kicker on this though. I had no idea this show was going to happen until I was walking around on Friday night. The first and only time I have ever been to Vancouver British Columbia Canada, I got to see one of my punk rock heroes. I got to stand stage side as he performed. I am still in awe of life lining up like this. Vancouver did it’s best to impress me and become one of my new favorite cities on earth.
On a more serious note, this WordCamp might have been my last for 2019. At the time of writing this post there is still a maybe out there from one more camp, but it is looking more like I am going to end my WordCamp year at this one. I have a lot of feelings about these events and this space in general, reflective of some of what Morten talked about in his Keynote. No matter if I keep on in the WordPress space or not, I greatly hope I get to return one day to Vancouver, maybe even for WordCamp Vancouver 2020!.