Presenter
Joe McCann, Principal Architect subPrint Interactive

HTML5 is simply the next revision of HTML.
HTML is the "content" of the app. CSS is the "styling" of the app.
JavaScript is the "business" behind the app.

The value of HTML5 is JUST needs HTML/CSS/JS using the web stack. You can use the web for the majority of applications out there. It doesn’t require multiple designers like it does on multiple platforms. HTML5 is just design for the "web"- native web components… it’s cheaper.

What about maintenance?
If you need to update your logo and your app is written in Java AND Objective-C AND a web app on Ruby. You have to touch/change/deploy each across three different codebases (not to mention distribution mechanisms – app stores).

HTML 5 doesn’t solve all problems, though it does reduce the headache. Maintenance becomes easier, it reduces dev and design costs. A single codebase can be used to do this.

Tools for the Web Stack

• Phonegap – bridges the gap between phone platforms (javascript bindings to many phones). Build.phonegap.com will automate the process of building out apps
• Sencha Touch – Mobile JS framework for phones.
• Appcelerator Titanium – JS bridge allows you to develop for phones AND desktop
• jQuery Mobile – gracefully degrades very well for less capable phones.
• YQL – Yahoo Query Language, turns the entire web into an API. It helps you pull in lots of data (screenscrape) by Yahoo into XML.
• Node.js – server-side javascript by just using javascript.

Example/Demo
http://freebeernear.me
http://github.com/joemccann/freebeernearme/ (all code)

Presenter
Bruce Lawson, Web Evangelist Opera Software

Opera makes one browser for many devices, so there is some experience in this area.

More people are using mobile to access the web. Many people are abandoning desktops and using only mobile to access the web. Mobile is growing, and is here to stay.

USA top mobile sites:

1. google
2. facebook
3. youtube
4. wikipedia
5. yahoo
6. my.opera.com
7. accuweather
8. twitter
9. espn.go.com

UK top mobile sites:

1. google
2. facebook
3. bbc.co.uk
4. youtube
5. wikipedia
6. live.com
7. my.opera.com
8. bing.com
9. mobile2day.com

Burma top mobile sites:

1. google
2. facebook
3. bbc.co.uk
4. my.opera.com
5. nytimes
6. espn.go.com
7. cnnmobile.com
8. getjar.com
9. topshareware.com
10. zedge.net

Most people want the same information, no matter where they are in the world.

Philosophy

There is no mobile web. There is only the web which we view in different ways. There is also no desktop web. or tablet web.

A separate mobile site is not necessary.

Three Methodologies (pick and mix between them)

1. special mobile site

This is almost always not the right way. Sometimes this is the cheapest quickest way (CMS does it?). There are branding difficulties with this – your audience may not even know they are on the same site.

• Refactor for small screen, but do NOT dumb it down for mobile.
• Offer the users a choice – desktop or mobile. If you send to a special mobile site, give them a link to send them to the full desktop site (and remember it… cookie). They know what they want… you don’t.
• Do NOT do browser sniffing! This is not future proof. 37 million new devices come to the market every week. You will never be able to detect those and keep up.

2. do nothing at all

• Just send the regular site to mobile browsers.
• Mobile browsers know how to deal with the web (you can now listen for touch evens with js).
• CSS3 can give you a lot of power (that also degrades well). Make sure you make these things cross-browser and future-proof it (putting it there for when it does support it). Also put it without the prefix for when it is supported everywhere. It is only eye candy by the way.
• HTML 5 – don’t use canvas for UI.
• -SVG – supported in 4 modern desktop browsers and IE9. It is not supported in native Android browser, fine in Opera Mobile on Android.
• -Geolocation
• -Offline support to in-browser storage
• -Application cache so it’s available next time.

3. optimize for mobile

• Make a site that can respond to the differences between browsers and platforms.
• Make the same information available to users irrespective of the device they are using.
• "responsive design with CSS cedia queries. Query device capabilities (width, height, orientation, color, resolution, aspect ratio) NOT browser sniffing.
  @media screen max-width: 480px;
  Examples: mediaqueri.es
• Viewport metatag – maps physical and virtual pixels.

Tips and Tricks

• Don’t use <table) for layout (duh!) – they take 2 passes to render and it’s very heavy on CPU (this matters on mobile).
• Give dimensions of images in HTML. If you don’t leave dimensions the browser doesn’t know to leave spaces for them and has to re-render.
• Consider <a href="tel:xxx"> for phone numbers (makes the number clickable and calls the phone).
• Code accessibly – lots of similarities with accessibility techniques: relationship between mobile web best practices and web content accessibility guidelines.
• Minimize HTTP requests. Combine JS into one file (same with CSS). Use CSS sprites to combine decorative images. Consider SVG or <canvas> for images.
• Use ems instead of px for fonts
• Fluid layouts: remember motion sensors
• Background-size / SVG background images
• Turn off fancy shadows transitions with media queries (it’s only eye candy).
• Data URL’s
• JS tips: put <script> elements as far down the source as possible. <script defer> <script async>
  If it must be in the head, put it after CSS
  Feature detect – e.g. Modernizr

Apps

HTML5 and JS is turning this into apps.
Widgets – applications filled with web standards goodness (it’s just zipped up).

In the future you’ll be able to just build apps on CSS HTML5 standards and have them work everywhere.s

Presenter
Jane McGonigal, Creative Dir Social Chocolate

“The collective conscience and will of our profession is being tested as never before. Now is the time for us to have the courage for legendary work.”
-Dr. Caldwell B. Esselstyn, Jr.

We spend 3 billion hours a week playing video games… is it worth it? Are we leaving a positive legacy for the future?

We’ve convinced ourselves: Games are a waste of time. Games are addicting – and a distraction from what really matters: real life. Am I filling my life with something by playing games or just distracting from reality. Somehow gamers are not good at life, because in game world you can do such bigger things. It’s a way to escape from real life.

Playing games is the single most productive thing we can do with our time. We need to get half the planet playing games by the next decade.

What do you want to produce more of? We’re so busy trying to be productive, we don’t ask ourselves what we want to actually produce.
Jane wants to produce more:

• Positive Emotion
• Relationships
• Meaning
• Accomplishment

(spells PERMA, from Dr. Martin Seligman)

*Massively Multiplayer Thumb Wrestling*
(I won my node!)
If you hold someone else’s hand for 6 seconds, you release oxytocin and begin to trust people.

Does 10k hours of playing computer and videogames have side effects?

No correlation between kids and violent video games going out and being violent. Also no correlation between good happy games going out and doing good things.

Music Genre games – a study says that for 67% of gamers who did not know how to play an instrument, they were inspired to pick up an instrument and learn it. 73% went out and played their real instrument more. Games can inspire us to tackle things in real life.

Avatars – if you play with a hot sexy avatar, it will change how you perform in your real life. You’re more confident with a hot avatar, and you would interact (flirt) with more people after 90 seconds playing with sexy avatar in game. Are games changing who we think we really are?

U. S. Army found that playing 3 hours of video games created lower incidents of bad psychological problems (PTSD, etc.).  Are games protecting us from real life harm?

Gamers by far had fewer cases of reported nightmares. There were more lucid dreams from gamers. Gamers can control themselves in dreams (like in a video game). Can games give us real-life superpowers?

The science doesn’t work if:

• You play games more than 28 hrs a week (this is the place where negative impact in real life starts)
• You’re an asshole to other players.
• You’re playing with a bunch of assholes.

The opposite of play isn’t work – it’s depression.

Games are unnecessary obstacles we volunteer to tackle.
Golf is an absurd way to put a ball into a hole. We make it hard on ourselves.

Eustress
Positive stress – the kind you get from a game. You volunteer for the stress in a game. We get adrenaline quickened breathing. We still get the good changes as exhilaration and excitement but we choose the stress. I’m feeling this way because I want to tackle this challenge.

When we’re in a state of eustress, we set more and more optimistic goals. We hang in there longer, and are more positive to others. “Work is more fun than fun.”

Games activate 10 powerful positive emotions.

• Joy
• Relief
• Love
• Surprise
• Pride
• Curiosity
• Excitement
• Awe & Wonder
• Contentment
• Creativity

Being happy makes us successful – and not the other way around.
Better grades in school
More popularity, social support
Higher achievements in personal goals
More raises and promotions at work
Longer more satisfying marriages
(meta study looked at 475 other studies for this)

We can change our lives by achieving “the 3:1 ratio”.
It’s positive emotions for every 1 negative emotion you feel

Emotions are contagious – both positive and negative. Every time you feel an emotion, scientists have discovered it spreads on aver to 6 other people you know.

Positive emotions make us super-resilient
People with positivity ratio of 3:1 or higher not only are happier and more successful – they live 10 years longer.

With great gaming comes great responsibility.

Presenter
Khoi Vinh, Subtraction.com

History

A dot on a piece of paper is randomly placed, when you add a 2nd dot, you suggest something hidden. There becomes some sort of order, maybe everything is placed there for a specific reason

Any two marks on a single plane is enough to create a grid, a design, an order.

Man has always tried to find order in nature. Is there a hidden sense of order in the world around you?

The international paper standards are designed off the idea of fractals. You divide in half then half, then half again to get paper standards.

The first grid that mattered to people was the brick. You build a wall. When you put together a lot of walls (city) you start to create a grid for society.

The Power of Grid for Design

Grids add order continuity and humanity to information. They allow an audience to understand  information and predict where to find new information. Grids make it easy to ad new content consistent with existing content. They facilitate collaboration between people.

History

There is a parallel between engineers and designers in standardizing the way things fit together and function in the world. Try to derive beauty from the machine. Past: printing press, current: web browser.

Designers acting like tyrants

It’s about imposing that order we see in everything on the things around us. You have to push to get that order.

Using Grids on the web

Problem solving before aesthetics. You serve the user experience. The simpler the more effective. When working with grids, you start to stop thinking about the noise and just prioritize the grid.

Steps

1. Research – prioritize and catalog before you jump in.
   -technical constraints
   -business constraints
   -content/editorial constraints
2. Wireframing
3. Preparatory design – do the math, sketch, calculations, page sketches
   -Not every sketch ends with a grate design, but every great design starts with a sketch
   -Sketch the way that makes sense for you (pencil/pen/illustrator/HTML
   -Sketch throughout the project (go back and fourth)
4. Visual design
5. Code
   (in whatever order works for you)

16 unit grid = 8 columns = 3 regions (2 columns and 3 columns) = 2 fields (horizontal regions)
Units are a base atomic level of the page, columns are containers for text.

Mathmatica Formulae

The golden ratio and fibonacci sequences works, but doesn’t need to be exact. Divide by 1.618.

The rule of thirds is an important rule. Bundle things into a group of three. 3x3x3, where the grid lines intersect is where the eye will go.

The power of constraints

The Ad Unit
It can be very helpful to have an ad unit around which to build your grid. This is something that doesn’t change or move. It helps to make a lot of decisions.

The View Window
How will it be viewed. Browser window 1024×768 (real: 960×950).

Sketches
Really quick and rough, they don’t necessarily need to hook to the grid.

Grid it up!
Start hacking away at the page and begin moving things around. The anchor (ad) can only fit into certain spots and will give you a starting point.

Sample typesetting
Determine the optimal line measure in the main body that you plan to work with. The human eye can comfortably 60-80 characters on a line. Once you have you sweet spot for text, try putting it into multiple columns as well to see how that works. Font size will also help to determine the line spacing. The heavier the text, or wider the character, the more line spacing you’ll need. The grid is a guide. Overly strict adherence is not necessary.

Establishing Fields (vertical grid)
You have to deal with unknown heights. Golden radio: 960 (height) divided by 1.618 = 593.

Designing the page template

Place the logo, maybe a login on right (by ad)

When placing navigation, put the edge right up to the grid. Sometimes with different states (mouse-over) you can nudge the nav elements over consistently

Fluid Grids

Use the full width of the browser to display content. You still want to use the grid to guide size of elements and consistent placement of elements. It’s new, so best practices are still being developed.

Users crave landmarks. Users want elements that appear the top findable at the top. They want a shared user experience. Designers should not be erratic.

Devices should behave consistently. Behaviors should be consistent with each device. Behavior variations should be virtually unnoticeable.

More than layout changes. – content needs to change to – there needs to be more of it or less of it, accordingly.

Is it worth the expense? The answer might not always be yes. It might make sense to just use a fixed solution for one device or another device. Satisfy what the user expects out of the design experience.

Conclusion

Grids are a balancing act. Design aesthetics can be changed going forward.

The grid is an opportunity to benefit from the past, not to recreate it.

For grid principles to effect a truley positive charge… the esigner must adapt them to new solutions.

Presenters
David Baron, Mozilla
Elika Etemad, W3C Invited Experts
Molly Holzschlag, Developer Rel, Opera Software
Sylvain Galineau, Microsoft
Tab Atkins, Google Chrome

All members of this panel are part of the CSS working group.

Minutes from the CSS working group go out online every day… so keep up with what we’re doing and provide input.

How do you prioritize at the W3C?
What is the most interesting and fun to work on? Figure out where it is hard to develop websites in CSS, that’s where the time is spent.

Prioritize to specs that are really stable, or exists in other browsers already. IE doesn’t like to prototype in the browser. Also look at what people are asking for.

Specs need to stew a little while. They need to sit for a while on the heat before implementation. There should be time for collecting feedback. If there isn’t a lot of feedback, then it needs to sit a little longer.

You have a lot of opportunities to comment on standards. Tweet, or comment on the minutes. The working group is interested in feedback. http://www.w3.org/blog/CSS/

There are new features that make things easier, and new features to do things never done before. Sometimes more feedback comes from the things that you can do easier because they are fixing frustrations developers already have.

What do you think are the most damaging mistakes made by the CSS working group?

Fantasai: Making the width property not including border/padding. The current box model is not the best way.

Tab: Layout: This was short-sitedness, but CSS it was a document language, not for layout. Floats are being used for something they weren’t intended to do (they were meant for images and text).

David: Some of the most damaging mistakes were when the group made things more complicated than necessary. We hid some specs away to deeply in a document, a spec was interpreted in a way that lead to complexity (and browsers interpreting things incorrectly).

Sylvain: Floats are baffling… why not just position it like everything else? They are very fragile in actual use. Z-index is also a bit strange. Missing: at this point we don’t have a CSS substitution mechanism. Instead of adding to a style sheet, find a way to substitute… add more process information as it scales.

How come in 20 years of web we have not come up with a reasonable way for layout?

Tab: Layout managers are bad everywhere. It’s hard to do layout in a way that is easy to use. Flexbox, Grid, Position, Regions are coming soon. Soon these times will be available for CSS layout

Fantasai: Layout is hard to implement. Width and Height took a LONG time to implement. It’s a hard thing to add to webpages incrementally. On the web it’s not as easy as in print where everything is fixed. Websites are fluid, which adds complexity. The systems that people come up with for print don’t necessarily work in CSS.

David: It is important to look at different use cases for layout. Do we want one system for many use cases, or different systems for each use case? What are the use cases we need to solve?

Sylvain: Layout of what? An ad for a magazine are very different than say, UI. You can’t solve everything for everyone.

What’s coming in IE9

Border radius
Multiple backgrounds
Shadow
Typography
Grid
Flexbox
Fonts
Transitions (w/out javascript)
Image values (gradients)

What’s coming in Chrome?

Many types of typography improvements

Presenters
Jessica Steel, Pandora
Joe Berry, Verizon
Nick Pudar, OnStar

The primary task is getting people from point A to point B easily.

Pandora started on just the web, but the vision was larger than that. They wanted to redefine radio. The promise of the the internet for radio is personalization. The Pandora service caters to individual’s taste. This experience should translate everywhere our listeners want to hear radio – and that means in the car.

How do we get data to cars and let them communicate quickly and easily (and cheaply).

What motivated sync technology?
It started at just a hands free device. Why don’t we give it an aux jack, then why don’t we give it a usb jack, then why don’t we hook it to a phone. It became bigger than just hands free. So we changed the way we looked at the problem from that way instead. It started as something fun. Why don’t we find an app that works well on the phone and just for fun bring it to the car.

It was hard because the development cycles in the automotive industry were longer than the typical cycles in electronics.

4G will change the game and open up the bandwidth to be able to do more things. It’s not the speed, but the bandwidth with which data can get to a vehicle. Just like people created apps for smart phones, you will see this type of thing (categories and products and services) for 4G. It changes the payload.

We’ll be seeing a lot more devices delivering internet that didn’t before. It isn’t inconceivable that all of our appliances will have that connection.

What are the things you’ll have to do differently with all this mobile technology?
Safety is important, but they want it to be seamless as possible. Developers need to consider making apps for the vehicle in the most responsible way possible.

Presenters
John Battelle, Exec Chairman Federated Media
Matt Mullenweg, Automattic/ WordPress

WordPress has become more than just a blog. There are 13-thousand + themes that make it more than that. Currently about 12% of the web is powered by WordPress.

Stats:
How many people go to WordPress.com?
29-million uniques/month 330-million/month on WordPress.org

It’s invisible when at it’s best and it’s just a tool. It’s all about the people who create it.

Some bloggers said blogging is dead
There are a lot of different mechanisms for publishing on the internet. WordPress adds a blog every 2 seconds. As people grow more comfortable with publishing, the number of bloggers grows as well.

People say blogging is dead because of Tumblr and Twitter.
Tumblr – It’s a fantastic product and works really well for photos. Tumblr gets about 90 page-views per visitor and currently are ahead of WordPress.
Twitter – They have integrated the reading/writing experience. You are one step away from writing when reading.
What have these services inspired you to do with WordPress?
It has made us pay a lot of attention to mobile. Twitter gives you everything your friends say very very quickly.

Ads on WordPress.com
Ads only show at the bottom of a post for those coming from a search engine direct to a permalink and are not using Firefox. The ads are needed to pay the bills, but they don’t want them to be totally intrusive. In Twitter, ads are tweets. In WordPress they are just another smaller thing on the page. The goal is to show as few ads as possible.

How else do you make money?
Upgrades. Akismet, and video services. It is a user saying, “This is valuable” and they open up their wallets and give money.

Jetpack
A new plugin for wordpress that brings the best stuff into a single plugin for wordpress.org – things that have been in wordpress.com for a while. The goal is to have feature parity between .com and .org

Guided Transfer
For $99 we will help you move off wordpress.com and get you out on your own hosting.

Recent DDOS
A botnet was pointed at wordpress.com filling up the “tubes.” It was possibly politically motivated (Vietnamese sites). It was mainly coming from China. Turns out it was not politically motivated. It was some gaming related site.

Your story is similar to others (own company with lots of venture, young)? What have you learned by being the young tech founder?
It started at SXSX in 2002 when 19yrs old. It started in Houston and was good to be outside Silicone Valley. The more I’ve given away, the more I’ve gotten back. It was built on an existing open source product. They got so much out of that open platform they were building on that it made sense to give back.

Talk a bit about WordCamp
Started about 5 yrs ago in San Francisco, and wanted to do an even like everyone else.  Could we create a free, or cheap conference to help the community to exchange knowledge. Now they are happening all over the world. They are mainly community driven. We’ve created a template to help other people do them.

Twitter Questions:

Can you deflect future attacks?
We always learn something. We now have a better relationship with the Tier 1 providers to make it better next time.

I want to know about the future of WordPress!
3.1 just came out, 3.2 work hasn’t started. Things to come… media! Image handling, video handling, audio handling. Full-screen mode improvements to make it a really great writing experience. First users are authors (bloggers) everything else will follow.

Presenters

• Drew Davidson, Director of Entertainment Technology Center Carnegie Mellon
• Jared Lamenzo,
• Juliette Lamontagne,
• Rebecca Bray, Smithsonian Instituion
• Richard Scullin,
• S Craig Watkins, University of Texas Austin

New federal grant opportunities are being provided to get students outside. “No Child Left Inside”

75% of American teens have a cell phone.

What is Citizen Science? How does it connect to a classroom?
There are plenty of things to explore wherever you are. Mobile technology quantifies what kids are learning outside and helps them through the thinking process or naming etc. It helps kids interact with the world around them, and collect data about the things they are learning and seeing.

We want kids to see how they fit into the world and how they can make an impact.

What are the benefits of being outside? It doesn’t always mean that a kid will learn while out there.
It’s about closely observing things that you see every day and getting people to observe a little more closely

What Challenges to you face?
In some big city schools technology is not allowed (can’t have cell phones and use YouTube because it’s blocked. Eventually they’ll start to allow this.

Is the mobile an add-on to traditional learning?
It’s not just about one single location. People have access wherever they go. Sometimes the teacher isn’t the one who provides the knowledge. It gives the learners a bit more space to inquire about something. They might be able to look something up that the teacher doesn’t know.

A recent study was done of students. The control group used brochures and compared it to kids using mobile phones. There was a big difference in the feelings towards the environment and their interest in a scientific field.

What’s exciting in this field?
Augmented reality.
More sensors on the phone.
Bringing this technology into the classroom and allowing it.
Don’t teach for the test, get students to be well-rounded citizens.
Look at everyday apps and think about how they could be used for education.

It’s once again that time of year for a trip to Austin, TX for South by Southwest Interactive Conference. I’ll be collecting notes from the various sessions I attend right here on this blog (category sxsw) as well as on my SXSW sub-blog (http://sxsw.techory.com).

SXSW® Interactive features five days of compelling presentations from the brightest minds in emerging technology, scores of exciting networking events hosted by industry leaders, the incredible new SXSW Trade Show and an unbeatable lineup of special programs showcasing the best new digital works, video games and innovative ideas the international community has to offer. Join us for the most energetic, inspiring and creative event of the year, taking place March 11-15, 2011 in Austin, Texas.