Tooling for Change

2,992 views
2,898 views

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
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
2,992
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
2
Likes
3
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. http://en.wikipedia.org/wiki/Comparison_of_Android_devices#Smartphones
  5. 5. ummmmm...
  6. 6. Simon Sinek and the golden circle.http://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action.html
  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. www.responsiveprocess.com
  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. http://bit.ly/3R5kW8Arpanet 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. http://bit.ly/3R5kW81969Another 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. http://bit.ly/3R5kW8 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. http://bit.ly/3R5kW81974 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. http://bit.ly/3R5kW81977 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. http://bit.ly/3R5kW8The 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. http://bit.ly/3R5kW8The 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. http://bit.ly/3R5kW8Also 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. http://bit.ly/3R5kW8When 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. http://bit.ly/3R5kW81989 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. http://bit.ly/3R5kW81991 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. http://bit.ly/3R5kW8Mosaic’s first big competitor, Netscape Navigator, was released the year following (1994).
  31. 31. http://bit.ly/3R5kW81995In 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. http://bit.ly/3R5kW8In 1996, HoTMaiL (the capitalized letters are an homage to HTML), the first webmail service, was launched.
  33. 33. http://bit.ly/3R5kW8Google went live in 1998, revolutionizing the way in which people find information online.
  34. 34. http://bit.ly/3R5kW8With 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. http://bit.ly/3R5kW8Facebook 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 http://www.thefacebook.com 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. www.bostonglobe.com, http://simplebits.com/, http://futureinsightslive.com/, http://teixido.co/, http://www.anderssonwise.com/, http://hellofisher.com/, http://www.smashingmagazine.com/
  44. 44. Screencast of live, in-browser wireframes
  45. 45. You must design for and in the medium. http://foundation.zurb.com/
  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.”http://futurefriend.ly/thinking.html
  47. 47. “Focus your service before your customers and increasing diversity do it for you.” http://futurefriend.ly/thinking.html
  48. 48. Focus on what will drive everything else first. The why.If you focus on the why, everything else will follow.
  49. 49. futurefriend.ly
  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.” http://futurefriend.ly/thinking.html
  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. http://bit.ly/LUtkL
  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.

×