zomigi.com » speaking

Media queries presentation at indieconf

Zoe Gillenwater — Sat, 19 Nov 2011 16:30:40 +0000

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 inspiration

Mediaqueri.es gallery
My media query inspiration bookmarks on delicious and Gimmebar
My liquid layout inspiration bookmarks on delicious and Gimmebar
“Examples of flexible layouts with CSS3 media queries” by me

Web accessibility presentation and resources

Zoe Gillenwater — Tue, 15 Nov 2011 17:15:03 +0000

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.

WCAG 2.0

“How to Meet WCAG 2.0” customizable quick reference from the W3C
“WebAIM’s WCAG 2.0 Checklist“

WAI-ARIA

HTML5 and accessibility

HTML5accessibility.com created by The Paciello Group
“JAWS, IE and Headings in HTML5” by Jason Kiss, Accessible Culture

CSS and accessibility

“Clip your hidden content for better accessibility” by Theirry Koblentz on Yahoo! Accessibility Lab’s Library
“CSS in Action: Invisible Content Just for Screen Reader Users” by WebAIM
“Better for Accessibility” by Derek Featherstone

Creating accessible content

“Text alternatives for images: a decision tree” by 4Syllables
“Accessibility for web writers” article series by 4Syllables
“Using the HTML title attribute” by Steve Faulkner, The Paciello Group
“HTML5 Accessibility Chops: form control labeling” by Steve Faulkner, The Paciello Group
“Making Compact Forms More Accessible” by Mike Brittain on A List Apart
“‘Skip Navigation’ Links” by WebAIM
“Detecting if images are disabled in browsers” by Steve Faulkner, The Paciello Group
“Accessible JavaScript: Beyond the Mouse” by James Edward on Sitepoint
Black Widow Web Design’s Color Contrast Analyser tells you if contrast is too high for people with dyslexia
Color Tools links to a bunch of traditional color contrast analyzer tools

Screen readers

NVDA: free, Windows
VoiceOver: included on Mac and iOS
JAWS: free trial version
Window-Eyes: free trial version
“Screen Reader User Survey #3 Results” by WebAIM

CSS3 book launch event

Zoe Gillenwater — Tue, 25 Jan 2011 14:39:18 +0000

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

Benefits of CSS3

Media Queries

Flexible Layouts

Performance

Finally, if you’re interested in learning more about my book, Stunning CSS3: A Project-based Guide to the Latest in CSS, head on over to www.stunningcss3.com. That’s where the example files for the media query bakery site I show during my presentation are hosted, as well as a sample excerpt from chapter 6 that explains how to build the media queries for that site.

Adobe MAX slides and resources

Zoe Gillenwater — Tue, 26 Oct 2010 22:40:26 +0000

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

Benefits of CSS3

Media Queries

Flexible Layouts

Performance

Finally, if you’re interested in learning more about my book, Stunning CSS3: A Project-based Guide to the Latest in CSS, head on over to www.stunningcss3.com. That’s where the example files for the media query site I showed during my presentation will eventually be hosted. For now, check out the CSS used on the site to see a wide variety of CSS3 techniques in use.

Web Directions USA slides and resources

Zoe Gillenwater — Thu, 23 Sep 2010 00:43:35 +0000

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

Benefits of CSS3

Media Queries

Flexible Layouts

Highly Maintainable, Efficient, and Optimized CSS

Zoe Gillenwater — Tue, 31 Aug 2010 15:44:32 +0000

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

Resets

Sprites

Performance

CSS compression

CSS Summit 2010 slides and resources

Zoe Gillenwater — Wed, 28 Jul 2010 17:30:42 +0000

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.

Beginner CSS3 Articles

Benefits of CSS3

Media Queries

Flexible Layouts

The CSS Summit is near

Zoe Gillenwater — Fri, 23 Jul 2010 20:53:03 +0000

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

Zoe Gillenwater — Thu, 08 Jul 2010 16:39:12 +0000

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.

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

Improving Efficiency and Usability with CSS3 (PDF, 1.4 mb)

Here are just a few links to related resources that I couldn’t put in the slides but which you might find useful:

I’ll be giving an expanded version of this presentation at both the 2nd Annual CSS Summit online conference on July 28 and at Web Directions USA in Atlanta on September 24.

Registration for the CSS Summit is only $149, but you can get 10% off by using the discount code CSSGILLENWATER when you sign up.

Thoughts on my first time at SXSW

Zoe Gillenwater — Fri, 26 Mar 2010 18:51:41 +0000

I’ve been back from my first SXSW for a week now, and I have to say that overall I had a really great time!

I’ve heard a lot of complaining about how SXSW Interactive isn’t what it used to be, it’s too big, you can’t run into your friends, you can’t get into parties, etc. Since this was my first time, I have nothing to compare it to, but I can say that I was still able to meet a lot of the people I wanted to and make some really great connections with smart, talented people in the web design industry. My situation is a little bit different than most people who attend SXSW, however; I’m an author and speaker in addition to being a working web designer, so I think I do stand to get work in the writing and speaking areas of my career as a result of networking at SXSW. If I wasn’t an author and speaker, though, I don’t think SXSW would have been as beneficial in building my professional network. I do see how it’s both too insular and big for being as effective at that as other conferences or events could be.

The first couple days, I had a hard time getting into any sessions—or at least any I really cared about. I wasn’t terribly impressed with the quality of the presentations I did see and didn’t feel like I was learning much. But after the first couple days, I finally got into some really excellent sessions that gave me new ideas for things to try in my projects and career. I’ve felt like I’m in a bit of rut lately, since I haven’t had much client work to do, and have felt discouraged about my career. But after seeing some of these great sessions, I feel re-energized about what I do, the value it has, and where I can take it. That’s probably the most valuable takeaway from SXSW for me, so if you’re trying to decide whether to go to SXSW next year, that may be a good reason to decide yes.

My own workshop, “CSS3 Design with HTML5,” went pretty well, I think. I got many really nice compliments on it from people who were there, as well as some helpful feedback that I think will improve some of my upcoming speaking engagements. I assume that a podcast of it will be up on the SXSW site at some point, but I haven’t been able to find it yet. I’ll let you know! In the meantime, you can view the demo site for the workshop at www.sxswcss3.com.

I had a lot of fun going out to bars and parties and such, but I also managed to squeeze in a tiny bit of Austin tourism. On my last evening, I went down to Holy Cacao for some cake balls. The peanut butter ones were amazing. The chocolate ones were quite good too. The others I tried were rather unsweet for something that I expected would taste incredibly indulgent. But I’m definitely glad I went. I desperately wanted to try their s’mores, but didn’t have time. Next time… (Side note: The owner and her boyfriend were extremely nice—the boyfriend even gave me and my friend a ride back downtown when our cab never showed up!) After going to Holy Cacao, I went to the Congress Avenue bridge to watch the famous bats emerge at dusk. Very cool.

Here are a few tips I would give to SXSW newbies, just based on my own limited experience:

Stay at a hotel really close to the convention center. Yes, you will pay more, but I think it’s worth it. I can’t imagine having to take a shuttle or other type of transit back to some distant hotel multiple times a day. It was nice being able to quickly go back to my hotel in the middle of the day to rest, grab a snack, or drop off my laptop.
If cost is an issue for you, leave for home on Tuesday, not Wednesday. There really wasn’t much going on Tuesday, since so many people leave that day and everyone who is still there is exhausted from partying all weekend. It felt really anti-climatic being there on Tuesday. I should have saved myself that one extra night of hotel cost and left a day early.
Wear comfy shoes.
Pack a tiny flashlight so you can sneak into your room at 4am and get ready for bed without waking up your roommate.
Buy some food (preferably healthy stuff) the first day you’re there so you don’t have to eat out every single meal. Bring a water bottle along with you.
The sessions on the first two or three days can be really busy, and the popular ones have lines, with not everyone being able to get in to see them. Get to these 15 minutes early to ensure yourself a spot.
If you want to go to the parties, plan to get there really early, and you may still have to wait in line. I went to almost no parties, but instead had a really fun time hanging out at bars and restaurants with my friends and new people I had met. We had some really great conversations, both geek and non-geek related, and I had a great time. Thanks, people who hung out with me! You know who you are.
Talk to everyone. Try to limit your time sitting silently behind your screen. I’m an introvert, so it was a little hard for me to strike up conversations with random people standing around me, but I did it and I’m so glad I did. Again, I had some fantastic conversations, both ones that were just plain enjoyable and a couple that might actually help my career.
You can’t go to everything, so try to prioritize the things that you won’t have an opportunity to do at any other time. For instance, a certain panel may sound really interesting, but if you have the chance to go to lunch with some new people and talk about interesting and career-benefiting stuff, do that instead. You can always watch or listen to the panel later.

Final fun fact: I thought North Carolina (where I live) was obsessed with pork. Turns out Texas is far more obsessed. There was bacon and/or sausage in everything and many signs gleefully celebrating this fact. I have finally eaten bacon chocolate chip cookies. I also ate this delicious, ridiculous monstrosity involving a bacon-laced waffle cone filled with guacamole, pico de gallo, beef taquitos, and tortilla chips. Texas, I salute you.

zomigi.com » speaking

Media queries presentation at indieconf

Media query articles, tutorials, and tools

Dealing with IE 6-8 support

Fluid/liquid layout

Media query inspiration

Related Posts:

Web accessibility presentation and resources

Top sites on accessibility

WCAG 2.0

WAI-ARIA

HTML5 and accessibility

CSS and accessibility

Creating accessible content

Screen readers

Related Posts:

CSS3 book launch event

Beginner CSS3 Articles

Benefits of CSS3

Media Queries

Flexible Layouts

Performance

Related Posts:

Adobe MAX slides and resources

Beginner CSS3 Articles

Benefits of CSS3

Media Queries

Flexible Layouts

Performance

Related Posts:

Web Directions USA slides and resources

Beginner CSS3 Articles

Benefits of CSS3

Media Queries

Flexible Layouts

Related Posts:

Highly Maintainable, Efficient, and Optimized CSS

Maintainability

Resets

Sprites

Performance

CSS compression

Related Posts:

CSS Summit 2010 slides and resources

Beginner CSS3 Articles

Benefits of CSS3

Media Queries

Flexible Layouts

Related Posts:

The CSS Summit is near

Related Posts:

ConvergeSE 2010 and upcoming conferences

Related Posts:

Thoughts on my first time at SXSW

Related Posts: