Speaking Engagements

How Not to Destroy the World: Ethics in Design and Technology – Smashing Conference Freiburg, 2018

All the links from the talk

Unsplash photos from the presentation

Speaking Engagements

WCEU2017: CSS Grid Changes Everything (About Web Layouts)

Below are the advanced slides for my WordCamp Europe 2017 talk CSS Grid Changes Everything (About Web Layouts) presented June 17th, 2017 in Paris, France:

From the website:

“CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! Imagine drawing a grid in the browser and placing content in one or any number of cells without having to change the HTML or source order. And imagine changing that grid on the fly using media queries or JavaScript while keeping the HTML markup clean and accessible. That’s what CSS Grid does, and that’s why you should be using it today.

The CSS Grid Layout Module introduces a native CSS grid system, provided at the viewport level, that achieves what CSS frameworks and popular grid systems could only dream about: Responsive, flexible, pure CSS grid layouts, independent of document source order, that allow us to treat the browser as a true design and layout surface.

In this talk you’ll get an intro to CSS Grid and learn how it changes pretty much everything when it comes to layouts on the web. Through examples, code snippets, and practical demos you’ll learn how to use CSS Grid in a theme for modern responsive layouts, and you’ll also learn how to handle older browsers without Grid support in a clean and straight-forward way.

CSS Grid is here, and you can start using it today. This talk shows you how to do it right.”

Links from the talk

Video of the talk will be posted here as soon as it’s available. Until then, read through the slides above and follow the links for more information on this transformational CSS module.

Header photo by Mark Sallman.

Speaking Engagements

Informing Your Empathy for More Human Designs and Communities

This article is a companion piece to the WordCamp Europe 2016 talk “Empathy and Acceptance in Design and Community” seen below:

Understanding Empathy

Our ability to share the feelings of our fellow humans, to put ourselves in their shoes and see the world from their perspective, is a cornerstone of communal society. But shine a light on this skill and its luster quickly fades. What appears an ability to share the experience of another reveals itself an unconscious projection of our own experiences and biases onto other people.

Empathy is the mid-point on a graduated scale of automatic emotional response, starting with Sympathy and ending with Compassion. It is quick, instinctive, easily manipulated, and often misleading.

Slides from the talk Empathy and Acceptance in Design and Community
Sympathy, Empathy, Compassion: The three-stage automatic emotional response system

When we see a child drop their ice cream, we have an immediate emotional reaction: We have Sympathy, feeling for the child (how sad), we have Empathy, we feel with the child (if I dropped my ice cream, I’d be sad too), we may even have Compassion, feeling a need to step in and help the child (here you go, you can have mine). Here, Sympathy, Empathy, and Compassion work to better the situation and the world. But that’s not always the case.

In the aftermath of natural disasters, communities often experience a “second disaster” in the form of unwanted donations of clothes, perishable food, and other consumables. In many cases, managing these items, donated by well-meaning bystanders, ends up adding additional cost to the rebuilding of the affected communities. Empathy leads us to donate things when what the community needs is financial help.

When companies make accommodations for people with disabilities, they often inadvertently erect obstacles that hinder access to the very services they are trying to make more available. Empathy leads us to create obstacles where a clear path is needed.

When we put empathy in the driver’s seat, we quite literally put ourselves in someone else’s shoes. We are not basing our actions on the true experiences of others but rather projecting ourselves onto them: Were I in that situation, this is what I would want. But unless we are, or have been, in the same situation with the same prior experiences, our automatic emotional response can lead us badly astray resulting in solutions that work counter to our intentions: Put too much trust in your empathy, and you may end up making a bad situation worse.

Empathy has an important place in our processes, designs, and interactions: It is the beginning of an exploration that should be part of every project.

A Pathway to Informed, Critical Empathy

To create informed human designs, and welcoming communities, we need to use our automatic emotional responses wisely, and make ourselves aware of when we are projecting our own experiences onto others so we can focus on their experiences rather than our own.


When you feel the swell of Sympathy, Empathy, and Compassion, it is a sign you are forming an emotional connection with another person. Seize this moment to explore the current contexts of your partner and yourself, and make sure they overlap. If not, reframe the situation in a context you are familiar with. While an able-bodied person cannot know what it is like to live without the use of a leg, they may have experienced a temporary disability through an injury in the past. Establish a shared or analog context, and extend it by imagining not just standing in the other person’s shoes, but walking a lifetime in them. Actively informing your empathy by reframing the situation in a familiar context will help you move beyond an automatic emotional response to a more reflected one.

To further develop this process, check out Microsoft’s Inclusive Design Toolkit..


With your context reframed, take the next step by attempting to Relive the experience of the other person as close as you can. Create situations or environments where you can recreate a similar experience to theirs, taking strides to physically walk a mile in their shoes. The Relive process can take many forms. A common method is so-called empathy exercises where participants are subjected to physical constraints that simulate disability, old age, or other factors.The Age Gain Now Empathy System from MIT’s Age Lab is one example, the pregnancy empathy belly another. Walking a mile in someone else’s shoes can also be taken literally. After reading a Facebook post about aCanadian waiter forced to wear high heels for a full shift even though her toes bled, Swedish contractor Emil Andersson bought a pair of pink 10cm heels and went to work for a day.

Reliving the experience of others by immersing yourself in their experience can be both rewarding and eye opening. Much can be learned from spending a week without a mouse or touchpad, unplugging your monitor, using text-to-speech for a day, using an old smartphone, or switching away from your preferred operating system. Reliving social experiences can challenge our perceptions and give us a new appreciation for the plight of others. Taking the time to read Twitter threads like #YesAllWomen, #MaybeHeDoesntHitYou, #BlackLivesMatter, and #NoWomanEver brings the plight of marginalized groups front of mind and helps broaden our social horizons. Getting some friends together and reading hateful internet comments to each other shows us that words matter and can be just as damaging as physical actions.


Our empathy is firmly rooted in our own life experiences and social and emotional biases. In Thinking, Fast and Slow, Daniel Kahneman explains how our thought processes are split into System 1 (fast, reactive, emotional) and System 2 (slow, reflective, logical) and how tacit bias, availability, proximity, and the other factors that power System 1 often lead us widely astray. Sympathy, Empathy, and Compassion fit firmly under System 1 and are prone to all these errors. When you make decisions as a designer or developer, you are doing so based on years of privileged experience that has shaped your tacit biases toward your own preferences. When you design or develop solutions for other people, you have to work from a realization your audience does not share this privilege, and does not see the world through your eyes. To create successful solutions, actively remind yourself of your privilege and bias by forcing them into focus. This moves your thought process from the emotional and reactive System 1 to the reflective System 2, and you can take a critical look at your initial reaction and inform your response in a more balanced way.

To provide a framework for bringing your tacit biases into focus, try documenting your experiences learning a new skill or taking part in unfamiliar tasks, situations, or communities. If you’re a developer, learn an unfamiliar programming language. If you’re a designer, take up an unfamiliar creative skill like quilting, knitting, painting, or calligraphy. To bring your tacit knowledge into focus, try your hand at teaching or writing documentation. And most importantly, document your experience, your successes, and your failures, for future reference. That way you have your own experiences to reflect on when you need a reminder of what it was like to not know what you know now.

To delve deeper into this process, and explore the concept of Compassionate Design, check out the book Design for Real Life by Eric Meyer and Sara Wachter-Boettcher.


The fourth and final step of the exploration may also prove the most challenging: Meet your subjects with acceptance. Seek out and listen to the disclosure of other people, and treat them as true descriptions of the world. When we interact with other people, it’s easy to assume we share a common context, background, and experience. In our modern multicultural world, and especially in interactions over the internet, none of these are given. In fact, chances are the only context and experience you and the other person share is the current situation you are in. This poses a uniquely modern challenge: We are hardwired to assume shared context and shared experiences. When these are missing, our automatic emotional response systems tend to make snap judgements that are way off the mark: Our empathy leads us astray, and misunderstandings and misjudgments cause communication to break down.

To counteract this tendency, follow these five rules in your interaction with the people you meet:

  • Listen to them without interruption
  • Accept their disclosure as the truth
  • Question your immediate response
  • Seek common ground
  • Expand your horizon of understanding

Human Design

At a conference last year, I said “At the core of good design lies empathy for people.” I still believe this, but I’ve come to realize that empathy alone can stand in the way of successful communication and designs. By informing our empathy and taking a critical look at our own emotional responses, we can create better designs and communities because we place the people we communicate with at the center of our process.

Empathy and Acceptance in Design and Community from Morten Rand-Hendriksen
Events Speaking Engagements

GitHub for the Rest of Us – WordCamp US, 2015

GitHub is that awesome thing everyone says you’ve gotta use, but how many of us can make heads or tails of it? If you’re tired of pretending to understand when someone talks about “merging the latest pull request” or want to know what the heck forks have to do with code, this rundown’s for you.

I’ll show you how a little dose of science fiction is the key to understanding Version Control. There will be teleportation, time travel, there may even be a victimless murder as you learn the difference between a Fetch and a Pull, why Rebasing changes history, and how merging branches can magically reconcile conflicting code.

Whether you develop, design, or just care about content, Git, GitHub, and Version Control can be some of the most useful tools in your kit. After this primer, you’ll see why Git and GitHub is for everyone, including you.

GitHub for the Rest of Us at Slideshare, via WordCamp Us 2015.


Events Speaking Engagements

Designing Websites for Human Beings – WordCamp NYC 2015

Web design is about communicating with people through the web, but when we design and build websites, it’s easy to get caught up in the technical minutia: What hamburger icon should I use? Where does the sidebar go? How do I allow more space for ads? It is time we start thinking about the people who visit our sites. What devices are they using, and how are they using them? What is their purpose for visiting, and what situation are they in when they do?

This talk brings the focus of web design back to its core subject: How to communicate with people. You’ll learn about user research, empathy in the design process, communication patterns, real-world testing, and designing from the content out. Web design is about empathy for the user, and the users who visit your site are people. This talk will teach you how to prepare, design, and build websites with user experiences that communicate clearly and make the people who visit the site the top priority.

Links from the talk:

Speaking Engagements

Responsive Images in Real Life – my presentation for JavaScript Open 2015

Above are the slides from my presentation on Responsive Images in Real Life at JavaScript Open Day in Vancouver, June 25th, 2015, organized by Lighthouse Labs and Microsoft Edge.

Below are the relevant links from the talk:

Speaking Engagements

Designing Informational User Experiences: My WordCamp Miami talk

Above is the video of my talk at WordCamp Miami 2015. Below are the slides in an un-squished format, and below that are all the links.

All the data in the talk is based on source material and research. Links to all relevant information (including Tweets, photos, stats, and tools) are provided below.

  1. Superhero Cheeskake by Jan van Hellemond
  2. This Is For Everyone
  3. More people today have access to a cell phone than a clean toilet
  4. Zoella
  5. Pew Die Pie
  6. Accessibility if for everyone: 
  7. Selfie Stick by Larry Miller
  8. Android Wear browser video by Conrad Sykes
  9. Mark Boulton quote
  10. Atomic Design by Brad Frost
  11. The Core Model by Ida Aalen
  12. Content Strategy for WordPress by Stephanie Leary
  13. Snow Fall
  14. Ghost
  15. Self-driving cars and the Trolley Problem
  16. Aesop Story Engine
  17. The Web Is Dead: Long Live the Internet
  19. Mobile expectations
  20. Facebook Instant Articles
  21. All the awesome LEGO photos
  22. Dan Mall quote
  23. “Content precedes design” Zeldman quote
  24. Auberge theme
  25. Brew House theme
  26. Android fragmentation from OpenSignal
  27. Media queries targets
  28. Ish 2.0
  29. 64% of Americans own a smartphone
  30. 19% of Americans rely on their smartphone for access to the internet
  31. Average web page size and other stats
  32. RICG Responsive Images Plugin
  33. Grunticon – SVG made easy with Grunt
  34. Grumpicon – SVG made easy without Grunt
  35. Thumb reach pain by Scott Hurff
  36. Apps organized by color, Bijan Sabet
  37. Adaptive Maps
  38. Magnetic Popup by Dmitry Semenov
  39. Dynamic sticky header (Headroom.js) by Nick Williams
  40. Ambient light media query demo by Tomomi Imura
  41. Can I Use
  42. Modernizr
  43. This Door is the Epitome of User Experience Design by Kelly Jepsen
  44. This Door is the Epitome of User Experience Design… Because It’s Hard to Get It Right The First Time by Cameron Moll
  45. Medium’s post on underlines
  46. Ilya Birman’s counterpoint on underlines
  47. Wired article on how we all use Emoji wrong
  48. There Is No Fold
  49. How People Read Online
  50. BBC article on how nobody understands the Hamburger
  51. Mystery Meat icons by LukeW
  52. LukeW: Obvious Always Wins

And finally: Free 10 day trials of for everyone!

Speaking Engagements WordCamp

Building Themes From Scratch Using Underscores at WordCamp Seattle: Experienced Edition, 2015

Below are the actual usable slides from my WordCamp Seattle: Experienced Edition 2015 presentation on _s. Click the thumbnails to get the full size image.

Speaking Engagements WordCamp

Thinking Inside the Box – My WordCamp San Francisco 2014 Lightning Talk

What started as a challenge ended up as a lightning talk at WordCamp San Francisco 2014: Explain the CSS Box Model in an understandable way to a crowd of mainly bloggers and designers. In 5 minutes. With no live code.

The video slides are unfortunately largely cut out of this video so you don’t get to see the fancy stuff the audience were privy to, but you get the general idea: On the web every tag is a box. And on the web magic happens when you think inside the box.

When you’re done, go check out the other great talks at WordCamp San Francisco 2014 over at

Speaking Engagements

Building Themes from Scratch with Underscores: My WordCamp Montreal 2014 Talk

Below are the slides from my WordCamp Montreal 2014 talk Building Themes from Scratch with Underscores.

Speaking Engagements WordCamp

See you at WordCamp

If WordPress has any part of your life – be that as a publishing application at work, your blogging platform, your CMS, or the tool you use to build websites – you owe it to yourself to attend a WordCamp in your neighborhood. WordCamps are locally organized Open Source conferences focussing on WordPress and everything WordPress related and is the best place to learn, share, and meet others to whom WordPress matters.

This year I’ve made my mission to go to several of these events, and I’ve even been given the privilege of speaking at a couple. So, if you’re going to a WordCamp in the near future and that WordCamp happens to be in Vancouver, New York, Montreal, or San Francisco, track me down and say “Hi!” I might even have something cool to give away!

Is WordCamp for You?

Every time I go to a WordCamp I meet a huge pile of new people who are attending for the first time. What do they all say? “I had no idea it would be like this! I can’t believe I took so long / hesitated / didn’t think there was any point in going!” The reality is if you are asking yourself the question “Is WordCamp for me?” then the answer is a big resounding “YES!” It’s an event for everyone who touches WordPress – from the absolute beginner who has yet to set up her first site to the seasoned pro who has built sites for the biggest corporations and has her name prominently placed in the WordPress developer credits.

One of the many great things about WordCamp is the atmosphere: Everyone has been a beginner and everyone remembers their roots so there is no elitism or clique forming to speak of. WordCamp also has a refreshingly high level of diversity. Attendance is usually close to a 50/50 split between the genders and visible minorities are gaining a stronger presence and influence.

In short you have a place at WordCamp.

2014 Speaking Engagements

As I mentioned I’ll be at several WordCamps this year: Seattle (this past weekend), Vancouver, New York, Montreal, and San Francisco. There may be others added as well (I’m eyeing Los Angeles and Toronto at the moment), but that’s it for now. In the cases of Seattle, Vancouver, and Montreal, I’m also speaking. Here are the short pitches:

Future Responsive Today – Embracing mobile-first with <picture> and FlexBox

WordCamp Vancouver, July 26th

Responsive Web Design is about to get a whole lot more responsive with the <picture> element for responsive images and Flexbox for responsive layouts. In this talk front end developer and web standards expert Morten Rand-Hendriksen will provide the audience with everything they need to use these new tools today and show how a true mobile-first workflow will help them make cleaner, more efficient, and more responsive WordPress sites. You’ve heard about <picture> and Flexbox and now you’ll know how to implement them in your WordPress projects today! The future is now and it is responsive.

Building Themes from Scratch with Underscores

WordCamp Montreal, August 16 – 17

Free and premium themes are great, but if you want to build a truly custom website with WordPress you need to build a custom theme from scratch. In this presentation designer, developer, and educator Morten Rand-Hendriksen takes you through the process of building a theme from scratch with what is arguably the best starter theme available: _s (Underscores). The presentation looks at design and development decisions and principles including mobile-first, accessibility, responsive design, and information architecture, and takes a deep dive into the structure of the Underscores theme to show the audience how to build a theme from the ground up to become what you envisioned and more.

Web Design is a Process (link to slides)

WordCamp Seattle, June 28 (past)

Web design does not start with a Photoshop comp. Web design does not start with a Photoshop comp. Photoshop is step 7. Or 10. Or 50. Before you draw a single pixel on your canvas there are a myriad of things that need to be covered. This talk is an exploration of the web design process, all the way from the first client meeting to the shipping of the final product. The audience will learn about IA and UX techniques, card sorting, personas, concurrent development, agile process, version control, the works. This will be a hyper-intensive flyby to give people who work in or want to enter the field of professional web design and development a better understanding of all the roles they’ll have to play and all the ground they’ll need to cover if they want to be truly successful.

See You at WordCamp!

Are you going to a WordCamp this year? Have a story to tell or a question to ask? Make your voice heard in the comments below, go sign up for a WordCamp for yourself, as an attendee, a volunteer, or a speaker, and maybe I’ll see you there!

Speaking Engagements

Why WordPress? My WordCamp Seattle 2013 Keynote

Earlier this year I was honoured with the privilege of being the keynote speaker at WordCamp Seattle. The topic of my talk: Answer the question “Why WordPress”. My talk featured over 300 slides and took a look at the impact and importance of WordPress on the web over the last 10 years. Short synopsis: WordPress changed everything. In addition you get anecdotes, statistics, and a fair portion of nonsense and Vikings – exactly what you should expect. I’m not one to toot my own horn, but what I will say is that during my talk my handle @mor10 trended on Twitter, and there were people who claimed this was the best keynote they had ever seen. I’ll let you be the judge of that.

The presentation is 48 minutes long and contains one swear word. The slides are a little wonky in this video version but the important components come through clearly.

Watch it here or go to and take in this and all the other awesome presentations from WordCamp Seattle and beyond.