If it wasn’t for IMG, a once non-standard bit of HTML proposed by Marc Andresson and put into the relic Mosiac browser, we probably would still be buying encyclopedias on CD-ROMS today.

In that initial proposal, Andresson cited Xbm and Xpm as image formats worth supporting.

Thankfully, browsers have adopted more robust image file formats since then.

Many formats have indeed come and gone, but there are a few we really deal with most of the time: PNG, GIF and JPEG.

But there’s now a newcomer.

WebP Image Format

Google announced the creation of a new image format, WebP to join their ranks as standard methods for delivering images on the web.

WebP’s goal is to surpass compression file sizes of photographs–a role usually reserved by JPEG. But this JPEG clone has a special talent: It animates!

So, in essenece, the WebP image format is a merely an evolution of the web graphic, A hybrid of GIF and JPEG file format.

As modern browsers expand onto more and more onto mobile devices with high resolution displays, the web doesn’t need GIF and JPEG copycats.

The Problem with Mobile and Images

Problems I discussed when I wrote about the HiSRC jQuery plugin when dealing with a then-hypoethical problem of sending an inline image to an iPad with retina display on a 3G network:

• Do you deliver the low-resolution, mobile friendly version?
• Or do you let the iPad 3 have the larger version, but with the longer download time?

Solutions involve sending a serious amount of JavaScript and speed detection tests to devices to be sure of the network speed.

While I think JavaScript solutions like HiSRC are bandaid on a serious issue, I think it’s better than any proposed alternative.

More Images, More Markup

There’s also an idea of adding another HTML element such as PICTURE as demonstrated in a JavaScript polyfill.

Instead of one IMG element, a web builder is expected to construct several additional lines of code at least one additional line for each device and/or resolution they need to support.

If Facebook adds 220 million photos per week and flickr 100 million photos per month, those additional lines of code add up quickly.

What the web doesn’t need isn’t more if-else HTML statements.

What the web needs is a smarter image format: A responsive image format.

Responsive Image Format

The web needs an image format that, when asked by a browser the server would deliver the right image that contains the right resolution.

We need an image format that can work in tandem with server and browser to determine the approprirate resolution, pixel

The interesting part is there is already an image file format that does just that.

It’s called FlashPix.

In a FlashPix file, multiple versions or resolutions of an image are stored in a container.

Which image is delivered by a program like a web browser is a determination that can be made by a virtual handshake between the browser and the web server.

Why Use This Method?

I’m not saying FlashPix is the solution. I am saying a similar approach should be followed.

For one, it allows the continued use of the IMG element which is ingrained into the bones, the very marrow, of the Web.

Secondly, there’s a simple reason why strict coding styles of XHTML was abandoned and loose HTML4 coding practices were instilled into HTML5: 95% of web sites don’t validate.

Asking web designers, bloggers, and non-techies to create multiple versions of their images in order to appease every Android, iOS device and desktop browser seems not only like a very non-standards approach, it’s also not a very practical one.

Content producers that work with the web at least a little bit know the fundamental one-to-one aspect when it comes to publishing images on the web:

One IMG element somewhat coded correctly results in one image showing up in the browser.

If we go with a solution born from the kin of VIDEO and AUDIO elements–where we do need to balance differing file supoprt due to the browser venders’ turf wars and licensing issues, I believe we surrender a bit of the Open Web mentality for not much gain.

Another issue is that with a method for inserting images with additional markup means there needs to be widespread change in WYSIWYG editors, their respetive tool bars in Content Management Systems, updated old web pages.

That simply is not going to happen. You will need something on mini-Y2K levels to get companies and organizations to start spending that sort of capital to fix the issue.

And while I think the retina display is pretty cool, I don’t think this issue rises to that level of concern.

Let Designers Design

If given a choice, I believe web designers would rather export one piece of artwork from Fireworks, Photoshop or whatever their image editor of choice happens to be and let the software compile multiple resolutions into one container file that can then be stored on a server and referenced via an IMG element in an HTML page.

IMG got us this far and it hasn’t failed us yet.

Rather let’s look to make image formats work smarter, work better.

It’s always good to have a mission statement of sorts when starting out on a endeavor.

Our mission for this podcast is to interview the best and brightest in the industry.

While the show might be new, we’ve already spent time reaching out to great people to talk about hot web design and development topics:

In Episode No. 1 of The Non Breaking Show, Dave and I interview Ethan Marcotte on diving deep into Responsive Web Design.

In Episode No. 2 of The Non Breaking Show, Dave and I interview Paul Irish on web education, HTML Boilerplate, Modernizr and future of web tools.

In Episode No. 3 of The Non Breaking Show, Dave and I interview Emily Lewis on Microformats, Schema.org, and freelancing.

Also, we’ve had our first-ever crossover show with Chris Coyier and Dave Rupert from the Shop Talk Show.

First, catch the first parter over Shop Talk Show No. 8 with Dave McFarland, Chris Enns and myself.

Then in a very special Episode No. 4, we talk with Chris Coyier and Dave Rupert about CSS pre-processors, Git and Github.

Listen and subscribe to The Non Breaking Show.

That is until I come across the idea of adaptive images in responsive web design.

In Mat “Wilto” Marquis’article, he reviews the trials behind the Boston Globe redesign project to get images served in an adaptive manner — meaning that the proper, optimized image is delivered to the appropriate device based on the following factors:

• screen resolution
• bandwidth
• browser window width

The problem with trying to determine the best image to send to the browser is these kinds of factors can be independent of each other.

And that wherein lies the problem: knowing the value of one item, like screen resolution, doesn’t mean you get the full picture of the user’s browser experience.

Tiny Displays

First, the iPhone 4 introduced the notion of retina display (640×960 resolution at 326 pip). Before the iPhone 4, one might have gotten away with letting just the browser width. That roughly translate to the axiom:

The smaller the screen, the slower your internet connection.

However, that’s not the case as displays are becoming great at compacting lots of image data in a small screen.

Thought Experiment

Let’s think of this problem in another way with the following thought experiment:

The iPad 3 that is rumored to come out in the Spring of 2012 will have retina display that rivals most desktop displays and will no doubt have 3G models.

Also, since the screen of the iPad is going to be presumably the same dimensions as the iPad 2, the browser “width” is going to be the same.

So, realizing that the browser width isn’t helpful and if a site visitor is surfing the web on an iPad 3 with 3G, which image do you deliver on your site?

• Do you deliver the low-resolution, mobile friendly version?
• Or do you let the iPad 3 have the larger version, but with the longer download time?

Measure a Few Additional Times, Cut a Couple More

If you are building a complex site the size of the Boston Globe, you can follow their lead.

The best solution that’s agreed by most current solutions is to set “mobile friendly” images as the value for SRC attributes for image elements.

Then set the URL to the high-resolution image as a value an HTML5 DATA- attribute.

<img src="images/mobile-size.jpg" data-fullsrc="images/desktop-size.jpg"/>

Then setting screen-size in a browser cookie, you can use server-side requests to deliver the appropriate image to the right browser.

A variation of the solution called, aptly, Adaptive Images in HTML aims to keep HTML pure while utilizing PHP, JavaScript and modying .htaccess files.

If you aren’t into hacking .htaccess files to serve image files, you can look into a cloud-based service for the solution for some help.

The folks closest to this at Sencha have just a solution at src.sencha.io for scaling images, but not for replacing high-resolution images for the site visitor when it’s appropriate.

If the service added a feature of checking and delivering the appropriate image in addition to context aware images, I think the folks at Sencha would have a great hit on their hands.

And they might have another revenue stream along the same lines as people that rent out web fonts.

Back to Old School

If you are working on a smaller scale web site, I humbly recommend a solution I’ve been working on called HiSRC.

It’s a twist on the old school LOWSRC IMG attribute, which would render a lower file size image first while a larger file size image would appears in its place later.

Back to the future, we set in the markup and leave the lower file size image.

However, if the HiSRC plugin detects fast network or high resolution, then a high resolution image takes the image’s place.

The browser loads the low-resolution image first with an old-fashion IMG SRC attribute.

Then the HiSRC jQuery plugin checks the resolution of the browser.

If the browser resolution is wider than the default 640 pixels width, then the plugin overwrites the low-resolution image for the higher resolution image.

Whereas, if mobile bandwidth is detected (like 3G), the low-resolutions stay in place thanks to the new navigator.connection first seen in Android 2.2.

The downside is that site visitors with higher resolutions get the tax or burden of having to download two images instead of one.

For small projects or small scale projects where PHP or using .htaccess isn’t possible or too much of a burden, then I think that’s a fair price to pay until the future catches up with us.

Escape with All Alive (Except the Klingons)

Of course, there are ways to workaround the issue of delivering mobile friendly images without having a web builder be concerned about their visitor’s browser window, resolution or bandwidth.

One way is to place images in background of HTML elements and set background-size: auto; to have them scale as the element resizes. As the container element expands, so does the image in the background.

Another way is to work with Scable Vector Graphics (SVG). SVG has made great leaps in browser support. In fact, in modern browsers support inline SVG images natively. Why we aren’t talking more about SVG these days I don’t know as it seems like manfiect desitny for responsive web design.

If you want to wait a bit longer, there might be support for a “new” image format that serves up multiple resolution. This has already been addressed in the Flashpix image format, but has yet to be adopted for web delivery.

NOTE: For more on adaptive images and responsive web design, check out my new podcast The Non-Breaking Space Show with David McFarland and Chris Enns where we interview the one-and-only Ethan Marcotte.

Hosted by Dave McFarland and myself, we strive to dive deep into current topics

Our inaugural guest was the delightful Ethan Marcotte to talk about Responsive Web Design, both the web development principle and his book of the same name.

He frequently speaks on web standards and responsive web design at conferences and tweets about it @beep and @rwd.

Below are the links & notes talked about during the show:

• EthanMarcotte.com
• unstoppablerobotninja.com
• http://css1k.com/
• http://www.csszengarden.com/
• http://astore.amazon.ca/
• http://happycog.com/
• http://www.scottandrew.com/
• http://www.zeldman.com/
• Ethan’s initial 2010 article on responsive web design
• The DAO of web design
• http://clagnut.com/
• http://bostonglobe.com/
• http://clearleft.com/
• http://www.markboulton.co.uk/
• http://www.fivesimplesteps.com/
• Khoi Vin
• Ordering Disorder
• Quirksmode Blog
• Quirksmode Mobile
• Quirksmode: Combining meta viewport and media queries
• Respond.js
• Filament Group: Experimenting with Context Aware Image Sizing
• Jason Grigsby
• Adaptive-images.com
• A List Apart: A Simpler Page
• Quirksmode: CSS3 Background Compatibility Table
• Josh Clark
• JQuery Mobile

Below is a list of bands that are playing the event. Bands and musicians that are on Spotify are linked to their respective pages on the online music subscription service.

Thursday

• Halaska
• The Tits
• Three Leaf
• GoGoBeware
• Final Exam
• BOY
• Eleven:Eleven

Friday

• Hello Wheels
• Les Rav
• MaryAnn & The Revival Band
• The Naturals
• Wild Moccasins
• The Lemurs
• Patrice Pike Band
• Mother Falcon
• The LaRues
• Bus Stop Stallions/Jam Skaters
• T Bird and the Breaks
• Snapping Chowsky
• Calliope Musicals
• The Sweet Nuthin
• Owl Face
• Space Crazies
• Crash Gallery
• Noise Revival Orchestra Experience
• Burgess Meredith
• Megafauna
• DJ Orion

Saturday

• Megabig
• Stampede Mesa
• Neon Cobra
• Ghostbunny
• Stella Rose
• The Shears
• Sphynx
• Freshmillions
• Little Lo
• UME
• Smoke and Feathers
• Gospel and the Wolf
• Bridge Farmers
• Milk Thistle
• Bethany Bauman
• Guns of Navarone
• 1OYR
• Parking
• Whiskey Shivers
• Shakey Graves
• The Bang Bang Theodores
• SuperLiteBIke

Mobile First

• Make one WordPress theme to rule them all
• Build small, then outwards adding layers
• Progressive enhancement

Coding

• For example, as a default style rule set fonts smaller.
• For screens bigger than 640 pixels, set font-size to 100%
  

Flexible Helpers

• Modernizr
  • Feature detection
  • respond.js
  • html5shiv

• Flexible Media
  • flex slider
  • max-width
  • height: auto
  • FitVids.js

Complex Navigation

• Content first navigation
• Hide menu on small sizes, if Javascript is enabled (i.e, smart phone)
• Use simple jQuery slideToggle menu
• Might be some accessibility issues

Hover Navigation Approach

• Drop downs
• Multiple level
• Using click events
• FlexNav

Images in Responsive Design

• Keep number of images, file sizes low
• Delivering low-resolution images for mobile device is tough
• Adaptive images
• jQuery plugin HiSRC 
• There are challenges.
• With retina displays and use of mifis, screen width is not always true representation of bandwidth
• Ultimate goal is to download only one image, rather than two
  or more

Talk to your audience

• Directly address users
• Ask questions of your users, expect that they will have questions
• Respond to their questions, comments audience members make
• Highly engage with social tools

Getting social

• Get on all networks, dominate one
• Share content from others, don’t share just your own stories
• Even share content from competitors
• Respond, respond, respond to users

Polling your audience

• PollDaddy
• WP-Polls

Featuring user content

• Widgets
• Comment of the day
• Twitter/social
• No forums!

Setting up user’s identity/influence

• Profile pages
• User pics
• Do light Gamification such as Cubepoints, Bunchball

Running contests

• Prizes don’t matter like using conference schwag, but are nice when they do.
• Mix it up the type of contests from retweeting a message or leaving a message on a blog post
• Example: 25 Days of Tegra
• #HackTheNews was a way for users to re-write the headline and tweet it out

Do things with your users

• WP_User_Query allows you to go through your users based on user’s criteria
• Pull people’s information from the WP backend to an extranet for user profiles using user meta function
• Mix it up

Podcast Plugins

• Blubrry
• Podpress

Social Media Plugins

• Social from MailChimp
• Analytics 360 from MailChimp
• AddThis
• ShareThis

Developer Plugins

• Regenerate Thumbnails
• pTypeConvertor
• Advanced Custom Fields
• Custom Fields
• Options Framework
• Disabler
• WPTwin
• Search and Replace
• xili tidy tags
• Broken Link Checker
• Theme Test Drive
• W3 Total Cache
• Jet Pack
• Gravity forms

SEO

• Yoast

Client-facing Plugins

• Login Logo
• Add Logo to Admin
• Dynamic Widgets
• Simple Page Order
• WP101 - great for WP inclusion to help reduce tech support calls

Content Moderation Plugins

• Disqus
• Intense Debate
• Post2Post

Coming this February, the 2nd Annual In Control Web Design Conference takes place in Orlando—far from Winter’s snowy reach!

After speaking at and attending several conferences, I’m very proud to say that the AIGA Orlando In Control Conference is an entirely different beast of Web design conference.

While SXSW and other conferences have couple of hundreds to thousands of people attend, we limit registration to a hundred people.

With limited enrollment, attendees get an intimate environment to focus like a laser beam on the content.

We’ve curated the content so that, for example, you aren’t getting that HTML5 talk at the end of the conference, for example, when you really needed it at the start to better understand the nature of semantic markup in its relation to CSS3 and jQuery.

Also, by keeping the conference to one-track, we aren’t forcing you to pick between two great speakers that would otherwise be slotted to speak at the same time.

Then at the end of each day, there’s the Wrap-Up Panel.

That’s when that day’s speakers join forces and take any questions from the attendees and even from fellow speakers. (Also, it’s a good time to ask for a design critique of your Web site!)

Giving attendees enough time to learn and ask questions of the attendees is at the core of In Control as sessions run about an hour and 40 minutes long.

This extra time helps keep speakers from feeling rushed (which in turn then makes them actually rushed) in presenting their material and opens up to more opportunity for Q&A. It’s web knowledge and experience in HD.

Just like last year, In Control boasts an incredible line-up:

• Daniel Burka, director of design at Tiny Speck, ex-creative director at Digg
• Mark Trammell, designer reacher at Twitter
• Ethan Marcotte, author of Responsive Web Design
• Aarron Walter, author of Building Findable Web Sites
• Stephanie (Sullivan) Rewis, co-author of Mastering CSS with Dreamweaver
• Greg Rewis, worldwide evangelist for Adobe
• Kimberly Blessing, co-author of Adapting to Web Standards
• David McFarland, author of JavaScript: The Missing Manual
• Emily Lewis, author of Microfomats Made Simple

And we don’t want to throw you into the streets to fend for yourself!

Thanks to MailChimp’s sponsorship, we provide snacks and lunch on both days. (Over at Environments for Humans, we’re still raving about the chocolate cake from last year’s In Control.)

As for swag, we also want to make sure it’s actually useful to attendees.

Thanks to our in-kind sponsors of O’Reilly, A Book Apart, PeachPit, Apress, and Rosenfeld Meda, your conference swag are Web design books!

Plus, a portion of your ticket goes back to AIGA Orlando to help promote design, mentoring projects and more in the local community.

If you’re serious about Web design and want to leave feeling inspired by some of the best in the business, check out this year’s AIGA Orlando In Control Conference.

And for a limited time, you can get $200 off with early bird pricing!

I’ll see you there!

If you weren’t able to attend one of our conferences, but still would like to get some great Web design and development knowledge on topics like CSS, jQuery, Accessibility and more from people like Paul Irish, Stephanie Sullivan, Ryan Irelan and many others, well, now is your chance!

Get 50% our online conference recordings for the month of December with discount code “MERRYHOLIDAY”!

Head over to each respective online conference page to see more information about the conference and purchase recordings:

• 2nd Annual CSS Summit
• 2nd Annual jQuery Summit
• iPhone iPad Summit
• Accessibility Summit
• UX Web Summit
• Web Optimization & Performance Summit
• Engine Summit 2
• Thomas Myer’s CodeIgniter and MojoMotor Workshops -

Thanks for a great year and have a happy, safe Holiday!

Apple is believed to have created a suite of software to make it easier and cheaper for publishers to create attractive digital versions of newspapers and magazines, with high-resolution photos and videos integrated into articles.

As someone who got their start in newspaper design, it’s an interesting development to see.

The views of the small to medium size newspapers to the Internet has been stand-off-ish, to put it mildly.

Newspapers simply just don’t get the medium. And you can even say that of magazines as well—if you take a look at the failure of the Newsweek re-invention.

When you are talking about careers or reporters, editors, copy editors, supporting staff, etc., it’s understandable that change is feared. Even when you know the change is going to happen, getting off the Titanic in the Atlantic into a tiny lifeboat is a gutsy thing to do.

Now the technology just seems right.

It’s been encouraging of late to see a few beat reporters stepping up and using social media, iPhones (with its HD movies and HDR photo capabilities), etc. to create a more engaging all-around news reporting around the clock and not when it’s just time for deadlines.

As for Apple’s newspaper software, there are a few things Apple needs to do to make it for newspapers to experiment and adopt.

The first two things are: the software needs to be free and the software needs to be as drop-dead easy to use as possible.

Considering Apple is a company with a large cash reserve (thank you, iPod) and known for making very insanely usable products (thank you, iPhone), they might pull it off.

My third concern is that they might not get the workflow of newspaper production. It’s an entirely different beast than what is taught in design schools.

If they approach making newspapers like a Word-clone or a stripped down InDesign app, the project is dead before it even got started.

If they put as much thought as they did into the new Apple TV unit that’s coming out—where they got into how people used the device in their homes, etc.—then again they might pull it off.

One of my main thoughts of the iPad when it first came out was that this is closest to e-paper that we have had that is commercially viable.

So, it makes sense for newspapers and magazines to be in this space and it makes sense for Apple to put content producers on the iPad.

They missed the Internet revolution and are now getting a chance for a front row seat to the mobile medium.

Newspapers are getting a second chance at becoming relevant again.

It’s online and live so you don’t have to travel to miss time away from work or family, but still get front-row seats to speakers and the ability to ask your questions.

Speaking at the iPhone iPad Summit are:

• Jesse MacFayden from Nitobi is talking about PhoneGap,
• David Kaneda, creator of jQtouch, covers his new mobile HTML5 framework, Sencha Touch, for iPad development,
• Alasdair Allan, author of Learning iPhone Programming and Programming iPhone Sensors, speaks on iPhone Face Detection,
• Jonathan Stark, author of Building iPhone Apps with HTML, CSS, and JavaScript, is talking about the iPhone Offline Mode
• Simon St. Laurent, editor at O’Reilly Media, is covering HTML5 Client-side Data Storage
• Suzanne Ginsburg, author of Designing the iPhone User Experience, is presenting on the user experience.
• Author and designer Dan Rubin brings his Mobile Design with CSS3 presentation; and
• Josh Clark, author of Tapworthy, covers his Designing iPhone Interfaces session.

Thanks to the wonderful people at MailChimp for sponsoring the event. (Check out ChimpKit, an Objective-C wrapper for the MailChimp API. )

And when you buy a ticket, attendees get a free O’Reilly ebook on iPhone development book of their choice. (Details on how to claim the ebook will be talked about during the day of the online conference.)

Free Ticket Giveaway

Lastly, I’m giving away a free ticket to the iPhone iPad Summit.

Simply leave a comment for this post, stating your favorite iPhone or iPad app and why. I’ll be picking a winner randomly on Friday morning. Best of luck!

NOTE: Congratulations to Anslsem for winning the free ticket to the iPhone iPad Summit.

After a wonderful introduction by Dave Shea, author Denise Jacobs talked about troubleshooting CSS and set the stage for the day ahead.

With Web typography finally coming of age, Jason Cranford Teague covered where and what’s possible with today’s Web type.

These days the big news has been about CSS3.

Even though the specification is still being written, it’s what is in the browser that matters. And modern browsers like Chrome, Firefox, Opera and Safari are leading the pack with putting these new properties into place.

Zoe Gillenwater covered effective methods for how to bring in CSS3 into modern sites.

Stephanie (Sullivan) Rewis talked about tools to create progressively enhanced sites, code that takes advantage of the new stuff without locking out users running older browsers.

David McFarland, author of so many missing manuals, focused on an in-depth on CSS3 animations. As one attendee noted, Dave could have easily buried the audience with the specification, but instead kept a light, jovial mood throughout a very balanced presentation.

Small and powerful devices in their own right, the iPhone and iPads also have mobile version of Apple’s Safari browser. Estelle Weyl showed us how to sprinkle in CSS3 to create iPhone-like Web apps.

While not directly tied to CSS3, Compass creator Chris Eppstein’s talk focused on how to code manageable CSS3. With so many browser vendor prefixes, it’s easy for our code to become an unwieldy mess. While Compass requires a local version of Ruby installed on your computer, it outputs static CSS files that are perfect for uploading any Web server solution.

At the end of the day, Nicole Sullivan went over Object-Oriented CSS– a topic she covered during our first CSS Summit. This time, though, she brought a real-world case study, Facebook. Which benefitted from her expertise in bringing the file size down of their CSS files, considerably.

All in all, for a CSS fan like myself it wasn’t a bad day.

I’m grateful for the speakers’ time from their busy schedules (for example, Stephanie had just returned from her honeymoon) and the attendees. Without you all, it wouldn’t be possible.

Note: If you missed the 2nd Annual CSS Summit, recordings are available for purchase through the event page.

Aral Balkan, creator of the Feathers iPhone app and fellow conference organizer, set the tone for the entire event with his humorous and salient introduction.

Aral Balkan introduces the @e4h UX Web Summit from Environments for Humans on Vimeo.

Back in the 1990s, when surfing the Web meant dial-up or worse, the assets that built up layouts had to be built lean.

Complex patterns and textures meant longer download times, forcing users to wait and grow impatient. Sure, your server might be at fault, but your user only sees your logo slowly rendering and blames you for it.

With the saturation of broadband in major rural areas of the United States, Americans have grown used to Internet as commonplace as gas stations along the roadside.

Designers and programmers have inflated their Web pages with large images, JavaScript libraries and plugins without realizing there is an often unseen cost to their efforts. People with slower or spotty Internet connections can’t use their Web sites.

Within this past month, Google has come out and said it: “Slow kills.”

For a company that will do almost anything to shave off a millisecond of response time (even experimenting with their own ultra broadband networks), it makes sense for Google to factor speed into search engine rankings.

In fact, speed has been a factor in their AdWords program since 2008.

What we need to do is re-learn what old techniques we’ve thrown away in recent years, but also how we can compress and optimize the scripts of our sites today.

Web 2.0 isn’t going to go away in a dot-com-bust. However we need to learn how to make it work smarter, not harder, for our users.

Note: I’m hosting the online Web Optimization Summit next week on May 12, 2010. If you can’t make the day of the conference, your ticket affords you the chance to watch the recordings recordings will be made available after the conference for you to review whenever you want.

The challenge of meeting the technical functionality of, well, managing content is a tough one. Content Management Systems usually don’t come with instructions on how to make a killer blog theme out of the box or how to work with a well-established brand or pre-existing
site templates.

That’s why at Environments for Humans, we are putting on CMS Days to make CMS’s work for you.

Through a series of Workshops and a Summit we intend to get you up and running with some of the more popular CMS’s out there.

Drupal Workshop Day

On Monday, March 29th, we start with The Drupal Workshop Day.

Tom Geller, host of Lynda.com’s Drupal training session and the Drupal 7: Visual QuickStart Guide, presents the morning workshop that gets you and running with Drupal.

In the afternoon, Sheena Donnelly takes over to talk about implementing Drupal themes. Relatively new to Web design, she’s been theming Drupal sites for years and co-organizes the North Carolina’s Drupal User Group in the Research Triangle.

Engine Summit - The online ExpressionEngine Summit

On the second day in CMS Days, we focus in-depth on ExpressionEngine with hour long sessions of advanced material.

With speakers like EllisLab’s own John Henry Donovan, Happy Cog stars Ryan Irelan and Mark Huot, Blue Flavor’s Leslie Flinger, nGen Work’s Fred Boyle and ExpressionEngine expert Chad Crowell, you will not only get inspired, but have immediate takeaways to help master ExpressionEngine.

WordPress Workshop Day

On Wednesday, it’s all about WordPress.

The morning is hosted my Matt Harris, pro with WordPress and a regular at WordCamps, where he teach you how to come to grips with WordPress.

In the after, Stephanie Leary takes over to present on creating themes in WordPress. Working with WordPress for six and author of the forthcoming Beginning WordPress 3, she knows WordPress inside and out.

Django Workshop Day

On the final day, Jeff Croft tackles and tames Django. A freelance developer that regularly works with nGen Works, Jeff Croft shares his knowledge of Django. From starting Django to tricking it out, the all-day workshop is great for those new to Django or want to dive a bit deeper into it.

Tickets for CMS Days are available in four pack. For the price of three workshops, you get access to all four CMS Days!

Or tickets can be bought individually for each CMS:

• Drupal Workshop Day
• Engine Summit - The online ExpressionEngine Summit
• WordPress Workshop Day
• Django Workshop Day

The CSS Summit was an all-day, one-track, online conference dedicated to everyone’s favorite web design technologywith seveal experts in the field including Stephanie Sullivan, Jason Cranford Teague, Nicole Sullivan, and other great speakers on CSS.

It was a big hit and I think one of the reasons it was more of a focused effort to get past the basics of CSS and dive into more advanced, focused material.

It’s no one’s fault really that CSS isn’t delved deeply at many conferences and there isn’t one reason why it happens. CSS doesn’t work in a vacuum. It is only one part of what makes a great Web site.

Also as a speaker, sometimes you don’t know your audience skillset and tend to cater to the basics so as not to risk losing people.

So, when Hugh from SXSW asked me if I would be interested in chaperoning part of SXSW, namely the CSS workshops, I jumped at the chance.

Looking through the CSS submissions in the panel picker, I picked out what I believe are some real gems.

Workig with the speakers of these panels to make it the best possible workshops, I believe we have a solid line up of CSS goodness:

CSS Frameworks Shootout by Beau Smith.

Joined by Nathan Smith, Joshua Clayton, Chris Eppstein, and Nicole Sullivan, the Smith moderates a discussion covering the different flavors of CSS frameworks as well as address the merits of SASS.

CSS and Fonts: Fluid Web Typography by Jason Cranford Teague.

Doing a solo workshop, Jason covers the latest news about Web typography and how the make the most of the new developmenets. (After having tech edited Jason’s book, Fluid Web Typography, I know he is perfect for this presentation.)

CSS3 Design with HTML5 by Stephanie Sullivan, Zoe Gillenwater and myself.

In this workshop, we intend to cover the latest in cross-browser CSS3 development (typically involving patching up IE until the next promised version) as well as see how web developers can use HTML5 for engaging user experiences.

It’s nice to see the rise in popularity and buzz of CSS3. Thanks in a large part to browser vendors implementing parts of the spec before its even finished, but I digress.

If you intend to come to SXSW Interactive this year and have a hand in CSS coding at your place of work, check out these panels Saturday afternoon.

And if you can’t make it to Austin this year and still want to learn more about CSS, I’ll be giving an online CSS3 workshop next week.

Web Form Elements

I wanted to take a look at how browsers render form elements. I mean really take a look. Over 5,000 screenshots later, the problem of consistent browser rendering of web form elements looks nowhere near happening.

This is in large part due to three areas: the specification not dictating the design, the browser vendors not feeling they need to adopt a standard, and the different operating systems’ UI.

Planning Conferences

I did something I thought I would never thought I could do: I put together a Web design conference. During a conversation with Kimberly Blessing in 2008, we thought we should put together a conference “of our own”.

Thus the idea for the first ever AIGA In Control Web Design Workshop Conference took shape and it took place in Cincinnati this past June.

Assembling the conference was one of my main responsibilities as a board member of AIGA Cincinnati and it came together in such a great way thanks to the speakers, the attendees, volunteers, and fellow board members.

After never thinking I would organize one conference, I ended up helping to run three more this year. Thanks to my partner, we were able to put on three online conferences: The CSS Summit, The DIY Summit and The jQuery Summit. (And right around the corner are the online Workshop Summits in mid-January and the AIGA In Control Web Design Workshop Conference in Orlando this February.)

Thanks to people like you attending these events, we raised close to $20,000 for non-profits while helping spread best practices and saving thousands of lbs in CO₂.

Third in a Series

In the middle of those events, the third edition of the CSS Cookbook was written, edited and (as of yesterday) published.

Almost three times the size of the first edition, the new edition sports new solutions to common CSS problems, updates to the new browsers, and how to work with HTML5 and CSS3.

Technical Editor

I did something else I always wanted to do, but hadn’t had the opportunity: tech edit a book.

After writing ten books and dealing with several tech editors, I was itching at a chance to work on a book. This year I got the honor of editing David McFarland’s CSS: The Missing Manual, Jennifer Niederst Robbins’ HTML and XHTML Pocket Reference, Fifth Edition and Jason Cranford Teague’s Fluid Web Typography.

While the subject matter was different, the attention to detail from all three authors were the same. (I also felt a little sorry for Jason as he had to rewrite a chapter due to the breakneck speed in which the possibilities of Web typography exploded in the last half of the year.)

Also, the authors had something else in common: they both have done great work in moving the Web forward. They’ve been doing this Web design thing since it was possible to do Web design. It was an honor to play a small role in their books.

Releasing Web Education

In March, I did a small part in helping out the Web education curriculum. Announced during SXSW Interactive festival, the InterAct curriculum is a series of 10 courses under creative commons for Web educators to incorporate however they wish: they can take the whole thing or use only parts of it.

Why give it away for free? The goal is to get fresh, Web educational materials into the hands of educators. And being a teacher is hard work. By helping out with some free resources, we help raise everyone’s awareness of quality Web education.

Speaking

I even managed to keep up a brisk speaking schedule:

• University of Cincinnati
• The CSS Summit
• SXSW Interactive Festival
• In Control Cincinnati
• eduWeb Conference
• July 4th presentation of the CSS Flag
• Miami University
• Georgia University
• Spring BR/ Conference
• Web Visions

I’m always looking for venues to speak. So, if you are looking for a speaker in 2010, please let me know.

Happy New Year!

Even though no one appears to have added any new days, 2009 was definitely long year.

As we transition to the next one, I wish you all the best for 2010.

May it be a happy and joyful one for you and your family and friends.

For a couple days in late February, Web design and development talks from HTML5 to usability and everything in between will be covered by some of the the best speakers and trainers in the world:

• Kelly Goto
• Stephanie Sullivan
• Ethan Marcotte
• Ted Murphy
• Derek Featherstone
• Greg Rewis
• Shari Thurow
• Jared Spool

Register now using my discount code INCCHRISS for $50 off.

While you are busying crossing off your holiday shopping list via Amazon.com, you might want to check out the following deals on Web design and development education that are only good for today:

50% off Individual Tickets for The Workshop Summits. For two days starting on January 14th, Molly E. Holzschlag, Emily Lewis, Aarron Walter and myself lead three-hour, virtual workshops each on HTML, Microformats, Findability and CSS3 respectively. Yes, it’s virtual so you can build your skill set without having to leave your computer. (Use the discount code CYBERMONDAY when registering.)

$200 off In Control Orlando Registration Fee. In Control Orlando Web Design Workshop Conference is a two-day event in late February that highlights some of the best training available in Web design and development while enjoying Winter in a warmer climate. Learn from a great line-up of 10 internationally recognized educators and industry leaders such as Kelly Goto, Derek Featherstone, Stephanie Sullivan, Ethan Marcotte, Jared Spool, and more. (Use the discount code CYBERMONDAY when registering.)

I hope to see you at one of these events in the new year!

P.S. If you are still on Amazon.com and in need of buying a small gift for the Web designer or two in your life, might I recommend a pre-order of CSS Cookbook, 3rd Edition?