SXSW 2009: Change (v2)

Saturday, March 14, 2009 11:30 AM
Lawrence Lessig

Wikipedia chooses not to use advertisments on their website because then they feel people viewing the website will just think it is an advertising fluff. This coice is estimated at a loss of $100,000,000 per year in advertisment revenu.

Clinton, as the first lady, was against a bill in legislation which would disallow people to get out of credit card debt when claiming bankrupcy. However when she became senator she was given contributions from credit card companies of over $140,000 and she flipped her votes.

It has been proven that when doctors are given pens of different perscriptions, those doctors are more apt to perscribe those over others.

The sugar company convinced the USA government to put in their nutrition information that 25% of your daily intake should contain sugar for its nutritional benefits. According to the new nutrition information having M&Ms for breakfast, a greesey burger for lunch, three slices of pizza for dinner, and cookies for desert is “balanced.”

We have a corruption, but its not the same as it was in the 1900s. In today’s society we have “good souls corruption” where we’re more about money, and just get suckered into it. A bill, HR 801, prevents research to be open to the public. It goes further to say that publisher’s can only have access to this data and information that the common public pays for with their taxes. Publishers then turn around and sell this data for a lot of money. Congress members who voted for this bill recieve 2x as much funding from publishers. “Money buys congress.”

Congress members spend 30-70% of their time raising money so they can use this to be reelected for the next term.

“IP Extremism:” destructive debilitating dependency. Presenter had to understand this dependency and figure out how to change this dependency.

In order to change the climate crisis we have to change the “democracy crisis.” We can use this as a tool to change public problems. We’ve lost faith in this system because we watch as the greed takes them over.

website – strike4change.org, change-congress.org

SXSW 2009: Even Faster Web Sites

Saturday, March 14th, 2009
Steve Soudersm, Google and YSlow

Waterfall Charts: These types of charts show the browser’s request times for any types of HTTP requests, when they occur, and how long they take to download by your browser.

“Performance Golden Rule:” 14 Rules:

  • Make Fewer HTTP Requests
  • Use a CDN
  • Add an Expires Header
  • Gzup Components
  • Put stylesheets at the top
  • Put scripts at the bottom
  • Avoid CSS Expressions
  • Make JS and CSS External
  • Reduce DNS Lookups
  • Minify JS
  • Avoid Redirects
  • Remove Duplicate Scripts
  • Configure Etags
  • Make Ajax Cacheable

Souders did a performance video tutorial for Sanford. O’Reilly is doing a speed optimized help. Souders wrote a couple books for O’Reilly. His new upcoming books are “Even Faster Websites.” This new book has the following 8 chapters:

  • Split the initial payload
  • Load scripts without blocking
  • Couple asynchronous scripts
  • Don’t scatter inline scripts
  • Split the dominate domain
  • Flush the document cleaqrly
  • Use iframes sparingly
  • Simplyfy CSS Selectors

Some other books:

  • Ajax performance (Doug Crockford)
  • Writing efficient JavaScript (Nicholas Zakas)
  • Creating responsive web apps (Ben Galbraity, Dion Almaer)
  • Comet (Dylan Schiemann)
  • Beyond Gzipping (Tony Gentilcore)
  • Optimize Images (Stoyan Stefanov, Nicole Sulivan)

Why focus on JavaScript?
Javascript is 10x more painful to put into your website than any other asset. JavaScript, even though it is not a large number of resources, the number of JavaScript requests is small the actual load time is very big. When the browser starts downloading a script block it will stop parsing everything below it assuming the the JavaScript will impact something below.

Cuzillion: http://stevesouders.com/cuzillion/?ex-10008

Since Internet Explorer only allows two downloads per domain at any one time. MSN gets around this by doing “domain charting” which plots multiple JavaScript files on different servers.

Asynchronous Script Loading

  • XHR Eval: JavaScript call, and then eval it when you get it in. This has to be the same domain.
  • XHR Injection: Same thing as above, but create a script element and set its text. More optimized than above. This has to be the same domain.
  • Script in Iframe: Name the .js file as a .html file, and put it in an iframe. This will cause it to be loaded asynchronous.
  • Script DOM Element: Create a script element, and set it to the head. Souders thinks this is the best one.
  • Script Defer: Works in IE as far as 3 months ago, and in FireFox 3.1+.
  • Document.write Script Tag

Coupling Techniques

  • Hardcoded callback
  • window onload
  • timer: load the external script, and check if the external variables are available.
  • degrading script tags: very elegant, but Souders isn’t going to go into it.
  • script onload

Script onload:
Although there are ways to load things asynchronously you still need to be concerned about code dependincies. If one script comes in faster than another, then that other script cannot use the first one’s data yet.
Google Analytics does a document.write, which kills any JavaScript below its call. There is a 400ms gap that if someone can quickly click through your page then it’ll never track it. If you couple this, then you can remove this 400ms timer.

When creating source code, you should have your Stylesheet followed by your JavaScript script tag. This will cause both the CSS and Javascript to run at the same time. However, if you put an inline script tag right after this stylesheet then it will execute the inline script before loading in the CSS. This will not work in Firefox 2, but should work in every other browser.

In an iframe, if you don’t set the src attribute in the actual tag, but instead have javascript do it within an inline style, your javascript will cause the iframe to execute prior to the whole page bebing loaded. Stylesheets will sometimems cause iframes to load strange. This is a browser to browser dependencies. Even though IE limits two connections, having your code in an iframe will not prevent this because IE limits this over all windows/scripts.

Flush the document early. This will cause PHP to flush and push the HTML early which may contain the stylesheets and script tags. This will cause the browser to start downloading this information early than if it waited for the entire page to return. Some gotchas:

  • PHP out_buffering – ob_flush()
  • Transaction encoding: chunked
  • gzip – Cache’s DeflateBufferSize before 2.2.8
  • proxi or anti-virus software can cause flushing not to work
  • browsers limits: Safari (1K), Chrome (2K)

Takeaways:

  • Focusing on the frontend is what he feels is his best input.
  • run YSlow
  • speed impacts revinue.

Speed Impacts Revinue:

  • Google 500ms resulted in -20% in people leaving the site
  • Yahoo 400ms resulted in 4-9% in people leaving the site
  • Amazon 100ms resulted in -1% of sales.

email – souders(at)google.com
personal website – http://stevesouders.com
presentation – http://stevesouders.com/docs/sxsw-20090314.ppt

SXSW 2009: Try Making Yourself More Interesting

Friday, March 13th, 2009 5:00pm
Oberkirch
Lane Becker, Get Satisfaction
Christina Halvorson, Brain Traffic
Byron, Texteria Design and Bike Hugger
Omit Gupta, Photo-jojo, Jelly!

“Do epic shit” is an (in)famous piece of art. Oberkirch brings it up in wanting to express his concern to make projects that imact and influence chatter. He brings into account an example of the recent Skittles website redesign. Oberkirch feels as though there are too many people who are releasing websites quickly without looking into what other people are doing. And their business fails because its not “original” enough. Although his speech is not, Oberkirch talks about how we need to be more interesting. How if your website is not original then you’re just everyone else. STFU!

Byron talks about his website Bike Hugger and how people try to put them into a “marketing box” and they arn’t necessarily just being who they are. He continues to talk about how there is a growing need of the creativity in bikes and how technology people are getting more and more interested in biking. “Finding like minded people who are into things, and have the oportunity to get together and be a geek about that.”

Becker talks about Get Satisfaction. When starting this site they wanted to get down the core principles and have them very solid. In their case they noticed there was an interesting break between people’s lifes and the way people use object. However, when they talked to a business about these objects they had a completely different view based on how they used them in real life. “If we can take all of that goodness when people connect to these objects and show companies this then we can make money.” This website allows customers/companies to come in and talk about products and services. If you’re a customer its a great way to connect up and learn. And if you’re a company you can view all of the value of your customers’ participation.

Gupta likes to experiment and see what works. They pitched some tents in the middle of times square and took pictures of how time-square looks throughout a 24 hour period. Jelly! is something him and his friend started in the basement. The whole concept was to have a networking environment where people would meet up and just work on their projects. Strangers would show up in your room and work for the day. Photojojo was another project where they thought they could start something where people could discover new  things they can do with their camera. They made an email newsletter where people could see the most interesting things they could find. Not being able to find things in store everywhere, they started making money off of the website by selling these rare items online and then ship them right from their house. Photojojo only has 4 employees. Then they started doing Photo Safaries to go around and take interesting pictures. The first attempt they had over 100 people and “got in trouble.” Since then they’ve done a total of 5 different outtings last year. He says a lot of people ask if Photojojo is a business, but says the website doesn’t look like one. Although they are making money off of different things, it doesn’t slap you in the face as an actual business.

Halvorson talks about Brain Traffic. This website was not an experiment, but it grew from a one-person web copy editor. People would seek them out and they’d ask for help making textual changes to their content, and then they’d do it, and then it would just sit there and quickly become out of date. Content strategy comes in this order: Plan, Create, Publish, Govern. Plan is something a company needs to think about what they need to do, what they want to do, and what they want to outcome to be. Govern is important when you need to continue feedback. It is the care and feeding of your “epic shit.” If you decide to launch a blog, what happens next? Does anything need to happen next? It probably does if you want to continue to be awesome. You have to believe in what it is you’re working on, and it has to be real. Courage is the biggest thing. Even if you have a lot of success, you need to stay focused on why you started it in the first place, why you loved it, and to be brave on mainting that.

You shouldn’t worry so much on numeric measurments, but instead verbal customer experiences. It is more important what customers are getting from your website, how they’re using it, and if they’re even your target audience. However, some clients/customers need to see that number. They convert that number into a mental similarity with financial gain. To help with budget, you should make small changes that will overtime influence your customer’s view of your company. Just giving a little comment in the email that says something like, “If you’d like to speak with someone, do XYZ.”

SXSW 2009: Oooh, That’s Clever! (Unnatural Experiments in Web Design)

Friday, March 13, 2009 3:30pm
Paul Annett, Design lead at Clearleft Ltd

This ‘n’ That magic trick. When people see something in this trick that they feel they’ve found the solution people want to talk about it. They want to tell their friends and the world that they’ve discovered something. There is a particular frame in this magic trick that shows two cards in the right hand that everyone makes a big deal over.

Silverback. They created a template with a 3d gorilla and vines that inspired people’s attention and caused them to post this on social media, such as twitter. No one really knew what the website was about, they just wanted to see the pretty little template.

Clever Logos. The arrow in the FexEx. Between the “E” and “x” there is an arrow. Aerosmith logo that says the same thing no matter what way you rotate it. The Mill logo which is just blue bars. Finding hidden things in people’s logos or graphic design is amusing and entertaining. It provokes Paul into trying to find things that will amust him in different companies’ logos. Try typing “about:mozilla” into the address bar into Firefox.

A demonstration was conducted to show what the silverback website looks like with vines held by viewers in the audience. It was demonstrated how as you resize the website/browser the vines on the screen will move differently. Twequency does this too. Kyanmedia has a little worm at the bottom, and if you click on it it’ll show a little lab in the ground.

Skittles website lets you navigate through other people’s website while still using their navigation. This idea was actually stolen from another company. I didn’t catch their name, but the logo was an “M.”

My Bloody Valentine trailer overtakes  your browser and makes things pop out of the normal viewing screen. It just gives it more of a 3d feel than if you were to show it within the window’s screen.

Kano Model of customer satisfaction (displyed as a graph):
X-axis: quality of execution: Poor execution to Very good execution
Y-axis: delighted customers to unhappy customers
Types of Needs:

  • Performance Needs
  • Basic Needs: if you don’t have toiletpaper in your hotel restroom you’ll be upset. But if you have lots of rolls of toiletpaper you won’t be delighted, but you
  • Excitement Needs: Free Wifi, discovering an easter egg on a website…. what is required for creative designers to implement.
  • Time: Things that were exciting yesterday will not be today. We need to continue to strive, to intervate, and to make websites easy and delightful to use.

email – paul(at)clearleft.com
twitter.com – nicepaul
youtube.com – nicepaul
del.icio.us – paulannett/sxsw09/

SXSW 2009: Everything You Know About Web Design is Wrong

Friday, March 13, 2009 2:00pm
Daniel Willis, Sapient

The session started off trying to over cheer the other three ballrooms for the introduction to SXSW. Our session, who was the first to cheer, sparked this urge. We then did a follow up by symontaniously yelling, “Ball Room A.”

Just another dead tree: “Print in disguise” is the theory that people are just taking print material and converting it to a website. Lots of newspaper websites have the same concept, but trying to get a website to look like a newspaper. “Everything we know about webdesign is everything we know about print design.”

Video from “Le Voyage dans la Lune, 1092″ which shows a moon landing, and the stuck with the standards of people walking around and always in the same camera view. After this, other movies started coming out which the artist took it to the next level. One of the first movies to show this is, :Birth of a Nation, 1915.” AKA: The grammer of film. “Cross-cutting” is when multiple conversations are happening at the same time. And as you cut between those you create lots of tension. “Bird’s eye view” in film shows how insignificant the character is.

“One plus one equaled THREE.” The grammar of transcendent Web design.

1) Random voyeurism:

  • Flickr Vision. Every photo shows the professionalism of the photographer. Flickr Vision actually gives you an insight of those people who are posting pictures.
  • Found Magazine.

2) Seld-aware (but uncontrollable) content

  • Meta-data: content that says, “I am matrix.” XML says, “I am an address.” Basically data is becoming more and more  smart.
  • Google Bombing. “I am a failure” google search results in George W. Bush. “This relects a fundamental shift in power from author to reader and from authority to popularity.”

3) User-created context

  • Context matters. Based on what website a picture falls on can give it a different feeling. Having a picture of two men next to each other on a father/son website is different than if that picture was on a homosexual dating website.
  • “When you try to control the interaction and tightly manipulate the outcome of the experience”

4) Ambient Awareness

  • Microblogging (AKA: Twitter). You’re aware what a micro blog is because they all follow the same look as Twitter. You cannot turn trivial pieces into something that is meaningful. Such as, “I just walked outside of my door.” Overtime our body language helps us know individuals in a completely separate way. This is occuring with Microblogging. Its nothing new, as humans have been doing this for eternity.
  • Every little Microblog is a simple, no meaning comment, but in full context every little comment makes someone a whole being.

5) Experiential content

  • When building.buying a CMS the first question you ask is, “What is it we will use this for?” People design rollercoasters, theme parks, the line to get on the rollercoaster. But those people cannot design how the roller coaster will feel to me, what I had for brekfast, and my individual user experience.
  • This in turn will cause the user to design what the designer is currently designing. “The designer is sharing the space with the user.”

The way newspapers are online the way they are is because that’s the way it originated 100s of years ago. You should pull out the non-relevant pieces, and leave the important stuff. From there you can find out more about the pieces that were left out if you want. Meta data is just putting those pieces together.

If we do not activly work on getting something done, then we never will. Design does not have to be “pretty.” It just needs to be usable for people to find things. A lot of people will say, “oh, you do that look and feel thing.” But its bigger than that. Designs need to be one of the most important factors in solving your problems. Designers need to step up and become the leader to solve problems. This poses the questions, “Does the designer have the capabilities to do this?” If the designer says no, then you shall fail. Design should not be considered at the end, but it needs to be pulled in throughout the process.

The way departments are spaced out, they’re seperate like a television-dinner. The peas cannot touch the potatos, and the potatos cannot touch the meat. Each department in web process (developer, designer, business, writers) need to work together. For the 21st century we need to be more like Jambalaya. So much goes into this type of food, and you can identify what exactly each one of those individual ingredients are prior to cooking it. But after you cook them you have no idea what each piece you’re eating is. We need to go the same way with design. We need to find a better way to mesh designers with every other department in the process.

Tips for Transcendent Web Design:

  • Organize cross-discipline teams; exploit and protect expertise
  • Design for specific users and their specific needs
  • Embrace your ignorance
  • Don’t be distracted by business models that don’t begin and end with the user
  • Don’t be distracted by technology
  • Don’t be distracted by failure

article: http://www.dswillis.com/sxsw/everything.pdf
email: dan(at)dswillis.com
twitter: @uxcrank
website: http://www.uxcrank.com