SXSW 2012: Dear Google & Bing: Help Me Rank Better!

Danny Sullivan
Search Engine Land, Editor In Chief

Duane Forrester
Bing, Sr Product Marketing Manager

Matt Cutts
Google Inc, Distinguished Engineer

Presentation Description

If you build it, they might not come, if you haven’t thought about how search engines view your web site. Forget testing for Internet Explorer, Firefox, Chrome and Safari. Search engines are the common browser that everyone uses. The good news is that search engine optimization (SEO) doesn’t mean terrible design or some type of black-magic trickery. Rather, there are good, sensible things that everyone should do that pleases both search engines and human visitors. In this session, representatives from Google and Bing provide this type of advice. They’ll even get you up to speed on the impact that social media is playing on search results. Even better, it’s all Q&A. Bring your top questions about how they rank sites and get answers directly from the source.

Presentation Notes

The “Deep Links” or “Site Links”, which are the links that are listed under popular webites in search results, are determined based on what content on that particular website is accessed the most by relevance and value. You can go into Google’s Webmaster tools, or Bing’s version, to remove any if you don’t want them… but you cannot add them. See: searchengineland.com/seotable

Google is working on leveling the playing field to make people who SEO a website without relative content not be as high in the search results as they are now. These changes should be rolling out within the next couple months. The best way for a mom-and-pop website to get ahead in SEO is just for them to have awesome products and be engaged socially. Rather you’re involved or not is your choice, but those signals still exist by others.

Don’t buy links. This is one of the worst things you can do, and this will hurt you in one of two ways: 1. you’ll waist your companies money, or 2. you’ll hurt your domain in search rankings forever.

Infographic: The Google Panda Update

If you have a website page that no longer exists, you should do a 301 redirect. If your IT personnel wont grant you that, then tell them both Google and Bing say they’re stupid. See: rel=”canonical”

So why does one website who posts after me get a higher search ranking? Well, typically it’s because users are more comfortable with that bigger company. But that’s not to say there isn’t other things you can do. See: http://schema.org/

SXSW 2012: CSS for Grown Ups: Maturing Best Practices

Andy Hume (@andyhume)
The Guardian

Presentation Description

In the early days of CSS the web industry cut its teeth on blogs and small personal sites. Much of the methodology still considered best-practise today originated from the experiences of developers working alone, often on a single small style sheet, with few of the constraints that come from working with large distributed teams on large continually changing web projects.

The mechanics of CSS are relatively simple. But creating large maintainable systems with it is still an unsolved problem. For larger sites, CSS is a difficult and complex component of the codebase to manage and maintain. It’s difficult to document patterns, and it’s difficult for developers unfamiliar with the code to contribute safely.

How can we do better? What are the CSS best practises that are letting us down and that we must shake off? How can we take a more precise, structured, engineering-driven approach to writing CSS to keep it bug-free, performant, and most importantly, maintainable?

Presentation Notes

CSS was originally created to slim down markup and remove the need for design elements.

ZenGarden is a website where users could collaborate and create beautiful CSS designs running on top of fixed HTML DOM.

There’s too much flexibility and power in CSS, and the best of things are the simplest.

“Nobody is really smart enough to program computers.” – Steve McConnell
“Nobody is really smart enough to style web pages.” – Andy Hume

Code Quality can be measured by: correctness, reliability, reusability, web 2.0 compliance, performance, extensibility, etc. But the one thing we need to optimize code the most for is: change. Having simple code, it is easier to maintain a code base. If you don’t have maintainability then you’re not in a position where you can easily make these changes. You wont be able to fix apparent bugs.

“Very few people (only professional designers, it seems) write style sheets longer than a hundred lines.” – Bert Bos, 2008

Pre processors can help out in managing complexity:
Sass – http://sass-lang.com
Less – http://lesscss.org
Stylus – http://learnboost.github.com/stylus/

But rather than making changes and additions to the language, why not use a tool that just makes what we currently have better?
OOCSS – http://oocss.org
SMACSS – http://smacss.com
CSS Lint – http://csslint.net

Layers of CSS
Base Styles: applied to element selectors such as font sizes, line heights.
Module Styles: product list, main navigation
Layout Styles: provide a grid or set up columns

One of the worse things you can do is apply a class name as “green” and then have the CSS markup: .green { color: green; } as if your design changes to “red” then your class is still labeled as “green.” Instead you should make the class name whatever it is (header, navigation, etc), and not based on the color or style it is.

A convention of applying to class names to an element, for instance “promo-box” and “promo-box-alert” is to make it “promo-box–alert” with the two “–“s.

Selector Queries – http://github.com/ahume/selector-queries

  • Allows you to apply rules like, “if the width of element X is smaller than Ypx, then apply a certain class to it”
  • This gets away from having to base CSS @media queries on the size of the browser, and instead the size of the element.

Base Style Sheets

There are many available, such as Bootstrap by Twitter, but you too can create one for your organization. It’s basically guidelines and standards created by your company.

SXSW 2012: HTML5 APIs Will Change the Web: And Your Designs

Jen Simmons (@jensimmons)
Designer & Consultant, Jensimmons.com

#HTML5APIs

Presentation Description

HTML5. It’s more than paving the cowpaths. It’s more than markup. There’s a lot of stuff in the spec about databases and communication protocols and blahdiblah backend juju. Some of that stuff is pretty radical. And it will change how you design websites. Why? Because for the last twenty years, web designers have been creating inside of a certain set of constraints. We’ve been limited in what’s possible by the technology that runs the web. We became so used to those limits, we stopped thinking about them. They became invisible. They Just Are. Of course the web works this certain way. Of course a user clicks and waits, the page loads, like this… but guess what? That’s not what the web will look like in the future. The constrains have changed. Come hear a non-nerd explanation of the new possibilities created by HTML5’s APIs. Don’t just wait around to see how other people implement these technologies. Learn about HTML APIs yourself, so you can design for and create the web of the future.

Presentation Notes

Web Sockets

The current web is set up to make requests (polling) back and forth from the web server. However, this is an issue when you want to constantly update data from the server. There are new technologies to get around this, such as WebSockets using Comet, Kaazing, Jetty, or CometD.

What to do?

  • Real-time updates of content on a single web page
  • Multiple people using single page, seeing each others activity immediately
  • One person using multiple web windows on multiple devices at the same time

See The Web Ahead episode 5, a pod cast by the presenter.

Web Storage

WebSQL is a way to store a local copy of a database on the client. There are also local storage, session storage, and key-value pairs. This allows you to let the user save data locally without the need for server communication. Imagine being able to temporarily save data on the client, but not push it to the website until you’re done making edits. See The Web Ahead episode 1.

Files

File API, File Reader/Writer/System, Bob URLs (Blob Builder), and Drag & Drop are now available. Browsers, even before the data goes to the server, can now open the file and see it. This will allow for editing before ever submitting it (such as a simple version of photoshop with image brightness/saturation).

WebGL

Samples on Google

SXSW 2012: The State of Browser Developer Tools

Brandon Satrom
Telerik

Brendan Eich
Mozilla

Garann Means
Chrome

Mike Tayolor
Opera

Paul Irish
Google

Presentation Description

Your browser is the most important program on your computer and until recently there were no built-in, industrial-strength tools available for debugging web pages. As web apps become more sophisticated, so do the debugging environments. Representatives of the major browsers discuss the similarities (and differences) between the tools and we look at how they address the needs of the 2012 developer: debugging Web Workers, tweaking CSS colors to perfection, remote debugging of mobile devices and all the other functions that make in-browser development as easy as falling off a console.log().

Presentation Notes

Chrome allows you to make changes to the CSS and then save it, or jump back revisions right on the fly. They’ve recently added the ability to disable cache with a toggle. You can do this right from the “Settings” pane of their developer tools window. They’ve also just added breakpoints for Javascript, with the future support for breakpoints in CoffeeScript.

FireFox just added the ability to have a 3D model of the DOM (it’s quite awesome!). It shows you ever element in the DOM as a layer, and you can navigate and view it by dragging around. Right now this is in the Nightly build, and isn’t in the stable release yet.

Opera has a color picker which actually takes a pallet of an entire chunk of an image and allows you to switch the colors of elements on the page to those colors. In their JavaScript stepper you can see what any variable is set to at any given time (I’m pretty sure every other browser already does this). CSS Profiling (Chrome is working on it too) allows you to evaluate your CSS selectors based on how long it takes to render a page with the CSS on the browser, and then you can increase your performance of your page’s DOM. Opera has a very cool feature which allows you to emulate a phone’s version/size of many different phones to see how your website would render on it.2

Internet Explorer (IE10) on Windows 8 has a script console has a concept of “workers” which allows you to pause the page’s execution and look at anything happening at any given point (they looks like IE’s version of breakpoints). Minified JavaScript can easily be cleaned-up/converted to a readable form with a click of a button. If you need to see what CSS applies to any element, and export it to a file all on its own, you can. You can fully emulate IE 6, 7, 8, and 9 right from IE10. I imagine if this is anything like the “Run in X Windows OS” XP released, it probably wont work.

SXSW 2012: Leaving Flatland: Getting Started with WebGL

Nicolas Garcia Belmonte (@philogb)
Sencha

Luz Caballero (@gerbille)
Opera

What is WebGL?

WebGL was created by the same people who made OpenGL, which migrated to OpenGL ES (used for mobile devices). People who already know how to use OpenGL can easily adopt their coding skills to the web. It runs on Javascript libraries that have complete wrappers (hooray!).

It can be used on desktops in Opera, Firefox, Chrome, and Safari. In mobile it can be used in Opera and Firefox.

1. Create a canvas element:
<canvas id=”c” width=”100″ height=”100″></canvas>
2. Grab the element:
document.getElementById(‘c’).getContext(‘c’);

What can WebGL be used for?

Data visualization, creative coding, art, 3D design environments, music videos, plotting math functions, 3D modeling of objects and space, creating textures, and fast processing of any data.

http://operasoftware.github.com/Emberwind (HTML5 Game)

How does WebGL work?

Vexter Shader > Triangle Assembly > Rasterization > Fragment Shader (Fog effects and lighting effects)

Getting started with WebGL

The main element of a 3D scene are the objects/models. These objects are created out of the vertices dynamically or uploaded from a model created from a 3D software.

Choosing a library:

  • Three.js: Largest and most popular. It has a very large community. You can import from many different formats.
  • PhiloGL: Nicholas created this. It is structured in a way that is more familiar with people who know Javascript. It’s used to do data visualizations.
  • GLGE: Animated textures.
  • J3D

More about PhiloGL

Most people think a WebGL app is a huge app that takes over the entire HTML screen through a canvas. But why? It can just be a simple enhancement to accent other HTML elements.

  • Idiomatic JavaScript: concise and expressive
  • Rich Module System: Core, Math, WebGL, program, Shaders, O3D, Camera, Scene, Event, Fx, IO, Workers, Media
  • Flexible and Performance Focused
  • Complete documentation