Tooling for Change


Published on

The web will never be the same! Each year the web feels like it hits critical mass and then it does it all over again. This session will dig into how to best engage with an ever changing web and how to connect with the new web. From responsive web design to changing our process.

Published in: Business, Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Tooling for Change

  1. 1. This is how I see myself.
  2. 2. This is how the world sees me. At least the people who really know me. ;)
  3. 3. Zombie Apocalypse movie clip. This is just like all the devices that are out there.
  4. 4. Android Apocalypse movie clip. Soooo many different devices with no real solid direction. Justseems like they wanted to saturate the market.
  5. 5. ummmmm...
  6. 6. Simon Sinek and the golden circle.
  7. 7. 100% of us know the what. At least right now.
  8. 8. Maybe 60 - 70% of us know that how of what we do.
  9. 9. But the why is fuzzy. Hardly any of us know the why.
  10. 10. If we can bring the why into clarity it can change the world. Think about Apple. They didn’tjust make computers, they wanted to change the world. Even if they didn’t with the mouse,macintosh, iMac, iPod, iTunes... they certainly did with the iPhone.
  11. 11.
  12. 12. Ah 1994. The year I went online. Not the year I started using computers though. My firstcomputer was a TI994a that recorded programs on audio tape and hooked up to my 13” TV. Ibought it at Canadian Tire. In 1994 I had a pentium 90.
  13. 13. was the first real network to run on packet switching technology (new at the time). On the October 29, 1969, computers at Stanfordand UCLA connected for the first time. In effect, they were the first hosts on what would one day become the Internet.
  14. 14. gThe first message sent across the network was supposed to be "Login", but reportedly, the link between the two colleges crashed on the letter"g".
  15. 15. major milestone during the 60′s was the inception of Unix: the operating system whose design heavily influenced that of Linux and FreeBSD(the operating systems most popular in today’s web servers/web hosting services).
  16. 16. @Email was first developed in 1971 by Ray Tomlinson, who also made the decision to use the "@" symbol to separate the user name from the computername (which later on became the domain name).
  17. 17. One of the most impressive developments of 1971 was the start of Project Gutenberg. Project Gutenberg, for those unfamiliar with the site, is a global effort to make books and documents in the public domain available electronically–for free–in a variety of eBook and electronic formats. In effect, this was the birth of the eBook.
  18. 18. Arpanet made its first trans-Atlantic connection in 1973, with the University College of London. During the same year, email accounted for 75% ofall Arpanet network activity.
  19. 19. was a breakthrough year. A proposal was published to link Arpa-like networks together into a so-called "inter-network", which would have nocentral control and would work around a transmission control protocol (which eventually becameTCP/IP).
  20. 20. was a big year for the development of the Internet as we know it today. It’s the year the first PC modem, developed by Dennis Hayes and DaleHeatherington, was introduced and initially sold to computer hobbyists.
  21. 21. 1978: Spam is born1978 is also the year that brought the first unsolicited commercial email message(later known as spam), sent out to 600 California Arpanetusers by Gary Thuerk.
  22. 22. precursor to World of Warcraft and Second Life was developed in 1979, and was called MUD (short for MultiUser Dungeon). MUDs were entirelytext-based virtual worlds, combining elements of role-playing games, interactive, fiction, and online chat.
  23. 23. :-)Scott Fahlman in 1982 who proposed using :-) after a joke, rather than the original -) proposed by MacKenzie. The modern emoticon was born.
  24. 24. domain name system was created in 1984 along with the first Domain Name Servers (DNS). The domain name system was important in that itmade addresses on the Internet more human-friendly compared to its numerical IP address counterparts. DNS servers allowed Internet users totype in an easy-to-remember domain name and then converted it to the IP address automatically.
  25. 25. in 1988, Internet Relay Chat (IRC) was first deployed, paving the way for real-time chat and the instant messaging programs we use today.
  26. 26. Apple pulled out of the AppleLink program in 1989, the project was renamed and America Online was born. AOL, still in existence today, later onmade the Internet popular amongst the average internet users.
  27. 27. also brought about the proposal for the World Wide Web, written by Tim Berners-Lee. It was originally published in the March issue of MacWorld,and then redistributed in May 1990. It was written to persuade CERN that a global hypertext system was in CERN’s best interest. It was originallycalled "Mesh"; the term "World Wide Web" was coined while Berners-Lee was writing the code in 1990.
  28. 28. brought some major innovations to the world of the Internet. The first web pagewas created and, much like the first email explained what emailwas, its purpose was to explain what the World Wide Web was.
  29. 29. The first widely downloaded Internet browser, Mosaic, was released in 1993. While Mosaic wasn’t the first web browser, it is considered the firstbrowser to make the Internet easily accessible to non-techies.
  30. 30.’s first big competitor, Netscape Navigator, was released the year following (1994).
  31. 31. response to the growing public interest in the Internet,Microsoft develops an add-on to the operating system called a web browser. When Windows 95with Internet Explorer debuts, the Internet becomes accessible for many people. Additionally, Internet Explorer replaces the manual installation stepsthat many of the existing shareware browsers require. In short, it gets easy to get online
  32. 32. 1996, HoTMaiL (the capitalized letters are an homage to HTML), the first webmail service, was launched.
  33. 33. went live in 1998, revolutionizing the way in which people find information online.
  34. 34. the dotcom collapse still going strong, Wikipedia launched in 2001, one of the websites that paved the way for collective web contentgeneration/social media.
  35. 35. launched in 2004, though at the time it was only open to college studentsand was called "The Facebook"; later on, "The" was dropped fromthe name, though the URL still works.
  36. 36. Twitter launched in 2006. It was originally going to be called twittr (inspired by Flickr); the first Twitter message was "just setting up my twttr".
  37. 37. The biggest innovation of 2007 was almost certainly the iPhone, which was almost wholly responsible for renewed interest in mobile web applicationsand design.
  38. 38. The first "Internet election" took place in 2008 with the U.S. Presidential election. It was the first year that national candidates took full advantage of allthe Internet had to offer. Hillary Clinton jumped on board early with YouTube campaign videos. Virtually every candidate had a Facebook page or aTwitter feed, or both.
  39. 39. We owe a lot to the web standards movement.
  40. 40. Right at my house the ratio of internet devices to people is 4:1.
  41. 41. “The control which designers know in the print medium,and often desire in the web medium, is simply a functionof the limitation of the printed page. We should embracethe fact that the web doesn’t have the same constraints,and design for this flexibility. But first, we must “acceptthe ebb and flow of things.”John Allsopp, “A Dao of Web Design”
  42. 42. The seminal example of responsive web design.
  43. 43. Screencast of responsive websites.,,,,,,
  44. 44. Screencast of live, in-browser wireframes
  45. 45. You must design for and in the medium.
  46. 46. “We cant be all things on all devices. To manage in a world of ever-increasing device complexity, we need to focus on whatmatters most to our customers and businesses. Not by building lowest common-denominator solutions but by creating meaningfulcontent and services. People are also increasingly tired of excessive noise and finding ways to simplify things for themselves.”
  47. 47. “Focus your service before your customers and increasing diversity do it for you.”
  48. 48. Focus on what will drive everything else first. The why.If you focus on the why, everything else will follow.
  49. 49.
  50. 50. “Well-structured content is now an essential part of art direction. Consider how it can flow into a variety of containers by beingmindful of their constraints and capabilities. Be bold and explore new possibilities but know the future is likely to head in manydirections.”
  51. 51. Think about chunking your content to make it flexible. Not just for responsive design, but forthe future. Who knows where we’ll be pushing our content out to in the next decade.
  52. 52.
  53. 53. Connecting with others doing what you do will expand your possibilities, keep you dreamingof the future, and hopefully keep you thinking future friendly.
  54. 54. If we can clear up the fuzzy why that is at our core the future will seem clear.
  55. 55. Like Tony said in the keynote this morning, you need to figure out the values that areimportant to you.
  56. 56. Yellow Pencil. We make the web work for everyone. 1.Design for a better world. 2.Make the complex simple. 3.Engage the whole person. It is a human interaction. 4.The goals and message drive the design solution. 5.Users first. 6.Progressive enhancement. Small screen, low bandwidth first. 7.Design for tomorrow. 8.Accessible to all.Crafting your own...1. Research available principles for competitors and related organizations.2. Gather and list out the business goals, user needs, and brand attributes.3. Brainstorm with key collaborators.4. Narrow down to no more than 10.5. Ensure they don’t conflict or overlap.6. Ensure they are memorable.When to use them...1. Project kickoff.2. Prioritizing features.3. Brainstorming sessions.4. Design critiques.5. Presentations.6. Resolving conflict.7. Postmortems.
  57. 57. Go pick my brain on Delicious.