Generic Trademarks (Kleenex, Corn Flakes) on the web are AJAX & HTML this lead the way for responsive web design, which includes fluid grids, flexible media and media queries.

Adaptive web design is a larger container for responsive web design. It just happens to be the term that caught on.

Principles of Adaptive DesignUbiquity – The web is not just a computer any more, it includes many many more ways to access now. What will it be in the future? Cars? Refrigerators? Watches? Printers? TV’s We have to reach a LOT of devices. “This isn’t a bug, but an opportunity.” Adaptive isn’t just “web light”. Mobile users should be able to access everything their counterparts on a full browser can. Just give people what they want regardless of how they access.

Content Parity – Does content parity trump all? The typical “mobile context” is on the go – quick access. There is on the go, but it doesn’t include everything. Just make quality relevant content accessible on whatever platform it’s being viewed on.

Ubiquity – Your design needs to work across the entire design continuum, not just certain browser sizes, or phone sizes.

Performance – 70% of mobile users expect their site to open as fast or faster than regular browsers. If your site doesn’t load in 5 seconds, they’re gone. Performance is invisible, so it’s a hard thing to root out. It lives underneath and it’s hard to measure. Performance should be a design feature. Mobitest.akamai.com will help test mobile performance.

Enhancement – Responsive design is NOT one size fits all. Don’t go mobile last, but go mobile first and then grow. Build the experience up from mobile. It’s not about building for the lowest common denominator but starting and building up from there. Be careful with a single (javascript) point of failure. Don’t over-engineer things… simple is better. There is a difference between support and optimization (you can’t test on absolutely everything out there).

Future Friendly – Things are going to change. There is no such thing as future proof. Just be future friendly. People have a low tolerance for BS. Focus before your customers do it for you. People will find ways around a bad experience (Instapaper, Flipboard, ad-blocker). On the web, the more backward compatible you are the more forward compatible you’re likely to be.

How to

Get to the meat – don’t waste time on huge headers.

Navigation: It should be like a good friend – there when you need it, but out of the way other time. A menu button to get nav out of the way is good

Search Form: Prioritize search to provide a way to get around.

Product Info: put it up front and get people to it.

Carousels: Make sure you actually need one. Cycle through like items, make sure things are related and make sense.

Product Form: make sure the phone pulls up the right keyboard

Share Buttons: They are big (a lot to load)

Find Nearby: It is geared to a mobile user, so may not be necessary for desktop users.

Auxiliary Content: Make sure content is prioritized and bring in content when needed.

Scanability & Performance
We are always scrolling through a single content type. Don’t make your users scroll through EVERYTHING. Collapse content so it isn’t everything and the kitchen sink.

This stuff is hard. It is always changing, but we need to do it. We need to be aware of landscape.
“If you’re finished changing, you’re finished” – Ben Franklin

This talk demonstrated a new technique in brainstorming that Will created over time for use at R/GA to help create a more productive brainstorming. This technique is based on his observations of traditional brainstorming and where it falls short. The technique, like any process or technique may or may not work in all situations and should be adapted for your use. I think many times the structures of these get in the way of actual results, but this one seemed to produce results for their organization and looked like it could produce results elsewhere if done correctly.

He talked about the history of programming languages, object oriented languages and the creation of a general (not specific to a particular platform) language. C -> Java -> HTML. The web works because HTML didn’t tell you what you could use on top of it. We are to a point where javascript can do many things now. HTML was designed to be completely declarative. It can be ready by many different things and many different devices. If you’re going to transmit something, use the least powerful language you can. Simplicity makes it difficult for something to be attacked. There isn’t a need to do additional things (jpg viewer doesn’t need to run additional code).

What is Tim Berners-Lee’s job?
To get people to use open standards. Javascript is a nice language to work in tandem with HTML5. It allows you to connect to hooks in certain platforms – API’s are available in Javascript to connect to mobile devices. You do need to be careful when writing HTML5, there are still platforms that don’t completely support it. The dream is still to write once and run everywhere, and HTML gets close. HTML5 is everywhere. Soon pixels will be cheaper than paper and printing.

Platform
When TCP/IP was developed they completely ignored how it was going to be used. You throw something down the pipe, and it comes back in the same order. It wasn’t designed for anything specific. When you build something big and powerful it’s not what you can do, it’s what people can do with your stuff.

HTML used to fit on one sheet of paper, and has grown significantly. It is a platform of interconnected knowledge. It was quasi-static. Now with Javascript, webpages are dynamic. There are now competing stacks of Javascript out there. Now, each document is a programmable thing – almost a computer in itself.

Teach kids that a computer isn’t just box, but it’s anything you can make it. It just doesn’t run programs, but it’s something you can make do anything. Don’t just teach kids to use MS Word, but tech them computer science and tell them that the “box” can do anything you make it do.

Platforms are build so that they can work with peers. Things need to be modular so that others can build on top of it.

Threats
Will a packet be delivered? Are providers doing inspection of these packets and not delivering them? The data being carried in these packets can be stored and saved so they know what you’re looking at for various reasons. Spying and blocking and disconnecting shouldn’t be able to be done by anyone (companies or government). Our democracy relies on the internet being open. Build systems that are open and neutral.

Google and Bing really try to do the right thing and not promote “bad” companies, but it is a hard thing to determine sometimes. The Decormyeyes.com guy was not helped by negative reviews.

Take a look at the cached version of the page in google or bing to see what the bots see. There is also a tool in google webmaster tools to see what the bots saw.

301 redirects do work – the fewer you have the better.

Go to the side of your “dirty” competitors terms, and you’ll make it eventually.

How are press releases handled in search engines? They haven’t been trusted since 2006. The value of a press release is to convince a newspaper to run with it… NOT to get search ranking.

Schema.org: Structured data markup that will help search engines organize your content. They don’t necessarily increase ranking, but helps the search engine know what they are seeing. This works for different types of content. Data highlighter can make this easier than creating the xml markup.

Posted: March 8th, 2013 | Author:Scott | Filed under:SXSW '13 | Comments Off on Storytelling in the age of the tablet

Dr. Mario R. GarciaFounder/CEO, Garcia Media

How do we adapt to change? Change is one of the most difficult things to deal with.

Media Quartet

Mobile (lean forward)

Online (lean forward)

Print (lean back)

Tablet (lean back)

Show your readers everything, that it is available across all platforms.

News is broken on mobile: twitter, mobile web, etc.
On election night most of the visitors came from mobile.
Mobile editions are going to be very important. Don’t just feed the mobile from the other platforms, but make a mobile-specific edition.

What features make an ideal tablet app?

Currated Content

Cut down the buckets of content

Design for the eye, but brain and the finger.
Make the finger happy – give them pop-up moments. Make the finger happy and give it something to do. Hook photos to videos or interactive content.

Design for the tablet by laying it all out and figuring out where the pop-up moments are. There are NO page numbers. Look for places to add interaction.
The first 10 seconds are very important.
People prefer to navigate through images instead headlines.
Photos and video do very well in tablet editions.
Tablet users prefer to read tablet editions (lean back) while relaxing in the evening (mobile/phone use is during the day).
Basic tablet edition is a PDF, better yet is a curated edition specifically for a tablet.
Do a tablet edition in a workshop setting with everyone there concentrating on:

March is once again upon us, so that means it is time for another South by Southwest Interactive conference in Austin, Tx. I will be collecting my notes once again on this blog (category SXSW) as well as on my SXSW sub-blog (sxsw.techory.com).

Scheduled March 8-12, the 2013 SXSW® Interactive Festival will feature five days of compelling presentations from the brightest minds in emerging technology, scores of exciting networking events hosted by industry leaders, the 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.

This session was a core conversation, which means the room was filled with Google+ users talking about the product. The session was facilitated by a Google representative. There was generally good back and forth. These notes may be a bit disjointed because of the quick pace of the conversation. I think I was able to capture some good points, but it was not a structured presentation like many of the sessions at SXSW.

G+ Hangouts will eventually provide an option for “On Air” which is meant for a one to many larger group setting vs. a video conversation between up to 10 people (currently in beta).

Why Google+? The main reason is create a common thread across all Google products. It is both social and search, and provides a large input to Google’s core, search.

Search + Your World pushes a lot of content posted on G+ into higher placement in search results.

Connecting your website to your G+ page using “rel=author” code will create that connection and ultimately help search results.

Promotion of your G+ Page

To get traction on your pages, they need to be marketed or pushed externally. You can only get so much internal connection to your G+ pages.

Storming JunoA Canadian file about storming Juno Beach in WWII. The interactive portion of the film started moving before filming of the video portion and provided an opportunity to collaborate before production actually began. Many things couldn’t not have been done if the interactive portion came after the fact. The interactive team put together visuals/proof of concepts and wireframe demo/discuss the project with the filmmakers. It helps the more linear people (filmmakers) understand the digital/interactive side.

My Sep 11th (myseptember11th.org)The interactive piece was put together after the film was made. It included profiles of people’s experiences on Sept 11th. There is a user-created component for uploading video/text/photos of experiences.

Cafe De Fiore (theatrical release film)The interactive portion was built around the script of the film, since it was the first piece of the film that existed. They would release different portions as the script became ready even before the film was complete. This was all released progressively up until the film was actually released in theaters. Once this was out there, the filmmakers got interested in interacting on the social networks because of the buzz that the initial released content created.

Things to ask with a combo web/film project:

What is the property and how much participation is there from both sides?

Will the director be involved on the web portion?

Which one creates the other?

Is the web just an entry point, or is it more vertical, and just promotional?

Who controls the different portion after the fact? Who takes on the social aspect afterwards? Make sure everyone is involved to ask these questions.s