CSS3 book launch event

Posted by & filed under Announcements.

In a few hours I’ll be speaking at the online CSS3 Book Launch on “Real-world CSS3.” I’ll be talking about ways CSS3 can reduce your development times, decrease page loading times, improve usability, and increase the adaptability of your pages to different devices (including iPads, iPhones, and Android smart phones). I include a case study of a real site’s loading time and appearance before and after CSS3. I also talk in-depth about the example site from Stunning CSS3 that uses media queries to improve its appearance and usability at different screen sizes.

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

Real-world CSS3 (PDF, 2.3 mb)

Slides always make more sense with the person talking over them, so I hope you’ll register for the free event and come see me live! Jason Cranford Teague will also be speaking about a variety of cool CSS3 stuff related to his book CSS3 Visual Quickstart Guide. Finally, Peachpit is giving away a bunch of copies of our books. It’s a great chance to get your questions about CSS3 answered and possibly score a new book as well. It’s today from 3 pm to 5 pm Eastern time, but if you can’t make it then you can still register and watch the recording later.

Here are several links to related resources that I couldn’t put in the slides but which you might find useful.

Beginner CSS3 Articles

(more…)

Free samples of Stunning CSS3

Posted by & filed under Announcements.

Have you checked out the companion site for my new book Stunning CSS3: A Project-based Guide to the Latest in CSS? There’s a new addition there: two free sample PDFs with extensive excerpts from Chapter 2 and Chapter 6.

Chapter 2 is titled “Speech Bubbles” and it teaches you exactly that: how to make speech bubbles with pure CSS and no images. The excerpt covers word-wrap, generated content, border-radius, and HSLA/RGBA for semi-transparent backgrounds. The rest of the chapter covers linear-gradient, box-shadow, text-shadow, and transform.

Around the same time I was writing this chapter, Nicolas Gallagher posted an excellent demo on creating speech bubbles with CSS3 too, which I saw later. It’s definitely worth checking out as well. Great inspiration.

Chapter 6 is titled “Different Screen Size, Different Design” and teaches you how to restyle an entire page layout to work with different screen sizes using media queries and multi-columns. You can see the example site used in chapter 6, as well as other real web sites using responsive layouts, at my blog post “Examples of flexible layouts with CSS3 media queries.”

If these samples whet your appetite, you can also see a brief table of contents, images of some of the book’s pages, and links to related resources. And of course, if you’d like to buy the book, there are links to a number of sources in the sidebar of the Stunning CSS3 site.

Learn away!

Examples of flexible layouts with CSS3 media queries

Posted by & filed under Articles, Inspiration.

In my CSS3 presentation that I’ve given several times over the past year, the part that seems to impress the audience the most is my demonstrations of media queries. I’m with them. I think media queries are perhaps the most useful and exciting piece of all the great new stuff that’s new to CSS3.

While creating effective, attractive, flexible layouts that adapt to the user’s screen size has always been possible, media queries add another layer on top of flexible layouts to make them even more adaptable to an even wider range of sizes, allowing you to really fine-tune the experience for even more users. Media queries allow you to selectively feed styles based on the characteristics of the user’s display or device, such as how much width is available in the viewport, whether it’s in portrait or landscape mode, or whether it can display color.

My demonstration of media queries is the fictional Little Pea Bakery site, created for my book Stunning CSS3: A Project-based Guide to the Latest in CSS. Here’s how it looks for most users (shown here at 990 pixels wide):

The "default" layout seen by most users.

It’s a liquid (also known as fluid) layout so it can adapt to the user’s screen size, but the design doesn’t look as good and isn’t as readable when the viewport width is very narrow or very wide. I used media queries to solve this problem. Here’s how the page looks over 1200 pixels wide:

The layout for wide screens (over 1200 pixels) adds a third column.

(more…)

Adobe MAX slides and resources

Posted by & filed under Announcements, Articles.

I just finished speaking at Adobe MAX on “Designing with CSS3 Effectively & Efficiently,” the latest iteration of the talk I gave at Web Directions USA, the CSS Summit, and ConvergeSE. I talked about how CSS3 is about more than making things look pretty (though it’s really good at that too). Many CSS3 techniques can reduce your development times, decrease page loading times, improve usability, and increase the adaptability of your pages to different devices (including iPads, iPhones, and Android smart phones). I showed examples of the pieces of CSS3 you can add to your web sites right now and how they might benefit your projects in tangible ways. I included a case study of a real site’s loading time and appearance before and after CSS3, plus an example page built using media queries to improve its appearance and usability at different screen sizes.

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

Designing with CSS3 Effectively & Efficiently (PDF, 3.3 mb)

Here are several links to related resources that I couldn’t put in the slides but which you might find useful.

Beginner CSS3 Articles

(more…)

Web Directions USA slides and resources

Posted by & filed under Announcements, Articles.

I just finished speaking at Web Directions USA on “Effective & Efficient Design with CSS3,” the latest iteration of an the talk I gave at the CSS Summit and ConvergeSE. I talked about how CSS3 is about more than making things look pretty (though it’s really good at that too). Many CSS3 techniques can reduce your development times, decrease page loading times, improve usability, and increase the adaptability of your pages to different devices (including iPads and iPhones). I showed examples of the pieces of CSS3 you can add to your web sites right now and how they might benefit your projects in tangible ways. I included a case study of a real site before and after CSS3, plus an example page built using media queries to improve its appearance and usability at different screen sizes.

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

Effective & Efficient Design with CSS3 (PDF, 2.9 mb)

Here are several links to related resources that I couldn’t put in the slides but which you might find useful.

Beginner CSS3 Articles

(more…)

Highly Maintainable, Efficient, and Optimized CSS

Posted by & filed under Announcements, Articles.

Earlier today, I gave a presentation at Think Vitamin’s HTML & CSS Online Conference entitled “Highly Maintainable, Efficient, and Optimized CSS.” I tried to squeeze as many tips as I could in to cover how to create CSS that is well organized and readable for teams to work on together as well as you to maintain later, while still keeping efficiency in mind. The slides are up on Slideshare, but you can also download them in their full glory here:

Highly Maintainable, Efficient, and Optimized CSS (PDF, 1 mb)

Here are links to just a few of the hundreds of related resources I could link to!

Maintainability

(more…)

CSS Summit 2010 slides and resources

Posted by & filed under Announcements.

I just finished speaking at the CSS Summit online conference. Well, technically, I’m writing this before I spoke, so that the post can be up as soon as my talk is done. Sneaky, huh? Anyway, my presentation was titled “Effective & Efficient Design with CSS3,” an extension of the talk I gave at ConvergeSE.

If you’d like to check out the slides, here they are:

Effective & Efficient Design with CSS3 (PDF, 1.7 mb)

Here are several links to related resources that I couldn’t put in the slides but which you might find useful. (more…)

The CSS Summit is near

Posted by & filed under Announcements.

Only a few days left until the 2nd annual CSS Summit online conference on July 28. I’m excited about the lineup, which includes:

  • My great friend Stephanie (Sullivan) Rewis speaking about great tools to make CSS3 development easier and how to make many CSS3 effects work in a wider variety of browsers and devices.
  • Nicole Sullivan explaining how she optimized Facebook’s massive CSS file. (I’m so curious to hear about this!)
  • Estelle Weyl teaching how to develop CSS3 and HTML5 for iPhones, iPads, and Android devices. (It’s awesome how many new techniques you can use.)

Plus five more sessions (including my own on ways to improve efficiency and usability with CSS3). Want to “attend”? I have a couple options for you.

One, you can still buy a ticket for $179, plus get 10% off by using discount code CSSGILLENWATER when you sign up.

Two, you can win a ticket! To enter the contest, tweet “I want to go to the #CSSsummit on July 28. Follow @zomigi and retweet to win. Learn more at http://bit.ly/csZgT9.” Do this by this Sunday morning at 8 am Eastern US time. I’ll pick the winner immediately afterward and notify him or her through Twitter (which is why I need you to follow me).

ConvergeSE 2010 and upcoming conferences

Posted by & filed under Announcements.

On June 26 I spoke at ConvergeSE in Columbia, SC. It was a small conference, but had some really wonderful speakers. Unfortunately, I was sick with a bad cold, so I missed a few talks and didn’t get to hang out with everyone afterward. But the talks I did hear were quite inspiring. I just love going to presentations that get you all excited about the work that you do. Go to the ConvergeSE site to view speakers’ slides and, eventually, video of the actual presentations.

My presentation was titled “Improving Efficiency and Usability with CSS3.” I talked about how CSS3 is about more than making things look pretty (though it’s really good at that too). Many CSS3 techniques can reduce your development times, decrease page loading times, improve usability, and increase the adaptability of your pages to different devices (including iPads and iPhones). I talked about which pieces of CSS3 you can add to your web sites right now and how they might benefit your projects in tangible ways.

(more…)

Announcing my new book, Stunning CSS3

Posted by & filed under Announcements.

I’ve already written a book and been pregnant, and in some ways they’re very similar experiences. (Besides the fact that they both take 9 months. Seriously, it seems like every web design author I know took about 9 months to write his or her book. Weird, huh?) You get yourself into the situation on purpose, but somewhere through you ask yourself why you’re putting yourself through so much misery. But you’re excited, and you deal with all of the discomfort and stress, and at the end there’s this awesome creation you have to show for all your work. And you say, that was great, really glad I did that, don’t want to do it again any time soon. But as time goes by you forget, and you tell yourself it wasn’t so bad, and you start thinking you want to do it again.

So, I’m not pregnant again, but I am working on my second book. And I’m not even miserable! It’s called Stunning CSS3: A Project-based Guide to the Latest in CSS. (more…)

View more posts: