How’d we do that? Halloween. It’s an excellent night to score some candy and a terrible night to meet your significant other for the first time. (“What do you mean you don’t always dress like a slutty witch?!?”) At Dressler, we celebrate every year with a Halloween-themed email to friends of the agency. If you didn’t receive it, we are not friends. (Or you have an active spam filter.) This year, we created something kind of special. And we’re dedicating this email to explaining how we did it. You can view the site at the link below. Halloween Website No, really. How? Creating a 3-D experience in a 2-D environment (like your web browser) is intensely challenging. There are 3-D engines like WebGL or 3js that are powerful and engaging. But not all browsers support these engines (Thanks, Safari!) and learning to use them is immensely time-consuming and difficult. Dressler’s front end wunderkind – Andrew Wisnieff – decided to go a different route. He built a 3-D experience like a website so it could run on the browser. He used transitions newly available in CSS3 to do the animating work. Application to Marketing: In the old days, we would fake 3-D using Flash or a Java Applet. In both cases, the memory requirements meant that it took a very long time for the page to load. However, clients still want and expect to see 3-D on websites. The method Andrew employed does not require specialized new skills. Think of it as a gateway tool that allows developers to develop skills in 3-D modeling. The advantage is that it works on mobile and you can troubleshoot your animation in Chrome’s inspector tool. Availability: OK, I’m not going to lie. This is not THAT easy. There’s a reason why we threw Andrew – our resident front end boy-genius – at this one. But the basic principles are right here: Read More Why is it difficult? When you’re using a 3-D engine, you have a camera position. If you want to zoom in on something, you virtually move your camera in the 3-D space. But there is no camera in CSS transitions. There’s just the browser. So, when Andrew made it look like you were going over to look at something (like the pumpkin), he had to move the entire environment. The world moved, but the viewer stayed locked. Making the site work that way was intensely difficult and required huge amounts of trial and error. Application to Marketing: You know that “amazingly low” estimate you got from a web development firm in Pakistan or Argentina or Romania? Yeah, they can’t do any of this stuff. Front end developers are not interchangeable commodities. An average front end developer can build something. A great front end developer can build something amazing. (Apples & oranges.) Availability: Say you have a pretty good front end developer. They can use the toolset below to create some 3-D elements without too much of a learning curve. Read More Is it real 3-D? Nope. Not at all. Your browser is a two dimensional interface. But artists have known how to make a 2-D space look 3-D since the Renaissance. You probably remember “perspective” from middle school art class (remember the train tracks), well you do the same thing in CSS. In CSS3, perspective is a property that can be defined to give the appearance of depth. Application to Marketing: Web design hasn’t really caught up with the capabilities in CSS3 yet. Parallax scrolling caught on pretty fast, but that’s the tip of the iceberg in terms of the experiences designers and developers could create if they were willing to really dig into everything CSS3 has to offer. Availability: The article below gives a good introduction to CSS3 transitions, transforms, and animations. If you’re into creating amazing internet experiences, it’s worth a read. Read More Wait, can you turn the pumpkin? Yes, you can totally turn the pumpkin. Was that necessary? Yes, dammit, it’s cool! The pumpkin was challenging to create because a pumpkin is not a circle. Andrew solved the problem by building the pumpkin like a fractal. Each slice of the pumpkin is built from the same code and then the pattern is repeated. (You begin to see why I called him “wunderkind.”) But the trackball effect of the spinning pumpkin was hard to create as well. Rotations need to be defined programmatically and it’s difficult to calculate all the values. Andrew solved it by finding a similar open-source project with a cube and repurposing the code. Application to Marketing: It’s cool, ok? Isn’t that enough for you people? Availability: You should check out the cube. It’s also cool. Read More