Flexbox syntax for IE 10

Posted by & filed under Articles.

Yesterday in my presentation on CSS3 Layout I talked about the different syntaxes that the Flexible Box Layout module (Flexbox) has gone through on its journey to candidate recommendation. As I said in my talk, IE 10 didn’t have time to update to the new syntax before it came out last fall, so it uses the syntax that first came out in 2011, with the -ms- prefix tacked on.

Fortunately, Flexbox basically works the same way between IE 10 and the current syntax; it just uses some different property and value names. To help you keep track of the differences, I quickly created this table today comparing the current, standard-to-be syntax with the 2011 syntax that IE uses. This is not meant to be some comprehensive, precise reference, just a quick and dirty cheat sheet, but hopefully it will be useful to you (and me) someday. (more…)

CSS3 Layout presentation at In Control Orlando

Posted by & filed under Articles.

Today I spoke at In Control in Orlando on CSS3 Layout. For a decade we’ve been using floats for creating CSS layouts, and while they’re still the best choice for creating most multi-column designs, we’ve all been frustrated by their quirks and limitations. So in this presentation, I talked about some of the new and exciting CSS layout techniques that are either working right now, right around the corner, or a little ways down the road. I focused on how Grid Layout and Flexible Box Layout (aka Flexbox) will be able to be used in the future to create layouts, but also how to use Flexbox in practical ways as a progressive enhancement technique for the layouts you’re crafting today.

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

CSS3 Layout (PDF, 2 mb)

CSS3 Layout Demos

I showed a few examples of how to use Grid Layout and Flexible Box Layout and wanted to share my demo files with you so you could poke around in the code  if you like. The last two demos have fallback CSS in place so that they still look fine in other browsers; it was not part of my presentation to do that with the first two demos.

(more…)

People with disabilities use mobile devices, too

Posted by & filed under Articles.

I think we web designers know by now that lots of people are going to be using the sites we create on mobile devices. But not everyone knows that lots of these people have a disability. That’s why I was glad to see preliminary results of a survey by the Wireless RERC (Rehabilitation Engineering Research Center) of wireless use by people with disabilities. Their survey of 452 people with a disability found that 92 percent owned or used a wireless device. Here’s the breakdown of those devices:

Smartphones were the most common device owned or used, with a majority of respondents (53%) reporting owning one of these devices. Regular “feature phones” were owned or used by about a third of the respondents (32%). Somewhat fewer respondents (27%) reported using a tablet. … These results generally mirror the rates of ownership and use of wireless devices reported for the general population by the Pew Internet and American Life project, whose research shows that 45 percent of Americans own smartphones, and 25 percent own tablets.

Source: SUNspot – Use of Wireless Devices by People with Disabilities (PDF), January 2013

You can read the full report (only three pages, people) for information on the operating systems of these devices and the survey methodology.

So if you’re wondering, “Can people with disabilities even use a mobile device? And do they?”, the answer is a resounding yes. Mobile accessibility matters. Make your mobile apps and sites accessible. You’ll be helping a lot of people if you do.

If you have a disability of any type, please consider participating in Wireless RERC’s ongoing Survey of User Needs. The Paciello Group is also conducting a separate (and much shorter) Mobile Accessibility Survey. Please help us collect data that will help web and mobile developers make web sites and apps that better meet your needs.

A redesign is coming

Posted by & filed under Announcements.

Last April 2, I got called to jury duty for the first time in my life. (Smart of them not to call us in on April 1, don’t you think?) I thought I would be done in a day, but ended up on the jury for a first-degree murder and kidnapping trial, and the whole thing lasted five weeks. I had some down time during the trial due to the long lunch breaks and occasional banishments from the courtroom for the lawyers to argue about secret law-y things, so I started working on a redesign of my site in bits of time that I had.

Actually, perhaps “started” is the wrong word; I may have started my redesign even before then.

The point is, it was so long ago that I can’t even remember when I started, so it’s about time I finish the dang thing already!

So here I am, publicly declaring that in the near future this site will have a new look and be completely recoded behind the scenes. I still have a lot of work to do on it, but I’m hoping I can buckle down and get it done by the end of the month. Feel free to hold my feet to the fire on this, dear reader.

Building Responsive Layouts presentation at CSS Dev Conf

Posted by & filed under Articles, Inspiration.

Today I spoke at CSS Dev Conference on Building Responsive Layouts. (Yes, I’m in Hawaii. Don’t hate me.) It’s an updated version of the talk I gave at Responsive Web Design Summit. I talked about two of the core components of responsive web design: fluid/liquid layouts and media queries. Much of the talk was focused on fluid layout techniques and tips: how to build a basic two- or three-column all-fluid layout, how to create fluid grids with fixed-width margin and padding, how to create a hybrid fixed-fluid layout, and how to calculate nested width, margin, and padding values. I then walked through adding media queries onto the fictional Little Pea Bakery site from my book Stunning CSS3 to demonstrate how to make a layout responsive to a variety of screen sizes and devices. Finally, I covered how to use the viewport meta tag and @viewport CSS rule to make media queries take effect in mobile browsers and how to use conditional comments or JavaScript to work around the lack of support for media queries in IE 8 and earlier.

You can download the slides here, or view them on Slideshare:

Building Responsive Layouts (PDF, 3.6 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.

Responsive web design link hubs

Responsive web design articles, tutorials, and tools

(more…)

Some updates to stunningcss3.com, and a border-image problem

Posted by & filed under Articles.

In my book Stunning CSS3, I linked to tons of resources so my readers could find out more information about the topics I was teaching, see different uses for a given property, and get useful tools to play and practice with. (You can see all the links here.) I have a horrible link addiction. Anyway, I knew that a few of the list of links were going to get out of date quickly, so I said in the book that I’d post a few choice lists as articles on the  book’s companion site, www.stunningcss3.com, and keep them updated. I recently took a pass through the following articles and updated their content:

It seems as though there’s a new source for webfonts every day, so despite my best efforts, I doubt the first two of these articles are comprehensive. If there are any resources that I’m missing that you think should be added, please let me know!

These articles are as much for me as for anyone else, but check them out—I think you’ll find them useful too.

While I was updating the site, I noticed a couple problems with the border image that I use on the list of places to buy the book in the sidebar as well as the featured review on the home page. In Chrome, the color wasn’t displaying in the middle part of the box. This was due to my omission of the keyword fill from the border-image declaration. It used to have no browser support, with all the browsers filling the content area of a box with the middle portion of the border image by default, but now it appears Chrome is correctly dropping out the middle portion. I added the keyword fill to fix this:

.highlight-box {
	border-width: 21px 16px 21px 16px;
	-moz-border-image: url(../img/box.png) 21 16 21 16 fill stretch;
	-o-border-image: url(../img/box.png) 21 16 21 16 fill stretch;
	-webkit-border-image: url(../img/box.png) 21 16 21 16 fill stretch;
	border-image: url(../img/box.png) 21 16 21 16 fill stretch;
}

In Firefox, the middle portion of the border image is displayed, but none of the side edges, so you see a straight sided rectangle. I keep staring at the border-image declaration, trying to see where the mistake is, and I can’t see anything wrong with it. I tried removing fill and stretch, but neither of these variations worked.

I doubt that Firefox has stopped supporting border-image, so I’m sure I must be doing something wrong. I just can’t figure out what. Can someone tell me where I’ve screwed up?

The Future of CSS Layout presentation at Future of Web Design conference

Posted by & filed under Articles.

Today I spoke at Future of Web Design in New York on The Future of CSS Layout. For a decade we’ve been using floats for creating CSS layouts, and while they’re still the best choice for creating most multi-column designs, we’ve all been frustrated by their quirks and limitations. So in this presentation, I talked about some of the new and exciting CSS layout techniques that are either working right now, right around the corner, or a little ways down the road. I talked about how to use not only inline-block and table-cell display, but also how to use the Flexible Box Layout module in practical ways as a progressive enhancement technique for the layouts you’re crafting today.

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

The Future of CSS Layout (PDF, 2 mb)

Flexbox Demos

I showed a few examples of how to use Flexible Box Layout and wanted to share my demo files with you so you could poke around in the code  if you like. Make sure to view these files in Chrome to see the correct layout. The second and third files have fallback CSS in place so that they still look fine in other browsers; it was not part of my presentation to do that with the first demo.

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.
(more…)

Building Responsive Layouts presentation at Responsive Web Design Summit

Posted by & filed under Articles, Inspiration.

Today I spoke at the online conference Responsive Web Design Summit 2012 on Building Responsive Layouts. I talked about two of the core components of responsive web design: fluid/liquid layouts and media queries. Much of the talk was focused on fluid layout techniques and tips: how to build a basic two- or three-column all-fluid layout, how to create fluid grids with fixed-width margin and padding, how to create a hybrid fixed-fluid layout, and how to calculate nested width, margin, and padding values. I then walked through adding media queries onto the fictional Little Pea Bakery site from my book Stunning CSS3 to demonstrate how to make a layout responsive to a variety of screen sizes and devices. Finally, I covered how to fix media query issues in iOS and IE 8 and earlier.

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

Building Responsive Layouts (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.

Responsive web design link hubs

Responsive web design articles, tutorials, and tools

(more…)

Responsive web design presentation at STC Summit

Posted by & filed under Articles, Inspiration.

Today I spoke at the STC Summit in Chicago (my hometown) on CSS3, Media Queries, and Responsive Design. It’s the latest evolution of the talk I last gave at indieconf last November. 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, from small mobile devices to large TVs.

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

CSS3, Media Queries, and Responsive Design (PDF, 1.3 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…)

Where I’ve been, where I’m going

Posted by & filed under Announcements.

I’ve been very quiet on Twitter and email lately because I had jury duty from April 3 to May 8. (It was a murder and kidnapping trial. Not fun!) I was supposed to speak at Future Insights Live (FILive) the first week of May but was forced to cancel due to my jury service, and since you’re not supposed to talk about being on a jury while you’re on it, I couldn’t even let people know this to apologize in advance! (Other than the conference organizers—I did notify them and tell them how sorry and disappointed I was.) So now that I can talk about it, let me apologize after the fact: If you were expecting to see me at FILive, I’m very sorry I couldn’t be there. I’ve never had to cancel a speaking engagement before and wouldn’t have done so this time if I weren’t forced to.

Hopefully, you’ll be able to come see me speak at Future of Web Design (FOWD) this fall instead. I don’t have many details right now, but the plan is to give the same presentation on “The Future of CSS Layout” at FOWD, since the Carsonified folks graciously agreed to let me switch from FILive to FOWD. I’ll share more details when I have them!

In the meantime, I’ll be speaking in just a couple weeks (May 23, to be exact) at the Society for Technical Communication Summit in my home city of Chicago. The presentation is on one of my favorite topics: media queries and responsive design.

View more posts: