WHAT CAN THE BEATLES TEACH US ABOUTMOBILE WEB DESIGN.Norm Orstad
HELLO@norm0Sr. Designer, :coderow10+ years design experience, 6 years web
The Beatles      1960-1970English rock group formed in 1960. Ended unceremoniously in 1970 after their personal and financi...
John&            Paul&            Ringo&            George.Defined their generation culturally, unexpectedly and unintentio...
THE FAB FOURI think I found some lessons that they can teach us about mobile web design
THE FAB FOUR
The BEATLES :: Mobile Web Design               BeatlemaniaThe extent of Beatlemania in the United States is evidenced by t...
BeatlemaniaThe Beatles had the Number One single for 59 weeks during their six and half years spanning "I Want to Hold You...
British InvasionIn the same period they topped the LP charts for 116 weeks. In other words they had the Number One single ...
British Invasion                                              e Beatles arrive at John F. Kennedy International Airport, ...
The BEATLES :: Mobile Web DesignMobilemania??
Mobile Browserswhoo! Here is the infamous WAP browsers
Mobile Browsersloading…
Internet Communications Device                                                    9th January 2007 iPhone announcedMr. Job...
Mobile-mania?                                                        iPhone 4s launch in Beijing, 13 January 2012iPhone 4S...
Experiment                Delight                DefineThe three things I think that the beatles can teach us are:Experime...
Experiment               Delight               DefineTo try new things
Hell yeah!No not that kind of experiment
The BEATLES :: Mobile Web Design                Experiment               Multi-TrackingPlayback of multiple channels that ...
Experiment: Recordings                                                Dual Track RecordingsTheir first two albums, Please P...
Experiment: Recordings                                           First multi-track Recording*"I want to hold you Hand", Oc...
Experiment: Recordings                                               First 8 Track Recording**"Hey Jude" recorded in July ...
Experiment: Recordings                                                          Multi-Tracking                            ...
The BEATLES :: Mobile Web DesignExperimentAnimations & Transitions
Experiment: Animations & Transitions  Examples                             http://nclud.com
The BEATLES :: Mobile Web Design               Experiment              Artificial Double-TrackingTape delay to create a de...
Experiment: New Technology                                                                        ADT**Tomorrow Never Know...
The BEATLES :: Mobile Web DesignExperimentMulti-touch
Experiment: Multi-touchMulti-touch•   Pinch & Zoom          •   Double Tap•   Drag                  •   Flick•   Press & D...
Experiment: Multi-touch            Examples                                         http://github.com/404uses the accelero...
The BEATLES :: Mobile Web Design               Experiment              Classical instrumentsGeorge Martin, one of the many...
Experiment: Instruments                                   YesterdayString Quartet
Experiment: Technology               The BEATLES :: Mobile Web Design                     Guitar feedback                 ...
Experiment   CSS 3.0   • Animations             • RGBA   • Transitions            • Media Queries   • Multiple backgrounds...
Experiment   HTML 5   • Geolocation     • Canvas   • Video           • Dataset   • Local Storage   • Classlist   • History...
The BEATLES :: Mobile Web Design               Experiment               Future Friendly                              Somew...
Experiment: Future Friendly                                                Mono & Stereo PressesWhy two presses?One most k...
Experiment: Future Friendly                                    Responsive Web Designgreat example the bostonglobe.com
Experiment: Future Friendly                          Responsive Web Design                   http://www.responsinator.com/...
The BEATLES :: Mobile Web DesignWe have the toolslets experiment.
Experiment               Delight               Defineto put a smile on your face
Delight• Appeal to your audience• Emotionally connect with the user• Context matters
The BEATLES :: Mobile Web Design"How did you findAmerica?,"John replies,"Turn left at Greenland."Hard Days Night (Film)
The BEATLES :: Mobile Web DesignDelightAppeal to your audience
Delight: Appeal to your audience                                                   Covered others songHalf of Please Pleas...
Delight: Appeal to your audience                                                          FAIL FASTFirst two albums where ...
Delight: Appeal to your audience                                                                   SuccessBrian Epstein as...
Delight: Appeal to your audience      Examples                         http://1trickpony.com/sxswAudience: SXSW, NERDS,
The BEATLES :: Mobile Web DesignDelightEmotionally Connect withthe user
Delight: Emotionally connect                                        Adolescent RomanceAt least 25 songs about love
Delight: Emotionally connect                                            Rebellious ThemesPersonification of cultural transf...
Delight: Emotionally connect                                          Bring the music to the peopleBring the music to the ...
Delight: Emotionally Connect           Examples                    http://nike.com/jumpman23/aj2012/AirJordans: Become the...
The BEATLES :: Mobile Web DesignDelightContext Matters
http://chartingthebeatles.com
Delight: Context Matters            Examples                http://m.weather.comWeather sites.
Delight: Context Matters       Examples                 http://www.sapres.org/mobile/Church web sites
Experiment         Delight         Defineto put a smile on your face
Experiment         Delight         DefineEstablishing the character of,
Define•   Don’t Be Afraid to try new styles•   Originality•   Be Brief•   Clear Message
The BEATLES :: Mobile Web Design"Are you a mod or arocker?""Ringo, "Im a mocker"Hard Days Night (Film)
The BEATLES :: Mobile Web DesignDefineDon’t be afraid totry new styles
Define: Clear Message                            Music                         Skiffle                  Motown, Elvis Presle...
Define: Clear Message                      Fashion              Mod Youth Suits           Paisley Suits and Shirts        ...
Define: Clear Message                        A Hard Days Night Trailer
Define: Clear Message                    Tv/Films                   A Hard Days Night                          Help!      ...
The BEATLES :: Mobile Web DesignDefineOriginality
ChartingTheBeatles.com
Define: Originality                                                  Self-penned writing-contrast to most performers of th...
Define: Originality  Examples            http://m.visitncwine.com
Define: Originality                                          Set the StandardBass, Lead Guitar, Guitar, Drums.Studio album...
Define: Originality  Examples               http://etsy.com            E-commerce
The BEATLES :: Mobile Web DesignDefineBe Brief
Define: Be Brief                                                Constraints of mediumThe radio stations at the time only w...
Define: Be Brief                                     Constraints of mediumAverage touch device size: 320x480Helps you focu...
The BEATLES :: Mobile Web DesignDefineClear Message
YesterdayDefine: Clear Message           Ill Follow the Sun                                I Need You                     ...
Define: Clear Message                        you     2262                          I     1736                         to  ...
Define: Clear Message  Examples              http://colorado.com/m
Experiment               Delight               DefineTo try new things
Experiment               Delight               Defineto put a smile on your face
Experiment               Delight               DefineEstablishing the character of,
THANKSNorm Orstadnorm@coderow.comSr. Designer, :coderow@norm0
Beatles&webdesign
Beatles&webdesign
Beatles&webdesign
Beatles&webdesign
Beatles&webdesign
Beatles&webdesign
Upcoming SlideShare
Loading in …5
×

Beatles&webdesign

736
-1

Published on

Mobile March 2012

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
736
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Beatles&webdesign

  1. 1. WHAT CAN THE BEATLES TEACH US ABOUTMOBILE WEB DESIGN.Norm Orstad
  2. 2. HELLO@norm0Sr. Designer, :coderow10+ years design experience, 6 years web
  3. 3. The Beatles 1960-1970English rock group formed in 1960. Ended unceremoniously in 1970 after their personal and financial interests collapsed
  4. 4. John& Paul& Ringo& George.Defined their generation culturally, unexpectedly and unintentionally
  5. 5. THE FAB FOURI think I found some lessons that they can teach us about mobile web design
  6. 6. THE FAB FOUR
  7. 7. The BEATLES :: Mobile Web Design BeatlemaniaThe extent of Beatlemania in the United States is evidenced by their single and album sales.
  8. 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. 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. 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. 11. The BEATLES :: Mobile Web DesignMobilemania??
  12. 12. Mobile Browserswhoo! Here is the infamous WAP browsers
  13. 13. Mobile Browsersloading…
  14. 14. Internet Communications Device 9th January 2007 iPhone announcedMr. Jobs introduced us to the mobile safari… OMG!
  15. 15. Mobile-mania? iPhone 4s launch in Beijing, 13 January 2012iPhone 4S launch halted in Beijing as SWAT teams break up violence
  16. 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. 17. Experiment Delight DefineTo try new things
  18. 18. Hell yeah!No not that kind of experiment
  19. 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. 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. 21. Experiment: Recordings First multi-track Recording*"I want to hold you Hand", October 1963They could now layer and experiment with multiple variations
  22. 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. 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. 24. The BEATLES :: Mobile Web DesignExperimentAnimations & Transitions
  25. 25. Experiment: Animations & Transitions Examples http://nclud.com
  26. 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. 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. 28. The BEATLES :: Mobile Web DesignExperimentMulti-touch
  29. 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. 30. Experiment: Multi-touch Examples http://github.com/404uses the accelerometer to create parallax instead of mouse
  31. 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. 32. Experiment: Instruments YesterdayString Quartet
  33. 33. Experiment: Technology The BEATLES :: Mobile Web Design Guitar feedback Samplers Close micing Direct Input Backward Taping
  34. 34. Experiment CSS 3.0 • Animations • RGBA • Transitions • Media Queries • Multiple backgrounds • Multi-column layouts • Rounded Corners • Web fonts • Shadows
  35. 35. Experiment HTML 5 • Geolocation • Canvas • Video • Dataset • Local Storage • Classlist • History API • Drag and Drop • Forms • Hidden property • ARIA • Websocket
  36. 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. 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. 38. Experiment: Future Friendly Responsive Web Designgreat example the bostonglobe.com
  39. 39. Experiment: Future Friendly Responsive Web Design http://www.responsinator.com/ http://responsive.is/ http://mediaquri.es
  40. 40. The BEATLES :: Mobile Web DesignWe have the toolslets experiment.
  41. 41. Experiment Delight Defineto put a smile on your face
  42. 42. Delight• Appeal to your audience• Emotionally connect with the user• Context matters
  43. 43. The BEATLES :: Mobile Web Design"How did you findAmerica?,"John replies,"Turn left at Greenland."Hard Days Night (Film)
  44. 44. The BEATLES :: Mobile Web DesignDelightAppeal to your audience
  45. 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. 46. Delight: Appeal to your audience FAIL FASTFirst two albums where big in the UK but not in the US.
  47. 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. 48. Delight: Appeal to your audience Examples http://1trickpony.com/sxswAudience: SXSW, NERDS,
  49. 49. The BEATLES :: Mobile Web DesignDelightEmotionally Connect withthe user
  50. 50. Delight: Emotionally connect Adolescent RomanceAt least 25 songs about love
  51. 51. Delight: Emotionally connect Rebellious ThemesPersonification of cultural transformationQuick witted responses to reportersConstantly trying to be differentSexual angst in song lyrics
  52. 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. 53. Delight: Emotionally Connect Examples http://nike.com/jumpman23/aj2012/AirJordans: Become the greatness!
  54. 54. The BEATLES :: Mobile Web DesignDelightContext Matters
  55. 55. http://chartingthebeatles.com
  56. 56. Delight: Context Matters Examples http://m.weather.comWeather sites.
  57. 57. Delight: Context Matters Examples http://www.sapres.org/mobile/Church web sites
  58. 58. Experiment Delight Defineto put a smile on your face
  59. 59. Experiment Delight DefineEstablishing the character of,
  60. 60. Define• Don’t Be Afraid to try new styles• Originality• Be Brief• Clear Message
  61. 61. The BEATLES :: Mobile Web Design"Are you a mod or arocker?""Ringo, "Im a mocker"Hard Days Night (Film)
  62. 62. The BEATLES :: Mobile Web DesignDefineDon’t be afraid totry new styles
  63. 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. 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. 65. Define: Clear Message A Hard Days Night Trailer
  66. 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. 67. The BEATLES :: Mobile Web DesignDefineOriginality
  68. 68. ChartingTheBeatles.com
  69. 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. 70. Define: Originality Examples http://m.visitncwine.com
  71. 71. Define: Originality Set the StandardBass, Lead Guitar, Guitar, Drums.Studio albums lead to more experiments.
  72. 72. Define: Originality Examples http://etsy.com E-commerce
  73. 73. The BEATLES :: Mobile Web DesignDefineBe Brief
  74. 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. 75. Define: Be Brief Constraints of mediumAverage touch device size: 320x480Helps you focus on what matters
  76. 76. The BEATLES :: Mobile Web DesignDefineClear Message
  77. 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. 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. 79. Define: Clear Message Examples http://colorado.com/m
  80. 80. Experiment Delight DefineTo try new things
  81. 81. Experiment Delight Defineto put a smile on your face
  82. 82. Experiment Delight DefineEstablishing the character of,
  83. 83. THANKSNorm Orstadnorm@coderow.comSr. Designer, :coderow@norm0
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×