Mobile-First Responsive Websites provide users with the best possible experience afforded by their devices. Just as the UI and content adapts to device widths and network capabilities. So should the website logo have adaptive qualities.
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.
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.
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.
iPhone 4S debuted yesterday and with it a snazzy new “features” page. This is especially important to me because Apple used CSS3 animation to breath some life into it.
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:
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!
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.
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.
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”.
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 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.