Uploaded on

Mobile March 2012

Mobile March 2012

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
611
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. WHAT CAN THE BEATLES TEACH US ABOUTMOBILE WEB DESIGN.Norm Orstad
  • 2. HELLO@norm0Sr. Designer, :coderow10+ years design experience, 6 years web
  • 3. The Beatles 1960-1970English rock group formed in 1960. Ended unceremoniously in 1970 after their personal and financial interests collapsed
  • 4. John& Paul& Ringo& George.Defined their generation culturally, unexpectedly and unintentionally
  • 5. THE FAB FOURI think I found some lessons that they can teach us about mobile web design
  • 6. THE FAB FOUR
  • 7. The BEATLES :: Mobile Web Design BeatlemaniaThe extent of Beatlemania in the United States is evidenced by their single and album sales.
  • 8. BeatlemaniaThe Beatles had the Number One single for 59 weeks during their six and half years spanning "I Want to Hold Your Hand"s first appearance at the top on 1February 1964 and Let It Be LPs last Number One Week, 4 July 1970.
  • 9. British InvasionIn the same period they topped the LP charts for 116 weeks. In other words they had the Number One single one out of every six weeks, and the top album oneout of three. [http://thebritishinvasion.info/]
  • 10. British Invasion e Beatles arrive at John F. Kennedy International Airport, 7 February 1964"I Want to Hold Your Hand" had sold 2.6 million copies in the US over the previous two weeks
  • 11. The BEATLES :: Mobile Web DesignMobilemania??
  • 12. Mobile Browserswhoo! Here is the infamous WAP browsers
  • 13. Mobile Browsersloading…
  • 14. Internet Communications Device 9th January 2007 iPhone announcedMr. Jobs introduced us to the mobile safari… OMG!
  • 15. Mobile-mania? iPhone 4s launch in Beijing, 13 January 2012iPhone 4S launch halted in Beijing as SWAT teams break up violence
  • 16. Experiment Delight DefineThe three things I think that the beatles can teach us are:Experiment, to try new thingsDelight, to bring a smileDefine, to establish character
  • 17. Experiment Delight DefineTo try new things
  • 18. Hell yeah!No not that kind of experiment
  • 19. The BEATLES :: Mobile Web Design Experiment Multi-TrackingPlayback of multiple channels that is synchronized down to on track. Allows the artist to record multiple takes, almost to perfection.
  • 20. Experiment: Recordings Dual Track RecordingsTheir first two albums, Please Please Me and With the Beatles where recorded on a dual-track recording.Almost sounds like a live performance.
  • 21. Experiment: Recordings First multi-track Recording*"I want to hold you Hand", October 1963They could now layer and experiment with multiple variations
  • 22. Experiment: Recordings First 8 Track Recording**"Hey Jude" recorded in July 1968 in Abbey Road Studios and Trident StudiosIronically by 1968 Abbey Road was outdated!
  • 23. Experiment: Recordings Multi-Tracking Studer J37 Multi-track RecorderGoing from 4 tracks mixed down to transferred down to one track(bouncing down) was the ability to keep background noise to a minimum. Abbey Road engineerswhere the best at eliminating this noise.Four tracks also allowed musicians to try quadraphonic sound or 360-degree sound surround like Pink Floyds Dark side of the moon. The commercial applicationwasnt quite there, yet!This however meant that processing (like compression and equalization) would have to be applied during recording, as the tracks could not be separated oncerecorded. Still had to create the music linearly unlike todays digital tools for music producers.
  • 24. The BEATLES :: Mobile Web DesignExperimentAnimations & Transitions
  • 25. Experiment: Animations & Transitions Examples http://nclud.com
  • 26. The BEATLES :: Mobile Web Design Experiment Artificial Double-TrackingTape delay to create a delayed copy of audio. The effect is doubling of the voices. 1966 by Abbey Road Studios Engineers.
  • 27. Experiment: New Technology ADT**Tomorrow Never Knows, recorded on April 6, 1966{Flanging, Tape Loops, Leslie speaker cabinet(amplifier)} John wanted to sound like a thousands of monks
  • 28. The BEATLES :: Mobile Web DesignExperimentMulti-touch
  • 29. Experiment: Multi-touchMulti-touch• Pinch & Zoom • Double Tap• Drag • Flick• Press & Drag • One Finger• Squeeze • Two Fingers• Lasso • Spread• Cross • Splay• Gyroscope • …• Rotate
  • 30. Experiment: Multi-touch Examples http://github.com/404uses the accelerometer to create parallax instead of mouse
  • 31. The BEATLES :: Mobile Web Design Experiment Classical instrumentsGeorge Martin, one of the many mythical fifth beatles, influence and guidance to important to the Beatles explorations. Prior to the beatles Paralophone was knowfor classical, baroque music and comedies. The beatles end Martins struggle to get a pop hit. He was the once whom suggested to had the string quartet toYesterday.
  • 32. Experiment: Instruments YesterdayString Quartet
  • 33. Experiment: Technology The BEATLES :: Mobile Web Design Guitar feedback Samplers Close micing Direct Input Backward Taping
  • 34. Experiment CSS 3.0 • Animations • RGBA • Transitions • Media Queries • Multiple backgrounds • Multi-column layouts • Rounded Corners • Web fonts • Shadows
  • 35. Experiment HTML 5 • Geolocation • Canvas • Video • Dataset • Local Storage • Classlist • History API • Drag and Drop • Forms • Hidden property • ARIA • Websocket
  • 36. The BEATLES :: Mobile Web Design Experiment Future Friendly SomewhatEngland was late to adopt stereo, Decca in the U.K. kept some mono titles by The Rolling Stones in print through at least the late 70s.
  • 37. Experiment: Future Friendly Mono & Stereo PressesWhy two presses?One most kids only had mono record players at home, because of this the band themselves considered the mono mix the real version.Stereo was a novelty the record companies wanted to be prepared for. Headphones where not the common case of sharing music.The albums Yellow Submarine, Abbey Road and Let It Be are not included in a mono print.
  • 38. Experiment: Future Friendly Responsive Web Designgreat example the bostonglobe.com
  • 39. Experiment: Future Friendly Responsive Web Design http://www.responsinator.com/ http://responsive.is/ http://mediaquri.es
  • 40. The BEATLES :: Mobile Web DesignWe have the toolslets experiment.
  • 41. Experiment Delight Defineto put a smile on your face
  • 42. Delight• Appeal to your audience• Emotionally connect with the user• Context matters
  • 43. The BEATLES :: Mobile Web Design"How did you findAmerica?,"John replies,"Turn left at Greenland."Hard Days Night (Film)
  • 44. The BEATLES :: Mobile Web DesignDelightAppeal to your audience
  • 45. Delight: Appeal to your audience Covered others songHalf of Please Please Me, With the Beatles and Beatles for Sale where cover songs* Please Mr. Postman* Twist-n-shout* Money* You Really Got a Hold On Me
  • 46. Delight: Appeal to your audience FAIL FASTFirst two albums where big in the UK but not in the US.
  • 47. Delight: Appeal to your audience SuccessBrian Epstein asked Paul and John to compose a melody that would appeal american listeners.They came up with I want to hold you hand in the basement of Jane Ashers parents home.
  • 48. Delight: Appeal to your audience Examples http://1trickpony.com/sxswAudience: SXSW, NERDS,
  • 49. The BEATLES :: Mobile Web DesignDelightEmotionally Connect withthe user
  • 50. Delight: Emotionally connect Adolescent RomanceAt least 25 songs about love
  • 51. Delight: Emotionally connect Rebellious ThemesPersonification of cultural transformationQuick witted responses to reportersConstantly trying to be differentSexual angst in song lyrics
  • 52. Delight: Emotionally connect Bring the music to the peopleBring the music to the people.First time anyone had thought of filling a venue that large.55,000 tickets sold out in 17 minutes.It set records for attendance and revenue generated.
  • 53. Delight: Emotionally Connect Examples http://nike.com/jumpman23/aj2012/AirJordans: Become the greatness!
  • 54. The BEATLES :: Mobile Web DesignDelightContext Matters
  • 55. http://chartingthebeatles.com
  • 56. Delight: Context Matters Examples http://m.weather.comWeather sites.
  • 57. Delight: Context Matters Examples http://www.sapres.org/mobile/Church web sites
  • 58. Experiment Delight Defineto put a smile on your face
  • 59. Experiment Delight DefineEstablishing the character of,
  • 60. Define• Don’t Be Afraid to try new styles• Originality• Be Brief• Clear Message
  • 61. The BEATLES :: Mobile Web Design"Are you a mod or arocker?""Ringo, "Im a mocker"Hard Days Night (Film)
  • 62. The BEATLES :: Mobile Web DesignDefineDon’t be afraid totry new styles
  • 63. Define: Clear Message Music Skiffle Motown, Elvis Presley Music Hall Ballads Bob Dylan, Folk Classical mixtures Max DaltonBe open to outside influences.After touring they abandoned rock ‘n’ roll, the Beatles gave the world a cluster of hybrid masterpiecesAr tw o rk Max Dalton
  • 64. Define: Clear Message Fashion Mod Youth Suits Paisley Suits and Shirts Trousers with floral patterns Max DaltonHelped create a professional approach in delivery and presence. While touring Scotland, they would to smoke and eat on stage.
  • 65. Define: Clear Message A Hard Days Night Trailer
  • 66. Define: Clear Message Tv/Films A Hard Days Night Help! Magical Mystery Tour Yellow Submarines Let It Be Max DaltonAll of these except Magical Mystery Tour where financial and critical hits.
  • 67. The BEATLES :: Mobile Web DesignDefineOriginality
  • 68. ChartingTheBeatles.com
  • 69. Define: Originality Self-penned writing-contrast to most performers of the day only performed the song-producing their own material as singer-songwriters-led to more concept albums, Redefine what an Album meant, not filler songs in between hits songs.
  • 70. Define: Originality Examples http://m.visitncwine.com
  • 71. Define: Originality Set the StandardBass, Lead Guitar, Guitar, Drums.Studio albums lead to more experiments.
  • 72. Define: Originality Examples http://etsy.com E-commerce
  • 73. The BEATLES :: Mobile Web DesignDefineBe Brief
  • 74. Define: Be Brief Constraints of mediumThe radio stations at the time only wanted songs less than 3 minutes.7 inch disc could only contain one song 3-5 minutes.First song to go over 3 mintues
  • 75. Define: Be Brief Constraints of mediumAverage touch device size: 320x480Helps you focus on what matters
  • 76. The BEATLES :: Mobile Web DesignDefineClear Message
  • 77. YesterdayDefine: Clear Message Ill Follow the Sun I Need You Girl In My Life Words of Love Here, There and Everywhere Something And I Love Her Love Songs If I Fell Ill Be Back Tell Me What YouAt least 25 songs about love. See Yes It Is Michelle Its Only Love Youre Going to Lose That Girl Every Little Thing For No One Shes Leaving Home The Long and Winding Road This Boy Norwegian Wood (This Bird Has Flown) Youve Got to Hide Your Love Away
  • 78. Define: Clear Message you 2262 I 1736 to 1097 me 1060 love 613Word Count my be 610 497 it 466 that 466 all 437 know 436 Im 404 your 403 dont 401 of 369 on 368
  • 79. Define: Clear Message Examples http://colorado.com/m
  • 80. Experiment Delight DefineTo try new things
  • 81. Experiment Delight Defineto put a smile on your face
  • 82. Experiment Delight DefineEstablishing the character of,
  • 83. THANKSNorm Orstadnorm@coderow.comSr. Designer, :coderow@norm0