SXSW 2015: Pocket Full of Dynamite: Making the Mobile Web 3D

Hai Nguyen
Creative Technology Lead
Google
@codeingforlove

Presentation Description

The mobile web continues to explode in popularity. As people spend more and more of their time there, they are seeking richer and more immersive experiences, and marketers are racing to make them. At the forefront of this revolution is WebGL, which brings a new way to create beautifully rendered 3d content on the web, most excitingly on mobile. With this new power, there are also new creative and production challenges to face. These constraints extend far beyond the development process alone, with implications on the strategy and creative vision more broadly. In this talk, Hai Nguyen (Creative Technology Lead) and Shana Opperman (Producer) from Google’s Art, Copy & Code team pull back the curtain on what they’ve learned developing WebGL-based experiences with brands such as Nike and Target. They’ll also provide some thoughts on what developments will take place in the near future with mobile web experiences.

Presentation Notes

84% of fans watching football were also on their phones. Google partnered with Nike. Nike already had a video they could work with. (see: The Last Game on YouTube)

Open http://riskeverything.nike.com on your phone.

  • Full screen
  • Camera access
  • Forces landscape

Why not an app?

  • Apps require an app store submission. This takes time, which you may not have.
  • SDKs can change frequently with social media, and that can be challenging.
  • You need two different development teams for Android/iOS.

Mobile WebGL opportunities

  • 1.9 billion people are using smartphones.
  • When iOS8 shipped, this effectively doubled the number of WebGL capable devices
  • 78% of smartphones, globally, are capable of WebGL

WebGL: What you should know

  • Models give shape to thing you see on screen.
  • Textures provide depth and color
  • Shaders make things look soft, hard, shiny, or dull

http://accdemos.com/sxsw (Demos)

What’s coming

  • WebGL 2.0: Advanced rendering features that put mobile web almost on par with native apps
  • Hardware advancements: Devices getting faster, more performance, and more creative possibilities.
  • Browser advancements: New features coming will enable creation of larger scale experiences.

Resources

Questions and Answers?

  • What’s the battery life like?
    • WebGL doesn’t consume much more battery usage than native. The only reason why it uses more is because it’s also running the browser. But the WebGL vs. OpenGL is pretty equivalent.
  • How does Analytics come into play how people play with the 3D objects?
    • There’s nothing specialized. But you can embed the analytic call directly into the input.

SXSW 2013: Fun & Games with CSS3

Chris Ruppel
Frontend Developer
Four Kitchens

Presentation Description

Chris Ruppel demonstrates some bleeding-edge creative concepts you can achieve using CSS3. Examples aren’t as practical as they are inspiring, showing off the possibilities of CSS3 and touching on components like animation, media queries, masks, transforms, transitions, filters, shaders, and 3D.

The audience should walk away with excitement, new awareness, and the desire to implement some of this awesome eye candy in a practical manner.

Presentation Note

We shouldn’t be calling it CSS3, as it is just CSS with modules. One of the modules just happens to be CSS2.1, which encompasses all of the existing styles.

Transforms

3D Transforms can be a little complex, but what is cool about them is they are inherited by their children just like other CSS properties.

Make sure to do all of your 3D Transforms with ems, as it will change monitor to monitor.

  • Translate (moving on x, y, z)
  • Rotate (x, y, z)
  • transform-style
  • perspective: an integer representing distance from camera, measured in px.
  • perspective-origin: vanishing point of the perspective effect
  • translate()
  • rotate()
  • backface-visibility: specifies if you can see this element when it is not facing you. A polygon traditionally in 3D rendering is off by default. However, with CSS3 they have enabled it by default.

Resources

SXSW 2013: Learning Experience Design from Superman

Timothy Parcell
Manager Experience Design
SapientNitro

Presentation Description

A geek’s breakdown of the history of comic books and the parallels and principles to modern experience design.

From their shared roots in the 1930s and 40s, with Siegel and Shuster’s Superman ushering in a Golden Age and Chapanis and Fitts establishing the field of experience design through their efforts to redesign airplane cockpits to consider human factors through more modern milestones like Watchmen, Y: The Last Man, Dyson Vacuums and the iPhone, the two fields have helped shaped our culture.

And while Norman coined the term ‘user experience’ and Nielsen has educated many designers on usability, Lee, Kirby and Eisner can certainly give lessons that any experience designer can apply to their next project to make it more engaging and memorable.

Explore the worlds of the Uncanny X-Men, Spirit, Green Lantern, Zappos and Amazon.com to discover that while the mediums are different, the fun and design are not.

Presentation Notes

How do you define experience design? The craft of building lasting relationships between people and brands. Information Architecture, user experience, usability, research, etc. are all different parts.

Brand

A brand cannot just be a symbol and icon. It must as well have values behind it. What are the values of the brand itself, of the people who buy the brand, and how do we tie those two together?

Design

One image can say a lot to a person. When you talk about design, you need to talk about the medium. In terms of mediums with comics, it is paper. With the Hulk, original printing presses would skew the color of him so much that sometimes he would be gray, black, brown, etc. It wasn’t until later that they decided to make him his iconic Green.

Stories and Themes

In experience design you look at how to engage, and how you engage in design. Experience design extends beyond just web design, because you need to look at how people view your product. Stories have memory moments, such as “with great powers, comes great responsibilities.”

Audience

Film makes you a spectator. Comics make you a participant. Comic books were one of the first medias to publish feedback from users in the back of the comics. In the 1980s DC took it even further and opened up two 1-800 lines and asked if Robin should die in the end or not. Fans didn’t actually think that DC was going to follow through on it, but Robin died.

Today, typical comic book readers are 18-35 years old. We need to take that into consideration with who is our target audience. On a bell curve you can see that there are new people on one spectrum, and nerds on the other. Somewhere in between, the most users of Comics, are everyone else. You need to target your largest audience, but don’t neglect the new people or the nerds.

Scalability

How does a system grow over time? Not very often do we have something that just stays the same size. The first Green Lantern (1940) had a horrible costume. It wasn’t until the 1950s that a new Green Lantern look and feel was released (the most iconic). Change is risky. Change is colorful. Change is violent. Change is fast.

Continuity

Things kind of remain the same, starting with one point and slowly changing instead of completely starting over. What can I do where? Target your audiences for each medium, but try and keep a continuity between them all. What does the audience expect at any given time? You’ll want to attract to experts on the bell curve by giving them easter eggs. For  the new people you’ll want it to still be usable.

Epilogue

Everything in comics has to work, or else it fails. We need to know how our customers feel.

  • Make your brand stand for something
  • Get the details right
  • Tell a great story
  • Make it simple
  • Make it for your audience
  • Know your medium(s)
  • Don’t be afraid to start over
  • Have fun

SXSW 2013: Sex & the Startup: Marketing to Women

Carley Knobloch
Founder
Digitwirl

Presentation Description

Move over tech portals — if you want rapid adoption for your startup, it’s all about lifestyle magazines and daytime talk shows. In case you haven’t heard, women make or influence over 85% of the household purchases, and they’re ravenous for technology that fixes their lifestyle problems. Will your startup deliver? Let’s discuss marketing tactics that work, and ones that will get you shunned by the fairer sex. I’ll share all I’ve learned developing my web show, helping tech startups and clients like Intel and Cisco reach women audiences, and serving up tech tips on the Today Show. Plus, I’ll poll my audience and peers in blogging and mainstream media to bring you real-life answers to common questions. Warning: Appealing to women just might help you build a smarter product.

 Presentation Notes

First, find out who you’re talking to. Create a customer avatar  such as a user-story (name, age range, things they may be interested in which influences your product).

Women are not looking for cool apps, or apps that are tech-loaded. They’re interested in simple apps that simplify their lives.

“Everything in your life, organized in ONE place” – Manilla

Designing great products for women = designing great products for people.

When you target women, you target everyone, as you’re implying simplicity.

Your product may be killer, but they’re not going to woe women unless they have a great marketing image right off the bat. One of the best ways to do this is to show a quick video. It’s one thing to say a camera is “waterproof” and it’s a different thing to say “your kids can throw it in the pool.”

If you’re designing a product that you want a female audience to adopt, it is probably a good idea to have a woman involved in the design and implementation phase of the product. In this case, you wont have to try so hard to market it.

SXSW 2013: 21st Century Application Architectures

Werner Vogels
CTO
Amazon.com

Presentation Description

Today’s applications have the opportunity to reach a global audience, upset the status quo and transform entire industries. With the arrival of Amazon Web Services, on-demand access to compute, storage and database resources has removed the constraints to building sophisticated, scalable applications that delight and disrupt. In this keynote, join Amazon’s CTO to explore the new rules of application architecture that power resilient, adaptive, data-driven applications. We’ll discuss new patterns of architecting for lower cost, continuous deployment, and greater scale used by some of today’s hottest start-ups such as Pinterest, Animoto, Airbnb and Instagram.

Presentation Notes

In the old world mentality, all resources were constrained: capital, physics, capacity, people, geography, and scope.

When you look at an actual capacity chart of what is being used, you’ll see lots of use on the weekdays and very little on the weekends. In old world thinking you choose to have a little buffer of 15% over the top points, and thus you have a lot of waisted resources that are not being used. Furthermore, at the end of November it spikes even more, making it a loss of almost 76% of their old world server mentality.

The new world is completely unconstrained. What does that mean? It means you can start building architectures in ways you could have never done before. This idea is: secure, scalable, high performance, cost-effective, and fault tolerant.

Everything is now, that used to be physical, a programmable resource: data cents, networks, compute, storage, database, local.

In the past, most of architectural resources went into knowing that you were restricted by those efforts. Not only can you build them in terms of resources, but you can build them so they fail less frequently. The reason why most old world servers failed is because you cannot accurately measure what resources you’ll need when customers change their mind and/or give you outlying needs for server reliance.

The Commandments of 21st Century Architectures:

Controllable

Architect with cost in mind. Resources can change throughout the lifecycle of the project. Decompose into small, loosely coupled, stateless building blocks. If you want to build an architecture that can scale very fine-grained, you need to build the boxes smaller and smaller.

If you want to build new applications, you should leave behind the old world mentality, and start using the cloud as native cloud.

Automate your application and processes. If you actually have to SSH into your server to manage it, you’re doing it wrong. Let business levers control the system and manage what is happening to it. These tools will allow it to determine when it needs to scale up, and when they need to scale down.

Resistent

The most important thing, even before security reliability, is security. Integrate security into your application from the ground up. With the cloud in AWS, they give you very fine tools to be able to protect yourself in terms of security groups, identity access management, and RAID.

Don’t treat failure as an exception. Working hard to prevent failure costs you more resources. Deployment isn’t much different than a failure path.

Amazon rolls out a change into production, on average, once every 11 seconds.

Adaptive

Objects should not be replicated beyond necessity. Those solutions, where you make the least assumptions, are likely to be the most successful. One of the things in modern architecture is you assume nothing. If our world is no longer constrained about resources, we don’t need to make any assumptions.

Change your mind, often, whenever you want. Don’t be afraid to make mistakes.

Data Driven

Instead of having models about how the world works, you’re going to instead use exact data to drive your application. Focus on the whole distribution. What does that mean? If you look at a bell curve, and it is based on customer experience, that means that you have 50% of customers that are getting the worst experience. And with this, you need to know how much worse. If you can actually focus on this, and you can control it, you will do great.

Amazon.com doesn’t try to recommend you anything you haven’t already bought. However, if you haven’t every bought anything with them, then you can just display anything. With past customers, they compare your last 1500 purchases, which is very process intensive. That needs to be fast.

Put everything in logs so you can determine everything that has happened in times of failure and success.

Lastly…

Keep in mind that you can always just switch it all off. When you go home at night, and you’re in testing, just turn it off. There’s no need to run processes when nothing is happening on it.