Blog

All thoughts and opinions in my blog are my own and do not represent the position of my employer.

We need more moms in web design and development

Last year in one of my conference talks, I mentioned that I have kids. After my talk, a woman came up to me and asked me how I do it. How I have a full-time job and do conferences and write and be a mom. She was interested in this because she was planning to start a family soon and wanted to know how other working moms in our industry manage it.

This got me thinking about moms in web design and development. And I realized that out of the 40-ish conferences I have spoken at over the last 8 years, there has been only one other speaker at a conference with me who was a mom. Maybe two. In both cases, their kids were grown or nearly grown, not babies or little kids that can’t fend for themselves for a couple days while mom is away.

It’s not that I haven’t spoken with lots of great women. I’ve been fortunate that most of the conferences I’ve spoken at have had women well represented in the speaker line-up. But all of these women, bar one or two, are not mothers. I’m sure there are other mom speakers out there like me, but the point is that they’re very rare.

Dad speakers are not rare. There are tons of dad speakers at web design and development conferences. I’d say at least half of the men I speak with are fathers of young children. Lots have babies at home.

Every family is different, of course, but speaking of the larger culture, it’s usually easier for dads in our society to leave the kids for several days to go speak at a conference than it is for mom to leave. It’s also usually easier for dads to just attend the conference. I’m willing to bet that there’s a far higher percentage of dads out of the male attendees than there is of moms out of the female attendees.

Now, I have nothing against all of the lovely kid-free women at conferences that I have had the pleasure to meet. But I think making conferences more mom-friendly—and more diverse in general, in every sense of the word—benefits all women. If we want more women in web design, we have to make it easier for them to stay in web design after they have kids. Much of this comes down to employment practices, of course, but I think we can do our little part by making conferences more accommodating to the needs of moms, and by having mom speakers so that other women can see that it is possible to have kids and still be successful in your field.

So here’s what I’ve decided to do. First, I’m going to mention that I’m a mom in every single conference presentation I do from now on. I don’t usually mention my kids, because I figure most of the attendees don’t care, but I’ve decided that’s OK. They don’t have to care. If it helps that one woman in the audience who was thinking about starting a family and wondering if she could stay in web design afterwards to feel a little more confident that she can do it too, then I’d say the 10 seconds devoted to mentioning my kids in my conference presentation are worth it.

It may also help dispel the stereotype of moms as not being tech-savvy. We’re sometimes told in conferences and blog posts to keep our products so simple that our moms could use them. Moms are a lazy stand-in for non-tech-savvy, novice users. We need to stop framing moms this way. It’s just plain wrong (moms today generally are very tech-savvy) and it hurts the perception of women in our industry.

Me mentioning my kids in a recent conference talk.

Me mentioning my kids in a recent conference talk.

The next thing that I’d like to do is help organize a parent-friendly conference. Not a conference just for parents, of course, but a conference that includes things that will make it easier for parents to attend. I’m thinking of small things like having a room dedicated for breast pumping and breastfeeding. I’m thinking of big things like having childcare available for the little kids and coding classes available for the big kids so they can learn more about what Mom or Dad does all day at work and have their own fun little mini conference to benefit from.

I know that things like this have been done before. I spoke at a conference when my son was a newborn (I flew in and out the same day), and I asked the organizers to provide me a private space to pump during the event. They were happy to do so, and I’m sure would have been happy to let other women pump there too, but this wasn’t an advertised facility of the event and thus no other women took part. I wonder if another mom or two might have bought a ticket and attended the event had she known she wouldn’t have to worry about finding a place to pump during the day? I’ve pumped while sitting on a bathroom floor in an airport. No woman wants to resort to crap like this. Give us a comfy, clean place to pump and tell us about it upfront, and you might just find a couple extra moms at your conference.

I’ve heard of a couple events that have planned for kids to attend with their parents. Last year at OSCON, they held an entire day of workshops for school-aged children to learn about computer programming. It cost just $20 and sold out. Also last year, OpenITP ran a hackathon and provided child care. You can read about how they went about setting it up and some other tech events that also have incorporated child care in the past.

My parent-friendly conference is just an idea right now. I have no idea how to organize a conference. I have no idea if this is even realistic and doable. So what I’d like to do is get your help. Tell me if this will never work, tell me it’s awesome and you want to help, tell me your great idea for what we can do to get more moms in web design and development. And then we’ll go from there.

Enhancing Responsiveness with Flexbox presentation at RWD Summit

My latest talk is called “Enhancing Responsiveness With Flexbox.” I talked about how to actually put flexbox to use in the real world—today. I demonstrated a bunch of practical ideas for how to use flexbox as progressive enhancement to improve sizing, spacing, and order in responsive web design, while still ensuring non-supporting browsers get an acceptable fallback experience. I’ve just given this talk at Smashing Conference and the RWD Summit.

You can view my presentation on Slideshare or download the slides directly here:

Putting Flexbox into Practice (PDF, 9.4 mb)

The demos

To demonstrate the flexbox features, I’m still using my S’mores Builder page. Check it out (in a browser with good flexbox support, of course) to see what flexbox can do.

I also created a few additional, standalone demos, of which I have these two ready to share:

I hope to have time to prepare and post the other demos here soon.

Related resources

Here are several links to related resources, a few of which are in the slides plus many more that were not but which I recommend and think you’ll find useful.

General info

Articles and tutorials

Tools

Full-width pinned layouts with flexbox

One good way to learn a new technology is to take something made with the existing methods and try to recreate it with the new thing. Take flexbox, for example. Philip Walton showed us with his “Solved by Flexbox” demos that flexbox can make a lot of the layouts that were possible but painful with traditional CSS2 methods a lot easier to create and more flexible to different content and user scenarios. I want to walk you through a similar sort of design challenge: taking an existing layout, converting it to flexbox, and then seeing how flexbox can take it to the next level.

My inspiration for a layout to convert came from Dan Mall’s write-up of his Crayola web site redesign—specifically, the responsive screenshots stretching across the full-width of the viewport, displaying how the layout could adapt from tiny to huge.

Dan Mall's full-screen layout of a mobile phone pinned to the left and a desktop monitor pinned to the right.

Dan Mall’s full-screen layout of a mobile phone pinned to the left and a desktop monitor pinned to the right, both bottom aligned, with text in between.

Seeing a full-width layout with chunks pinned to each side and another block in the middle made me think of flexbox’s justify-content:space-between, so I decided to try to see if I could recreate this layout with flexbox. Again, I took this as a challenge and learning experience for myself—not because there was anything wrong with Dan’s implementation. How many ways could I create this layout, and what pros and cons did each method have?

The display:table version

Dan was using absolute positioning, so no need for me to try that route. That option is covered!

Another option I wanted to compare with flexbox was a display:table layout, often a good fallback for flexbox layouts, particularly full-width ones. To make display:table work, I needed to put the left-most column first in the source, then the middle one, then the last one.

<div class="layout-table">
    <figure class="stretch-photo small">
        <img src="img/flexbox_stretch_small.png" width="58" height="127" alt="mobile"/>
    </figure>
    <h2 class="stretch-title"><span>looks great from here to there</span></h2>
    <figure class="stretch-photo big">
        <img src="img/flexbox_stretch_big.png" width="361" height="294" alt="desktop"/>
    </figure>
</div>

I don’t consider this source order ideal, as the middle text is, semantically speaking, a heading for the two images; this source order won’t result in the best reading order for users of assistive technologies like screen readers. Unfortunately, that’s sometimes what you’re stuck with when using display:table. But, if you can’t have perfect HTML, at least you can have nice, simple CSS!

.layout-table {
    display: table;
    width: 100%;
}
.layout-table > * {
    display: table-cell;
    vertical-align: bottom;
}
.layout-table .stretch-title {
    width: 100%;
    padding-bottom: 4rem;
}
.layout-table .stretch-title span {
    display: block;
    border-bottom: 1px solid #ccc;
}

Below is what my table-layout version looks like. I wasn’t going for identical with Dan’s version, just the same basic layout pattern. One difference you’ll notice is that in my version the text is centered between the two images, while in Dan’s version the text is not centered between the images but rather is centered with the blocks of text above and below it. This is not a pro or con for either version, in my opinion, just a difference. It depends on what alignment you want.

My version of the here-to-there layout pattern, using display:table-cell.

My version of the here-to-there layout pattern, using display:table-cell.

The flexbox version

So, with the display:table version as my point of comparison, I first set out to fix the source order.

<div class="layout-flex-basic">
    <h2 class="stretch-title">looks great from here to there</h2>
    <figure class="stretch-photo small">
        <img src="img/flexbox_stretch_small.png" width="58" height="127" alt="mobile"/>
    </figure>
    <figure class="stretch-photo big">
        <img src="img/flexbox_stretch_big.png" width="361" height="294" alt="desktop"/>
    </figure>
</div>

So similar, and yet so much better!

To use flexbox on this beautiful HTML, first set display:flex on the container for the three chunks. (If you want to use the browser-specific variants of the flexbox CSS too, go for it.) I also set align-items:flex-end to vertically align the three chunks, now “flex items,” along their bottoms.

.layout-flex-basic {
    display: flex;
    align-items: flex-end;
}

This gets me the three chunks lined up in a row, but of course the heading text is first in the line since it’s first in the HTML. I can move the mobile phone image in front of it by using the order property. All flex items have order set to 0 by default, so -1 moves the mobile phone image before all its siblings, leaving the heading to now take up the middle position.

.layout-flex-basic .small {
    order: -1;
}

The only thing left is to stretch the heading to take up all the space in the line left over after the two images have taken their shares. Setting flex:1 solves that simply. I also gave it some margin-bottom to move it up from the bottom edge a bit and a border to create the line between the two images.

.layout-flex-basic .stretch-title {
    flex: 1;
    margin-bottom: 4.5rem;
    border-bottom: 1px solid #ccc;
}

And that’s it. Not too bad, right? Apart from the browser-specific variants, which you can get Sass or another tool to add for you, it’s really no more CSS than the display:table version. It looks identical to that version, but has a more accessible and semantic source order.

The advantage to having proper source order on the flexbox version is that I can easily change the layout on narrow screens so that the heading is on top, in its natural source order, with the two images stacked below. Or, I can use order again to instead move the heading below the images.

@media screen and (max-width:50em) {
    .layout-flex-basic {
        flex-wrap: wrap; /* allow two rows */
        justify-content: space-between; /* move the images to opposite ends of their row */
    }
    .layout-flex-basic .stretch-title {
        flex: 1 0 100%; /* make it wrap to its own line */
        order: 1; /* move to the end */
        margin-bottom: 0;
        margin-top: 1em;
        border-bottom: none;
        border-top: 1px solid #ccc;
    }
    .layout-flex-basic .small {
        order: 0; /* move back to its normal spot */
    }
Even though the heading text comes before both of the images, I can use the flexbox order property to move it below them visually on narrow screens.

Even though the heading text comes before both of the images, I can use the flexbox order property to move it below them visually on narrow screens.

I can’t do this with the display:table version. I can change the CSS on narrow screens, sure, but the HTML source order means my heading will still be stuck in the middle of the two images. HTML source order really does matter.

Of course, maybe I want the heading in the middle on really tiny screens, smaller than the combined width of my two images. I can shuffle things around quite easily with flexbox.

@media screen and (max-width:480px) {
    .layout-flex-basic {
        flex-direction: column; /* stack vertically */
        flex-wrap: no-wrap; /* all in one column */
        align-items: center; /* horizontally centered */
    }
    .layout-flex-basic .stretch-title {
        flex: 1 0 auto; /* this now affects its height, not its width */
        order: 0; /* move back to its normal spot */
        width: 100%;
        margin: 1em 0;
        padding: .5em 0;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;
    }
    .layout-flex-basic .small {
        order: -1; /* put back on top */
    }
}
Changing the visual order yet again on even narrower screens.

Changing the visual order yet again on even narrower screens.

Extending the flexbox version

The flexbox version can also be extended in more ways that the display:table version. I can add more pieces and place them with more precision and flexibility than with display:table. Let’s say I want to add a caption to each image, but aligned to the side of its image, as shown below.

Adding text captions next to instead of below their images adds an extra layer of complexity. But it's totally doable.

Adding text captions next to instead of below their images adds an extra layer of complexity. But it’s totally doable.

Here’s the logical HTML for that.

<div class="layout-flex-advanced">
    <h2 class="stretch-title">looks great from here to there</h2>
    <figure class="stretch-photo small">
        <img src="img/flexbox_stretch_small.png" width="58" height="127" alt=""/>
        <figcaption>mobile</figcaption>
    </figure>
    <figure class="stretch-photo big">
        <img src="img/flexbox_stretch_big.png" width="361" height="294" alt=""/>
        <figcaption>desktop</figcaption>
    </figure>
</div>

To do this with flexbox, I turned each <figure> into a flex container itself. They’re still flex items, along with their sibling <h2>, but now the <img> and <figcaption> inside each <figure> are flex items too. That means they can be aligned in the various ways that flexbox allows.

.layout-flex-advanced .stretch-photo {
    display: flex;
    align-items: flex-end;
}

I want each caption to hang out the side of its parent <figure>, so I need to hard-code the width of each <figure> (not great, I know) so it doesn’t try to expand to hold its caption. I also need to make sure nothing inside the <figure> flexes, but instead remains at its native width.

.layout-flex-advanced img,
.layout-flex-advanced figcaption {
    flex: 0 0 auto;
}
.layout-flex-advanced .small {
    width: 58px;
}
.layout-flex-advanced .big {
    width: 361px;
}

This will indeed make each caption overflow its <figure>, but both will overflow out the right side, since the content inside each runs from left to right.

Both captions overflow out of their s on the right side by default. This doesn't look so hot on the image on the right.

By default, both captions overflow out of their figure containers on the right side. This doesn’t look so hot on the image on the right, whose caption barely shows in the viewport.

But, I can change this using flexbox’s flex-direction property. You’ve perhaps heard that you can use flex-direction to switch content from row to column layout. But those aren’t the only two values flex-direction has. You can also set it to column-reverse or row-reverse. They work the same as their column and row counterparts, but each starts its stacking from the opposite direction of what you’d normally expect. So, for a left-to-right language like English, flex-direction:row would lay the flex items out from left to right, but flex-direction:row-reverse would lay them out from right to left. That’s exactly what we want to happen on the big <figure>: place the monitor image on the right side of the row (first in the source), then its caption to its left (second in the source).

.layout-flex-advanced .big {
    width: 361px;
    flex-direction: row-reverse;
}

That takes care of it, creating the layout in the screenshot above.

Of course, at narrow screen widths we can instead place the captions back under their images—or on top of them, or really wherever we want, thanks to flexbox.

The first image has its caption below, the second has its caption above, and the heading is sandwiched in between.

The first image has its caption below, the second has its caption above, and the heading is sandwiched in between.

The best part about this is that all of this flexbox stuff can be added as progressive enhancement. I could use absolute positioning, like Dan did, as my base, and build on top of it using flexbox, which offers me additional content placement and alignment options that absolute positioning can’t achieve. (In this demo, I didn’t use absolute position or anything else to support older browsers, simply because this is a demo, not a real-life page, and I just really needed to get this blog post out the door without obsessing too much over it! That’s a bad habit of mine, which my very infrequent blogging indicates. Maybe I can create the progressively enhanced version of this demo as a followup blog post…)

This here-to-there layout pattern doesn’t have to be used just for responsive screenshots, of course. I could see it being used for all sorts of things—anything with a comparison or before-and-after, such as before and after screenshots of a web site you redesigned. Or, what about a hero banner for a craft or construction tutorial showing a photo of the raw materials on one side and a photo of the finished product on the left? Or, a recipe with a photo of the ingredients on the left, name of the dish in the middle, and photo of the completed dish on the right? Or, just show how a cute little baby has gotten so much bigger:

This version uses the same markup structure as the others, just with a little extra visual styling.

This version uses the same markup structure as the others, just with a little extra visual styling. (Isn’t my son cute?)

To see how this last demo was made, go to the demo page for all four versions and check out the CSS. As always, be sure to resize your browser window to see how it adjusts at different widths. And of course, view it in a browser with good flexbox support. As if you smart people would use anything else!

View more posts:

Archives by Category

  • Announcements (32)

    Learn what's happening in my career or industry, including information about my speaking engagements and books.

  • Articles (39)

    Informational or theoretical articles about a variety of web design topics, including CSS, HTML, accessibility, usability, and visual design.

  • Inspiration (8)

    Collections of images or links to others' design work that I find inspiring and think you will too.

  • Tutorials (5)

    Step-by-step articles that you can follow along with to learn a particular web design technique, including CSS layout and CSS3 effects.

Archives by Month