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

Help me declutter before I move overseas

I’m excited to announce that I’m about to start a new position as a UX designer for To do so, I’m moving from the US to Amsterdam in the Netherlands! For the past several weeks, my husband and I have been busy preparing for such a big move, and a big part of that has been decluttering. One thing that I have far too much of is copies of my book Stunning CSS3: A Project-based Guide to the Latest in CSS. Books are heavy. I don’t want to move all these books. Plus, it’s silly for me to have these books when someone else could be benefiting from them.

So here’s what I’m going to do: I’m going to give away a bunch of copies of Stunning CSS3 to you guys. All I want in return is for you to donate something to Carolina Tiger Rescue, a big cat sanctuary here in North Carolina that is doing great work and that more people ought to know about. Everyone loves wild cats, right?

If you would like a copy of the book, follow these steps in the next couple days:

  1. Go to the donation page for Carolina Tiger Rescue and make a donation in whatever amount you like.
  2. Tweet at me something like “I just donated to Carolina Tiger Rescue, so @zomigi is going to send me a copy of her book Stunning CSS3″ and add a link to this blog post so others can do it too if they like.
  3. I’ll make sure to follow you, if I’m not already, so you can then send me a direct message with your mailing address.

I’ll send books to up to 10 people, and I’ll update this blog post if I hit that number (or run out of time before my move). For now, I can only send to people in the US, unfortunately. But, perhaps when I get over to Europe I’ll do another giveaway for you non-Americans!

Thanks for helping me clean out my house. 🙂

Putting Flexbox into Practice presentation at Blend Conference

Yesterday I spoke at Blend Conference in Charlotte on Putting Flexbox into Practice. You’ve probably heard about flexbox (the CSS Flexible Box Layout module), since it’s the most fully developed and well supported of CSS3’s wide array of new techniques for creating page layouts, and because it allows you to create fluid, responsive layouts much more easily than current float-based methods. I talked about how to actually put it to use in the real world—today. I covered the syntax you’ll be able to one day use to build an entire multi-column page layout with flexbox, but also demonstrated some practical ideas for how to use flexbox as progressive enhancement, adding it in bits and pieces on individual page components with graceful fallbacks.

You can view the slides on SlideShare, or download the slides here:

Putting Flexbox into Practice (PDF, 900 kb)

The demo

To demonstrate the flexbox features, I created a S’mores Builder page. Some day, I intend to turn it into a functioning site devoted to s’mores. (I really love s’mores. A lot.) But for now, check it out to see what flexbox can do.

The S'mores Builder page is laid out entirely with flexbox, with some fallbacks for non-supporting browsers in certain places.

The S’mores Builder page is responsive and laid out entirely with flexbox, with some fallbacks for non-supporting browsers in certain places.


Bookmarklets for accessibility testing

I recently took an introductory JavaScript and jQuery class so I could learn how to write scripts from scratch instead of just blindly using and occasionally fiddling with other people’s scripts and jQuery plugins. To give myself some JavaScript practice, I decided to create two bookmarklets to solve a web accessibility testing dilemma: how to find inaccessible CSS background images.

One bookmarklet outlines elements that have a background image set, and the other removes all background images. The idea is to use either or both of these to see whether any of the informational images on the page have been set as CSS background images instead of foreground images (the <img> element in the HTML). This is an accessibility problem, since CSS background images can’t have alt text to explain the information contained within them. Background images should be reserved for either purely decorative images or informative images that repeat information found elsewhere in the text (like an image of a printer next to the word “print”).

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 (40)

    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