Categories
SXSW '12

Best Practices: Native + Web Hybrid Mobile Apps

Saturday, March 10 – 11:00AM -12:00PM
Charles Ying Developer Flipboard

Flipboard takes feeds and streams from all over the web and turns it into a beautiful magazine layout (for iphone and ipad).

Flipboard is a hybrid application – it is a mix between a web app and a native app.

Web App
Put a simple "app" wrapper around a website

Native App
Has a native UI with hooks into the device

The idea of a hybrid app is to take the best of both worlds and combine them into something that takes advantage of both worlds. Use the best parts of web and the best parts of native and combine them together.

Do NOT try to emulate native UI – they don’t feel right, and many times have too much overhead.

Bridging Web and Native
Use a UIWebView with javascript calling the native code when necessary.

Save power – do fewer simpler things.

Working with Web Code:
Debugging was difficult, so a simulated HTML environment was created for testing
Move hotspot areas into native code
Pay attention to what your JS libraries are doing, strip out the things you don’t need
Consider what the browser has to draw and composite on screen.

Mobile Graphics
Aim for high frame rates (60fps)
Use the GPU acceleration for animation and UI
Use CSS3 Animation + Transitions
Watch your graphics memory use
Shadows and gradients are typically slower on mobile devices
Consider compositing and overdraw – transparent elements have more overhead

Existing Frameworks

  • PhoneGap, trigger.io for UIWebView bridge
  • Appcelerator for Custom JavaScriptCore
  • Spaceport, ImpactJS, CocoonJS for Gaming
Categories
SXSW '12

The State of Browser Developer Tools

Saturday, March 10 – 9:30AM -10:30AM
Brandon Satrom Developer Evangelist TelerikGarann Means JavaScript EngineerJoe Stagner Sr Program Manager Developer Technologies Mozilla CorporationMike Taylor Web Opener Opera Software
Paul Irish Chrome Developer Advocate Google Inc

Firebug was released in 2006 just viewing the DOM was a big thing at that time.

The Last Year of Developer Tools

Chrome

  • Hit the little cog for development tools.
  • You can view your JS files individually
  • Customize the layout of the tools
  • Spoof user agent
  • Color picker available when adding/changing colors
  • Revision history is created for all changes

Firefox

  • You can see a 3D view of a site with web developer.

Opera

  • Dragonfly (dev tools)
  • Remote debugging allows you to debug your site on other devices. You can send your site to another device via ip address, or it will detect your device on the network.
  • Color picker gives you a lot of detail when selecting colors from an image or screen. It will also give you related colors or workable palettes.
  • CSS Profiling: It shows how the CSS loads on the page visually and allows you to go in and see where things get held up.

Internet Explorer

  • Format Javascript will provide a more visually appealing script (no wall of text) to work with.
  • Browser Mode can do full emulate older versions of the browser inside IE10.

Remote Debugging

Adobe Shadow sends stuff to your mobile device as well as open dev tools.
The new Chrome for Android also provides remote dev tools (connected via USB).

Opera Mobile Emulator will launch a profile for a number of phones to show you what your site/code looks like on that device.

Categories
SXSW '12

Effective Social Media Presence in Higher Ed

Friday, March 9 – 3:30PM – 4:30PM
Deborah Maue Asst VP DePaul UniversityLiz Gross Dir of University Mktg & Comm University of Wisconsin-Waukesha

This session was a core conversation – a room full of peole in higher education talking about topics related to social media. These are a few of the take-away notes.

  • The tendency in social networking is to try everything when new social networks come up – doing one thing really well is better than many things only partially.
    (my thoughts are to have at least a presence in the areas where your audience is, but to focus and prioritze the areas where most people are.)
  • Engage existing groups to participate in official events and they will help to promote your information and be active in your ofiical things.
  • UW Madison has a social media user group made of social media managers across campus (experts and beginners). They hold monthly meetins to talk about what is being done.
  • Penn State started a national chapter of the PRSSA Social Media Club.
  • Your number one goal with social is enagement.
  • Social media style guide base on the media. This guide may be very very diferent from the official university style guide. Social media is much more conversational.
  • Being geninune is very important
Categories
SXSW '12

Designing for Context

Friday, March 9 - 2:00PM - 3:00PM
Andrew Crow VP, Experience Design GEBen Fullerton Director, User Experience Method
Leah Buley Design Strategist IntuitNate Bolt Pres Bolt|PetersRyan Freitas Co-founder AOL/About.me

Slides: http://dforc.org/

Design for different locations, environments and relationships and product ecosystems. What problems exist in all of these areas, and design for those problems.

Examples of Crazy Design Context:
Astronauts in space. Design applications that could be used in the shuttle and on a space station. Zero gravity was a challenge for design.

Browser-based is typical, and moving that to mobile. Desktop/browser first is very different than mobile. Push the behaviors you want to represent first. Don't just map the typical experience into the new context.

Important themes when designing-

Time
Designing interactions for different lengths or instances of time.
How are people using your design? They use it, go away, then come back to it. People live their lives outside of your app or design. Make sure that you design tasks based on the amount of time people have (surveys, etc.).

Ecosystem
What is the bigger picture? How does your product fit into the whole ecosystem? Be sure to take a look at how your product fits in with brand, or social, or other technologies. For many products, the majority of users are entering through mobile interfaces, so a good amount of people don't even see the rest of the ecosystem. You need to make sure that you've created something that can stand on its own in just the mobile environment. You also have to look at the difference between a tablet environment and a mobile phone environment. They're both mobile, but very different environments.

Location
How do we accommodate and embrace various locations? Provide different tools for your mobile phone that you always have with you. This was used in a Victoria Secret app on the phone that was not in a tablet version because people likely don't have their tablet with them when they are in the store.
Tax Online Accountant app uses mobility in the workplace so that someone doesn't have to stop what they are doing and run to a computer and look something up. This app allows someone to pull up information they need regularly quickly on their mobile device (e-file status). It doesn't need to be out and about.

Form & Technology
What about screen size, input methods, technical constraints?

Brand & Relationships
One conversation... Make sure you are having the correct conversation that your brand represents.

What have we learned?

  • Make sure your users can engage with your products that give them the most value and experience your product in the best way.
  • Be sure that you are aware of your audience and how they are accessing your product and design for that audience and context and the environment they are accessing your stuff.
  • Find quick easy ways to get on your users timeline.
  • Design for the ideal intended experience. Be comfortable with the fact that you might miss something. Just be the best designer you can be for your users.
Categories
SXSW '11

South by Southwest Interactive 2012

It is once again that time of year for my to Austin, TX to attend the 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).

The 19th annual SXSW Interactive festival will take place March 9-13, 2012 in Austin, Texas. An incubator of cutting-edge technologies, the event features five days of compelling presentations from the brightest minds in emerging technology, scores of exciting networking events hosted by industry leaders and an unbeatable line up of special programs showcasing the best new websites, video games and startup ideas the community has to offer. From hands-on training to big-picture analysis of the future, SXSW Interactive has become the place to experience a preview of what is unfolding in the world of technology.

Categories
SXSW '11

SXSW Interactive 2011 Notes – Table of Contents

Friday 03.11.11

Saturday 03.12.11

Sunday 03.13.11

Monday 03.14.11

Tuesday 03.15.11

Other Notes

Categories
SXSW '11

Improv For Everyone

Presenters
Amanda Hirsch Writer, Actress, Online Story Strategist AmandaHirsch.Com
Jordan Hirsch CTO jordanhirsch.net

“The creation of something new is not accomplished by the intellect but by the play instinct acting from inner necessity. The creative mind plays with the objects it loves.”

Improv is a performance-based art form wherein a show is created spontaneously in front of an audience.

You Are Already an Improviser:

  • Your life is unscripted.
  • Your choices create your reality.
  • Honoring your improv skills = honing your life skills.

Specifically Improv Can Help you…

  • Communicate ore effectively
  • Make Decisions
  • Navigate Change
  • Have more fun!

Communicate More Effectively

  • Give and take
  • Yes, AND…
  • Active listening

Make Decisions

  • Consider your objective – you can respond much more quickly when you’ve already decided what you want/need.
  • Know when to edit. You’re practicing trusting yourself.

Navigate Change

  • Still no script – someone else can totally change the scene on the fly.
  • Resistance is futile.
  • Accept and build ("Yes, AND…")
    You have to take the things coming in… but you can build on top of them.

Have More Fun

  • What makes you happy?
  • Do it more.

The better you become at improvising, the happier and more effective person you’ll be.

Learning to improvise = learning to live.

Categories
SXSW '11

The Convergence of Traditional and Internet TV

Presenters
Michael Petricone, SVP, Government Affairs Consumer Electronics Association
Ned Sherman, CEO Digital Media Wire Inc
Todd Weaver, Founder & CEO ivi Inc

There are several policy and legal issues with the convergence of TV and Internet.

ivi TV

Todd Weaver’s ivi is the first online cable provider. They turn your computer into a set top box vs. running coax to your home/tv. They have been fighting for a few years for the right to carry content. They were sent to FCC because they are not governed by the FCC. Sept. 13th, they launched anyway. They got C&D letters from content providers, and counter-sued to try and clear the way. They are paying the same royalties required by law as all the other true cable companies. They are caught between some bad policy that hasn’t been updated for the internet.

At one point ivi had 75 channels pulled from traditional feeds in certain markets. they had to drop many after the lawsuit (preliminary injunction), and now down to 15 channels.

Pricing is $4.99 for just broadcast channels. Broadcast content is the most popular channels out there (sports and news definitely most popular).

Question: Why not go the long-tail route and take the niche channels instead of taking on the broadcasters
A: It’s about growth and trajectory, ESPN brings a lot more people and subscribers. A known brand has a massive audience already, and the long-tail channels get more eyes via discovery.

Question: Is there any presidence for this lawsuit?
A: Satellite had the same arguments and set presidence. ivi is trying to define what a "cable system" is. There is already a royalty system set up for "cable systems" and ivi wants to be part of that. They meet all the required points for this royalty system as a "cable system."

The situation ivi is in is very common in this field. Copyright law is still based on physical media – it has not caught up. We have a content industry is very reluctant to change and update. It is hard to see what is lost here with what ivi is trying to do. The broadcast industry should see these types of new mechanisms as more eyeballs on their content and figure out a way to monetize it instead of trying to block it.

Question: Two front war for ivi –
1. change the definition of the cable system
2. geographic exclusivity (rights are only paid for certain #’s or markets)
Why fight both wars?
A: The battle is copyright law (what ivi is being sued for) retransmission and royalty and FCC (other arm) retransmission consent.  The legal battle is only copyright law, with the FCC deciding on governing the internet.

Google TV

What is the status? The holy grail is TV + Internet experiences. Nobody has really figured out bringing the internet experience to the TV in whole. Google TV brought this closer, and it’s getting better.

The problem is that Google doesn’t have the content and are being blocked by networks. This is short-sighted on the network’s part. They’re basically saying you can’t watch content on a computer connected to a TV, but you CAN watch on a computer connected to a monitor. If you make it easy to access legal content, you remove people going to illegal content.

There is a battle between consumer electronics manufactures and consumers wanting content wherever they are and the content providers blocking content based on the screen they’re watching it on.

Google has teamed up with many other consumer electronics to try for "pro-vid". FCC requires that cable devices be available everywhere. Cable companies want you using their boxes. History: AT&T using only their own phones on their own networks. Similarly the cable box should work the same way (as long as it doesn’t harm the network). You can hook up the devices of your choice. Google TV would like to jump in on this and become a cable box.

Google vs. Viacom – Google was protected by DMCA, but up for appeal. There really is no clear winner in this. Google gets views, and Viacom (content owners) get promotion.

Final Comments

Content providers are concerned with non-authorized content on the Internet. COICA could shut down websites if they are considered as infringing copyright. There is no due-process.

Categories
SXSW '11

Hacking RSS: Filtering & Processing Obscene Amounts of Information

Presenter
Dawn Foster, MeeGo Community Mgr Intel
Presentation Slides and Videos

295 Exabytes of data in 2007, amount doubles every 3 years, 4 months. Over 600+ Exabytes now. You want to find the needle in all of this data.

RSS Alone is a start. You can follow the sources you want, but…

  • Do you care about everything in each feed?
  • What about feeds you aren’t subscribed to?
  • Can you keep up with what you have?

Prioritize Your Reader (Google Reader)

  • Put thins you care about at the top (yahoo pipes, things you really really like)
  • Categorize
  • Don’t try to read everything. Get to what you can.

Outsource and Crowd-source New Sources

The Real Magic is in Filtering RSS

In Google reader, a yahoo pipe of analyst research blogs mentioning Online Community, a yahooo pipe of analyst research blogs mentioning Meego.
You need to filter out thing you don’t care about.
Another yahoo pipe pulls in favorite blogs using PostRank to find only the ones with a lot of comments or social mentions.

RSS Filtering Tools

  • Yahoo Pipes
    You can filter any data found in any field of the RSS feed.
  • FeedRinse
  • FeedDemon
  • Code your own

PostRank

  • Takes the best posts in a feed
  • Ranks it on engagement (links/sharing/comments/etc.)
  • You can get the output as an RSS feed
  • Feed includes postrank number in a field which you can filter against.

BackTweets

  • Data about links on Twitter
  • Finds links regardless of shortening service
  • No RSS Feeds (no longer available)
  • But… You can use the API = Yahoo Pipes to build one!
Categories
SXSW '11

Anatomy of a Design Decision

Presenter Jared Spool, Founding Principal User Interface Engineering Video and Slides for this presentation are available at Jared's site. How do designers make decisions? Gray’s Anatomy book, 1858 describes the entire human body. This changed medicine by giving everything a word and a name. Anatomy: a study of the structure or internal working of something. We are missing this for design. New York Times vs. Havenworks.com vs. Etsy Design decisions went into all of these sites. Many decisions were made – all of the little decisions determine the design. The choices we make take our designs in one directions or another. We never talk about those choices, or the decisions made to go in one way or another. Jason Fried from 37signals He makes decisions for him. They only design for themselves. This type of design works. Self Design When we design something for our own use Works great when: Our users are just like us We regularly use it just like our users do Condition: you have to use it every day "dog fooding". If you find something frustrating, you will fix it for you and everyone else. Unintentional Design When the design just happens on its own Works great when: Our users will put up with whatever we give them We don’t care about support costs or pain from frustration Design Decisions Styles You can move from unintentional design to self design and start using it. Genius Design At a certain point you stop getting things out of research and just build based on experience. When we’ve previously learned what users need Works great when: We already know their knowledge, previous experiences and contexts We’re solving the same design problems repeatedly Activity-Focused Design vs.. Experience-focused Design List Users and Tasks those users do. Activity-focused design can only get us so far. Experienced-based – Six Flags thinks about activities, Disney thinks about the experience. Design based style guides do not work. Rule based decisions prevent thinking. They are not informed decisions. Design doesn’t work that way. Design wants/requires thinking. This FAILS on exception cases. Things fall apart when there are no rules. Teaching a bit of design is actually better. Pair good design organizations with poor designer organizations to create "The Process" or "Recipe." Sometimes we confuse process with methodology (being able to do something over and over again). Dogma also plays in and is a faith that certain things just work. (on the other side of the spectrum…) Techniques are the building blocks that go into every step of the process (they need to be practiced). There are also tricks, which are techniques not quite used the same way. The best companies did not have any dogmas or methodologies. The worst had a lot, and when they got stuck, they didn’t know where to go. Best used techniques and tricks, worst used rule and faith-based decision making. Design Patterns This is what we’ve done, and what has worked. Educate one pixel at a time. No hard fast "rules" that you must follow. Discoveries about Design Decision Styles
  • There is a place for every style of design – every one has its purpose.
  • Great designers know which style they are using.
  • Great designers use the same style for the entire project.
  • Great teams ensure everyone uses the same style.
  • The more advanced the style, the more expensive it gets. Agencies can’t go beyond Genius Design Activity-focused and experienced focused must be done in-house
  • The more advanced the style, the better the design.
What kind of designer do you aspire to be?