So, on the tiny off-chance that I can’t write in-depth, lucid details about everything that inspired me, I wanted to at least capture the broad themes I heard last week.

Without further ado, here they are:

Your designs should embrace the diversity of browsing experiences offered by different devices

• It is no longer necessary—or even possible—to make the browsing experience the same across all browsers. Like HDTV, the device determines the experience you get; the experience is not (and should not be!) the same for every device. Design and testing processes should change to reflect this reality.
• CSS3 media queries are an easy, stylesheet-based way to adapt our designs to devices with variable widths.
• Read more: “The CSS3 Experience” by Dan Cederholm, “Hardboiled Web Design” by Andy Clarke and “Everything Old is New Again” by Eric Meyer.

Mobile is moving to the center of the web design practice

• Change is coming: designing for mobile browsers will represent a significantly larger chunk of your design focus and energy in the next 5 years, due to the incredible proliferation of smartphones.
• Consider designing the mobile experience before the desktop experience, it allows you to focus on users’ primary needs.
• Designing mobile experiences means embracing—and designing for—flexibility.
• Read more: “Mobile First” by Luke Wroblewski, “Everything Old is New Again” by Eric Meyer, and “A Dao of Flexibility” by Ethan Marcotte.

Usable is no longer good enough

• Make stronger connections with your users with compelling, relevant content served quickly and consistently across channels.
• Create emotional connections: use surprising and delightful interactions, when they support the message. Use these interactions to evoke humanizing responses (like humor and empathy) from your users.
• Read more: “Object Oriented CSS” by Nicole Sullivan, “Message and Medium: Better Content by Design” by Kristina Halvorson, “Emotional Interface Design” by Aarron Walter, “Paranormal Interactivity” by Jeremy Keith, and “The CSS3 Experience” by Dan Cederholm.

There’s still no substitute for good planning, informed design, and responsiveness, both in project management and product design

• Plan for change at all points of the project, from scoping the project down to the individual design decisions.
• Avoid adhering to hard and fast rules if you have the opportunity to investigate, research, and make an informed decision. But don’t ignore your gut.
• The more techniques you learn, the more flexible your processes can become.
• The qualities that contributed to the success of the web as a platform are the qualities that make us successful as web developers: rough consensus, working code developed quickly, velocity, and responsiveness.
• Read more: “Put Your Worst Foot Forward” by Jeffrey Zeldman, “Anatomy of a Design Decision” by Jared Spool, and “How the Web Works” by Jeff Veen.

For more details from the individual talks, Luke Wroblewski’s conference notes are that rare combination of concise and thorough. I’ve linked to them liberally above; here’s the full list: Luke’s An Event Apart notes.

One of our talented designers, Jacks, came up with an updated design and passed it along to me for development.  

At first glance, it seems like something that would be a little tricky to re-create without flash.  As the resident flash guy, I’ve been getting a lot of pressure from the internet community at large to start flexing my Javascript muscles, so due to its lack of special fonts and uncomplicated layout, I set out to create it using HTML, CSS and jQuery UI and ended up with this little bit of JS, CSS, and HTML – before and after.

Here’s how I created it.

First, I created the layout in HTML and CSS, that way I got the base styles and layout ready before introducing the JS and any additional styles they require.

After a little trial and error, My HTML ended up looking like this:

<div id="beforeAfter">
	<div id="canvasContainer">
		<div id="canvas">
			<div id="before"><img src="img1.jpg" alt="Before" height="413" width="718" /></div>
			<div id="after"></div>
			<div id="sliderContainer">
				<div id="slider"></div>
			</div>
		</div>
	</div>
</div>

My CSS ended up looking like this:

body { background:#999; }
#beforeAfter { background:#656565 url(bg.gif) repeat-x; padding:4px 0 19px; width:730px; }
#canvasContainer { height:417px; margin-left:4px; width:722px; }
#canvas { background:#fff; display:none; height:417px; overflow:hidden; position:relative; width:722px; }
#before { position:absolute; right:2px; top:2px; }
#after { background:url(img2.jpg) top right no-repeat; border-left:3px solid #fff; height:413px; position:absolute; right:2px; top:2px; width:722px; z-index:2; }
#sliderContainer { bottom:-32px; height:31px; left:2px; overflow:hidden; position:absolute; width:718px; z-index:3;}
.ui-slider { left:-6px; position:absolute; width:663px; z-index:3; }
.ui-slider-handle { background:url(handle.png) no-repeat; cursor:pointer; display:block; height:31px; position:absolute; width:67px; }

The beforeAfter div is responsible for the background and dimensions.
The canvasContainer div creates the height and width of the canvas so that when I show the images, the height remains the same.
The canvas div is the container of my before and after images.
The before div is the image before and the after div is my image after.

The slideContainer div matches the width of the images and has the ui-slider inside it. Since my handle has a drop shadow, I needed to offset the slider by the extra pixels from the handle’s shadow. I added overflow:hidden to the sliderContainer so that when the slider handle gets to the edge of the slider, it lines up with the edge. I also set up the ui-slider’s width to be the total width of the images minus the width of the handle.

Next, I went to work on the Javascript.  I grabbed jQuery 1.4 from the google jsapi and a custom jQuery ui download of just the slider widget.

After more trial and error, I came up with this JS (read through the comments for an explanation):

// wait for everything to be loaded before doing anything
$(document).ready(function(){
	// set the max width var because it's used in several places
	var max=722;
	// set a var to reference the after div
	var after = $('#after');
	// initialize the slider
	$("#slider").slider({ max:max, min:0,
		slide:function(e, ui){
			// when the slider slides, set the width of the image based on the max width
			after.width(max - ui.value);
			// if it is at the max, hide it. If it is not and it's not visible, show it.
			if(ui.value===max){
				after.hide();
			} else if(!after.is(':visible')) {
				after.show();
			}
		}
	});
	// create an image in the dom to load the after image so we don't display the widget until the image is there
	var img = new Image();
	img.onload=function(){
		// show it all with a couple of effects
		$('#canvas').delay(500).fadeIn('normal');
		$('#sliderContainer').delay(800).animate({bottom:0});
		img=null;
	}
	// set the image source to kick this whole thing off
	img.src='img2.jpg';
});

For the animation, I tried to make it simple and clean. One of my biggest pet peeves with a lot of the JS/HTML/CSS work that is coming out these days is that it’s not seamless.  There is a skip, there is a blink, there is a jump when the animation starts or ends.  It just doesn’t produce the quality of animation/motion graphics that you can get from using flash.  To avoid this, I chose the simpler animation effects and added a bit of delay so that the user can actually see what’s happening.

Grab the source here

So, what has caused this change?  In my opinion, there are a couple of reasons that have led to this change:

1) Accessibility. Everyone is now online all the time.  By tweeting, texting, or e-mailing you can talk to multiple people at a time, thus saving you – and the people you’re communicating with – time.

2) Intrusiveness. Calling someone seems much more intrusive then sending an e-mail or a tweet.  It allows people to respond when it is convenient for them, and does not impose of anyone’s schedule.

2) Devices. It can take 2 to 3 steps to make a phone call on a cell phone these days.  Smart phones with qwerty pads and touch-screens make it much easier (and more preferable) to send an email or text.

So next time you reach in your pocket to grab your phone stop and take a minute to think: what are you using your phone for?

The Kit Kat chairs have been featured on design websites, and other media outlets.  While some people are calling the chairs “grown-up version of a cereal-box toy”, I personally love the idea.

Share – yes; Facebook does a fantastic job facilitating its users in sharing various pieces of themselves with friends, such as photos, personal statuses, notes, etc. But does it help them connect? I’m not so sure about that one. I suppose it really depends on how the Facebook user defines “connecting”. Here’s the breakdown:

connect #1: linking together The most basic usage of the word, and probably the most accurate in describing the connecting experience on Facebook. People “connect” when they accept a friend request. And that’s it. Literally like a little line segment, with (in)frequent stalking bobbing between the two points.

connect #2: establishing communication Connecting and reconnecting with folks on Facebook is what it’s all about. People want to know what their buds are up to. But let’s face it – once the initial friend request/approval has been made (and maybe a “hello, it’s been a while” message), most Facebook relationships are maintained through sharing.

connect #3: emotional association Every Red Associates surveyors’ wish: that people can deepen their personal relationships with other users through the various tools and applications provided on Facebook. The problem? People don’t “connect” as much as they do comment. Facebook is a space for transparency; it should come at no surprise shared material isn’t very personal. It’s fun, it’s funny, it’s a complaint, it’s drama. And it generates a whole lot of relatively depthless conversation.

Looks more like we’re keeping tabs than connecting. At some point, social media will need to come up with a solution for its users to connect with friends on a more meaningful level, and more than just a select few of several hundred at that. But for now it’s okay. Surely there’s got to be two people out there falling in love over Farmville.

A couple weeks ago I had the opportunity to go Fast Company’s “Innovation Uncensored” event, where I heard Alex Bogusky speak. He mentioned how, if one spends too much time considering their mistakes, they’d potentially create a harmful environment for themselves. “You are never going to be successful if you think you have to be perfect.  You need to try things in order to find things that are going to work.”  Alex went on to tell a story about Tony Hawk and how when trying to land a new trick, Mr. Hawk doesn’t view his falls as failures. Instead, he knows it’s going to take at least 100 times to land any trick.  Each fall is simply a small “bump” in the road.  If he saw each fall as a failure, he’d psyche himself out and never land it.

Like Mr. Hawk, and like Alex Bogusky, let’s embrace this fundamental shift, get passed the “bumps” and focus on our successes.

United was the “cooler” airline of the two, with it’s Saul Bass designed tulip icon and clean typography.  They describe themselves as having “a bold, yet simple design, representing the spirit of the United brand.”  Continental, on the other hand, last updated their logo in the 1990s with a more refined, formal look.  So, how do these two brands come together?  You be the judge.

Someone decided it would be best to have both worlds.  So, they used the United name and Continental’s look and came up with this.

Personally, I feel that United got the shorter end of this stick.  At a glance you don’t even realize that the name as changed because the typography and logo are associated with Continental.  It is rumored that this is just a stop gap measure, but we’ll have to wait and see.

Design student Anna Bullus started thinking about recycling gum after walking on her campus’ spotted sidewalks.  She realized that gum is simply modified rubber, and should be able to be recycled.  After 8 months she perfected the process of turning gum into pellets, and then into a plastic using secret additives.  The plastic is now being used to create seat cushions that feel like memory foam, and there are more products to come!  Learn more here.

MSLK, a strategic brand, packaging, and web firm, is embarking on a new eco-art installation called Take-Less. In the past, they have created installations to raise awareness of society’s mindless consumption of plastic.  This year they are focusing on take-out food and fast food containers, as 2,629 take-out meals are consumed in the United States every second.  The installation will make viewers aware of their habits and the societal norm, and encourage them to explore alternatives to plastic.  See the installation at the Figment Art Festival located on Governor’s Island from June 11-13th.

What would you do with 111 plastic bottles?  Coca Cola and Emeco joined forces to create the 111 Navy Chair.  Based off the 1944 U.S Navy Chair, the new chair will be 60% PET, with a combination of other materials for strength.

Check out www.111navychair.com to learn more about this project.