Posts in the Projects Category

Well, here it is — the first new design for meyerweb since February 2005 (yes, almost 13 years).  It isn’t 100% complete, since I still want to tweak the navigation and pieces of the footer, but it’s well past the minimum-viable threshold.

My core goal was to make the site, particularly blog posts, more readable and inviting.  I think I achieved that, and I hope you agree.  The design should be more responsive-friendly than before, and I think all my flex and grid uses are progressively enhanced.  I do still need to better optimize my use of images, something I hope to start working on this week.

Things I particularly like about the design, in no particular order:

• The viewport-height-scaled masthead, using a minimum height of 20vh.  Makes it beautifully responsive, always allowing at least 80% of the viewport’s height to be given over to content, without requiring media queries.
• The “CSS” and “HTML” side labels I added to properly classed pre elements.  (For an example, see this recent post.)
• The fading horizontal separators I created with sized linear gradients, to stand in for horizontal rules.  See, for example, between post content and metadata, or underneath the navlinks up top of the page.  I first did this over at An Event Apart last year, and liked them a lot.  I may start decorating them further, which multiple backgrounds make easy, but for now I’m sticking with the simple separators.
• Using string-based grid-template-areas values to rearrange the footer at mobile sizes, and also to make the rare sidebar-bearing pages (such as those relating to S5) more robust.

There are (many) other touches throughout, but those are some high points.

As promised, I did livestream most of the process, and archived copies of those streams are available as a YouTube playlist for those who might be interested.  I absolutely acknowledge that for most people, nine hours of screencasting overlaid with rambling monologue would be very much like watching paint dry in a hothouse, but as Abraham Lincoln once said: for those who like this sort of thing, this is the sort of thing they like.

I was surprised to discover how darned easy it is to livestream.  I know we live in an age of digital wonders, but I had somehow gotten it into my head that streaming required dedicated hardware and gigabit upstream connections.  Nope: my five megabit upstream was sufficient to stream my desktop in HD (or close to it) and all I needed to broadcast was encoding software (I used OBS) and a private key from YouTube, which was trivial to obtain.  The only hardware I needed was the laptop itself.  Having a Røde Podcaster for a microphone was certainly helpful, but I could’ve managed without it.

(I did have a bit of weirdness where OBS stopped recognizing my laptop’s camera after my initial tests, but before I went live, so I wasn’t able to put up a window showing me while I typed.  Not exactly a big loss there.  Otherwise, everything seemed to go just fine.)

My thanks to everyone who hung out in the chat room as I livestreamed.  I loved all the questions and suggestions — some of which made their way into the final design.  And extra thanks to Jen Simmons, who lit the fire that got me moving on this.  I enjoyed the whole process, and it felt like a great way to close the books on 2017.

• The Newwwyear Design was published on Wednesday, January 3rd, 2018.
• It was assigned to the Commentary, Design, and Projects categories.
• There have been fourteen replies.

This coming week, I’m going to redesign meyerweb.com — which will be its first redesign in twelve and a half years.

I’m doing this as part of Jen Simmons’ #newwwyear initiative.  As Jen put it:

Ok, here’s the deal. Tweet your personal website plan with the hashtag #newwwyear (thanks @jamiemchale!): 1) When will you start? 2) What will you try to accomplish? 3) When is your deadline? Improve an existing site. Start a new one. Burn one down & start over. It’s up to you.

Many of us feel bad about our personal websites. Me included. We keep meaning to make one, improve what’s there, or burn it down and start over. We are busy. Afraid. Overwhelmed. Well, let’s do it. Maybe over the holidays. Maybe after, in the New Year. #newwwyear

On Friday, I announced my plan:

1. I’ll start Wednesday, December 27th.
2. I’ll redesign http://meyerweb.com  for the first time in a dozen years, and I’ll do it live on the production site.
3. My deadline is Wednesday, January 3rd, so I’ll have a week.

I won’t be redesigning all day every day — I still have paying work to do, after all — but I’ll do my best to put in a couple of hours each weekday.

When say I’ll do it live, I mean I’ll be making all my changes here on the production site, with minimal or no testing beforehand — literally opening the style sheet(s) into BBEdit via Transmit, and saving changes up to the server to see what happens.  Stuff will break, and then I’ll fix it, live in the public eye.  It’s possible I’ll try out new ideas and then junk them before moving on to others.  I’m hoping that accidents spark inspiration, as they often do.

(There will be a local copy of the site in case things go so badly that I need to reset to the starting point.  I’m not completely insane, after all.)

I have a vague plan with all this, which is: realign the site’s appearance to be more inviting, more readable, and more visually engaging.  I do have a few past experiments that I’ll fold in, like using relative times (e.g., “Two months ago”) on posts, but a lot of this will be me doing free-association design.  And hopefully a little markup cleanup and enhancement as well.

I’m sticking with WordPress to drive the blog, given that it contains close to two decades of posts and makes it easy to allow comments, a feature I still value; and my hand-built old-school-standards-punk mostly-static templating system for the rest of the site, which let the site be static(ish) way before static was cool.  (No, I will not consider migrating to other CMSes or template systems: with a week set aside for this, I won’t have the time.)

So, that’s the plan: a week for a meyerweb makeover.  I don’t know if I’ll keep up a running commentary on Twitter while I do, or if I’ll take breaks and blog short entries chronicling my progress, or what.  If someone sets up a #newwwyear Slack team, I’ll probably join in.  If the #newwwyear idea excites you, I hope you’ll join in too!

• A Meyerweb Makeover was published on Saturday, December 23rd, 2017.
• It was assigned to the Design, Projects, and Redesign categories.
• There have been two replies.

We’re about halfway through February, he said with some deliberate vagueness, and that means the launch-month special on my Udemy course “Design for Humanity” is also half-done.  If you haven’t taken advantage yet, use the code MW_BLOG to get a nice little discount off the list price.

You may be wondering if this course is really for you.  There are some videos available as free previews on Udemy.  I’m including one here, which is a single “lecture” (as they’re called by the Udemy) from early in the course.  It explores a single concept and also establishes some of the landscape for the course, which is one of the reasons I chose it.

Again, the discount code above ends at the end of February, so if you’re interested bu haven’t signed up yet, don’t delay too much longer.  And if you have already taken the course, could you do me a favor and leave an honest review at Udemy?  It will help other people. whether they find the course from me or through Udemy, decide whether the course is right for them or not.  Thank you!

• Preview Video: What Would a Human Do? was published on Friday, February 17th, 2017.
• It was assigned to the Design, Projects, and Tech categories.
• There has been one reply.

As longtime readers know, my professional focus has been very different the past couple of years.  Ever since the events of 2013-2014, I started focusing on design and meeting the needs of people — not just users, but complete people with complex lives.  I teamed up with Sara Wachter-Boettcher to write Design for Real Life, and  presented talks at An Event Apart called “Designing for Crisis” (2015) and “Compassionate Design” (2016; video to come).  I’m not done with CSS — I should have news on that front fairly soon, in fact — but a lot of my focus has been on the practice of design, and how we approach it.

To that end, I’ve been spending large chunks of the last few months creating and recording a course for Udemy called “Design for Humanity”, and it’s now available.  The course is based very heavily on Design for Real Life, following a similar structure and using many of the examples from the book, plus new examples that have emerged since the book was published, but it takes a different approach to learning.  Think of it as a companion piece.  If you’re an auditory processor as opposed to a visual processor, for example, I think the course will really work for you.

Who is the course for?  I put it like this:

This course will help you if you are part of the design process for a product or service, whether that’s a website, an app, an overall experience, or a physical product. You might be a product designer or product manager, an entrepreneur or work in customer service or user research, an experience designer or an information architect. If you have been impacted by bad design and want to do better, this course is for you.

I know a lot of courses promise they’re just right for whoever you are, no really, but in this case I honestly feel like that’s true for anyone who has an interest in design, whether that’s visual design, system design, or content design.  It’s about changing perspective and patterns of thinking — something many readers of the book, and people who’ve heard my talks, say they’ve experienced.

If you’ve already bought the book, then thank you!  Be on the lookout for email from A Book Apart containing a special code that will give you a nice discount on the course.  If you haven’t picked up the book yet, that’s no problem.  I have a code for readers of meyerweb as well: use MW_BLOG to get 20% off the sale price of the course, bringing it down to a mere $12, or slightly less than $3 per hour!  (The code is good through February 28th, so you have a month to take advantage of it.)

If you like the course, please do consider picking up the book.  It’s a handy format to have close to hand, and to lend to others.  On the flip side, if you liked the book, please consider checking out the course, containing as it does new material and some evolution of thinking.

And either way, whether it’s the book or the course, if you liked what you learned, please take a moment to write a short review, say something on the interwebs, and generally spread the word to colleagues and co-workers.  The more people who hear the message, the better we’ll become as an industry at not just designing, but designing with care and humanity.

• A New Online Course: Design for Humanity was published on Friday, January 27th, 2017.
• It was assigned to the Design, Projects, Web, and Work categories.
• There have been no replies.

I’ve started playing an occasional game with my iPhone, where I type in a word to start a message, and then repeatedly accept whatever autocorrect suggests as the next word.  If I’ve understood the terms correctly, I’m manually accepting iOS’s Markov chain output.

I’m inclined to post the results to a Twitter account, sort of like I did for Excuse of the Day, but I’m stuck on the most prosaic of roadblocks: I’m having trouble thinking of a good name for it.  (Here, ‘autosuggest’ will not help me.)  Anyone have a winning name they’re willing to contribute?  Full credit to the winner in the Twitter bio, not to mention here, plus a percentage of the multi-million-dollar royalties from the inevitable book and movie deals.

Update 10 May 16: thanks to everyone who made (auto)suggestions!  The final winner is @markovmywords, as suggested by Jonathan Schofield (@schofeld).

• Name Suggestion was published on Friday, May 6th, 2016.
• It was assigned to the General and Projects categories.
• There have been twenty-eight replies.

Available as of this morning from A Book Apart in both digital and paper formats: Design for Real Life, the book Sara Wachter-Boettcher and I started writing not quite a year ago.

Anil Dash was kind enough to write a wonderful foreword for the book, in which he perfectly describes the background we were working against:

Two billion people now have some kind of access to internet technologies, and almost all of them are spending more and more time with their thumbs flicking across their phones. And the technology they’re using has a real impact on their lives. They don’t use an app to “share photos”; they use it to maintain a relationship with distant family. They don’t need to do “online banking”; they need to lend a friend money to help them out of a jam. Nobody wants to learn a complicated set of privacy controls; they just want to be able to express themselves without antagonizing bosses or in-laws.

Our thesis, against that, was to say, “As personal and digital lives become closer and effectively merge, the things we design will have to work harder and harder to deal with real people in all their messy complexity.  How can we start people thinking about this, and what tools can we give them?”  That’s what we strove to create, and now you can judge for yourself whether we succeeded.

I’ll be honest: we were pretty scared as we wrote it.  This is not a topic area that’s gotten a ton of attention, and in a lot of ways we were breaking new ground — but, at the same time, we were very aware that there was existing research and knowledge in related areas, so we wanted to be sure we were inclusive or, and respectful of, that work.  We talked to a lot of people in a variety of disciplines, trying to make sure we brought in information that would help the reader and not flying in the face of things that were already known.

So you can imagine our relief and gratitude as we’ve heard glowing reactions from people who read preview drafts — among them Kim Goodwin, Indi Young, Sara Soueidan, Caren Litherland, and Karen McGrane.  Paul Ford said, “Anyone who aspires to build global products that people love should read this book now,” and Kate Kiefer Lee said, “It will be required reading on my team.”

You might think cover blurbs like those are pure marketing fluff, and maybe in some genres they are.  For us, they serve double duty: to let you know that people who know what they’re talking about believe we know what we’re talking about, and also to let us know that.  There were days we weren’t entirely certain.

To be clear, this isn’t a book about forever treating people with kid gloves.  We say “compassion isn’t coddling”, and that’s absolutely the case.  An error message still needs to convey the error; an account lockout still needs to keep the account locked.  But how we convey errors or lockouts, and how we make people aware of the possible ramifications of their actions, is critical.  Just as there are good ways and bad ways to commiserate with a grieving friend or handle a difficult work situation, there are good ways and bad ways to approach people in our designs.

As I said before, we need to deal with real people, in all their messy complexity.  We hope Design for Real Life is the start of a whole new conversation within our field, one that will teach Sara and me just as much as anyone else about how we can be more thoughtful and humane in what we create.

• Design For Real Life Now Available was published on Tuesday, March 8th, 2016.
• It was assigned to the Books, Design, Projects, and Writing categories.
• There have been two replies.

Throughout 2015, a few people who’ve seen me present “Designing for Crisis” at An Event Apart have noticed that, on the slides where I have filler text, it’s a localized variant.  In Washington, DC, for example, one section started out:

Andrew ellicott lobortis decima thomas jefferson vulputate dynamicus fiant kingman park sollemnes ford’s theater. Vero videntur modo claritatem possim quis quod est noma howard university consequat diam. Blandit ut claram north michigan park seacula judiciary square william jefferson clinton hawthorne millard fillmore iis…

This was a product of some simple PHP I’d originally written to generate Cleveland-themed filler text a year or so back, which you can find at localipsum.meyerweb.com, and which I’d expanded upon to let me generate text for my presentations at AEA.  The name comes from the original idea I had, which was to provide a list of cities/regions/whatever, so that users could pick one and generate some filler text.  That never quite came together.  I had a semi-working version once, but the UI was horrible and the file management was worse and I got discouraged and rolled back to what you see now.

I kept telling myself that I’d get back to it, do the city-selection thing right, polish it nicely, and then finally release the source.  I’ve told myself that all year, as I manually swapped in city information to generate the filler text for each of my talks.  Now I’ve finally admitted to myself that it isn’t going to happen, so: here’s the source.  I chose a pretty permissive license — BSD-ISC, if I recall correctly — so feel free to make use of it for your own filler text.  I’ll be happy to accept pull requests with improvements, but not package-management or complete MVC restructuring.  Sorry.

I know, it’s a goofy little thing and the code is probably pants, but I kinda like it and figure maybe someone out there will too.  If nothing else, we can look for a few laughs in the output and maybe — just maybe — learn a little something about ourselves along the way.

(P.S. Speaking of “Designing for Crisis”, look for a post about that, and more specifically video of it, in the next few weeks.)

• Local Ipsum was published on Monday, November 23rd, 2015.
• It was assigned to the Projects and Tools categories.
• There has been one reply.

One month from today is the first-ever Rebecca’s Boardwalk, a fundraiser in support of Rebecca’s Gift.  It’s a family-friendly afternoon of carnival games with actual prizes to be won, a facepaint and temporary tattoo booth (many thanks to Tattly for their generous support!), indoor mini-golf and bounce houses, boardwalk food, and a pretty great silent auction.  We’ll have everything from gift-card grab bags to artisanal meat parties to signed shooting scripts from The Walking Dead up for bid!

All of the proceeds will go to fund the mission of Rebecca’s Gift, which is to provide healing family vacations after the death of a child.  The organization has already raised enough to assist at least two families in 2016.  We’d very much appreciate your support in helping us lend a helping hand to more families in desperate need of time to reconnect, rebuild, and relax.  It’s one of the very few organizations we know of that supports families after a child’s death, as opposed to before.  This is something I touched on in a piece I wrote for Natural Papa back in September, in conjunction with St. Baldrick’s.  It’s something Kat and our friend Karla are determined to do something about, and I’m honored to support their efforts.

I very much hope you can join us for Rebecca’s Boardwalk, or if not, support the event via a sponsorship.  Rebecca loved travel and boardwalks in particular, and we can’t think of a better way to celebrate her life while striving to help others heal as best we can.

(Side note for the web folks in the audience: the Rebecca’s Gift site in general, and the event page in particular, makes use of flexbox for simple layout.  Just in case you were looking for a public deployment example.)

• Rebecca’s Boardwalk was published on Thursday, October 15th, 2015.
• It was assigned to the General and Projects categories.
• There have been no replies.