Media queries presentation at indieconf

Posted by & filed under Articles, Inspiration.

Today I had the pleasure of speaking at indieconf, a conference for independent web developers and designers, right here in my backyard of Raleigh, NC. I talked about the basics of CSS3 media query syntax but focused on the challenges and considerations that go into building a site from scratch with media queries to power the layout. I used the fictional Little Pea Bakery site from my book Stunning CSS3 as a demo for how to adapt the CSS to make better use of the space at different viewport widths. I covered some tips for making your design work on mobile devices and even old versions of IE.

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

CSS3: Using media queries to improve the web site experience (PDF, 2.4 mb)

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

Media query articles, tutorials, and tools

(more…)

Web accessibility presentation and resources

Posted by & filed under Articles.

Yesterday I had the pleasure of speaking at a meeting of the Charlotte User Experience group. I talked about the basics of web accessibility: what it is, who it affects, why it matters, and some of the fundamental things you ought to be doing in your pages to make them more accessible.

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

Web Accessibility (PDF, 2 mb)

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

Top sites on accessibility

These are my favorite sites to read to learn accessibility techniques and news on developments in technology like HTML5 and screen readers. I highly recommend subscribing to the RSS feeds of these.

(more…)

Essential considerations for crafting quality media queries

Posted by & filed under Articles.

CSS3 media queries are dead simple, in terms of their syntax. You’ve got an @media directive, a media type (which you already know from good ol’ CSS 2, like screen, print, all, etc.) and one or more media features (the characteristics we’re testing against). That’s it:

@media screen and (max-width:500px) {
}

There are some additional little syntax details, but this is basically all you need to know to actually make a media query work. Once you memorize this short, simple syntax and the various media features that are available, you could technically say that you know how to use media queries. But knowing how to use media queries effectively requires a whole lot more considerations than just where to put an @ or {.

Designing web layouts with media queries is a process. You need to keep them in mind from the very beginning and make decisions at several points about how to integrate them in ways that will make the most sense for your site. There are very few always-right or always-wrong answers. What type of media query set-up would work best will depend on your site, your users, and your own capabilities and experience. But I wanted to cover the pros and cons of some of the essential considerations that go into crafting robust media query-driven layouts. These considerations include whether to:

This article is just as much for me as it is for you—it can be hard to keep track of all the different configuration variations you can use! Hopefully I’ll be able to make the pros and cons of the various approaches clearer so you can use this article to guide your decisions when you start a project involving media queries.

How to include your media queries: embedded vs. external

There are two ways to include media queries in your site: embed them within a style sheet or include them in a call to a separate, external sheet.

(more…)

Videos of screen readers using ARIA, updated

Posted by & filed under Articles.

My previous post “Videos of screen readers using ARIA” needed a good updating: I’d found several more applicable videos and some of the original videos had disappeared from the web, leaving the links to them broken. This article includes all the content from that original post that’s still online plus all the new stuff I’ve found, organized by topic this time.

I’ve been doing a lot of investigation into WAI-ARIA for work recently, mainly revolving around educating other developers. I’ve found a lot of great demos of pages and widgets that use ARIA, but not too many videos of screen readers using said widgets. This is a shame, because it’s often hard to understand the impact of ARIA without hearing how a screen reader announces the content both without and with ARIA in place, and not many people have or know how to use screen readers. I can certainly show developers who are accessibility-newbies the ARIA demos, but their accessibility benefits aren’t that clear without a recording of a screen reader using them and their non-ARIA counterparts.

Nevertheless, I was able to find a few videos of screen readers using ARIA-enhanced widgets, as well as other uses of ARIA, and I wanted to share the links here. I’m willing to bet there are more out there—it’s just hard to find them, since simply searching for “aria” on YouTube will get you a bunch of videos of people singing opera, not screen readers! So if you know of others, please let us know in the comments.
(more…)

A few links: CSS and accessibility

Posted by & filed under Articles.

The blog 456 Berea Street by Roger Johansson is one of my favorite sites for useful information on web standards topics presented in a really clearly written and succinct way. He’s had some great articles recently related to the intersection of CSS and accessibility that I thought were worth sharing.

“Screen readers, list items and list-style:none“

Roger found that some screen readers won’t announce list items if list-style:none is set on the list. (They will announce the list as a whole, just not the individual list items.) This very common bit of CSS visually represses the list markers, of course, but (probably?) shouldn’t change the spoken output. Unfortunately, this falls squarely into the “good to know, but what do you want me to do about it?” camp. Just keep it in mind, and hopefully the offending screen readers will fix this behavior soon.

“Using display:table has semantic effects in some screen readers“

Same sort of thing, only with display:table. NVDA in Firefox as well as the ORCA screen reader incorrectly announce elements that you’ve set to display:table as actual, semantic tables. This might be an area where you do have other options than using display:table (as opposed to list-style:none, where there are no alternatives if you don’t want markers), so this screen reader quirk is a little more helpful to know. I wouldn’t consider this a deal-breaker, but if you can easily avoid it, I say why not? If you can’t really avoid it, I wouldn’t sweat it, but again, keep it in mind.

“Styling button elements to look like links“

This is a useful CSS snippet for when you want something to look like a link (plain text) but act like a button (initiate an action other than taking someone to a new page). Roger points out, of course, that it would be better if the design were changed so that things that act like buttons look like buttons, but this is a good option when you can’t convince those darn designers to change things! (I’m allowed to jokingly complain about designers since I am one.)

IE 7 button text redraw bug

Posted by & filed under Articles.

I’ve run into an IE 7 bug that I’ve been unable to fix. I’m hoping some of you, dear readers, can help me figure it out.

I’m working on some styled buttons, created with the <button> element and some pretty basic CSS. In IE 7, if you scroll down the page so that the buttons move out of the viewport, then scroll back up to reveal them again, you’ll see lines of missing pixels drawn across the text of the buttons. It varies each time you scroll, so sometimes you won’t see any lines, and occasionally the entire text will disappear. The lines appear most often with the buttons with the largest text, but I think this is mainly just due to there being more pixels there to draw lines through, increasing the likelihood that IE 7 can screw it up. Hovering over the buttons or refreshing the page restores the text.

You can see a screenshot of the bug below, and view the bug live in IE 7 in my test page.

The buttons in IE 7 have lines drawn through their text, as if little strips of the text were erased.

(more…)

Bug fixes for removing the inner shadow on iOS inputs

Posted by & filed under Articles.

A while back Trent Walton wrote about using -webkit-appearance to override the default styles of form elements in Safari on iOS devices (iPad, iPhone, and iPod Touch). Safari on iOS adds an inner shadow to the top of input text fields. It can only be overridden by setting -webkit-appearance to none or caret, or by adding a background image to the field.

Sounds like an easy fix, right? But if you didn’t read the comments on Trent’s article, you might have missed two important bugs* connected to using -webkit-appearance to remove the inner shadow:

  1. If you use caret, it removes not just the inner shadow but also the borders on desktop versions of Safari and Chrome (as well as the beta version of the WebKit-based browser on the TouchPad tablet).
  2. If you use none, it removes the inner shadow and leaves borders alone, but it disables focus styles on iPad.

In the case of the missing focus, I haven’t been able to confirm this myself; I don’t have an iPad, but the people I’ve asked to test it for me (thanks Josh!) have said the focus styles do show up, even when -webkit-appearance: none is set. Perhaps it’s a case of the version of iOS in use, perhaps the person who reported this bug in the comments to Trent’s article was simply having a problem with his individual machine, or perhaps there was something else in the CSS that was truly responsible for the problem. So it’s still not clear to me whether the second bug I listed above is really present. Do any of you iPad users have a problem seeing the red outline on focus in my test page?

If both of these bugs are truly present, they severely limit the circumstances in which -webkit-appearance can be used to remove inputs’ inner shadows. Luckily, we can use a background image instead of -webkit-appearance to remove the shadow. But what if you don’t want any background image to show? Simple—make the background image invisible. Some smart people on Stack Overflow suggested a couple ways to do just that:

  1. Tile a transparent GIF as the background image.
  2. Add a CSS3 gradient that runs from transparent white to transparent white.

I think the gradient option is ideal because it doesn’t require an extra hit to the server to retrieve the transparent GIF. And there’s no need to worry about lack of browser support, since the only browsers we want to apply the gradient are Safari on iOS.

Here’s what the CSS would look like for the gradient:

background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(0,0%,100%,0)), to(hsla(0,0%,100%,0)));
background-image:-webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0));

The first background-image declaration, using the -webkit-gradient function, is what will actually work in Safari on iOS today. The second declaration using -webkit-linear-gradient is there for future compatibility; WebKit has recently updated its gradient syntax to match the W3C specification. These syntax changes are in nightly builds and will make it into live versions of Safari and Chrome sometime soon, and you want your CSS to be prepared.

Most of this is not new information—it’s almost all in Trent’s article and comments and the Stack Overflow page. But I wanted to put it all together in one place, clearly explained, for easy reference. Hope it helps you out!

*I don’t actually know that these are true bugs. But they sure seem like bugs to me, and in any case, they certainly need some working around!

There’s already a book on responsive web design. Want to win it?

Posted by & filed under Announcements.

Since Ethan Marcotte wrote his seminal article on responsive web design less than a year ago, the concept of creating liquid/fluid designs that make use of media queries to adapt to the user’s screen has taken off. I’m ecstatic about this. I’ve been designing and building primarily liquid sites for several years now, and I want others to do the same. Responsive web designs can offer tremendous usability and accessibility benefits, while still looking beautiful, not dumbed down.

From a technical standpoint, creating liquid designs with media queries is not that complicated, in theory. But doing so requires a sometimes huge shift in mindset and design process, and this is where brief online articles on the topic fall a little short, simply due to the nature of their publication medium. What we really need is a whole book on responsive web design, covering all its intricacies. Ethan Marcotte is working on one, and I can’t wait to get my hands on it when it comes out later this year.

But it turns out that there’s already a book on responsive web design. OK, technically, it’s more like 1.2 books. My first book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS, is the only book out there that’s entirely devoted to designing and building robust and attractive web sites that adapt to the user’s viewing preferences. It includes not only detailed instructions on how to create the CSS for the layouts, but also how to make the images within them flexible and how to design them from the comp stage with flexibility baked in. All you need to add to any of the layouts you learn about in Flexible Web Design to make them “responsive” is media queries—and I cover those fully in chapter 6 of my new book Stunning CSS3: A Project-based Guide to the Latest in CSS. Put them together, and you have a detailed, comprehensive guide on how to create awesome responsive web designs.

I want everyone to start making responsive web designs, so I want to give away a bundle of both my books. Actually, I want to give away two bundles. So two people will get a copy each of Flexible Web Design and Stunning CSS3.

(more…)

30 things I’ve learned in 30 years

Posted by & filed under Articles.

Inspired by Noah Stokes’ blog post Thirty Four, as well as the book Encyclopedia of an Ordinary Life by Amy Krouse Rosenthal that I read recently and loved, I decided to share 30 things, in no particular order, that I’ve learned in the 30 years of my life.

  1. If something electrical isn’t working, turning it off then on again is a good way to fix it.
  2. Pregnancy affects every piece and function of your body, not just the parts you would expect.
  3. People don’t wear silver clothes and use jetpacks in the future (which is now, of course), sadly.
  4. Having someone sincerely compliment your child feels even better than a compliment to yourself, surprisingly.
  5. It feels immensely satisfying to peel sunburned skin.
  6. When I say my name on the phone (ZO-ee), people often think I’m saying Ellie.
  7. When you get an unexpected sum of money, you will usually get an unexpected car or home repair right afterwards, which seems like a bummer, until you realize you’ve been blessed to have that money to take care of it in the first place.
  8. It doesn’t feel good to over-eat.
  9. People often don’t do what’s in their best interest (see above).
  10. I hate yoga and yoga hates me.
  11. Cheese is not overrated.
  12. Chocolate chip cookies are extremely common, yet it’s sadly very difficult to find excellent ones.
  13. When excellent chocolate chip cookies cannot be had, mediocre chocolate chip cookies are still hard to resist.
  14. People follow the rules, even when it would be more fun or beneficial not to, an impressive amount of the time.
  15. Time flies when you’re having fun.
  16. It’s OK to kill thousands of people in a movie, but don’t you dare kill the dog. (Unless the whole point of the movie is killing the dog, aka Old Yeller.)
  17. The zombie apocalypse is inevitable.
  18. When you call a customer service phone number, the automated phone recording will make you input your member number. But when you finally get to a real person, they’ll ask you for it again.
  19. Do a job that you love.
  20. A less-nice house is worth the shorter commute.
  21. You can do it yourself, but paying someone else to do it is more enjoyable.
  22. The tiniest amount of mustard can be detected, and it ruins an entire dish.
  23. Harry Conick Jr is a serial killer. Just wait. It’ll come out. You’ll see.
  24. When you have extra money, spend it on trips and activities, not stuff. When you’re an old lady, you won’t reminisce about the beautiful couch you once had, but you will think about how much fun you had at Yellowstone. (I learned this one from my paternal grandma, through my mom.)
  25. You could be angry, but wouldn’t it be more pleasant to be happy?
  26. Everything at Kohl’s is always on sale, regardless of whether it’s marked on sale or not.
  27. I’ll eat anything once. Almost anything.
  28. When coming up with a time estimate for a project, figure out what it would take, then double it. Or triple it.
  29. Some people are reliably unreliable.
  30. It sounds so trite, but it really is all about love.

Videos of screen readers using ARIA

Posted by & filed under Articles.

Note: This article is out of date. The new post “Videos of screen readers using ARIA, updated” contains all the original content that is still relevant plus new content that’s arisen since this piece was written.

I’ve been doing a lot of investigation into WAI-ARIA for work recently, mainly revolving around educating other developers. I’ve found a lot of great demos of pages and widgets that use ARIA, but not too many videos of screen readers using said widgets. This is a shame, because it’s often hard to understand the impact of ARIA without hearing how a screen reader announces the content both without and with ARIA in place, and not many people have or know how to use screen readers. I can certainly show developers who are accessibility-newbies the ARIA demos, but their accessibility benefits aren’t that clear without a recording of a screen reader using them and their non-ARIA counterparts.

Nevertheless, I was able to find a few videos of screen readers using ARIA, and I wanted to share the links here. I’m willing to bet there are more out there—it’s just hard to find them, since simply searching for “aria” on YouTube will get you a bunch of videos of people singing opera, not screen readers! So if you know of others, please let us know in the comments.

(more…)

View more posts: