“The goal of this week is to give rise to the most audacious and creative ideas. These ideas will have the greatest impact in a world that fosters innovation, rather than dampening it…”

Read the original post.

The file that you author should not be the one you deploy. The production CSS should be concatenated and run through a minifier and quite ugly to look at.

Meanwhile your original .sass or .css files are formatted however you like. Take pride in their layout, but be ruthless in making ugly files that go to production.

Direct link

Simply reducing or enlarging a logo according to its context isn’t always the best solution. As the content area and device capabilities increase, designers are justified in adding additional details to the logo graphic itself.

I wanted to explore this idea and decided to create a little demo.

Explanation:

Using media queries and CSS3 properties we can add subtle shadows and effects to our logo as the screen size expands. This technique will work in most modern browsers. On older browsers it will simply fall back to the flat logo image. Which isn’t bad.

I decided to use an inline SVG image for the logo because your logo is an image, not an h1. I used an SVG graphic because we need the logo to scale flawlessly.

This logo starts at a mobile-first size and scales up at 3 breakpoints. (The breakpoints are unimportant for our purposes and were chosen at random.) It will be small enough to fit on mobile devices. In this first version we have the logo mark and the logo text aligned on a single line. The logo text is the same size as the cross-section of the logo mark.

Break Point Break Down

BREAK POINT 1: On this one we keep the size of the logo text the same but we increase the size of the logo-mark so that now the logo-text aligns with the heart within the logo mark instead of the cross-section.

BREAK POINT 2: We add some shadow on the bottom of the logo. And a highlight at the top. We stack the logo text and increase the font-size of the top line so that it’s wider than the bottom line.

BREAK POINT 3: Finally we use CSS3 effects to create a faux 3D effect on the logo.*Note* Chunky 3d CSS3 text-effect originally by @mdo.

Take a look at the demo and move your browser window around.

These web development ideas and techniques are so great, its easy to become passionate about them. As good web workers we’re instinctively drawn to them. And implementing them wherever we can usually becomes a priority. But as geeks, sometimes we can get a little hung up on technical details.

Creativity is also vital to the web design/development community. We need to make frivolous CSS3 / HTML5 / JAVASCRIPT experiments because they help us think laterally. It’s through these ‘lateral approaches’ that we can often discover creative solutions to real-world web development problems.

These experiments can lower the barrier to entry for young students looking to get into web development. What better way to get a bunch of 10 year olds excited about web development than showing them how to create an animated NYAN CAT out of html and CSS3?

When considering these experiments we shouldn’t get hung up on how cpu intensive they are or whether your browser is freezing up. We have to take these experiments for what they are. Learning tools that help us create and express new ideas.

If you find yourself criticizing these experiments because they’re not production ready or overly complicated. Beware. You might be missing the point.

If you need to get in touch with me all formal and stuff, shoot me a secure email on my contact page.

UPDATE:

There is no Mini-Mac Pro. Its a “Hard Drive Enclosure“. You could try building your own – My New Mac Pro Ultra Mini

I’ll explain from a high-level overview so you can get an idea of whats going on.

HERE’S THE SETUP

We start with a large div (3200 X 3900) named “#phone-stage” set to position:absolute.

Since overflow:hidden will hide any portion of a child element that passes it containment boundaries. This effectively masks the #phone-stage div to the dimensions of the #clip div.

On #phone-stage there are six feature-modules. One for each of the new iPhone 4S features:

1. intro
2. Siri
3. A5 Chip
4. Camera
5. iOS 5
6. iCloud

The elements for each feature-module consist of mainly a logo and a few screenshot images.

There are also featured-text snippets associated with each feature-module. But the featured-text snippets are not children of #phone-stage. The snippets are placed into their own divs, independent of the main #phone-stage div (more later).

BODY MOVIN’, BODY MOVIN’

Now #phone-stage is loaded up with the 6 feature-modules. Each module has its opacity set to 0 and is positioned at different locations and rotations within #phone-stage. After 3-5 seconds (or upon key press or click event) the #phone-stage div will rotate and zoom to the next position.

As #phone-stage rotates and zooms into position, the child elements within each featured-module fade in and animate independently.

The featured-text snippets that reside in their own div animate into the featured-module with their own timing, and fading animation, unaffected by the zooming and rotation of phone-stage. This creates a very sophisticated, multi-layered effect with minimal animation layers.

RETREAT! MOVE! FALL BACK!

For browsers without CSS enabled animation they see the Featured/Hero slider. This script detects the browser ability to display CSS3/HTML5 animation. If the browser cannot display animation it will fallback to the typical feature-slider by hiding the animation code and displaying the fall back code.

Did you know that Wired Magazine (iPad) might be the first publisher to use CSS3 animation as a major design element of a story? The cover story no less!

Ball-sy, eh?

How do I know this? I helped them do it!

The cover story of the June 2011 issue featured a bar graph representing the highest paying jobs in the USA. The idea was to have the text of the article floating over the bar graph. When a user swipes to a page the bar graph animates behind the floated text. (see video)

Working in the Dark

All the code was based on some pretty safe technical assumptions. Being that the screen size for iPads is around 768*1024, we have a good idea of where stuff should go. Because all the contents of the Wired magazine are downloaded prior to reading. We can rest assured that all the elements will be completely loaded and ready to animate the instant the user swipes onto the page. I didn’t have to worry about buggy animation.

There was no easy way of testing my work. The plan-of-attack was that I would write the html/css code in Textmate and they would build their layouts in InDesign. They would import my code and their Indesign layouts into the Adobe Digital Publishing Suite. From there they’d publish to the iPad in some magical way that… I can’t be quite bothered to fully understand yet.

Imagine Don Draper walking into the office. His suitcase swings in his hand. His brand new Adidas squeak against the polished floor… Eh!? Adidas?

I love Adidas. This is the idea that popped into my head while watching the intro sequence to the Mad Men show. “Wouldn’t it be cool to re-create the Mad Men intro, but replace the man’s shiny shoes with a pair of classic Adidas?”

It was that ridiculous thought that gave me the idea for a CSS3 Mad Men intro. Dumb right?

I got to work.

Splitting the Scenes

The first task was to locate a high-quality version of the intro on youtube. After studying it closely I realized it could be duplicated easily using simple CSS3 animations.

Every time the camera angle changed, that would make a new scene. I paused the play head at the start and end of every scene and grabbed an image of both. This gave me “before and after” images for each scene. I would paste these on individual layers into a Photoshop file. Repeating the process until I had 16 .psd files (16 scenes) with a “before and after” layer in each one.

Duplicating the Graphics

I began drawing over the images I previously grabbed. Scenes 1 through 6 were pretty straight forward. I created shapes over the original images trying to duplicate the objects form, color and texture as closely as possible.

As I drew each graphic I had to be mindful of how I was going to animate them.

For instance, Scene 5, where the office collapses, has many moving pieces. By keeping Photoshop open on one screen and the mad men intro open on another. I was able to focus on a specific object and determine how many moving pieces each one needed.

Take the desk for example. If you look at the original intro closely you’ll see the desk falls apart into pieces as it slips down. By watching the desk pieces move I could determine which pieces obscured the others as they fell and I could start planning the html and stacking order of the graphics. It was a meticulous process and admittedly you have to be a bit nuts to undertake it. *Ahem*

Drawing the buildings that fly by as the silhouette falls wasn’t so fun. I ran into a little creative block with them. I wasn’t sure who or what I was going to place behind the glass. And I couldn’t figure out a good way to replicate that washed-out, hazy look the buildings have in the original.

Rather than get hung-up on the buildings. I figured I would draw basic shapes for them and match the perspective of the buildings. That way they would look as believable as possible when they where moving behind the falling silhouette. Later I could circle back to the buildings once I hammered out all the CSS3 animation.

I posted a little preview of the graphics to dribbble.

A Multinational Alliance

Enter Andy Clarke and Geri Coady. I worked with Andy and Geri previously on a CSS3 animation for his excellent book ‘Hardboiled Web Design by Andy Clarke‘. And I was stoked to be working with them again on this project.

The buildings I created sucked but ultimately served as a good foundation for Geri Coady’s artwork. She was able to create some incredible graphics of the ALA speakers. There is excellent design/photoshop work in those building panels. They merit close attention. Hopefully Geri will write a post on her site detailing how she created those amazing effects.

Hand Chiseled

The code for the animation is composed from an ordered list with 16 list-items. Within each list-item is all the html and images necessary for that particular scene. By default all these list-items are set to display: none.

We have a bit of jQuery that applies a “go” class to each list-item for a specific amount of time. This “go” class sets the list-item to display:block and activates the CSS3 animation assigned to that list-item (scene).

Once the specified amount of time has elapsed. The “go” class is removed from the list item. Setting it back to display: none, turning off the CSS3 animation and immediately applying the “go” class to the next list item in the order. Starting the whole chain of events again.

The code for the animation elements is ugly un-semantic html. But hey, sometimes you just have a good plan and say “fuck it”.

Hardboiled HTML

Andy had a plan for the ugly code. Browsers that didn’t support CSS3 animations will see an ordered list with an image and descriptions of each scene in the animation.

If the browser supports CSS3 animations we’ll use modernizr to replace each image and description with the html elements necessary for the animation. Simple!

Animatable App

Animatable would have made creating this project a breeze. Unfortunately I was forced to code this one by hand. After I had already completed the animation. The whole Animatable Team (Dan, Naomi, Andy, Mircea) were still secretly working on the earliest versions of it. I’m dying to get my hands on it.

I can clearly picture graphics and html elements animating. Then I can use that mental image to write the HTML/CSS3 in a way that would work the best for the animation. But its very difficult to visualize how much an element should squash/stretch. It difficult to add subtle nuances in the animation when your forced to think through rotational degrees and X/Y coordinates. That’s where Animatable saves the day.

According to the Animatable team they’re going to open it up soon to a few people for private testing. I’m trying to elbow my way to the front of that line and eagerly await for them to open the doors.

Short ‘juvenile’ little cartoon demonstrating the importance of the CSS3 -webkit-animation-fill-mode property. CSS3 Poo Fly!

Before we get to the section, aside, header, nav and footer elements it important we understand one of the foundational changes in html5. Each piece of sectioning content has its own self-contained outline. That means you don’t have to keep track of your heading level anymore-you can start from h1 each time. Because each piece generates its own outline, you can now get far more heading levels than simply h1 to h6. More importantly, you can start to think about your content in a truly modular way.

The fact that each piece of sectioning content has its own outline makes it perfect for Ajax. Porting a piece of content from one document to another introduces problems. CSS rules applied to the parent document will also apply to inserted content. HTML5 offers a solution with the ‘scoped’ attribute, which can be applied to a style element. Any styles declared within that style element will only be applied to the containing sectioning content.

Some of the new structural elements can be misleading. Especially the section, aside, header, nav and footer elements. Correct usage of the seemingly obvious elements can be confusing. Here’s a check list of common pitfalls to avoid:

• section – Used for grouping together thematically-related content. Sounds like a div element, but its not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself, “Is all of the content related?”
  
• aside – Used for tangentially related content. Just because some content appears to the left or right of the main content isn’t enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.
• header – There is a crucial difference between the header element and the general accepted usage of header (or masthead). There’s usually only one header or ‘masthead’ in a page. In HTML5 you can have as many as you want. The spec defines it as “a group of introductory or navigational aids”. You can use a header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element as “a thematic grouping of content, typically with a heading.”
• nav – Intended for major navigation information. A group of links grouped together isn’t enough reason to use the nav element. Site-wide navigation, on the other hand belongs in a nav element.
• footer – Sounds like its a description of the position, but its not. Footer elements contain information about it’s containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also have footer within sections.

So you see? It’s not exactly as straight forward as it might seem. For a more indepth information about HTML5 please get “HTML5 for Web Designers” or check out the following free online resources:

• Dive Into HTML5
• HTML5 Doctor
• WTF is HTML5?

Although included in Apple’s iPhone 4 Case Program. Images of the new ‘Snap Case’ iPhone 4 protector have been curiously absent around the web. If you view the Incase blog post all you can see are some renderings of upcoming cases – none of them “thee” Snap Case. Solution? Pull some images of the Snap Case right out of the app itself:

Update: Looks like Incase finally got their act together and posted images of their new Snap Cases available for free to iPhone 4 owners via Apple’s “Bumper Case Program.” The cases are now available to View and purchase.