“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.”
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.
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.
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.
Reframe
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.
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.
Remind
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.
Accept
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.
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.
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.
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.
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.
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.
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.
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
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.
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 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!
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 WordCamp.tv and take in this and all the other awesome presentations from WordCamp Seattle and beyond.