EW Resource

Newsfeeds

There's a huge resource of Newsfeeds on the Net which brings up-to-date information and content on a wide range of subjects.

Here are just a few relating to web development.



A List Apart: The Full Feed
  • Why Aren’t You Asking Questions? 

    It’s the kickoff meeting. You are the lead designer on the project, and this is the first meeting with everyone in the room. Your client is reciting her wish list, and you’re taking diligent notes—probably with cute, relatable doodles.

    An hour passes, and you’ve barely said a sentence. You’re nodding your head, scarcely making eye contact. You have some thoughts, but you aren’t speaking up. Why aren’t you speaking up?

    You’ve likely been burned in the past. Perhaps you’ve shared some ideas and they were turned down. You have felt embarrassed in meetings. Projects that you put your heart and soul into were changed at the last minute without your consultation or discarded, apparently without a second thought.

    Now, while it’s admirable to be an agreeable, easy-to-work-with colleague, being quiet and keeping your head down isn’t the answer because this is not a production line. You are a designer, and part of your job is contributing to the conversation.

    It’s a designer’s job to ask good questions

    You want to do your best work and meet your client’s needs, so playing an active role in the conversation is vital. To extract the most information you can from your client, you must ask questions. Lots of questions. Think of it like playing detective, gathering clues and working to understand the players in the game.

    Laura Kalbag writes, “As designers, we can’t expect other people to know the right language to describe exactly why they think something doesn’t work. We need to know the right questions that prompt a client to give constructive criticism and valuable feedback.”

    They are looking to you as the professional to not only listen to their needs, but to also be able to identify and understand their unexpressed needs.

    It is not the client’s job to know exactly what their logo should be or how their website should function. That’s your job. They are coming to you to share ideas, to express concerns, likes, and dislikes. They are looking to you to help guide them to a solution.

    Clients will always ask you to make their logo bigger, prescribe solutions, and ask you to do things that will make you smack your forehead. You can roll your eyes at how much they don’t understand about design or you can roll up your sleeves and begin practicing your craft by helping them clarify what they need.
    Mike Monteiro from his brilliant and on point book Design is a Job

    First, understand the end users’ needs

    It’s pretty likely that your client isn’t the main user of the website or product you are designing. Even if they are amazing at articulating exactly their tastes and preferences, it’s beside the point because they are not the target audience.

    If you are fortunate enough to be on a project that dedicates resources to user research, familiarize yourself with its findings. If you do not have access to this information, ask a few questions about who the end user is and what their needs are to better understand the target audience you are actually designing for:

    • Who exactly do you anticipate will be using this website?
    • What problem is this website solving for them? Or
    • What will they accomplish by using this website?
    • What are their pain points?

    Once you establish who the end user is, try to phrase your upcoming questions in a way that encourages the client to see through the eyes of the end user, not their own. User experience consultant and writer Paul Boag simplifies this on 24ways.org: “A client’s natural inclination will be to give you his personal opinion on the design. This is reinforced because you ask them what they think of the design. Instead ask them what their users will think of the design.”

    It is also possible that the client thinks they understand what the end user needs, but they are only working from assumptions. This is apparent when sweeping generalizations and blanket statements are made. As Laura Kalbag says, “Throughout the design process, we need to check our hidden assumptions about our users. We should also ensure any feedback we get isn’t based upon an unfounded assumption. If the client says the users won’t like it, ask why. Uncover the assumption—maybe it’s worth testing with real users?”

    Establish attainable business goals

    This is a conversation that I still struggle with. A lot of companies are good at coming up with lofty business goals that can be interpreted into almost anything, and are usually difficult to measure.

    The conversation may start out up in the clouds, but by talking about business goals you are helping to break down assumptions, learn about your client’s current expectations, and set their expectations going forward.

    For example, if the assumption is that by redesigning their website they will generate more leads, you need to establish clear language around what that means and what success looks like to them.

    Daniel Ritzenthaler suggests “Taking the Guesswork Out of Design” by using “a modified acceptance criteria exercise [to set] clear and powerful goals.”

    <!-- Example goal template:

We want to X because Y so that Z.

Example goal:

We want to increase traffic by 20 percent because we need more exposure so that we can generate eight more leads per month. -->

    Ritzenthaler says, “Acceptance criteria for design is a great way to [flesh] out deeper, possibly unknown, intentions that will help the designer and project owner make better decisions and dodge surprises later in the process.”

    Make sure you are asking the right people

    The kickoff meeting is a great place to ask questions because, more than likely, the right people will be in the room.

    If you have any control over who is required to attend, make sure the meeting includes everyone who has decision-making power, is assumed to have power, or is an opinion leader inside the organization.

    I find that a lot gets lost in translation when a question filters up three levels of management and then trickles back down to you. When you hear information from the source, you get the original version and you also have the chance to ask for more clarity.

    If you are not sure who the key players are, here are a few preparatory questions you can ask to get that information:

    • Who initiated this project?
    • Who will have the final decision with this project?
    • Who has the ability to cancel or postpone this project?

    Ask a lot of open-ended questions

    Once you understand who you are designing for, what the major goals are, and who the key players are, you will be ready to start discussing the details of the actual project.

    Avoid simple yes or no questions—stick with something open-ended so you will get more information. Ask any question that comes to mind that will help you better understand the issue at hand.

    Ask follow-up questions if there is something that still isn’t clear to you. You may have to ask the same question a few different ways before getting a response that gives you the information you’re looking for.

    Read between the lines

    In one person’s mind, “add more pictures” could mean a photo gallery of thumbnails at the bottom on the page. Another person might imagine this as the giant background image that they saw on someone else’s site and they want exactly what that person has. And yet a third person is picturing replacing most of the text on the page with infographics.

    Here’s an example: you are working on a web design and the client doesn’t think there are enough images on the mockup you provided. Ask:

    • What value will adding more images provide? For whom?
    • Are images available?
    • Does a photographer need to be hired?

    If you find out their solution was to purchase stock photography, dig a little deeper.

    • Is stock photography genuine enough for their audience?
    • Will it convey the value they were hoping for?
    • If a visitor to the website found out it was stock photography, would that affect their perception of the company?

    These are likely questions they have not yet thought through. By asking these questions, you are helping the client see the bigger picture and preserve the value of the brand or message.

    Try generic questions

    If you’re not sure what the right question is, you can keep it really simple by using one of the following go-to phrases:

    • Why?
    • Could you elaborate?
    • Would you describe that for me?
    • What does that look like to you?

    Make sure you are clear and concise. Do not muddy up your question with “ummm,” “er,” “like,” “whatever,” or “you know.” A clear question has a better chance of getting a clear answer.

    You’re going to annoy someone

    Truth is, it is possible that some people may get annoyed with the questions. Don’t let this deter you. It isn’t personal. You have a job to do and clues you need to gather. Explain why it is necessary that you truly understand the problem you are all here to solve together, and explain that in the long run it will likely save a lot of time. Thank them for their understanding and cooperation (even if they are being quite the opposite of cooperative).

    If a client appears frustrated or annoyed that you are asking so many questions, it may be because they thought they had it all figured out. You just made them realize that they haven’t even begun to figure it out.

    What was supposed to be a “quick” web design has become a bigger project, one that requires real thought and effort. They may feel frustrated that it won’t be the quick fix they initially expected. That’s not your fault! You’re doing the client a favor in the long run by ensuring that all parties are on the same page and making the best decisions together.

    Read the room

    If your client comes across as agitated by speaking more loudly, constantly interrupting, or suddenly becoming very short with responses, try to assess how you are coming off in this meeting. Are you talking more loudly or interrupting? Do you think he feels like his answers are being heard?

    In that scenario, taking a more laid-back approach by leaning back in your chair a little, speaking somewhat more slowly and softly, and relaxing your face may help the meeting move in a more productive direction.

    Test engagement

    You need your clients to be engaged to get the most information. If they are not making eye contact, not participating in the conversation, or are busy on their phones, they may not be engaged.

    By simply pausing and allowing silence, you may be able reengage the client. Or test their engagement by asking a couple of questions:

    • Are we discussing what you had hoped we would?
    • Is there anything we haven’t covered that you hoped we would?

    Take a break

    Stepping away for a few minutes can clear the mind and calm the nerves.

    A five-minute break will keep your client engaged by allowing them to check their emails, text, and get a few seconds of relief from their FOMO. Use this time to assess the situation and formulate your next questions.

    Play nice

    Don’t give the impression that you are trying to prove them wrong; this isn’t a pissing contest. Approach the conversation with genuine curiosity and a lot of empathy. You are both working toward the same goals here.

    • When you ask a question, really take time to listen to the response.
    • Do not interrupt.
    • Be supportive as they give their answers and thank them for giving you the additional information.
    • Don’t be afraid to use an awkward silence to your benefit. Chances are the client feels awkward, too, and will start talking, giving you even more information.

    Asking great questions takes practice. Lifehack has some tips worth reading on how to be amazingly good at asking questions.

    Your work reflects your level of understanding

    Until we have the ability to project images with our minds (why don’t we have this yet?), or unless your client is an amazing sketch artist, asking questions and piecing the clues together is our most effective tool to understand their expectations, and help them see the bigger picture along the way.

    If you leave the room without asking any questions, there is no way you can really understand what is being asked of you. You might annoy someone along the way, but your work will have so much more meaning and, in the end, your clients and their end users will see the added value in your work.

  • This week's sponsor: CONTENTFUL 

    CONTENTFUL, an API-first, developer-friendly CMS. Build custom content-rich front-end with the tools of your choice.

  • Communicating Animation 

    Consistent animation is crucial to both branding and UX. Interfaces obey laws of “design physics”; keeping animation consistent throughout an experience envelops users in an illusion of life, of reality. Animations that step out of line disrupt that flow and feel sloppy or jarring. But because animation sits squarely at the intersection of design, development, and UX, achieving consistency presents unique challenges:

    • Communication issues make it hard for siloed teams to understand and tackle animations together.
    • Inadequate deliverables prevent developers from moving forward quickly.
    • Lack of respect for and deference to fellow team members leads to lopsided implementations that privilege some voices at the expense of others. When it comes to animation, it’s important for everyone to be heard.

    Including animations in our style guides and design systems is a great place to start. However, this is relatively new territory, and most animation documentation initiatives seem to be driven by either development or design. In an ideal world, developers and designers would live in harmony and collaboration, but all too often the two houses exist in isolation from each other.

    Most examples of animation in documentation reflect this rift by falling into one of two categories: thematic and educational, as seen in Google’s Material Design guidelines; or granular and explicit, as displayed in Salesforce’s Lightning Design System. Designers want to provide guidance and overarching themes, as well as educational materials, in an effort to raise the profile of animation both within a company and within the larger web design and development communities. Meanwhile, developers aspire to define and dictate animation for maintainability and consistency.

    illustration showing a designer and a developer, each thinking separate thoughts / asking separate questions

    This contrast reflects the needs of each group. Designers want to know the underlying principles of motion design driving their application; developers want to know how to build that design to spec. These interests are not at odds with each other—rather, they form incomplete halves of a greater whole:

    • Documentation details what’s there and why.
    • Defaults offer building blocks and rules for spinning up new projects.
    • Unity provides a common language and choreography.
    • Guidance empowers future designers to make smart decisions.

    As of this writing, there is no Ultimate Animation Style Guide/Pattern/Tile/Whatever example that combines all of these elements perfectly. There may never be an animation-style-guide pattern that satisfies everyone. Some organizations may need more of some of the above components than others, depending on the project and the animation or development literacy of the team. But all approaches share features that we can combine to create the Ultimate Animation Documentation for our own teams. Let’s have a look.

    Deliverables

    Deliverables are supposed to round off the design process, but I often find it helpful to start with what developers want and need. Some companies have designers who build prototypes in code. Developers then find it easy to go into the code and grab the variables needed to reproduce the UI animations. But not all workflows look like this, and many motion designers will rightly argue that the very act of animating code-first limits the ideation process.

    That’s why, at many companies, designers create animations in After Effects or Photoshop and then hand them off to developers. The developers must then pick apart these videos and gifs to determine what is changing at what rate. This makes the burden of implementation especially heavy for the developer, giving animation a reputation for “taking too long to prioritize.”

    illustration showing a designer blithely handing off deliverables to a beleaguered developer

    I myself once had to spend six hours converting an animated GIF to SVG by eyeballing it. If the designer had provided me with the necessary values, I could have recreated the animation perfectly in thirty minutes, tops. We’ll look at these values—easing, timing, and properties—next. For the sake of simplicity and consistency, we should include them in our documentation and reuse them as much as possible across our systems.

    Easing

    illustration showing a designer blithely handing off deliverables to a beleaguered developer

    Easing describes the rate at which something changes over a period of time. It has its roots in traditional studio animation, where it was called “cushioning” or “slowing.” Easings are shorthand for rates of acceleration, deceleration, and bounces. We can invoke generic easings with CSS via keywords like “ease-in” and “ease-out,” but when everyone uses the same defaults, everyone’s designs start to look and feel the same.

    Easings provide an opportunity for us to set our UI apart from others in a very subtle way. We want custom easings that reinforce our brand—be it professional, fun, elegant, or even dark. And that’s what cubic-bezier curves were created for. Cubic-bezier curves are a set of numbers we can pass to CSS and JavaScript animation libraries to tell them how we want the animation to change over its allotted timeline. We can get some starting points at sites like easings.net or create our own using the browser’s developer tools.

    It’s tempting to make one cubic-bezier curve to rule them all, but what we really want is an array of several curves for different purposes:

    • Human-initiated interactions feel faster and more natural if they respond immediately. A deceleration (moving from fast to slow), or ease-out, provides immediate feedback that tapers off.
    • System reactions are less alarming if their curve is accelerated, moving from slow to fast, or what we call ease-in.
    • Fades and color changes often look best with a more constant curve, but you could purposely buck that to express your aesthetic values.

    Most design systems benefit by specifying at least an ease-out, an ease-in, and a fade curve.

    Timing

    Easings are a high-visibility return on investment. But animation can’t happen without a duration. On the Lightning Design System, I worked with Amy Lee, who also happens to be a musician. In a brilliant example of genius occurring in the overlap of disparate fields, she came up with the concept of timing scales: a set of time values that align at various combinations.

    The concept is similar to modular scales in typography: all values are related, and if you combine them with a vertical rhythm, a piece exhibits overall harmony. You can generate a timing scale the same way you generate a typographic scale.

    There are upper and lower limits. While the human eye can perceive images in as little as 13 milliseconds, it takes us between 70 and 700 milliseconds to move our eyes according to the Human Processor Model. 200–300 millisecond values typically become the workhorses of a timing scale, from button depresses to secondary animations. (The persistence of this time range across game and web development is especially interesting in light of recent research suggesting we experience the world in 400 millisecond “chunks.”) Shorter durations work better for color changes and fades, which the human eye picks up readily. Longer durations are better for larger fields of change, like page transitions, or motions that occur over longer distances, like a drag-and-drop interaction or menu slide-out over a large screen.

    It’s a good idea to define durations in milliseconds rather than seconds. While most animation libraries can accept seconds and milliseconds, JavaScript timers and the Web Animations API take only milliseconds. Also, some people may find it easier to work with zeros than decimals (although that might be more of a tabs versus spaces argument).

    Properties

    diagram showing properties that describe what is being animated

    Properties describe what is being animated. Currently in web animation, the most performant things to animate are opacity and transforms (scale, distance, rotation). But there will be times when we want to animate less performant things like color or—heaven forfend!—height. Browsers are working hard to improve their animation performance, so while it’s great to try to stick to transform and opacity, don’t be afraid to push technology with art where you can get away with it.

    Knowing the properties we want to animate comes in handy when communicating animations with storyboards and specs and when we’re creating our project’s very own animation vocabulary.

    Creating an Animation Language

    We combine these three components—easing, timing, and properties—to create vocabularies of words like “pop,” “fade,” and “slide.” Many of these expressions start as friendly onomatopoeias: swoosh, zoom, plonk, boom. And sometimes colleagues will, say, hold a sound longer to indicate extended duration: “Can you make it more like voooooosh and less like voosh?” It makes sense to “pave the cowpaths” and adopt words like these when constructing our own animation vocabularies.

    lettering illustration showing friendly onomatopoeias: swoosh, zoom, plonk, boom

    Vocabularies are granular. You can layer these microanimations to create macroanimations—for instance, a modal that fades onto the screen then pops to grab user attention.

    animated GIF showing a modal that fades onto the screen then pops to grab user attention

    These words might seem arbitrary at first, but they yield huge benefits when it comes time to document our visual deliverables with text.

    Communicating Visually

    There are three ways to communicate animation: storyboards, animatics, and prototypes. All of them contain a visual component, but only storyboards include words. Words are one of the lowest common denominators of digital human information exchange—capable of being read out loud, indexed by search engines, translated by machines. In many cases these words are the key to conveying animation deliverables, so it makes sense to start with storyboards.

    Storyboards

    photograph of storyboards at Disney Studios

    Disney Studios invented storyboards for working on feature-length animation films, and it wasn’t long before Hollywood started using them, too. Storyboards let disparate teams get an overview of a linear narrative. They reduce time spent on dead-end shots and help directors and writers visualize the final story, and edit it on the fly. These days, storyboards are used not only in cinema but also in game design and interaction development.

    photograph showing a whiteboard with storyboards scrawled on it and covered in Post-its

    These storyboards can range from very informal (on a small-team interaction-design project where everyone follows each stage of development closely) to very detailed and particular (for specifications and audits). One problem I have as a consultant is that I find it difficult to embed videos or GIFs in PDFs to hand to managers as a way of explaining where animation problems occur. So for long-term storage, I include a storyboard.

    diagram showing a storyboard for a motion-design audit

    This storyboard was part of a motion-design audit for a large project where I needed to leave the client with actionables to include in their next sprint.

    Storyboards use words and illustrations to represent interactions and animations. Every animated interaction can be divided into a “before” shot and an “after” shot; it’s up to us to illustrate the in-between shot to demonstrate how we get from one to the other. Language helps us clarify why these changes are happening. Using words like this is a powerful thinking tool. Justifying animations verbally helps us sort necessary animations we can defend from ones that are perhaps less mission-critical.

    Storyboarding software, most of which is geared toward cinema, is simultaneously insufficient and overkill for web development collaboration. Teams often have more fun and collaborate better with good old index cards and Post-its. I’ve written about a more formal approach to my storyboarding techniques, and you can download my storyboarding template to get started.

    Animatics

    If a picture is worth a thousand words, an animation is worth ten thousand meetings. Storyboards, sadly, can’t show us how something “feels” on the screen or under the thumb. Once again, studio animation provides a solution in the form of animatics, videos of the storyboard set to an audio track that can be screen-tested with an audience or presented to investors as proof of progress. We can also make small videos or GIFs with our wireframes and storyboards that demonstrate how they work.

    Do not throw these mini videos over the fence to developers. Finalize animatics by combining them with the deliverables developers crave: easing, duration, and properties. At most, an animatic is a measuring stick against which we compare the final, implemented animation. And the two will only match 100 percent if we provide our developers with the inputs necessary to duplicate the original.

    For creating animatics, AfterEffects is the software of choice in the motion design industry. Web designers may be more accustomed to creating animatic-like demos in Keynote to be clicked through in meetings. These can be recorded with screencasting software like Quicktime or Camtasia. And some visual prototyping tools like Principle export to video, achieving two things at once.

    Prototypes

    Animatics can be screen-tested on an audience, but screen-testing works best for passive media. The web is interactive: people interact with designs, which in turn react to them. There’s no way to test these reactions with storyboards or videos. When we want to be sure of how people will respond to a design, we want prototypes.

    There are two approaches to prototypes: coded prototypes and prototyping software. Developers tend to prefer the former, often leaning on frameworks like framer.js and Zurb’s Foundation; designers prefer the latter, in the form of software like Invision App and UX Pin. Both approaches require team members to invest time in learning a new system, thus increasing the commitment factor.

    Most prototyping software with animation features, like Pixate and Principle, is app-oriented. But the web is catching up with products like UXPin, and web and native prototyping powerhouse Invision has demonstrated its commitment to improving animation tooling with its purchase of Easee.

    Coded prototypes, unlike storyboards, are terrible for documentation: only code-savvy team members can read them, and the files must be organized and sometimes compiled or served before inspection. An external agency would struggle to deliver a fully branded experience riffing off a pile of non-production code.

    Pick two

    If we rely on storyboards, animatics, or prototypes alone, we can’t hope to communicate animation clearly, effectively, or sustainably. But if we combine them, they work great: a demo next to a set of deliverables; a storyboard with a video. Such combinations work well for documentation and also sometimes for offering animation boilerplates.

    Venn diagram showing how storyboards, animatics, or prototypes might be combined

    Animation as a team sport

    Many animation documents are created in the hopes that “if you write it, they will follow.” We hope our coworkers will read our sage advice and start preaching the animation gospel; we hope they’ll copy our animation deliverables perfectly for every button, gesture, and loading spinner.

    In practice, though, it’s extremely rare for even half of a team to care as passionately about animation as the person writing the docs. While education and guidelines are fantastic in principle, they are a wasted effort if no one cares. Here are some quick ways to get our teammates on board:

    • Group documentation. Having a documentation format that everyone can contribute to—and then having people contribute even just a few words—helps them feel like this is their baby, too.
    • Team tweening exercises. I use these exercises in training to help get siloed teams collaborating. Take “before” and “after” wireframes, and give everyone index cards to brainstorm all the possible animations they could use in between those states to get from point A to point B.
    illustration showing team tweening exercises
    • Cultivate and champion. Teams without motion and animation champions can’t sustain their animations over the long run. Someone has to grow the love for animation and make it second nature to think about it, same way we think about color or fonts. Otherwise, animation risks being sidelined the way accessibility and user testing often are. Many organizations assume an initial effort is sufficient to address what should become an integral part of their design process.
    • Have a coconspirator or two. We should always be on the lookout for coconspirators. One champion isn’t enough. Eventually we all move on to other projects, and a healthy system is one that can function when one of its pieces goes missing.
    • Do it anyway. Sometimes people just have to see the difference animation makes to believe it. You can ask for forgiveness later.
    illustration of a happy team


    A template library will need different documentation than, say, an interactive story app. What matters is clearly recording and communicating those deliverables and cultivating a concern for animation among our peers. People fear what they don’t understand, and they fear change. Education, communication, and collaboration turn that fear into enthusiasm and goodwill.

    There is no one right way to document animation. But when we collaborate with our teams, together we will find the right way forward. Don’t be the lone animation wolf; find or found an animation pack. Recruit other animation wonks from different areas like UX, front-end development, data visualization, design, and marketing. Diverse views will strengthen how we approach animation and help rally more support from other corners. Together, we can all find our own “way of animation” that works best for us.

  • Another 10k Apart: Create a Website in 10 KB, Win Prizes! 

    It gives us great pleasure to announce the 2016 10k Apart competition. Create a fully functioning website in 10 KB or less! Amaze your friends! Astound the world! Compete for fabulous prizes!

    Why 10k? Why now? It’s simple, really. In the 16 years since we told you about the first contest to create a functioning website in 5 KB or less, countless aspects of web design and development have changed. And, year after year, A List Apart has marked those changes, even instigating more than a few of them ourselves. But in all those years, one thing has remained constant: the need to keep our websites lean. Indeed, in the age of mobile slash responsive slash multidevice design, keeping sites lean and mean is more important than ever.

    In 2000, Stewart Butterfield launched the original 5k competition to celebrate the skill, ingenuity, and innovation of designers and developers who wring every byte of performance out of the websites and applications they fashion. Ten years later, Microsoft and An Event Apart launched the first 10k Apart—adding progressive enhancement, accessibility, and responsive web design to the competition’s requirements.

    And now, An Event Apart and Microsoft Edge have teamed up once more to entice you, the makers of websites, to improve your performance game yet again by competing in a new 10k Apart that’s even tougher than the last one. Golly!

    Ah, but there’s gain for your pain. Besides fame and glory, you could win $10,000 in cash, tickets to An Event Apart, the complete A Book Apart series, and a copy of Aaron Gustafson’s Adaptive Web Design, 2nd Edition, which I consider the unofficial successor to Designing With Web Standards. So what are you waiting for? Hop on over to the 10k Apart website for complete rules and details.

  • Practical SVG 

    A note from the editors: We’re pleased to share an excerpt from Chapter 6 of Chris Coyiers’s new book, Practical SVG, available now from A Book Apart.

    You’ll probably want to exert some sizing control over any graphic you put on a website. Hey! You! Logo! You should be this size:

    <img src="logo.png" class="logo" />
    
    .logo {
      width: 220px;
      height: 80px;
    }

    And so shall it be.

    But if the element you are resizing happens to be svg, the result might not be exactly what you expect. Sizing svg is a little more complicated than sizing an img. I’m not saying this to scare you. It’s almost complicated in a good way, because it gives you more control and opens up some interesting possibilities.

    Keep these two concepts in mind when you’re working with the size of SVG images:

    • The viewport is simply the height and width of the element: the visible area of the SVG image. It’s often set as width and height attributes right on the SVG itself, or through CSS.
    • The viewBox is an attribute of svg that determines the coordinate system and aspect ratio. The four values are x, y, width, and height.

    Say we’re working with some SVG like this:

    <svg width="100" height="100" viewBox="0 0 100 100">
    
    <!-- alternatively: viewBox="0, 0 100, 100" -->

    In this case, the viewport and viewBox are in perfect harmony (Fig 6.1). The SVG will be drawn in the exact area it visually occupies.

    See the Pen adqEmQ by Chris Coyier (@chriscoyier) on CodePen.

    Fig 6.1: Viewport and viewBox in perfect harmony. This happens when you apply no width or height to the svg (either via attribute or CSS), or if you do, they match the aspect ratio of the viewBox.

    Now say we double the width and height, like this:

    <svg width="200" height="200" viewBox="0 0 100 100">

    Will the svg just draw in a 100 by 100 space in the upper left side of the 200 by 200 element? Nope. Everything inside the svg will scale up perfectly to be drawn in the new, larger space (Fig 6.2).

    See the Pen VeQyQY by Chris Coyier (@chriscoyier) on CodePen.

    Fig 6.2: With the viewport enlarged and viewBox kept the same, the graphic scales up to fit the viewport.

    The square aspect ratio still matches perfectly. That’s why it’s not particularly useful to think of the numbers anywhere in SVG as pixels, because they aren’t pixels; they’re just numbers on an arbitrary coordinate system.

    What if the aspect ratios don’t match, though?

    <svg width="300" height="75" viewBox="0 0 100 100">

    What happens now, by default, is that the SVG will draw itself as large as it can, centered along the longest dimension (Fig 6.3).

    See the Pen vLdpdN by Chris Coyier (@chriscoyier) on CodePen.

    Fig 6.3: The viewport is enlarged, but no longer matches the aspect ratio of the viewBox. So by default, the image is drawn as large as possible without being cut off, and centered on the long dimension.

    If you want to regain some control over this behavior, there’s an attribute for the svg element that can help!

    preserveAspectRatio

    It looks like this:

    <svg preserveAspectRatio="xMaxYMax">

    The x and Y parts of that value are followed by Min, Mid, or Max. The reason SVG normally centers in the viewport is because it has a default value of xMidYMid. If you change that to xMaxYMax, it tells the SVG: Make sure you go horizontally as far to the right as you can, and vertically as far to the bottom as you can. Then be as big as you can be without cutting off.

    The “without cutting off” part is another aspect of preserveAspectRatio. The default value is xMidYMid meet—note the “meet.” You can replace meet with slice to say instead: Fill the area entirely; cutting off is okay.

    There are nine possible alignment values combined with meet (Fig 6.4).

    Several images representing rectangle pairs, demonstrating placement variations for smiley face graphics found in each rectangle.
    Fig 6.4: Examples of preserveAspectRatio values with meet.

    There are also nine possible alignment values combined with slice (Fig 6.5).

    Several images representing rectangle pairs, demonstrating placement variations for smiley face graphics found in each rectangle. Each also exceeds the height and width of the rectangle's frame.
    Fig 6.5: Examples of preserveAspectRatio values with slice.

    I made a testing tool for playing with this idea. Sara Soueidan also wrote an in-depth article on this subject, where she makes an excellent observation relating this idea to CSS. The background-size property has two keywords it can take: contain and cover. The contain value means “make sure this entire image is viewable, even if you have to shrink it,” which makes it just like meet. The cover value means “make sure this covers the entire area, even if you have to cut parts off,” which makes it just like slice.

    Even the alignment part of the value has a matching CSS counterpart: background-position. The default background-position is 0 0, meaning “top left.” That’s just like xMinYMin. If you were to change that to, say, 50% 100%, that would be like xMidYMax!

    Fig 6.6 has some examples to make that connection a little clearer.

    preserveAspectRatio values and CSS properties
    preserveAspectRatio= "xMinYmax meet" background-position: 0 100%; background-size: contain;
    preserveAspectRatio= "xMidYMid meet" background-position: 50% 50%; background-size: contain;
    preserveAspectRatio= "xMinYmax slice" background-position: 100% 0; background-size: cover;
    preserveAspectRatio= "xMidYMid slice" background-position: 50% 100%; background-size: cover;

    Fig 6.6: preserveAspectRatio values and the CSS properties they are similar to.

    Remember: these aren’t interchangeable bits of code; they are just conceptually related.

    What if you want to throw aspect ratio out the window and have SVG scale to the viewport, like a raster image would? Turn preserveAspectRatio off (Fig 6.7)!

    <svg preserveAspectRatio="none" viewBox="0 0 100 100">

    See the Pen yevpvj by Chris Coyier (@chriscoyier) on CodePen.

    Fig 6.7: Example of preserveAspectRatio="none". Poor little buggers.

    Amelia Bellamy-Royds wrote a comprehensive article on scaling SVG, in which she covers things like the fact that svg can essentially contain other svg with different aspect ratios and behavior, so you can make some parts of an image scale and others not, which is pretty cool and unique to SVG.

    Approaches to artboard sizing

    When you draw SVG in editing software, that software likely gives you some kind of artboard to draw on. That’s not a technical SVG term; it’s essentially a visual metaphor for viewBox.

    Let’s say you’re working with a whole set of icons for a site. One approach is to make all artboards hug each edge of the icon (Fig 6.8).

    Adobe Illustrator graphics cropped to their edges
    Fig 6.8: Example of graphics in Adobe Illustrator cropped to their edges.

    Here’s a quick trick to get that artboard cropping in Illustrator: select the Artboard tool and then “Fit to Artwork Bounds” from the Presets menu (Fig 6.9).

    Cropped view of Adobe Illustrator menu option for resizing an artboard to the edges of a graphic
    Fig 6.9: The menu option in Adobe Illustrator for resizing an artboard to the edges of a graphic.

    The big advantage to this technique is alignment (Fig 6.10). If you want to align any edge of any of these icons to anything else, that’s easy to do. There is no mysterious space you need to contend with, or tweaky positional CSS.

    .icon.nudge {
      position: relative;
      right: -2px; /* UGHCKKADKDKJ */
    }
    Icons aligned to corners of graphics
    Fig 6.10: Icons aligning to edges without little bits of extra space you have to account for.

    The big disadvantage to the cropping technique is relative sizing. Imagine you take the practical step of sizing your icon’s width and height, like this:

    .icon {
      width: 1em;
      height: 1em;
    }

    A tall, skinny icon will shrink to fit in that space and potentially appear awkwardly small. Or perhaps you’re trying to have an intentionally small star shape as an icon, except the star has a squarish aspect ratio and thus grows to fill the space, appearing bigger than you want it to.

    Here’s an example where two icons are sized identically as a square (Fig 6.11). The “expand” icon looks right at home, since it has a square aspect ratio to match. But the “zap it” icon has a tall and narrow aspect ratio, so it looks wimpy, like it’s floating in the same square area.

    Two button samples; one example has a nicely-balanced scale of icon to text, the other has an icon that is too small for the space and size of text
    Fig 6.11: Two icons sized in the same square space within a button. The top one fits nicely, but the bottom one floats awkwardly in space.

    The other approach here is to make consistently sized artboards (Fig 6.12):

    Several similarly-sized graphics
    Fig 6.12: Example of Illustrator graphics whose artboards are equal in size.

    The advantages and disadvantages are exactly inverse here. You might have alignment issues, because not all edges of the icons touch the edge of the viewBox, which can be frustrating and might require tweaking sometimes (Fig 6.13).

    Graphics with icons sized to be comparable to one another
    Fig 6.13: You can adjust icons’ relative sizing, but that can make alignment more difficult.

    You won’t have relative sizing issues, though, because the viewBox is the same for all of them. If any particular icon looks too big or small, you can adjust the artwork to bring it more in line with the set.

    Since we’re learning about sizing, now is the perfect time to bring up how SVG fits into the flexible world of responsive design.

    Responsive SVG

    One of the hallmarks of responsive design is fluid layout. Content—images included—is designed to fit its containers and the screen. If responsive design is new to you, Ethan Marcotte’s seminal 2010 article on the subject is a fine place to start learning about it. SVG jibes extremely well with responsive design:

    • Responsive designs are flexible. So is SVG! It renders well at any size.
    • Responsive web design is a philosophy of caring about how a website looks and behaves in any browser. Comparatively smaller SVG files and performance-responsible tactics like an SVG icon system can be a part of that.

    But perhaps SVG’s most obvious connection to responsive design is the possibility to react to CSS @media queries. Media queries move, hide, or show elements with CSS based on things like the width or height of the browser window. Those elements can be anything: sidebars, navigation, ads, what have you. They can be SVG elements as well.

    Imagine a logo that displays different levels of detail depending on how much space is available. That’s exactly what Joe Harrison was thinking when he created a really neat demo using well-known logos, (Fig 6.14).

    Modified versions of the Disney logo, progressing to greater and greater simplification
    Fig 6.14: Joe Harrison’s demo of the Disney logo at different sizes.

    On the web, we’ve always had the ability to swap out images with other ones. What’s appealing here is that we aren’t swapping out images; these are all the same image. Or at least they could be. That signature “D” all by itself could be the same exact “D” used in the most complex version of the logo. Easy-cheesy in CSS.

    Say we organize the SVG like so:

    <svg class="disney-logo">
     <g class="magic-castle">
        <!-- paths, etc -->
      </g>
      <g class="walt">
        <!-- paths, etc -->
      </g>
      <g class="disney">
        <path class="d" />
        <!-- paths, etc -->
      </g>
    </svg>

    This, by the way, is pretty easy to do in Illustrator (Fig 6.15). The groups and names you create there turn into IDs in the SVG output, and you can use those IDs to do the styling. Personally, though, I prefer using classes because they aren’t unique (so you don’t accidentally end up with multiple identical IDs on the page) and because classes have a lower and more manageable level of CSS specificity. It’s easy enough to change IDs to classes with a bit of find-and-replace maneuvering in a code editor.

    Adobe Illustrator interface showing vector paths and layers for Walt Disney logo
    Fig 6.15: Named layers and named shapes in Adobe Illustrator.

    The corresponding CSS could be something like this:

    @media (max-width: 1000px) {
      .magic-castle {
        display: none;
      }
    }
    @media (max-width: 800px) {
      .walt {
        display: none;
      }
    }
    @media (max-width: 600px) {
      .disney > *:not(.d) {
        display: none;
      }
    }

    Mind you, this is a contrived example of hiding parts of the images at different breakpoints, but that’s exactly how you would do it, along with some likely sizing adjustments. Anything you can do with CSS is on the table here. Perhaps some animation is appropriate at some breakpoints but not at others. Perhaps you change stroke sizes to beef up or trim down icons at different sizes. Perhaps you change some fill colors to simplify adjacent shapes.

    And things can get even fancier! Depending on how the SVG is used, those media queries might actually be different. SVG used as img, iframe, or object has its own viewport. That means CSS embedded inside of it reacts to media queries based on that, rather than the whole browser window viewport. That means you would write, say, width-based media queries based on the width of the image, not of the entire page.

    That’s a very appealing idea: an element that arranges itself based on attributes of itself, rather than the page. Am I this wide? Do this. Am I this tall? Do this. That way, the SVG reacts to the situation it’s in rather than the arbitrary document it happens to be part of.

    As I write, this is referred to as “element queries” in CSS, but it doesn’t actually exist yet in regular HTML/CSS. Once again, SVG is ahead of the curve.

    Graduation into animation

    Speaking of things SVG is good at, let’s move into animation next. Everything we have been building on so far has prepared us for this. Hang on tight!

  • This week's sponsor: HIRED 

    ​HIRED, where companies apply to you. Get your profile in front of 4,000+ companies with one application.

  • Finding Opportunities in the Mistakes We Make 

    Roughly six years into my software development career, I had worked on interesting projects, met amazing people, and had the opportunity to travel to exotic cities. Yet I was frustrated. I was burning the candle at both ends to get things done. I didn’t look back to see if I could improve on how things were being done; I had no time. Deep down I knew it wasn’t feasible. I was working hard, not smart; I felt like I wasn’t working toward anything; I was falling behind with technology. I was burning out.

    I started searching for an opportunity to facilitate my technical growth. Two years later I was based at an enterprise client who adopted agile software development methodologies, and everything changed for me. This new world exposed me to a diverse working environment and new perspectives, and encouraged me to ask even more questions than before. This is when I discovered the power of the words “reflect, inspect, and adapt.”

    It wasn’t a walk in the park with unicorns and rainbows, but the experience has aided me in officially branding my career as one exciting journey of professional and self-discovery. Now ten years into my career, I realize that for most of that time I have been in survival mode. After looking back, I’d like to share how I found opportunities in the mistakes I made.

    Define clear career and personal goals

    Computers weren’t a household name when I was growing up in South Africa, but I was lucky to have access to my dad’s Pentium 386. I was amazed at this technology. When we got internet access, I was immediately hooked on the online world. I taught myself HTML and later built my own machine with the money I made from designing a website for the local newspaper.

    When I chose my higher education path I had one goal—I wanted to make websites. I didn’t want a degree; I wanted experience. I studied at a college for two years, then excitedly entered the workforce to follow my passion.

    As I entered the workforce, I wasn’t prepared for the politics: managers expecting things to be done almost immediately; clients who don’t engage and are unsure of what they want; clients who express urgency, yet wait for the last minute to provide you with everything you need; an increased workload due to colleagues who stay well inside their comfort zone. These are just some examples of the politics that initiated my frustrations.

    I wondered if this is where I’d still be in five or ten years and if I would be able to sustain it. I didn’t know the answer to the former, but to the latter it was definitely no.

    Coupled with turning thirty, the new perspectives I developed in the agile environment made me really evaluate my future. I realized that I didn’t have goals; I was only chasing my passion. Granted, it is fun and I gained a lot of experience in many different areas in IT, but I don’t have anything tangible to show for it now.

    After much reflection, I discovered these goals for myself:

    1. Increase productivity. I minimize distractions like email, social media, and uninvited guests to improve my productivity. To make sure I am working on the right tasks, I need to have a clear understanding about what I am working on and why.
    2. Develop software that has a positive impact on people. It is important to understand business thinking and impact on users. I need to ask appropriate questions, and I need to guide and negotiate with product stakeholders.
    3. Share my knowledge. I can create an online identity (publish articles, blog), possibly speak at events, and contribute to open-source software. I can find projects on GitHub of libraries and tools that I regularly use and create a pull request.
    4. Better my craftsmanship. I can learn through code reviews and peer conversations, listen to podcasts, read up on best practices, read more craft-related reference books, and reflect on my implementation.
    5. Learn to live mindfully. To have a positive impact on people, I can make small adjustments and engage those around me to help me grow. Meditation, reflection, and motivational books are tools I could use to guide me.
    6. Showcase my career. Create a tangible timeline of projects I have worked on including screenshots, descriptions, technologies, and learnings.

    These goals feel more defined to me than just making cool websites. I wish I had set some goals a little sooner but luckily — as cliché as it sounds — it’s never too late. Goals give you direction and purpose. Like me, you may have worked many late nights on personal projects that never materialized. It helps to have focus and something definite to achieve. I find what’s best of all is that I don’t feel constrained by having these goals. They represent what’s important to me now but if my values change, I can inspect and adapt my goals.

    Put people before technology

    For too long, I worked alone on my own codebases and wondered if I was doing things the right way. I had little to no exposure to working in teams and dealing with industry buzzwords like agile, TDD/BDD, Gang of Four, SOLID, code reviews, continuous integration/delivery, DevOps, and <insert your favorite technical jargon here>. I was in a bubble falling further behind in the fast-paced technical world. I was focused on working with technology and never realized how important it is to collaborate.

    If you work in a company with a silo-based culture or one- or two-people teams, try not to accept things for what they are:

    • Get involved with your coworkers by communicating and collaborating on projects.
    • Try introducing knowledge-sharing sessions and code reviews.
    • Reflect on what worked and what didn’t and also unpack why, so that you can learn from it.
    • Approach management with suggestions on how you and your colleagues can produce more solid and effective software.
    • Attend conferences or smaller community meetups. Not only can you learn a lot through the content but you have the chance to network and learn from an array of people with different skills.

    Prioritize your tasks

    I often worked about twelve to sixteen hours a day on projects with short deadlines. I spent my official work hours helping colleagues with problems, immediately responding to email, attending to people with queries or friendly drop-ins, supporting projects that were in production, or fighting fires resulting from errors that usually came from miscommunication. This left me with very little time to be productive. When I finally got to work on my project, my perfectionism only increased my stress levels. Regardless, I never missed a deadline.

    I thought everything was important. If I didn’t do what I was doing the world would end, right? No! The reality is that when everything is important, nothing is important.

    This working behavior sets unrealistic expectations for the business, your colleagues, and yourself. It hides underlying issues that need to be addressed and resolved. If you are working at an unsustainable pace, you can’t deliver your best work plus you end up missing out on actually living your life.

    The power of retrospectives

    The most important ceremony (or activity) I was introduced to in the agile environment was the retrospective, which is “the process of retrospecting at the heart of Scrum (Inspect and Adapt), eXtreme Programming (fix it when it breaks) and Lean Software Development (Kaizen or Continuous Improvement)”.1

    Through retrospection you are granted the opportunity to reflect on how you — and the team — did something, so that you can improve the process. Let’s run through this technique to identify some pain points using the situation I had found myself in:

    • Working unsustainable hours because there was too much to do. I helped everyone else before I worked on my own tasks, I worked on things that didn’t add much value, and I thought that all the features needed to be ready for launch. I was blind to asking for help when I needed it.
    • Dealing with too many distractions. I allowed the distractions by immediately switching context to help others because it was important to them.
    • Key-person dependency. I was the only person working on one of the projects.
    • Miscommunication resulting in errors. Communication was done via email and the stakeholders were off-site. There wasn’t quick feedback to indicate if the project was going in the right direction.

    Once the pain points are identified, adjustments need to be made in order to see improvement. Large adjustments could take too long to implement or adjust to, which leads to disruptions. Smaller adjustments are better. These adjustments may or may not work in the long haul, so we can look at them as experiments.

    • To work more sustainably I need to know what I need to work on — and why — so that I can add value without wearing myself out. Perhaps I could find out what needs to be available for launch and create a prioritized list of things to do. This list could help me focus and get into the “zone.”
    • To manage client expectations, we can try open communication. This can also help me prioritize my tasks.
    • To overcome some of the distractions I could reap the benefits of being selfish by saying no (within reason). This could help me stay in the zone for longer. If anything must be expedited I can start offering trade-offs: if I do X now, can Y wait?
    • To alleviate the pressures of being the sole person able to do certain things, I could have more conversations with my manager and train a colleague so that they are aware of what is going on and someone can take over in the event that I get sick or am on vacation.
    • To reduce errors from miscommunication, perhaps we could create visibility for stakeholders. Introduce a physical workflow board and have constant feedback loops by requesting frequent reviews to demonstrate what we have done.

    Experiments run for a period of time and need to be measured. This is a grey area. Measurements aren’t always accurate, but it always boils down to the pain. If the pain is the same or has increased, then the experiment needs to be adjusted or a new experiment introduced. If it has been alleviated, even slightly, then there is improvement.

    Learning through experimentation

    Many of the experiments mentioned above already form part of the agile Scrum framework, so let me introduce you to real-world experiments we did in our team.

    Based on the way our development stories were deployed, we experienced pain with testing stories in the appropriate order. We were using Jenkins for automated deployments and each one got a number incremented from the previous one, but the testers weren’t testing the stories in any particular order. If a story was ready to be deployed, they wouldn’t know if there was another, untested story that they were unwittingly promoting to production along with it, or if the story they tried to deploy was being held back by other stories still awaiting testing.

    Without waiting for a retrospective we had a conversation to highlight the pain. We chose to write the build number on a note stuck on the story card on our wall and add a comment to our digital storyboard. This created quick visibility on the chronological order of the possible deployments of our stories.

    A change control process was later introduced that required details of a production deployment and a rollback plan for that change. We couldn’t quickly access the last few production build numbers, so we started writing them on stickies and put those onto a new section on our physical board. Now we didn’t have to search through email or log in to Jenkins to find these numbers. One day, we were asked when we last deployed and had to go back to email for the answer, so we started adding the date to the deployment number stickies.

    These were simple experiments but they added a lot of value by saving time. We acted on alleviating pain as it happened.

    Don’t be afraid to experiment if you are not in an Agile world. If you simply run to business with problems and offer no solutions then business will frown at you. The goal here is simple: identify your pain points and find simple solutions (or improvements) to try to alleviate the pain. Experiment, inspect, and adapt often.

    Believe in yourself

    Survival mode never did me any good. I didn’t get an award for working long hours to make deadlines. Letting my mistakes and frustrations build up over the years made me stop believing in myself.

    I was stuck in a rut; technology was changing around me fast and I was burnt out and falling behind. I’d scroll through Stack Overflow and instantly feel stupid. I’d spend time looking at all the amazing websites winning awards on Awwwards and feel inadequate. I didn’t have a life as it was consumed by my obsession for work. I didn’t know what I wanted anymore, or what I wanted to aspire to.

    Introspection helped me. By inspecting my behavior, I was able to make minor adjustments that I would then inspect again to see if they worked. This simple activity can show you what you are capable of and lead you to learning more about yourself and those around you. I am applying what I have learned in software in a personal capacity. I have my life back, and I feel empowered and freed.

    My final thoughts

    I’ve definitely made a lot of mistakes in my career. What I have shared with you is probably only a fraction of them. I don’t regret my mistakes at all; that is how I got my experience. The only regret I have is that I wish I had begun reflecting on them sooner.

    When a mistake is made, an opportunity is born: learn from that mistake to do something differently next time. Take time to step out of the subjective into the objective, so that you can reflect and consider what you could do to change it. (And don’t be too hard on yourself!)

    My journey has taught me to implement small experiments that can be measured and to run them for short periods of time. If something works, keep it. If not, adjust it or throw it away. By making small changes, there are fewer disruptions. If you too are in survival mode — stop and breathe now! Reflect, inspect, and adapt.

    Footnotes

  • Resurrecting Dead Personas 

    Being a user-centered designer means that you deliberately seek out the stories, data, and rationale behind your users’ motivations. You endeavor to keep user concerns at the forefront of every design decision, and regularly conduct research and collect data.

    But collecting facts about users isn’t the same as knowing your users. Research and data need to be regularly aggregated, analyzed, and synthesized into a format that is both understandable and accessible at critical moments. You need to turn user facts into user wisdom, and one of the most common methods for doing this is to develop user personas.

    Type “how to build user personas” into your favorite search engine and you will get thousands of results outlining different templates and examples of personas. Across the tech industry, personas “put a human face on aggregated data,” and help design and product teams focus on the details that really matter. Studies have shown that companies can see 4x the return on investment in personas, which explains why some firms spend upwards of $120,000 on these design tools.

    However, while it is common for design teams to spend considerable amounts of time and money developing personas, it is almost as common to see those personas abandoned and unused after a while. Everett McKay, Principal at UX Design Edge, has pointed out that user personas can fail for a number of reasons, such as:

    • They do not reflect real target users.
    • They are not developed with product goals in mind.
    • They are not embedded into team processes.

    I agree with everything McKay suggests, but I would add that personas fail largely because of one common misconception: the false idea that once you build a persona, you’re done. As designers, we know that the first version of a product is never perfect, but with multiple rounds of design and research it can be made better. Personas are no different.

    To recover personas that have become lifeless, here’s how you can iterate on them with periodic research and use them to achieve tangible goals. The following steps will help ensure you see value from the investment you made developing them in the first place. Let’s put your personas (back) to work and incorporate them into your design and development process.

    How a persona dies

    Let’s imagine you work at a company called Amazing Childcare that creates tools to help parents find childcare options for their children. Let’s also say you have the following data and statistics for AmazingChildcare.com:

    • 82% of customers are between the ages of 30 and 35, and 73% of those are female.
    • The most common concerns around finding childcare (as reported in user interviews) are cost and quality of care received.
    • AmazingChildcare.com has a homepage bounce rate of 40%.
    • Customer satisfaction survey shows an average satisfaction rating of 6.5 (out of 10).

    While this data is interesting, it is hard to process and assimilate into your design practice. You still need to go through the arduous work of understanding why the majority of users are who they are, what problems they are trying to solve, and how you can better meet their needs. So, you decide to create a persona.

    The persona you create is Susan, a 34-year old working mother of a two-year-old. She is interested in finding a qualified nanny that has passed a background check. Susan, like all freshly made personas, is a much more thought-provoking platform for crafting design solutions than a spreadsheet of numbers. She is someone we can imagine, remember, and empathize with.

    This is the point in the story when Susan dies.

    At first, the design team enjoys thinking about and designing for Susan. Having her “in the room” is thought provoking and interesting, but over time, Susan is talked about less and less. She starts to feel irrelevant to the products you’re building. You realize that Susan has “died,” leaving a lifeless, zombie Susan sitting in her place. You consider all the research and work your team put into creating Susan and wonder “what went wrong?”

    The problem is that your personas remained static and unmoving while the company, Amazing Childcare, grew and changed.

    Review, research, repeat

    As your product and marketing strategies change over time, so do your target users. In our example, Amazing Childcare may have started with a large user base of parents looking for full-time childcare options for their toddlers, but over time, the demographic changed. Now, it’s most frequently used by parents of school-age children looking for one-time, “date night” babysitters. When this happens, your original personas—like Susan—are no longer useful for thinking through design problems. Unless you periodically validate your personas, you’ll be responding to old assumptions (based on your outdated personas) rather than who your customers really are. In other words, your real-world users changed, but Susan didn’t.

    To remedy this, you should regularly conduct persona research, using a variety of methods to evaluate whether your personas still reflect:

    • The most common demographic, budget, and purchase scenarios of your users
    • The main behavior patterns of your users
    • The motivations and goals of your users.

    You can conduct your persona research on a schedule, such as once a quarter, or you can opportunistically work it into the usability research you already do. Either way, you need to make a commitment to keeping your personas relevant.

    If we go back to our example at Amazing Childcare, your personas would change based on the new research. Susan may still be a valid persona for your company, but your research would show that she no longer represents its core users, and should therefore no longer be your primary persona. Based on the updated research, you could develop a new persona named Beverly. Beverly is a 42-year-old mother of a 10-year-old boy and 7-year-old girl. Unlike Susan, Beverly is interested in finding an inexpensive babysitter for occasional date nights with her husband. You would use Beverly to think about the needs of the core user base, but only use Susan when you’re designing tools that directly cater to the demographic she represents.

    It is natural and necessary for personas to evolve and change; personas like Susan can drift out of the limelight of “primary persona” and make room for new friends like Beverly. Your ecosystem of personas should be as dynamic as your ecosystem of users, and regular persona research will ensure that they evolve in sync.

    Set goals

    Personas can help you do more than think about and design for target users. They can (and should) be used to help you reach real, tangible goals. Goals that reflect ways of increasing business, creating better user experiences, or both, will help you update your personas and develop your product. Even if you are not sure what is possible to achieve with personas, you should make an attempt at setting goals. Goals (even unachievable ones) provide a means for tracking the return on investment of your efforts.

    To get started, try using this format from Tamara Adlin and John Pruitt.

    The Persona Lifecycle
      Goal or issue How things are today How we want things to be tomorrow Ways to measure change
    Description A problem you would like your personas to solve. A description of the current state of affairs. A description of the “first step” in achieving your goal. A description of analytics, research, or other methods you can use to measure progress.

    Figure 1: Tamara Adlin and John Pruitt’s Essential Persona Lifecycle format

    For each goal, you will need to identify how you’ll measure progress toward that objective. You may need to create surveys and interview scripts for some, while for others, you may need analytics tools.

    Here is an example of a persona goal we could set at Amazing Childcare.

    Amazing Childcare Persona Goal
    Goal or issue How things are today How we want things to be tomorrow Ways to measure change
    Use our primary persona to drive feature development. We have just started our business and believe users like “Susan” (our primary persona) will want certain features (like nanny search and background checks) to be truly satisfied. However, the Susan persona needs to be validated and tested. We want to thoroughly research and validate our Susan persona and better understand how Amazing Childcare can meet our primary users’ needs. We can validate the Susan persona and measure customer satisfaction through a series of surveys and interviews. We will know we’ve succeeded when the next feature release increases customer satisfaction with Amazing Childcare.

    Figure 2: Example persona goal for Amazing Childcare

    Once you have created a set of goals for your personas, you can evaluate them as part of your regular research plan. If you find that you’re falling behind on any of your goals, you can research and recalibrate your personas based on the metrics you care about.

    For instance, if we evaluated the Susan persona in the ways we’ve outlined above, the data we would uncover indicates that Susan doesn’t actually represent the majority of our users. We would then reevaluate our personas and ultimately develop our new primary persona, Beverly.

    Putting personas (back) to work

    While research and goal setting are good practices, in and of themselves, the real benefit of personas can be seen when you put them to use. Here are some suggestions for how to incorporate personas into your design practice:

    • Start putting the face of your target persona at the top of every sketch, wireframe, and prototype. Encourage others to do the same.
    • Put a comment in every product story or ticket that states the target persona for that feature.
    • Shake up regular design meetings by asking a few people to roleplay as your personas. Throughout the rest of the meeting, have them look at every new design through the lens of their assigned persona.
    • Conduct a workshop. Activities such as Persona Empathy Mapping reinvigorate and add detail to personas.

    One of my favorite ways to utilize personas is to write scenarios in which they are the main character, then use them to explain research results. For example, let’s say we’re evaluating a new interface for the sign-up and login process on our website. Instead of presenting raw numbers (e.g., “10% of new users couldn’t find the sign-up interface”), we can present the data in a scenario, providing a way to understand a design problem that goes beyond statistics. Here is an example:

    Beverly came to the Amazing Childcare website to evaluate whether the company would actually be useful in helping her find reliable babysitters for her family. She decides that she would like to try the product and wonders if there is a free trial available. She searches the content of the web page for the words “free trial” or “sign-up,” but is unsuccessful. She does not think the “login” button applies to her, since she is a new user and does not yet have an account. She does not think to click on the “login” button, so she fails to find the new-member sign-up interface.

    In the example above, we’re using Beverly to describe feature requirements, usage statistics, and study results. The benefits of using personas to explain these components is that you are simultaneously making messy and complex details easier to understand, and forcing yourself to deeply consider who you’re really designing for. According to Alan Cooper, you should “[d]esign each interface for a single, primary persona.” Focusing on a persona like Beverly forces us to define the parameters of what our design should accomplish and helps us ultimately evaluate its success.

    Keeping personas alive

    Developing personas and keeping them alive can be difficult. Without regular care and feeding, they can waste away and your investment in them will be lost. In The User Is Always Right, Steve Mulder described it best:

    “It’s very easy to create personas, then think your work is done. But just having personas doesn’t mean people will accept them. Just accepting the personas doesn’t mean people will remember them. Just remembering the personas doesn’t mean people will actually use them. Your job is to keep the personas alive so they show their worth.”

    To ensure your personas are accepted, remembered, and used, you need to be the persona advocate on your team. As the persona advocate, you need to:

    • Regularly conduct persona research.
    • Set goals.
    • Make sure there is always a place for your personas at the design table.

    With creativity and persistence, you can cultivate a suite of well-researched, battle-tested user personas.

    While being a persona’s advocate may seem like a lot of work, it’s worth doing. Personas are more than just a document, they are an experience. Taking the time to draft a set of user personas, use them, evaluate them, research them, and refresh them, forces you to consider who your users are, what their goals are, and how your product fits into their lives.

    If you’re ready to become the persona advocate on your team, here are some additional resources to help you along:

    Books

    Articles

  • Adapting to Input 

    Jeremy Keith once observed that our fixed-width, non-responsive designs were built on top of a consensual hallucination. We knew the web didn’t have a fixed viewport size, but we willfully ignored that reality because it made our jobs easier.

    The proliferation of mobile devices forced us into the light. Responsive web design gave us the techniques to design for the rediscovered reality that the web comes in many sizes.

    And yet there is another consensual hallucination—the idea that desktop equals keyboard and mouse, while phones equal touch.

    It’s time to break free of our assumptions about input and form factors. It’s time to reveal the truth about input.

    Four truths about input

    1. Input is exploding — The last decade has seen everything from accelerometers to GPS to 3D touch.
    2. Input is a continuum — Phones have keyboards and cursors; desktop computers have touchscreens.
    3. Input is undetectable — Browser detection of touch‚ and nearly every other input type, is unreliable.
    4. Input is transient — Knowing what input someone uses one moment tells you little about what will be used next.

    Being adaptable

    In the early days of mobile web we created pitfalls for ourselves such as “mobile context.” We’ve since learned that mobile context is a myth. People use their phones everywhere and for any task, “especially when it’s their only or most convenient option.”

    When it comes to input, there is a danger of making a similar mistake. We think of a physical keyboard as being better suited to complex tasks than an onscreen keyboard.

    But there are many people whose primary access to the internet is via mobile devices. Those same people are comfortable with virtual keyboards, and we shouldn’t ask them to switch to a physical keyboard to get the best experience.

    Even for those of us who spend our days on computers, sometimes a virtual keyboard is better. Perhaps we’re on a plane that has started to descend. In that moment, being able to detach a keyboard and work on a touchscreen is the difference between continuing our task or stowing our laptop for landing.

    So who are we to judge what input is better? We have no more control over the input someone uses than we do the size of their screen.

    Becoming flexible

    Confronting the truth about input can be overwhelming at first. But we’ve been here before. We’ve learned how to design for a continuum of screen sizes; we can learn how to adapt to input—starting with these seven design principles.

    Design for multiple concurrent inputs

    The idea that we’re either designing for desktop-with-a-mouse or touch-on-mobile is a false dichotomy. People often have access to multiple inputs at the same time. Someone using a Windows 10 laptop or a Chromebook Pixel may be able to use the trackpad and touchscreen concurrently.

    There are many web pages that detect touch events and then make incorrect assumptions. Some see the touch events and decide to deliver a mobile experience regardless of form factor. Others have different branches of their code for touch and mouse and once you’re in one branch of the code, you cannot switch to the other.

    At minimum, we need to ensure that our web pages don’t prevent people from using multiple types of input.

    Ideally, we would look for ways to take advantage of multiple inputs used together to create better experiences and enable behavior that otherwise wouldn’t be possible.

    Make web pages that are accessible

    When someone uses a remote control’s directional pad to interact with a web page on a TV, the browser sends arrow key events behind the scenes. This is a pattern that new forms of input use repeatedly—they build on top of the existing forms of input.

    Because of this, one of the best ways to ensure that your web application will be able to support new forms of input is to make sure that it is accessible.

    The information provided to help assistive devices navigate web pages is also used by new types of input. In fact, many of the new forms of input had their beginnings as assistive technology. Using Cortana to navigate the web on an Xbox One is not so different than using voice to control Safari on a Mac.

    Design for the largest target size by default

    A mouse is more precise than our fingers for selecting items on a screen. Buttons and other controls designed for a mouse can be smaller than those designed for touch. That means something designed for a mouse may be unusable by someone using a touchscreen.

    However, something designed for touch is not only usable by mouse, but is often easier to select due to Fitts’s Law, which says that “the time to acquire a target is a function of the distance to and size of the target.”

    Plus, larger targets are easier for users with lower dexterity, whether that is a permanent condition or a temporary one caused by the environment. At the moment, the largest target size is touch, so this means designing touch first.

    As Josh Clark once said, “when any desktop machine could have a touch interface, we have to proceed as if they all do.”

    Design for modes of interaction instead of input types

    Gmail’s display density settings illustrate the benefit of designing for user interaction instead of input types.

    Gmail Interface

    By default, Gmail uses a comfortable display density setting. If someone wants to fit more information on the screen, they can switch to the compact display density setting.

    It so happens that these two settings map well to different types of input. The comfortable setting is touch-friendly. And compact is well suited for a mouse.

    But Gmail doesn’t confine these options to a particular input. Someone using a touchscreen laptop could choose to use the compact settings. Doing so sacrifices the utility of the laptop’s touchscreen, but the laptop owner gets to make that choice instead of the developer making it for her.

    Vimeo made a similar choice with their discontinued feature called Couch Mode. Couch Mode was optimized for the 10ft viewing experience and supported remote controls. But there was nothing that prevented someone from using it on their desktop computer. Or for that matter, using the standard Vimeo experience on their TV.

    In both cases, the companies designed for use cases instead of a specific form factor or input. Or worse, designing for a specific input inferred from a form factor.

    Abstract baseline input

    When we’re working on responsive web designs at Cloud Four, we’ve found that the labels “mobile,” “tablet,” and “desktop” are problematic. Those labels create images in people’s minds that are often not true. Instead, we prefer “narrow,” “wide,” “tall,” and “short” to talk about the screens we’re designing for.

    Similarly, words like “click” and “tap” betray assumptions about what type of input someone might use. Using more general terms such as “point” and “select” helps prevent us from inadvertently designing for a particular input.

    We should also abstract baseline input in our code. Mouse and touch events are entirely different JavaScript APIs, which makes it difficult to write applications that support both without duplicating a lot of code.

    The Pointer Events specification normalizes mouse, touch, and stylus events into a single API. This means for basic input, you only have to write your logic once.

    Pointer events map well to existing mouse events. Instead of mousedown, use pointerdown. And if you need to tailor an interaction to a specific type of input, you can check the pointerType() and provide alternate logic—for example, to support gestures for touchscreens.

    Pointer Events are a W3C standard and the jQuery team maintains a Pointer Events Polyfill for browsers that don’t yet support the standard.

    Progressively enhance input

    After baseline input has been wrangled, the fun begins. We need to start exploring what can be done with all the new input types available to us.

    Perhaps you can find some innovative uses for the gyroscope like Warby Parker’s product page, which uses the gyroscope to turn the model’s head. And because the feature is built using progressive enhancement, it also works with mouse or touch.

    Warby Parker UI

    The camera can be used to scan credit cards on iOS or create a photo booth in browsers that support getUserMedia. Normal input forms can be enhanced with the accept attribute to capture images or video via the HTML Media Capture specification:

    <input type="file" accept="image/*">
    <input type="file" accept="video/*;capture=camcorder">
    <input type="file" accept="audio/*;capture=microphone">
    

    Make your forms easier to complete by ensuring they work with autofill. Google has found that users complete forms up to 30 percent faster when using autofill. And keep an eye on the Payment Request API, which will make collecting payment simple for customers.

    Or if you really want to push the new boundaries of input, the Web Speech API can be used to enhance form fields in browsers that support it. And Physical Web beacons can be combined with Web Bluetooth to create experiences that are better than native.

    Make input part of your test plans

    Over the last few years, test plans have evolved to include mobile and tablet devices. But I have yet to see a test plan that includes testing for stylus support.

    It makes intuitive sense that people check out faster when using autofill, but none of the ecommerce projects that I’ve worked on have verified that their checkout forms support autofill.

    We need to incorporate input in our test plans. If you have a device testing lab, make input one of the criteria you use to determine what new devices to purchase. And if you don’t have a device testing lab, look for an open device testing lab near you and consider contributing to the effort.

    The way of the web

    Now is the time to experiment with new forms of web input. The key is to build a baseline input experience that works everywhere and then progressively enhance to take advantage of new capabilities of devices if they are available.

    With input, as with viewport size, we must be adaptable. It is the way of the web.

  • The Itinerant Geek 

    This spring I spent almost a month on the road, and last year I delivered 26 presentations in eight different countries, spending almost four months traveling. While doing all of this I am also running a business. I work every day that I am on the road, most days putting in at least six hours in addition to my commitments for whichever event I am at. I can only keep up this pace because travel is not a huge stressor in my life. Here are some things I have learned about making that possible, in the hope they are useful to anyone setting off on their first long trip. Add your own travel tips in the comments.

    Before you go

    During the run-up to going away, I stay as organized as possible. Otherwise I would lose a lot of time just preparing for the trips. I have a Trello board set up with packing list templates. I copy a list and remove or add anything specific to that trip. Then I can just grab things without thinking about it and check them off. I also use Trello to log the status of plans for each trip; for example, do I have a hotel room and flights booked? Is the slide deck ready? Do I know how I am getting from the airport to the hotel? This way I have instant access to the state of my plans and can also share this information if needed.

    It is easy to think you will always have access to your information in its original form. However, it is worth printing a copy of your itinerary to keep with you just in case you can’t get online or your phone battery runs out. For times when you don’t have physical access to something at the moment, take photos of your passport and car insurance (if it covers rentals), and upload them somewhere secure.

    Your travel may require a visa. If your passport is expiring within six months of your trip, you may want to get a new one — some countries won’t issue a visa on a passport that is due to expire soon. You can in some cases obtain pre-authorization, such as through the American ESTA form for participating in its Visa Waiver Program. This might have changed since your last trip. For example, Canada has introduced an eTA system as of March 2016. I’ve traveled to Canada for ConFoo for the last four years - if I attend next year, I’ll need to remember to apply for this beforehand.

    Tell your bank and credit card company that you are traveling to try and avoid their blocking your card as soon as you make a purchase in your destination.

    Make sure you have travel insurance that covers not only your possessions but yourself as well. Be aware that travel insurance will not pay out if you become sick or injured due to an existing condition that you didn’t tell them about first. You will have to pay an increased premium for cover of an existing issue, but finding yourself with no cover and far from home is something you want to avoid.

    Make sure that you have sufficient of any medicine that you need. Include some extra in case of an unscheduled delay in returning home. I also usually pack a few supplies of common remedies - especially if I am going somewhere that is not English speaking. I have a vivid memory of acting out an allergic reaction to a Polish pharmacist to remind me of this!

    I also prepare for the work I’ll be doing on the road. In addition to preparing for the talks or workshops I might be giving, I prepare for work on Perch or for the business. I organize my to-do list to prioritize tasks that are difficult to do on the road, and make sure they are done before I go. I push tasks into the travel period that I find easier on the small screen of my laptop, or that I can complete even in a distracting environment.

    When booking travel, give yourself plenty of time. If you are short of time then every delay becomes stressful, and stress is tiring. Get to the airport early. Plan longer layovers than the 70 minutes your airline believes it will take you to deplane from the first flight and make it round a labyrinthine nightmare from the 1980s to find the next one. On the way home from Nashville, my first plane was delayed due to the inbound flight having to change equipment. The three-hour layover I had chosen meant that even with almost two hours of delay I still made my transatlantic leg home in time. Travel is a lot less stressful if you allow enough time for things to go wrong.

    Air travel tips

    Try to fly with the same airline or group in order to build up your frequent flyer status. Even a little bit of “status” in an airline miles program will give you some perks, and often priority for upgrades and standby tickets.

    If you want to take anything of significant size onto the aircraft as hand luggage, the large roller bags are often picked out to be gate-checked on busy flights. I travel with a Tom Bihn Aeronaut bag, which I can carry as a backpack. It is huge, but the gate staff never spot it and due to being soft-sided, it can squash into the overhead compartments on the smaller planes that are used for internal U.S. flights.

    Have in your carry-on an overnight kit in case your checked luggage does not make it to your destination at the same time as you do. Most of the time you’ll find your bag comes in on the next flight and will be sent to your hotel, but if you need to get straight to an event it adds stress to be unable to change or brush your teeth.

    If you plan to work on the flight, charge your laptop and devices whenever you can. More and more planes come with power these days - even in economy - but it can’t be relied on. I have a BatteryBox, a large external battery. It’s a bit heavy but means I can work throughout a 10-hour flight without needing to plug in.

    On the subject of batteries, airlines are becoming increasingly and understandably concerned about the fire risk posed by lithium ion batteries. Make sure you keep any spare batteries in your hand luggage and remove them if your bag is gate-checked. Here is the guide issued by British Airways on the subject.

    A small flat cool bag, even without an icepack, works for a good amount of time to cool food you are bringing from airside as an alternative to the strange offerings onboard. I usually pop a cold water bottle in with it. London Heathrow T5 has a Gordon Ramsay “Plane Food” restaurant that will make you a packed lunch in a small cool bag to take on the plane!

    Get lounging

    Airport lounges are an oasis. Something I didn’t realize when I started traveling is that many airport lounges are pay on entry rather than being reserved for people with higher class tickets or airline status. If you have a long layover then the free drinks, wifi, power, and snacks will be worth the price - and if it means you can get work done you can be making money. The LoungeBuddy app can help you locate lounges that you can access whether you have airline status or not.

    There is another secret to airline lounges: they often have a hotline to the airline and can sort out your travel issues if your flight is delayed or canceled. With the delayed flight in my last trip I checked myself into the American Airlines lounge, mentioning my delay and concern for the ongoing leg of the flight. The member of staff on the desk had the flight status checked and put me on standby for another flight “just in case.” She then came to let me know - while I happily sat working in the lounge - that it all looked as if it would resolve in time for me to make my flight. Once again, far less stressful than trying to work this out myself or standing in a long line at the desk in the airport.

    Looking after yourself

    If you do one or two trips a year then you should just relax and enjoy them - eat all the food, drink the drinks, go to the parties and forget about your regular exercise routine. If you go to more than 20, you won’t be able to do that and also do anything else. I quickly learned how to pace myself and create routines wherever I am that help to bring a sense of normal life to hotel living.

    I try as much as possible to eat the same sort of food I usually eat for the majority of the time - even if it does mean I’m eating alone rather than going out for another dinner. Hotel restaurants are used to the fussiest of international travelers and will usually be able to accommodate reasonable requests. I do a quick recce of possible food options when I arrive in a location, including places I can cobble together a healthy packed lunch if the conference food is not my thing. I’ll grab a sparkling water from the free bar rather than another beer, and I’ll make use of the hotel gym or go for a run to try and keep as much as possible to the training routine I have at home. I do enjoy some great meals and drinks with friends - I just try not to make that something that happens every night, then I really enjoy those I do get to.

    I’m fortunate to not need a lot of sleep, however I try to get the same amount I would at home. I’ve also learned not to stress the time differences. If I am doing trips that involve the East and West Coast of America I will often just remain on East Coast time, getting up at 4am rather than trying to keep time-shifting back and forth. If you are time-shifting, eating at the right time for where you are and getting outside into the light can really help. The second point is not always easy given the hotel-basement nature of many conference venues. I tend to run in the morning to remind myself it is daytime, but just getting out for a short walk in the daylight before heading into the event can make a huge difference.

    I take care to wash my hands after greeting all those conference-goers and spending time in airports and other places, and am a liberal user of wet wipes to clean everything from my plane tray table to the hotel remote control. Yes, I look like a germaphobe, however I would hate to have to cancel a talk because I got sick. Taking a bit of care with these things does seem to make a huge difference in terms of the number of minor illnesses I pick up.

    Many of us in this industry are introverts and find constant expectation to socialize and be available tiring. I’m no exception and have learned to build alone time into my day, which helps me to be more fully present when I am spending time with other speakers and attendees. Even as a speaker at an event, when I believe it is very important for me to be available to chat to attendees and not to just vanish, this is possible. Being at a large number of events I often have seen the talks given by other speakers, or know I can catch them at the next event. So I will take some time to work or relax during a few sessions in order to make myself available to chat during the breaks.

    If you are taking extended trips of two weeks or more these can be hugely disruptive to elements of your life that are important to your wellbeing. That might be in terms of being unable to attend your place of worship, meet with a therapist, or attend a support group meeting. With some thought and planning you may be able to avoid this becoming an additional source of stress - can you find a congregation in your location, use Skype to meet with your therapist, or touch base with someone from your group?

    Working on the road

    Once at your destination, getting set up to work comfortably makes a huge difference to how much you can get done. Being hunched over a laptop for days will leave you tired and in pain. My last trip was my first with the new and improved Roost Stand, along with an external Apple keyboard and trackpad. The Roost is amazing; it is incredibly light and allowed me to get the laptop to a really great position to work properly.

    Plan your work periods in advance and be aware of what you can do with no, or limited internet connectivity. In OmniFocus I have a Context to flag up good candidates for offline work, and I also note what I need to have in order to do that work. I might need to ensure I have a copy of some documentation, or to have done a git pull on a repository before I head into the land of no wifi. I use Dash for technical documentation data sets when offline. On a ten-hour flight with no wifi you soon realize just how much stuff you look up every day!

    If traveling to somewhere that is going to be horribly expensive for phone data, do some research in advance and find out how to get a local pay-as-you-go sim card. If you want to switch that in your phone, you need to have an unlocked phone (and also the tools to open your phone). My preferred method is to put the card into a mobile broadband modem, then connect my phone to that with the wifi. This means I can still receive calls on my usual number.

    The possibility of breaking, losing, or having your laptop stolen increases when it isn’t safely on your desk in the office. Have good insurance, but also good backups. During conferences, we often switch off things like Dropbox or our backup service in order to preserve the wifi for everyone - don’t forget you have done this! As soon as you are able, make sure your backups run. My aim is always to be in a position where if I lost my laptop, I could walk into a store, buy a new one and be up and running within a few hours without losing my work, and especially the things I need to present.

    Enjoy the world!

    Don’t forget to also plan a little sightseeing in the places you go. I would hate to feel that all I ever saw of these places was the airport, hotel, and conference room. I love to book myself on a walking tour. You can discover a lot about a city in a few hours the morning before your flight out, and there are always other lone business travelers on these tours. I check Trip Advisor for reviews to find a good tour. Lonely Planet have “Top things to do in…” guides for many cities: here is the guide for Paris. I’ll pick off one item that fits into the time I have available and head out for some rapid tourism. As a runner I’m also able to see many of the sights by planning my runs around them!

    Those of us to get to travel, who have the privilege of doing a job that can truly be done from anywhere, are very lucky. With a bit of planning you can enjoy travel, be part of events, and still get work done and remain healthy. By reducing stressful events you do have control over, you can be in better shape to deal with the inevitable times you do not.

  • Strategies for Healthier Dev 

    Not too long ago, I was part of a panel at the launch event for TechLadies, an initiative that encourages women to learn to code. Along the way, I mentioned a bit about my background as an athlete. As we were leaving to go home, the woman next to me jokingly asked if I was a better basketball player or a better developer. Without missing a beat, I said I was a better basketball player. After all, I’ve been playing basketball for over half my life; I’ve only been coding for two and a half years.

    We’ve probably all come across the stereotype of the nerdy programmer who is all brains and no brawn. I’m a counterexample of that cliché, and I personally know developers who are avid cyclists or marathon runners—even a mountain climber (the kind who scales Mount Everest). And yet a stereotype, “a widely held but fixed and oversimplified image,” often comes into existence for a reason. Think of Douglas Coupland’s Microserfs. Think of any number of mainstream dramas featuring wan (usually white, usually male) programmers staring at screens. Many so-called knowledge workers are too sedentary. Our lives and work stand to benefit if we become less so.

    Now, no one likes to suffer. And yet when it comes to exercise or training, it’s too easy for us to think that fitness is all about self-discipline—that we just need to have the willpower to persevere through the agony. But that’s not a good strategy for most people. Unless you genuinely find pleasure in pain and suffering, you have to want something badly enough to endure pain and suffering. Ask any athlete if they enjoy running extra sprints or lifting extra weights. Even Olympic medalists will tell you they don’t. They do it because they want to be the best.

    My point is this: forcing yourself to do something you don’t enjoy is not sustainable. I’ll be the first to admit that I’m not a big fan of running. A little ironic coming from someone who used to play basketball full-time, maybe, but the only reason I did any running at all, ever, was because competitive basketball required me to. When I stopped training full-time, I simply couldn’t muster the energy or motivation to get up and run every day (or even every week, for that matter).

    So I had to come up with a different game plan—one that required minimal effort, near-zero effort, and minor effort. You can do it, too. No excuses. Ready?

    Minimal effort

    I’m lazy.

    I’m pretty good at talking myself out of doing things that require extra effort to get ready for. For example, going swimming requires that I pack toiletries, a fresh set of clothes, and goggles. Then I actually need to make it to the pool after work before it closes, which means I have to plan to leave the office earlier than I usually might, and so on. Guess what? Eight out of ten times, I end up telling myself to go swimming next time.

    By contrast, I commute to work on my bicycle. Yes, it helps that I love to ride. I thoroughly enjoy swimming, too—just not enough to overcome my laziness. But because cycling is my main mode of transportation, I don’t even think about it as exercise. It’s just something I do as part of my day, like brushing my teeth.

    The “while-you’re-at-it” technique works very well for me, and maybe it’ll work for you, too. In a nutshell: build healthy habits into things you already do. Kind of how parents hide vegetables in more palatable stuff to get their kids to eat them.

    Near-zero effort

    Let me list some simple activities that involve minimal effort, but have significant returns on investment. Consider these the minimum viable products (MVPs) of healthy habits.

    Drink more water

    Most of us have been told to drink eight glasses of water a day, but how many of us actually drink that much? The real amount of water people need on a daily basis seems debatable, but I’m going to make the bold assumption that most of us don’t drink more than one liter (or around four glasses) of water a day. And no, coffee doesn’t count.

    This means that most of us operate in a mildly dehydrated state throughout the day. Studies done on both men and women have shown that mild dehydration negatively impacts one’s mood and cognitive function. Given that our work requires significant mental acuity, upping our water intake is a minimal-effort lifehack with significant benefits.

    Note that people often mistake thirst for hunger. Studies have shown that we’re notoriously bad at distinguishing the two. Assuming that most of us probably don’t drink enough water throughout the day, odds are that you’re not really hungry when you reach for a snack. In fact, you’re probably thirsty. Don’t grab a can of soda, though—drink water.

    Move more

    A study done on the effects of sedentary behavior revealed that long periods of inactivity increase one’s risk of diabetes and heart disease. The study also mentioned that encouraging individuals simply to sit less and move more, regardless of intensity level, may improve the effectiveness of diabetes-prevention programs.

    Think about how you can incorporate more movement into your routine. Try drinking water throughout the day. Not only will this reinforce the “drink more water” habit, but you’ll also find that you need to get up to go to the bathroom more often. And going to the bathroom is…movement. Note: do not refuse to go to the bathroom because you think you’re “on the brink” of solving a bug. That’s a lie you tell yourself.

    Since you’re getting up and sitting down more often, you might as well sneak some exercise in while you’re at it. Instead of plonking down in your seat when you get back, lower yourself slowly over the course of five seconds until your butt touches your chair. You’re building leg muscles! Who needs a gym? The point is, all the little things you do to increase movement add up.

    Don’t eat while you work

    It might surprise you to know that being aware of what you put in your mouth—and when you put it there—makes a difference. I know many people, not only developers, who eat lunch at their desks, balancing a spoonful of food in one hand while continuing to type with the other. Lunch becomes something that’s shoveled into our mouths and (maybe, if we have time) swallowed. That’s no way to appreciate a meal. Make lunchtime a logical break between your coding sessions. Some folks may protest that there’s just no time to eat: we have to code 20 hours a day!

    First of all, it’s impossible to be efficient that way. A study (PDF) from the University of Illinois at Urbana-Champaign has shown that taking a deliberate break can reboot focus on the task at hand. It offsets our brain’s tendency to fall into autopilot, which explains why we can’t come up with good solutions after continuously staring at a bug for hours. Tom Gibson wrote a beautiful post explaining how human beings are not linear processes. We are still operating on an industrial model where emphasis is placed on hours worked, not output achieved.

    We need to aim for a healthy “Work Rate Variability” and develop models of working that stop making us ill, and instead let us do our best.
    Tom Gibson

    Also, by actually bothering to chew your food before swallowing, you eat more slowly. Research has shown that eating slowly leads to lower hunger ratings and increased fullness ratings. Chances are you’ll feel healthier overall and gain a fresh sense of perspective, too, by giving yourself a proper lunch break. Such is the power of minimal effort.

    Use a blue-light filter at night

    Personally, I’m a morning person, but most of my developer friends are night owls. Everybody functions best at different times of the day, but if you’re someone who operates better at night, I recommend installing f.lux on your desktop and mobile devices. It’s a tiny application that makes the color of your computer’s display adapt to ambient light and time of day.

    Melatonin is a hormone that helps maintain the body’s circadian rhythms, which determine when we sleep and wake up. Normally, our bodies produce more melatonin when it gets dark. Scientists have found that exposure to room light in the evening suppresses melatonin during normal sleep hours. Research on the effects of blue light has shown that blue light suppresses sleep-associated delta brainwaves while stimulating alertness. Because it doesn’t make sense, given socioeconomic realities, to ask people to stop working at night, the best alternative is to reduce exposure to blue light.

    Minor effort required

    If you’ve already started incorporating zero-effort health habits into your life, and feel like putting in a bit more effort, this section outlines tactics that take a little more than zero effort.

    Walk

    When I started writing code, I found myself glued to my chair for hours on end. You know that feeling when you’re debugging something and obstinately refuse to let that bug get the better of you? But I realized that my efficiency decreased the longer I worked on something without stopping. I can’t tell you how many times I worked on a bug till I threw my hands up in frustration and went for a walk, only to have the solution come to me as I strolled outside enjoying the breeze and a change of scenery.

    Walking doesn’t require any additional planning or equipment. Most of us, if we’re lucky, can do it without thinking. The health benefits accrued include a reduction of chronic diseases like stroke and heart disease. Try this: as part of your attempt to have a better lunch break, take a walk after you’ve properly chewed and swallowed your lunch. It limits the increase of blood sugar levels immediately after a meal. You’ll get fitter while you’re at it.

    Stretch

    I don’t know about you, but sitting for long periods of time makes my hips feel tight and my back tense up. The scientific research on the exact effects of sitting on the structural integrity of your hip flexors seems to be inconclusive, but I know how I feel. A lot of us tend to slouch in our chairs, too, which can’t be good for our overall posture.

    If you find yourself craning your neck forward at your desk, with your shoulders up near your ears and back rounded forward, news flash! You have terrible posture. So what can you do about it? Well, for starters, you can refer to a handy infographic from the Washington Post that summarizes the ills of bad posture. The TL;DR: bad posture negatively affects your shoulders, neck, hips, and especially your back.

    Slouching for prolonged periods causes the soft discs between our vertebrae to compress unevenly. If you take a sponge and place a weight on one side of it and leave it there for hours, the sponge will warp. And that’s exactly what happens to our discs. As someone who has suffered from a prolapsed disc, I can tell you that back trouble no fun at all.

    Here’s another thing you can do: stretch at your desk. You don’t have to do all of these exercises at once—just sprinkle them throughout your work day. The improved blood circulation will be a boon for your brain, too.

    Sleep

    Most of us don’t get enough sleep. I hardly know anyone under the age of 12 who goes to bed before 11 p.m. Maybe that’s just the company I keep, but there are lots of reasons for not getting enough sleep these days. Some of us work late into the night; some of us game late into the night. Some of us care for children or aging parents, or have other responsibilities that keep us up late. I live in Singapore, which ranks third on the list of cities clocking the fewest hours of sleep: six hours and 32 minutes.

    Sleep deprivation means more than just yawning all the time at work. Research has shown that the effects of sleep deprivation are equivalent to being drunk. Insufficient sleep affects not only your motor skills, but also your decision-making abilities (PDF) and emotional sensitivity (PDF). You become a dumb, angry troll when sleep-deprived.

    Changing your sleep habits takes some effort. The general advice is to sleep and wake up at the same time each day, and to try to aim for seven and a half hours of sleep. According to Professor Richard Wiseman, a psychology professor at the University of Hertfordshire, our sleep cycles run in 90-minute intervals. Waking up in the middle of those cycles makes us groggy. Wiseman offers tips on how to sleep better.

    Resistance training

    By “resistance training,” I don’t mean hefting iron plates and bars at the gym (though if you like to do that, more power to you). If you enjoy the privilege of able-bodiedness, try to make vigorous physical movement part and parcel of your daily life. Ideally, you’ll have the basic strength and coordination to run and jump. And to be able to get right up without much effort after falling down. You don’t have to be an elite athlete—that’s a genetic thing—but with luck, you’ll be able to perform at least some basic movements.

    Our own body weight is plenty for some rudimentary exercises. And it doesn’t matter if the heaviest weight you’re willing to lift is your laptop and you couldn’t do a push-up if your life depended on it. There are progressions for everyone. Can’t do a push-up on the ground? Do a wall push-up instead. Can’t do a basic squat? Practice sitting down on your chair very slowly. Can’t run? Take a walk. (Yes, walking is a form of resistance training). And so on.

    There are two websites I recommend checking out if you’re interested in learning more. The first is Nerd Fitness by Steve Kamb. He and I share a similar philosophy: small changes add up to big results. He covers topics ranging from diet to exercise and offers lots of resources to help you on your journey. Another site I really love is GMB fitness. It teaches people how to move better, and to better understand and connect with their bodies.

    Wrapping up: slow & steady

    There is only one way to build new habits: consistency over time. That’s why it’s so important to do things that take minimal effort. The less effort an action requires, the more likely you are to do it consistently. Also: try not to make drastic changes to all aspects of your life at once (though that may be effective for some). Regardless of whether you mind change in your life or not, almost any change introduces stress to your system. And even constant low-grade stress is detrimental. It’s better to start small, with minor changes that you barely feel; once that becomes a habit, move on to the next change.

    We spend hours maintaining our code and refactoring to make it better and more efficient. We do the same for our computers, optimizing our workflows and installing tweaks to eke out those extra seconds of performance. So it’s only right that we put a little effort into keeping our bodies reasonably healthy. Fixing health problems usually costs more than fixing bugs or machines—and often the damage is irreversible. If we want to continue to write great code and build cool products, then we should take responsibility for our health so that we can continue to do what we love for decades to come.

  • Create an Evolutionary Web Strategy with a Digital MRO Plan 

    Many organizations, large and small, approach creating their web presence as if it’s a one-time project. They invest an enormous amount of time and money in a great web design, content strategy, and technical implementation; and then they let the website sit there for months and even years without meaningful updates or enhancements. When the web presence becomes so out of date it’s barely functional, it becomes clear to them that the site needs a refresh (or more likely another full redesign).

    Redesigns are great. But there’s a better way: ensure your client has a website that continually adapts to their needs.

    Equip your client with a framework that helps them with ongoing management of their web presence. This plan also ensures you continue to build a strong relationship over the long term. It’s called an MRO plan.

    MRO stands for Maintenance, Repair, and Overhaul. It’s a term most often used with building facilities or machinery.

    A house is a machine for living in.
    Le Corbusier

    Everyone knows that a building or a piece of heavy machinery needs a regular maintenance plan. Buildings and machines are complex systems that need tuning and maintenance. Websites are also complex systems. You could say, “A website is a machine for engagement.” To keep that engagement running smoothly, your client needs a plan that includes regular maintenance along with content and feature updates.

    The problem with the curve

    Typically, websites undergo waves of full redesign, neglect, failure, full redesign. Think of it as a series of bell curves dipping into the negative between revolutionary overhauls.

    The revolution approach to managing your web presence.

    The revolution approach to managing your web presence.

    Your client comes to you with an initial big push to deliver a new web design and content strategy, something that they will be able to manage without your assistance. And you provide that. But once you walk away, the website stops evolving.

    During this time, the client’s products or services may evolve, and they may adapt their product-based content to changes in their market—but they don’t touch the website. Like old bread, their website gets stale until the day comes when it’s clear that it needs to be fixed ASAP. That’s when you get the call. There’s a huge drive to do a website redesign, and a big new project is kicked off.

    You finish the project and walk away. Again.

    But this is a mistake. It’s smarter to show your client how to implement a plan that protects their investment in their website. It’s smarter for the client, and it’s smarter for you too because it allows you to develop an ongoing relationship that ensures you have recurring revenue over a longer period.

    Convince your client to break this endless cycle of big, expensive redesign projects every few years. Show them that they need to manage their website the same way they manage product development–by consistently and regularly monitoring and managing their web experience, focusing on ongoing maintenance, interim updates, and major overhauls when needed.

    Think evolution not revolution

    A digital MRO plan provides continual investment so websites can evolve in a more consistent manner over time–evolution versus revolution. The evolutionary approach requires your client to regularly update their website based on how their company, the industry, and their customer data is changing.

    The revolution approach to managing your web presence.

    An MRO program for a web presence–the evolution approach.

    Define an MRO framework for your client with three phases:

    1. Maintenance: This is the phase that occurs over a long period, with regular monitoring of web pages, content assets, and other resources in addition to functionality. The maintenance phase is about fixing small things, making small changes or updates that don’t require major work on the website. How you can help: Outline a regular maintenance plan where issues are documented and then packaged together into maintenance updates. In some cases, these fixes are content-based, in other cases they are functionality bugs or small updates that need to be applied. You can work on these maintenance updates monthly or more often depending on the situation, delivering regular changes to the website to keep it up to date.
    2. Repair: Repairs are like interim updates. They may require a fair amount of changes to the website to fix a problem or implement a new concept or idea, but they don’t require a full redesign. Some examples include updating or removing a section of the website not visited often, rewriting an outdated key whitepaper, or improving the resources section. They could also include rewrites to web pages for a new version of a product, or the addition of a set of new web pages. How you can help: Whether it’s a set of web pages for a new product, or a redesign of the resources section of the website, recommend quarterly reviews of the website where you can discuss new content or functionality that can be added to the site to improve it for customers and prospects. This requires that you follow trends in both content marketing and design/development, as well as trends in the industry of the client (and their competition). Recommend “mini” projects to implement these interim updates for your client.
    3. Overhaul: During an overhaul phase it’s time for that full redesign. Maybe the client is implementing a new brand, and they need to update their website to reflect it. Maybe they need to implement a modern CMS. Overhaul projects take time and big budgets, and typically take place every five or more years. How you can help: Working with the client on a regular basis on maintenance and small repairs enables you to demonstrate your understanding of the client, their needs and their customers’ needs, proving that you are the right one to run the redesign project. Your knowledge of the industry, along with your experience with the website and the technology it lives on makes you the right choice. Recommend a full website review every four to five years to determine if a redesign is necessary, and to demonstrate how you are in the best position to complete the project successfully.

    Your digital MRO plan should prioritize and align work based on the evolution of the customer’s organization or business, as well as the feedback visitors are giving on the website. Incorporating customer feedback and analytics into your MRO plan provides the insight you need to streamline engagement and helps your customer validate the return on investment from their website. You can use surveys, A/B tests, session cams, heat maps, and web analytics reports to focus on the areas of the site that need updating and prioritize projects into each phase of the MRO plan.

    The benefits of an MRO program for web presence

    With a solid MRO plan you can help your client manage their website like they would their products and services: with regular, consistent updates. Creating a digital MRO plan enables you to show your client how they can get more consistent, predictable ROI from their website and other digital channels and streamline their budget.

    When pitching an MRO program to your client, focus on the following benefits:

    • Budget management: By following an MRO program, costs are spread over a longer period instead of a big outlay of time and money for a large project.
    • Improved customer experience: Implementing web analytics, listening posts, surveys, and feedback programs ensures the client is listening to its customers and delivering on customer needs consistently, improving website engagement.
    • Content is never out of date: Product-based content assets are updated in line with product/service improvements, ensuring the most current information is available on the website. You can also help your client plan additions to marketing content assets or add news in line with product updates.
    • Reduced costs and increased ROI: The website is a primary value driver for every business. It’s the best salesperson, the digital storefront, the manifestation of a brand, and a hub for customer services and support. Keeping the website working well will increase digital ROI and lower costs.

    Perhaps the biggest benefit of an MRO plan is more successful redesigns. With an MRO program in place, clients can take the guesswork out of large redesign projects. They will have the results of years of optimization to build upon, ensuring that when they do launch the big redesign they will have real data and experience to know what will work.

    Be an integral part of an MRO plan

    It’s one thing to recommend and sell a client on following an MRO plan, but it’s another to ensure that you and/or your team are an integral part of that plan. Here are some suggestions on how you can build your time and budget into an MRO plan.

    1. Recommend a dedicated cross-functional digital team with time and resources allocated for the website. The team should include capabilities such as a writer, designer, and web developer. Depending on your relationship with the client, one or two of those capabilities, such as content writing/analysis or design and development, should be provided by you or your team.
    2. Schedule monthly cross-functional meetings to brainstorm, research, and validate requirements and ideas for website updates and changes. You should have access to website analytics so you can stay informed about the performance of the website. Based on these meetings, help the client package changes into maintenance or interim updates.
    3. Suggest a process and budget to handle maintenance updates based on your experience with this client and similar clients.
    4. Provide a budget for regular website design and enhancement implementation by you or your team. The scope and regularity of these enhancements will vary based on the needs of the business or organization, but plan for no less than once per quarter. Build in enough time to monitor the client’s industry and competition, as well as review website analytics and content management trends.
    5. Recommend a process for completing a full website review driven by you. This takes the burden off the client to plan and coordinate the review and ensures you are part of the review and recommendations for a redesign.

    A proactive approach

    For many organizations, the easy route is revolution. It seems easier because it happens only once every few years. But this tactic takes more time and costs much more money up front.

    An MRO program ensures businesses are strategically managing their web presence and putting in place the ongoing resources to keep it up to date and relevant for their prospects and customers.

    One of those ongoing resources is you. Build your role into the MRO program, indicating where you can provide services that support different phases of the program. Being involved on a regular basis with maintenance and interim updates demonstrates your understanding of the clients’ needs and ensures you will be the one they come to when the big redesign project happens (and it will happen).

    Whether you are a single freelancer, a two-person team, or part of a larger agency, the key to building long-term, revenue-generating relationships with clients is getting them to see the value of a proactive approach for website management. An MRO program can help you do that.

  • The Foundation of Technical Leadership 

    I’m a front-end architect, but I’m also known as a technical leader, subject matter expert, and a number of other things. I came into my current agency with five years of design and development management experience; yet when it came time to choose a path for my career with the company, I went the technical route.

    I have to confess I had no idea what a technical leader really does. I figured it out, eventually.

    Technical experts are not necessarily technical leaders. Both have outstanding technical skills; the difference is in how others relate to you. Are you a person that others want to follow? That’s the question that really matters. Here are some of the soft skills that set a technical leader apart from a technical expert.

    Help like it’s your job

    Your authority in a technical leadership position—or any leadership position—is going to arise from what you can do for (or to) other people. Healthy authority here stems from you being known as a tried-and-true problem-solver for everyone. The goal is for other people to seek you out, not for you to be chasing down people for code reviews. For this to happen, intelligence and skill are not enough—you need to make a point of being helpful.

    For the technical leader, if you’re too busy to help, you’re not doing your job—and I don’t just mean help someone when they come by and ask for help. You may have to set an expectation with your supervisor that helping others is a vital part of a technical leader’s job. But guess what? It might be billable time—check with your boss. Even if it’s not, try to estimate how much time it’s saving your coworkers. Numbers speak volumes.

    The true measure of how helpful you are is the technical know-how of the entire team. If you’re awesome but your team can’t produce excellent work, you’re not a technical leader—you’re a high-level developer. There is a difference. Every bit of code you write, every bit of documentation you put together should be suitable to use as training for others on your team. When making a decision about how to solve a problem or what technologies to use, think about what will help future developers.

    My job as front-end architect frequently involves not only writing clean code, but cleaning up others’ code to aid in reusability and comprehension by other developers. That large collection of functions might work better as an object, and it’ll probably be up to you to make that happen, whether through training or just doing it.

    Speaking of training, it needs to be a passion. Experience with and aptitude for training were probably the biggest factors in me landing the position as front-end architect. Public speaking is a must. Writing documentation will probably fall on you. Every technical problem that comes your way should be viewed as an opportunity to train the person who brought it to you.

    Helping others, whether they’re other developers, project managers, or clients, needs to become a passion for you if you’re an aspiring technical leader. This can take a lot of forms, but it should permeate into everything you do. That’s why this is rule number one.

    Don’t throw a mattress into a swimming pool

    An infamous prank can teach us something about being a technical leader. Mattresses are easy to get into swimming pools; but once they’re in there, they become almost impossible to get out. Really, I worked the math on this: a queen-sized mattress, once waterlogged, will weigh over 2000 pounds.

    A lot of things are easy to work into a codebase: frameworks, underlying code philosophies, even choices on what technology to use. But once a codebase is built on a foundation, it becomes nearly impossible to get that foundation out of there without rebuilding the entire codebase.

    Shiny new framework seem like a good idea? You’d better hope everyone on your team knows how to use that framework, and that the framework’s around in six months. Don’t have time to go back and clean up that complex object you wrote to handle all the AJAX functionality? Don’t be surprised when people start writing unneeded workarounds because they don’t understand your code. Did you leave your code in a state that’s hard to read and modify? I want you to imagine a mattress being thrown into a swimming pool…

    Failure to heed this command frequently results in you being the only person who can work on a particular project. That is never a good situation to be in.

    Here is one of the big differences between a technical expert and a technical leader: a technical expert could easily overlook that consideration. A technical leader would take steps to ensure that it never happens.

    As a technical expert, you’re an A player, and that expertise is needed everywhere; and as a technical leader, it’s your job to make sure you can supply it, whether that means training other developers, writing and documenting code to get other developers up to speed, or intentionally choosing frameworks and methodologies your team is already familiar with.

    Jerry Weinberg, in The Psychology of Computer Programming, said, “If a programmer is indispensable, get rid of him as quickly as possible!” If you’re in a position where you’re indispensable to a long-term project, fixing that needs to be a top priority. You should never be tied down to one project, because your expertise is needed across the team.

    Before building a codebase on anything, ask yourself what happens when you’re no longer working on the project. If the answer is they have to hire someone smarter than you or the project falls apart, don’t include it in the project.

    And as a leader, you should be watching others to make sure they don’t make the same mistake. Remember, technology decisions usually fall on the technical leader, no matter who makes them.

    You’re not the only expert in the room

    “Because the new program is written for OS 8 and can function twice as fast. Is that enough of a reason, Nancy Drew?”

    That’s the opening line of Nick Burns, Your Company’s Computer Guy, from the Saturday Night Live sketch with the same name. He’s a technical expert who shows up, verbally abuses you, fixes your computer, and then insults you some more before shouting, “Uh, you’re welcome!” It’s one of those funny-because-it’s-true things.

    The stereotype of the tech expert who treats everyone else as inferiors is so prevalent that it’s worked its way into comedy skits, television shows, and watercooler conversations in businesses across the nation.

    I’ve dealt with the guy (or gal). We all have. You know the guy, the one who won’t admit fault, who gets extremely defensive whenever others suggest their own ideas, who views his intellect as superior to others and lets others know it. In fact, everyone who works with developers has dealt with this person at some point.

    It takes a lot more courage and self-awareness to admit that I’ve been that guy on more than one occasion. As a smart guy, I’ve built my self esteem on that intellect. So when my ideas are challenged, when my intellect is called into question, it feels like a direct assault on my self esteem. And it’s even worse when it’s someone less knowledgeable than me. How dare they question my knowledge! Don’t they know that I’m the technical expert?

    Instead of viewing teammates as people who know less than you, try to view them as people who know more than you in different areas. Treat others as experts in other fields that you can learn from. That project manager may not know much about your object-oriented approach to the solution, but she’s probably an expert in how the project is going and how the client is feeling about things.

    Once again, in The Psychology of Computer Programming, Weinberg said, “Treat people who know less than you with respect, deference, and patience.” Take it a step further. Don’t just treat them that way—think of them that way. You’d be amazed how much easier it is to work with equals rather than intellectually inferior minions—and a change in mindset might be all that’s required to make that difference.

    Intelligence requires clarity

    It can be tempting to protect our expertise by making things appear more complicated than they are. But in reality, it doesn’t take a lot of intelligence to make something more complicated than it needs to be. It does, however, take a great deal of intelligence to take something complicated and make it easy to understand.

    If other developers, and non-technical people, can’t understand your solution when you explain it in basic terms, you’ve got a problem. Please don’t hear that as “All good solutions should be simple,” because that’s not the case at all—but your explanations should be. Learn to think like a non-technical person so you can explain things in their terms. This will make you much more valuable as a technical leader.

    And don’t take for granted that you’ll be around to explain your solutions. Sometimes, you’ll never see the person implementing your solution, but that email you sent three weeks ago will be. Work on your writing skills. Pick up a copy of Steven Pinker’s The Sense of Style and read up on persuasive writing. Start a blog and write a few articles on what your coding philosophies are.

    The same principle extends to your code. If code is really hard to read, it’s usually not a sign that a really smart person wrote it; in fact, it usually means the opposite. Speaker and software engineer Martin Fowler once said, “Any fool can write code that a computer can understand. Good programmers write code that humans can understand.”

    Remember: clarity is key. The perception of your intelligence is going to define the reality of your work experience, whether you like it or not.

    You set the tone

    Imagine going to the doctor to explain some weird symptoms you’re having. You sit down on the examination bed, a bit nervous and a bit confused as to what’s actually going on. As you explain your condition, the doctor listens with widening eyes and shaking hands. And the more you explain, the worse it gets. This doctor is freaking out. When you finally finish, the doctor stammers, “I don’t know how to handle that!”

    How would you feel? What would you do? If it were me, I’d start saying goodbye to loved ones, because that’s a bad, bad sign. I’d be in a full-blown panic based on the doctor’s reaction.

    Now imagine a project manager comes to you and starts explaining the weird functionality needed for a particularly tricky project. As you listen, it becomes clear that this is completely new territory for you, as well as for the company. You’re not even sure if what they’re asking is possible.

    How do you respond? Are you going to be the crazy doctor above? If you are, I can assure you the project manager will be just as scared as you are, if not more so.

    I’m not saying you should lie and make something up, because that’s even worse. But learning to say “I don’t know” without a hint of panic in your voice is an art that will calm down project teams, clients, supervisors, and anyone else involved in a project. (Hint: it usually involves immediately following up with, “but I’ll check it out.”)

    As a technical leader, people will follow your emotional lead as well as your technical lead. They’ll look to you not only for the answers, but for the appropriate level of concern. If people leave meetings with you more worried than they were before, it’s probably time to take a look at how your reactions are influencing them.

    Real technical leadership

    Technical leadership is just as people-centric as other types of leadership, and knowing how your actions impact others can make all the difference in the world in moving from technical expert to technical leader. Remember: getting people to follow your lead can be even more important than knowing how to solve technical problems. Ignoring people can be career suicide for a technical leader—influencing them is where magic really happens.

     

  • This week's sponsor: Skillshare 

    ​SKILLSHARE. Explore 1000’s of online classes in design, business, and more! Get 3 months of unlimited access for $0.99.

  • The Future of the Web 

    Recently the web—via Twitter—erupted in short-form statements that soon made it clear that buttons had been pushed, sides taken, and feelings felt. How many feels? All the feels. Some rash words may have been said.

    But that’s Twitter for you.

    It began somewhat innocuously off-Twitter, with a very reasonable X-Men-themed post by Brian Kardell (one of the authors of the Extensible Web Manifesto). Brian suggests that the way forward is by opening up (via JavaScript) some low-level features that have traditionally been welded shut in the browser. This gives web developers and designers—authors, in the parlance of web standards—the ability to prototype future native browser features (for example, by creating custom elements).

    If you’ve been following all the talk about web components and the shadow DOM of late, this will sound familiar. The idea is to make standards-making a more rapid, iterative, bottom-up process; if authors have the tools to prototype their own solutions or features (poly- and prolly-fills), then the best of these solutions will ultimately rise to the top and make their way into the native browser environments.

    This sounds empowering, collaborative—very much in the spirit of the web.

    And, in fact, everything seemed well on the World Wide Web until this string of tweets by Alex Russell, and then this other string of tweets. At which point everyone on the web sort of went bananas.

    Doomsday scenarios were proclaimed; shadowy plots implied; curt, sweeping ideological statements made. In short, it was the kind of shit-show you might expect from a touchy, nuanced subject being introduced on Twitter.

    But why is it even touchy? Doesn’t it just sound kind of great?

    Oh wait JavaScript

    Whenever you talk about JavaScript as anything other than an optional interaction layer, folks seem to gather into two big groups.

    On the Extensible Web side, we can see the people who think JavaScript is the way forward for the web. And there’s some historical precedent for that. When Brendan Eich created JavaScript, he was aware that he was putting it all together in a hurry, and that he would get things wrong. He wanted JavaScript to be the escape hatch by which others could improve his work (and fix what he got wrong). Taken one step further, JavaScript gives us the ability to extend the web beyond where it currently is. And that, really, is what the Extensible Web Manifesto folks are looking to do.

    The web needs to compete with native apps, they assert. And until we get what we need natively in the browser, we can fake it with JavaScript. Much of this approach is encapsulated in the idea of progressive web apps (offline access, tab access, file system access, a spot on the home screen)—giving the web, as Alex Russell puts it, a fair fight.

    On the other side of things, in the progressive enhancement camp, we get folks that are worried these approaches will leave some users in the dust. This is epitomized by the “what about users with no JavaScript” argument. This polarizing question—though not the entire issue by far—gets at the heart of the disagreement.

    For the Extensible Web folks, it feels like we’re holding the whole web back for a tiny minority of users. For the Progressive Enhancement folks, it’s akin to throwing out accessibility—cruelly denying access to a subset of (quite possibly disadvantaged) users.


    During all this hubbub, Jeremy Keith, one of the most prominent torchbearers for progressive enhancement, reminded us that nothing is absolute. He suggests that—as always—the answer is “it depends.” Now this should be pretty obvious to anyone who’s spent a few minutes in the real world doing just about anything. And yet, at the drop of a tweet, we all seem to forget it.

    So if we can all take a breath and rein in our feelings for a second, how might we better frame this whole concept of moving the web forward? Because from where I’m sitting, we’re all actually on the same side.

    History and repetition

    To better understand the bigger picture about the future of the web, it’s useful (as usual) to look back at its past. Since the very beginning of the web, there have been disagreements about how best to proceed. Marc Andreessen and Tim Berners-Lee famously disagreed about the IMG tag. Tim didn’t get his way, Marc implemented IMG in Mosaic as he saw fit, and we all know how things spun out from there. It wasn’t perfect, but a choice had to be made and it did the job. History suggests that IMG did its job fairly well.

    A pattern of hacking our way to the better solution becomes evident when you follow the trajectory of the web’s development.

    In the 1990’s, webmasters and designers wanted layout like they were used to in print. They wanted columns, dammit. David Siegel formalized the whole tables-and-spacer-GIFs approach in his wildly popular book Creating Killer Web Sites. And thus, the web was flooded with both design innovation and loads of un-semantic markup. Which we now know is bad. But those were the tools that were available, and they allowed us to express our needs at the time. Life, as they say…finds a way.

    And when CSS layout came along, guess what it used as a model for the kinds of layout techniques we needed? That’s right: tables.

    While we’re at it, how about Flash? As with tables, I’m imagining resounding “boos” from the audience. “Boo, Flash!” But if Flash was so terrible, why did we end up with a web full of Flash sites? I’ll tell you why: video, audio, animation, and cross-browser consistency.

    In 1999? Damn straight I want a Flash site. Once authors got their hands on a tool that let them do all those incredible things, they brought the world of web design into a new era of innovation and experimentation.

    But again with the lack of semantics, linkability, and interoperability. And while we were at it, with the tossing out of an open, copyright-free platform. Whoops.

    It wasn’t long, though, before the native web had to sit up and take notice. Largely because of what authors expressed through Flash, we ended up with things like HTML5, Ajax, SVGs, and CSS3 animations. We knew the outcomes we wanted, and the web just needed to evolve to give us a better solution than Flash.

    In short: to get where we need to go, we have to do it wrong first.

    Making it up as we go along

    We authors express our needs with the tools available to help model what we really need at that moment. Best practices and healthy debate are a part of that. But please, don’t let the sort of emotions we attach to politics and religion stop you from moving forward, however messily. Talk about it? Yes. But at a certain point we all need to shut our traps and go build some stuff. Build it the way you think it should be built. And if it’s good—really good—everyone will see your point.

    If I said to you, “I want you to become a really great developer—but you’re not allowed to be a bad developer first,” you’d say I was crazy. So why would we say the same thing about building the web?

    We need to try building things. Probably, at first, bad things. But the lessons learned while building those “bad” projects point the way to the better version that comes next. Together we can shuffle toward a better way, taking steps forward, back, and sometimes sideways. But history tells us that we do get there.

    The web is a mess. It is, like its creators, imperfect. It’s the most human of mediums. And that messiness, that fluidly shifting imperfection, is why it’s survived this long. It makes it adaptable to our quickly-shifting times.

    As we try to extend the web, we may move backward at the same time. And that’s OK. That imperfect sort of progress is how the web ever got anywhere at all. And it’s how it will get where we’re headed next.

    Context is everything

    One thing that needs to be considered when we’re experimenting (and building things that will likely be kind of bad) is who the audience is for that thing. Will everyone be able to use it? Not if it’s, say, a tool confined to a corporate intranet. Do we then need to worry about sub-3G network users? No, probably not. What about if we’re building on the open web but we’re building a product that is expressly for transferring or manipulating HD video files? Do we need to worry about slow networks then? The file sizes inherent in the product pretty much exclude slow networks already, so maybe that condition can go out the window there, too.

    Context, as usual, is everything. There needs to be realistic assessment of the risk of exclusion against the potential gains of trying new technologies and approaches. We’re already doing this, anyway. Show me a perfectly progressively enhanced, perfectly accessible, perfectly performant project and I’ll show you a company that never ships. We do our best within the constraints we have. We weigh potential risks and benefits. And then we build stuff and assess how well it went; we learn and improve.

    When a new approach we’re trying might have aspects that are harmful to some users, it’s good to raise a red flag. So when we see issues with one another’s approaches, let’s talk about how we can fix those problems without throwing out the progress that’s been made. Let’s see how we can bring greater experiences to the web without leaving users in the dust.

    If we can continue to work together and consciously balance these dual impulses—pushing the boundaries of the web while keeping it open and accessible to everyone—we’ll know we’re on the right track, even if it’s sometimes a circuitous or befuddling one. Even if sometimes it’s kind of bad. Because that’s the only way I know to get to good.

  • Help One of Our Own: Carolyn Wood 

    One of the nicest people we’ve ever known and worked with is in a desperate fight to survive. Many of you remember her—she is a gifted, passionate, and tireless worker who has never sought the spotlight and has never asked anything for herself.

    Carolyn Wood spent three brilliant years at A List Apart, creating the position of acquisitions editor and bringing in articles that most of us in the web industry consider essential reading—not to mention more than 100 others that are equally vital to what we do today. Writers loved her. Since 1999, she has also worked on great web projects like DigitalWeb, The Manual, and Codex: The Journal of Typography.

    Think about it. What would the web look like if she hadn’t been a force behind articles like these:

    Three years ago, Carolyn was confined to a wheelchair. Then it got worse. From the YouCaring page:

    This April, after a week-long illness, she developed acute injuries to the tendons in her feet and the nerves in her right hand and arm. She couldn’t get out of her wheelchair, even to go to the bathroom. At the hospital, they discovered Carolyn had acute kidney failure. After a month in a hospital and a care facility she has bounced back from the kidney failure, but she cannot take painkillers to help her hands and feet.

    Carolyn cannot stand or walk or dress herself or take a shower. She is dependent on a lift, manned by two people, to transfer her. Without it she cannot leave her bed.

    She’s now warehoused in a home that does not provide therapy—and her insurance does not cover the cost. Her bills are skyrocketing. (She even pays rent on her bed for $200 a month!)

    Perhaps worst of all—yes, this gets worse—is that her husband has leukemia. He’s dealing with his own intense pain and fatigue and side effects from twice-monthly infusions. They are each other’s only support, and have been living apart since April. They have no income other than his disability, and are burning through their life savings.

    This is absolutely a crisis situation. We’re pulling the community together to help Carolyn—doing anything we possibly can. Her bills are truly staggering. She has no way to cover basic life expenses, much less raise the huge sums required to get the physical and occupational therapy she needs to be independent again.

    Please help by donating anything you can, and by sharing Carolyn’s support page with anyone in your network who is compassionate and will listen.

     

  • This week's sponsor: Bitbucket 

    BITBUCKET: Over 450,000 teams and 3 million developers love Bitbucket - it’s built for teams! Try it free.

  • Promoting a Design System Across Your Products 

    The scene: day one of a consulting gig with a new client to build a design and code library for a web app. As luck would have it, the client invited me to sit in on a summit of 25 design leaders from across their enterprise planning across platforms and lines of business. The company had just exploded from 30 to over 100 designers. Hundreds more were coming. Divergent product design was everywhere. They dug in to align efforts.

    From a corner, I listened quietly. I was the new guy, minding my own business, comfortable with my well-defined task and soaking up strategy. Then, after lunch, the VP of Digital Design pulled me into an empty conference room.

    “Can you refresh me on your scope?” she asked. So I drew an account hub on the whiteboard.

    Diagram showing an account hub

    “See, the thing is…” she responded, standing up and taking my pen. “We’re redesigning our web marketing homepage now.” She added a circle. “We’re also reinventing online account setup.” Another circle, then arrows connecting the three areas. “We’ve just launched some iOS apps, and more—plus Android—are coming.” She added more circles, arrows, more circles.

    Diagram showing an interconnected enterprise ecosystem: marketing, account setup, account hub, plus iOS apps

    “I want it all cohesive. Everything.” She drew a circle around the entire ecosystem. “Our design system should cover all of this. You can do that, right?”

    A long pause, then a deep breath. Our design system—the parts focused on, the people involved, the products reached—had just grown way more complicated.

    Our industry is getting really good at surfacing reusable parts in a living style guide: visual language like color and typography, components like buttons and forms, sophisticated layouts, editorial voice and tone, and so on. We’ve also awoken to the challenges of balancing the centralized and federated influence of the people involved. But there’s a third consideration: identifying and prioritizing the market of products our enterprise creates that our system will reach.

    As a systems team, we need to ask: what products will use our system and how will we involve them?

    Produce a product inventory

    While some enterprises may have an authoritative and up-to-date master list of products, I’ve yet to work with one. There’s usually no more than a loose appreciation of a constantly evolving product portfolio.

    Start with a simple product list

    A simple list is easy enough. Any whiteboard or text file will do. Produce the list quickly by freelisting as many products as you can think of with teammates involved in starting the system. List actual products (“Investor Relations” and “Careers”), not types of products (such as “Corporate Subsites”).

    Some simple product lists
    Large Corporate Web Site Small Product Company Large Enterprise
    5–15 products 10–25 products 20–100 products
    • Homepage
    • Products
    • Support
    • About
    • Careers
    • Web marketing site
    • Web support site
    • Web corporate site
    • Community site 1
    • Community site 2
    • Web app basic
    • Web app premium
    • Web app 3
    • Web app 4
    • Windows flagship client
    • Windows app 2
    • Web home
    • Web product pages
    • Web product search
    • Web checkout
    • Web support
    • Web rewards program
    • iOS apps (10+)
    • Android apps (10+)
    • Web account mgmt (5+)
    • Web apps (10+)

    Note that because every enterprise is unique, the longer the lists get, the more specific they become.

    For broader portfolios, gather more details

    If your portfolio is more extensive, you’ll need more deliberate planning and coordination of teams spanning an organization. This calls for a more structured, detailed inventory. It’s spreadsheet time, with products as rows and columns for the following:

    • Name, such as Gmail
    • Type / platform: web site, web app, iOS, Android, kiosk, etc.
    • Product owner, if that person even exists
    • Description (optional)
    • People (optional), like a product manager, lead designer or developer, or others involved in the product
    • Other metadata (optional): line of business, last redesigned, upcoming redesign, tech platform, etc.
    Screenshot showing a detailed product inventory
    A detailed product inventory.

    Creating such an inventory can feel draining for a designer. Some modern digital organizations struggle to fill out an inventory like this. I’m talking deer-in-headlights kind of struggling. Completely locked up. Can’t do it. But consider life without it: if you don’t know the possible players, you may set yourself up for failure, or at least a slower road to success. Therefore, take the time to understand the landscape, because the next step is choosing the right products to work with.

    Prioritize products into tiers

    A system effort is never equally influenced by every product it serves. Instead, the system must know which products matter—and which don’t—and then varyingly engage each in the effort. You can quickly gather input on product priorities from your systems team and/or leaders using techniques like cumulative voting.

    Your objective is to classify products into tiers, such as Flagship (the few, essential core products), Secondary (additional influential products), and The Rest to orient strategy and clarify objectives.

    1—Organize around flagships

    Flagship products are the limited number of core products that a system team deeply and regularly engages with. These products reflect a business’ core essence and values, and their adoption of a system signals the system’s legitimacy.

    Getting flagship products to participate is essential, but challenging. Each usually has a lot of individual power and operates autonomously. Getting flagships to share and realize a cohesive objective requires effort.

    Choose flagships that’ll commit to you, too

    When naming flagships, you must believe they’ll play nice and deliver using the system. Expect to work to align flagships: they can be established, complicated, and well aware of their flagship status. Nevertheless, if all flagships deliver using the system, the system is an unassailable standard. If any avoid or obstruct the system, the system lacks legitimacy.

    Takeaway: obtain firm commitments, such as “We will ship with the system by such and such a date” or “Our product MVP must use this design system.” A looser “Yes, we’ll probably adopt what we can” lacks specificity and fidelity.

    Latch onto a milestone, or make your own

    Flagship commitment can surface as a part of a massive redesign, corporate rebranding, or executive decree. Those are easy events to organize around. Without one, you’ll need to work harder bottom-up to align product managers individually.

    Takeaway: establish a reasonable adoption milestone you can broadcast, after which all flagships have shipped with the system.

    Choose wisely (between three and five)

    For a system to succeed, flagships must ship with it. So choose just enough. One flagship makes the system’s goals indistinguishable from its own self-interest. Two products don’t offer enough variety of voices and contexts to matter. Forming a foundation with six or more “equally influential voices” can become chaotic.

    Takeaway: three flagships is the magic minimum, offering sufficient range and incorporating an influential and sometimes decisive third perspective. Allowing for four or five flagships is feasible but will test a group’s ability to work together fluidly.

    A system for many must be designed by many

    Enterprises place top talent on flagship products. It would be naive to think that your best and brightest will absorb a system that they don’t influence or create themselves. It’s a team game, and getting all-stars working well together is part of your challenge.

    Takeaway: integrate flagship designers from the beginning, as you design the system, to inject the right blend of individual styles and shared beliefs.

    2—Blend in a secondary set

    More products—a secondary set— are also important to a system’s success. Such products may not be flagships because they are between major releases (making adoption difficult), not under active development, or even just slightly less valuable.

    Include secondary products in reference designs

    Early systems efforts can explore concept mockups—also known as reference designs—to assess a new visual language across many products. Reference designs reveal an emerging direction and serve as “before and after” roadshow material.

    Takeaway: include secondary products in early design concepts to acknowledge the value of those products, align the system with their needs, and invite their teams to adopt the system early.

    Welcome participation (but moderate contribution)

    Systems benefit from an inclusive environment, so bias behaviors toward welcoming input. Encourage divergent ideas, but know that it’s simply not practical to give everyone a voice in everything. Jon Wiley, an early core contributor to Google’s Material Design, shared some wisdom with me during a conversation: “The more a secondary product’s designer participated and injected value, the more latitude they got to interpret and extend the system for their context.”

    Takeaway: be open to—but carefully moderate—the involvement of designers on secondary products.

    3—Serve the rest at a greater distance

    The bigger the enterprise, the longer and more heterogeneous the long tail of other products that could ultimately adopt the system. A system’s success is all about how you define and message it. For example, adopting the core visual style might be expected, but perhaps rigorous navigational integration and ironclad component consistency aren’t goals.

    Documentation may be your primary—or only—channel to communicate how to use the system. Beyond that, your budding system team may not have the time for face-to-face meetings or lengthy discussions.

    Takeaway: early on, limit focus on and engagement with remaining products. As a system matures, gradually invest in lightweight support activities like getting-started sessions, audits, and triaging office-hour clinics.

    Adjust approach depending on context

    Every product portfolio is different, and thus so is every design system. Let’s consider the themes and dynamics from some archetypal contexts we face repeatedly in our work.

    Example 1: large corporate website, made of “properties”

    You know: the homepage-as-gateway-to-products hegemon (owned by Marketing) integrated with Training, Services, and About Us content (owned by less powerful fiefdoms) straddling a vast ocean of transactional features like Support/Account Management and Communities. All of these “properties” have drifted apart, and some trigger—the decision to go responsive, a rebranding, or an annoyed-enough-to-care executive—dictates that it’s “time to unify!”

    Diagram showing a typical web marketing sitemap overlaid with a product section team’s choices on spreading a system beyond its own section
    Typical web marketing sitemap, overlaid with a product section team’s choices on spreading a system beyond its own section.

    The get? Support

    System influence usually radiates from Marketing and Brand through to selling Products. But Support is where customers spend most of their time: billing, admin, downloading, troubleshooting. Support’s features are complicated, with intricate UI and longer release cycles across multiple platforms. It may be the most difficult section to integrate , but it’s essential.

    Takeaway: if your gets—in this case Home, Products, and Support—deliver, you win. Everyone else will either follow or look bad. That’s your flagship set.

    Minimize homepage distraction

    Achieving cohesive design is about suffusing an entire experience with it. Yet a homepage is often the part of a site that is most exposed to, and justifiably distinct from, otherwise reusable componentry. It has tons of cooks, unique and often complex parts, and changes frequently. Such qualities— indecisiveness, complexity, and instability—corrode systems efforts.

    Takeaway: don’t fall prey to the homepage distraction. Focus on stable fundamentals that you can confidently spread.

    Exploit navigational change to integrate a system hook

    As branding or navigation changes, so does a header. It appears everywhere, and changes to it can be propagated centrally. Get those properties—particularly those lacking full-time design support—to sync with a shared navigation service, and use that hook to open access to the greater goodies your system has to offer.

    Takeaway: exploit the connection! Adopters may not embrace all your parts, but since you are injecting your code into their environment, they could.

    Example 2: a modest product portfolio

    A smaller company’s strategic shifts can be chaotic, lending themselves to an unstable environment in which to apply a system. Nevertheless, a smaller community of designers—often a community of practice dispersed across a portfolio—can provide an opportunity to be more cohesive.

    Radiate influence from web apps

    Many small companies assemble portfolios of websites, web apps, and their iOS, Android, and Windows counterparts. Websites and native apps share little beyond visual style and editorial tone. However, web apps provide a pivot: they can share a far deeper overlap of components and tooling with websites, and their experiences often mirror what’s found on native apps.

    Takeaway: look for important products whose interests overlap many other products, and radiate influence from there.

    Diagram of product relationships within a portfolio, with web apps relating to both web sites and native apps.
    Diagram of product relationships within a portfolio, with web apps relating to both web sites and native apps.

    Demo value across the whole journey

    A small company’s flagship products should be the backbone of a customer’s journey, from reach and acquisition through service and loyalty. Design activities that express the system’s value from the broader user journey tend to reveal gaps, identify clunky handoffs, and trigger real discussions around cohesiveness.

    Takeaway: evoke system aspirations by creating before/after concepts and demoing cohesiveness across the journey, such as with a stitched prototype.

    A series of screenshots of the Marriott.com project showing how disparate design artifacts across products were stitched together into an interactive prototype
    For Marriott.com, disparate design artifacts across products (left) were stitched together into an interactive, interconnected prototype (right).

    Bridge collaboration beyond digital

    Because of their areas of focus, “non-digital” designers (working on products like trade-show booths, print, TV, and retail) tend to be less savvy than their digital counterparts when it comes to interaction. Nonetheless, you’ll share the essence of your visual language with them, such as making sure the system’s primary button doesn’t run afoul of the brand’s blue, and yet provides sufficient contrast for accessibility.

    Takeaway: encourage non-digital designers to do digital things. Be patient and inclusive, even if their concerns sometimes drift away from what you care about most.

    Example 3: a massive multiplatform enterprise

    For an enterprise as huge as Google, prioritizing apps was essential to Material Design’s success. The Verge’s “Redesigning Google: How Larry Page Engineered a Beautiful Revolution” suggests strong prioritization, with Search, Maps, Gmail, and later Android central to the emerging system. Not as much in the conversation, perhaps early on? Docs, Drive, Books, Finance. Definitely not SantaTracker.

    Broaden representation across platforms & businesses

    With coverage across a far broader swath of products, ensure flagship product selection spans a few platforms and lines of business. If you want it to apply everywhere, then the system—how it’s designed, developed, and maintained—will benefit from diverse influences.

    Takeaway: Strive for diverse system contribution and participation in a manner consistent with the products it serves.

    Mix doers & delegators

    Massive enterprise systems trigger influence from many visionaries. Yet you can’t rely on senior directors to produce meticulous, thoughtful concepts. Such leaders already direct and manage work across many products. Save them from themselves! Work with them to identify design talent with pockets of time. Even better, ask them to lend a doer they recommend for a month- or weeklong burst.

    Takeaway: defer to creative leaders on strategy, but redirect their instincts from doing everything to identifying and providing talent.

    Right the fundamentals before digging deep

    I confess that in the past, I’ve brought a too-lofty ambition to bear on quickly building huge libraries for organizations of many, many designers. Months later, I wondered why our team was still refining the “big three” (color, typography, and iconography) or the “big five” (the big three, plus buttons and forms). Um, what? Given the system’s broad reach, I had to adjust my expectations to be satisfied with what was still a very consequential shift toward cohesiveness.

    Takeaway: balance ambition for depth with spreading fundamentals wide across a large enterprise, so that everyone shares a core visual language.

    The long game

    Approach a design system as you would a marathon, not a sprint. You’re laying the groundwork for an extensive effort. By understanding your organization through its product portfolio, you’ll strengthen a cornerstone—the design system—that will help you achieve a stronger and more cohesive experience.

  • Making your JavaScript Pure 

    Once your website or application goes past a small number of lines, it will inevitably contain bugs of some sort. This isn’t specific to JavaScript but is shared by nearly all languages—it’s very tricky, if not impossible, to thoroughly rule out the chance of any bugs in your application. However, that doesn’t mean we can’t take precautions by coding in a way that lessens our vulnerability to bugs.

    Pure and impure functions

    A pure function is defined as one that doesn’t depend on or modify variables outside of its scope. That’s a bit of a mouthful, so let’s dive into some code for a more practical example.

    Take this function that calculates whether a user’s mouse is on the left-hand side of a page, and logs true if it is and false otherwise. In reality your function would probably be more complex and do more work, but this example does a great job of demonstrating:

    
    function mouseOnLeftSide(mouseX) {
        return mouseX < window.innerWidth / 2;
    }
    
    document.onmousemove = function(e) {
        console.log(mouseOnLeftSide(e.pageX));
    };
    
    

    mouseOnLeftSide() takes an X coordinate and checks to see if it’s less than half the window width—which would place it on the left side. However, mouseOnLeftSide() is not a pure function. We know this because within the body of the function, it refers to a value that it wasn’t explicitly given:

    
    return mouseX < window.innerWidth / 2;
    
    

    The function is given mouseX, but not window.innerWidth. This means the function is reaching out to access data it wasn’t given, and hence it’s not pure.

    The problem with impure functions

    You might ask why this is an issue—this piece of code works just fine and does the job expected of it. Imagine that you get a bug report from a user that when the window is less than 500 pixels wide the function is incorrect. How do you test this? You’ve got two options:

    • You could manually test by loading up your browser and moving your mouse around until you’ve found the problem.
    • You could write some unit tests (Rebecca Murphey’s Writing Testable JavaScript is a great introduction) to not only track down the bug, but also ensure that it doesn’t happen again.

    Keen to have a test in place to avoid this bug recurring, we pick the second option and get writing. Now we face a new problem, though: how do we set up our test correctly? We know we need to set up our test with the window width set to less than 500 pixels, but how? The function relies on window.innerWidth, and making sure that’s at a particular value is going to be a pain.

    Benefits of pure functions

    Simpler testing

    With that issue of how to test in mind, imagine we’d instead written the code like so:

    
    function mouseOnLeftSide(mouseX, windowWidth) {
        return mouseX < windowWidth / 2;
    }
    
    document.onmousemove = function(e) {
        console.log(mouseOnLeftSide(e.pageX, window.innerWidth));
    };
    
    

    The key difference here is that mouseOnLeftSide() now takes two arguments: the mouse X position and the window width. This means that mouseOnLeftSide() is now a pure function; all the data it needs it is explicitly given as inputs and it never has to reach out to access any data.

    In terms of functionality, it’s identical to our previous example, but we’ve dramatically improved its maintainability and testability. Now we don’t have to hack around to fake window.innerWidth for any tests, but instead just call mouseOnLeftSide() with the exact arguments we need:

    
    mouseOnLeftSide(5, 499) // ensure it works with width < 500
    
    

    Self-documenting

    Besides being easier to test, pure functions have other characteristics that make them worth using whenever possible. By their very nature, pure functions are self-documenting. If you know that a function doesn’t reach out of its scope to get data, you know the only data it can possibly touch is passed in as arguments. Consider the following function definition:

    
    function mouseOnLeftSide(mouseX, windowWidth)
    
    

    You know that this function deals with two pieces of data, and if the arguments are well named it should be clear what they are. We all have to deal with the pain of revisiting code that’s lain untouched for six months, and being able to regain familiarity with it quickly is a key skill.

    Avoiding globals in functions

    The problem of global variables is well documented in JavaScript—the language makes it trivial to store data globally where all functions can access it. This is a common source of bugs, too, because anything could have changed the value of a global variable, and hence the function could now behave differently.

    An additional property of pure functions is referential transparency. This is a rather complex term with a simple meaning: given the same inputs, the output is always the same. Going back to mouseOnLeftSide, let’s look at the first definition we had:

    
    function mouseOnLeftSide(mouseX) {
        return mouseX < window.innerWidth / 2;
    }
    
    

    This function is not referentially transparent. I could call it with the input 5 multiple times, resize the window between calls, and the result would be different every time. This is a slightly contrived example, but functions that return different values even when their inputs are the same are always harder to work with. Reasoning about them is harder because you can’t guarantee their behavior. For the same reason, testing is trickier, because you don’t have full control over the data the function needs.

    On the other hand, our improved mouseOnLeftSide function is referentially transparent because all its data comes from inputs and it never reaches outside itself:

    
    function mouseOnLeftSide(mouseX, windowWidth) {
        return mouseX < windowWidth / 2;
    }
    
    

    You get referential transparency for free when following the rule of declaring all your data as inputs, and by doing this you eliminate an entire class of bugs around side effects and functions acting unexpectedly. If you have full control over the data, you can hunt down and replicate bugs much more quickly and reliably without chancing the lottery of global variables that could interfere.

    Choosing which functions to make pure

    It’s impossible to have pure functions consistently—there will always be a time when you need to reach out and fetch data, the most common example of which is reaching into the DOM to grab a specific element to interact with. It’s a fact of JavaScript that you’ll have to do this, and you shouldn’t feel bad about reaching outside of your function. Instead, carefully consider if there is a way to structure your code so that impure functions can be isolated. Prevent them from having broad effects throughout your codebase, and try to use pure functions whenever appropriate.

    Let’s take a look at the code below, which grabs an element from the DOM and changes its background color to red:

    
    function changeElementToRed() {
        var foo = document.getElementById('foo');
        foo.style.backgroundColor = "red";
    }
    
    changeElementToRed();
    
    

    There are two problems with this piece of code, both solvable by transitioning to a pure function:

    1. This function is not reusable at all; it’s directly tied to a specific DOM element. If we wanted to reuse it to change a different element, we couldn’t.
    2. This function is hard to test because it’s not pure. To test it, we would have to create an element with a specific ID rather than any generic element.

    Given the two points above, I would rewrite this function to:

    
    function changeElementToRed(elem) {
        elem.style.backgroundColor = "red";
    }
    
    function changeFooToRed() {
        var foo = document.getElementById('foo');
        changeElementToRed(foo);
    }
    
    changeFooToRed();
    

    We’ve now changed changeElementToRed() to not be tied to a specific DOM element and to be more generic. At the same time, we’ve made it pure, bringing us all the benefits discussed previously.

    It’s important to note, though, that I’ve still got some impure code—changeFooToRed() is impure. You can never avoid this, but it’s about spotting opportunities where turning a function pure would increase its readability, reusability, and testability. By keeping the places where you’re impure to a minimum and creating as many pure, reusable functions as you can, you’ll save yourself a huge amount of pain in the future and write better code.

    Conclusion

    “Pure functions,” “side effects,” and “referential transparency” are terms usually associated with purely functional languages, but that doesn’t mean we can’t take the principles and apply them to our JavaScript, too. By being mindful of these principles and applying them wisely when your code could benefit from them you’ll gain more reliable, self-documenting codebases that are easier to work with and that break less often. I encourage you to keep this in mind next time you’re writing new code, or even revisiting some existing code. It will take some time to get used to these ideas, but soon you’ll find yourself applying them without even thinking about it. Your fellow developers and your future self will thank you.

  • This week's sponsor: FULLSTORY 

    FullStory, a pixel-perfect session playback tool that captures everything about your customer experience with one easy-to-install script.