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?