Mobile March 2012

1. WHAT CAN THE BEATLES TEACH US ABOUT
MOBILE WEB DESIGN.
Norm Orstad

2. HELLO
@norm0
Sr. Designer, :coderow
10+ years design experience, 6 years web

4. The Beatles
1960-1970
English rock group formed in 1960. Ended unceremoniously in 1970 after their personal and financial interests collapsed

5. John&
Paul&
Ringo&
George.
Defined their generation culturally, unexpectedly and unintentionally

6. THE FAB FOUR
I think I found some lessons that they can teach us about mobile web design

7. THE FAB FOUR

8. The BEATLES :: Mobile Web Design
Beatlemania
The extent of Beatlemania in the United States is evidenced by their single and album sales.

9. Beatlemania
The 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 1
February 1964 and Let It Be LP's last Number One Week, 4 July 1970.

10. British Invasion
In 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 one
out of three. [http://thebritishinvasion.info/]

11. 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

12. The BEATLES :: Mobile Web Design
Mobilemania??

13. Mobile Browsers
whoo! Here is the infamous WAP browsers

14. Mobile Browsers
loading…

15. Internet Communications Device
9th January 2007 iPhone announced
Mr. Jobs introduced us to the mobile safari… OMG!

16. Mobile-mania?
iPhone 4s launch in Beijing, 13 January 2012
iPhone 4S launch halted in Beijing as SWAT teams break up violence

17. Experiment
Delight
Define
The three things I think that the beatles can teach us are:
Experiment, to try new things
Delight, to bring a smile
Define, to establish character

18. Experiment
Delight
Define
To try new things

19. Hell yeah!
No not that kind of experiment

20. The BEATLES :: Mobile Web Design
Experiment
Multi-Tracking
Playback of multiple channels that is synchronized down to on track. Allows the artist to record multiple takes, almost to perfection.

21. Experiment: Recordings
Dual Track Recordings
Their first two albums, Please Please Me and With the Beatles where recorded on a dual-track recording.
Almost sounds like a live performance.

22. Experiment: Recordings
First multi-track Recording
*"I want to hold you Hand", October 1963
They could now layer and experiment with multiple variations

23. Experiment: Recordings
First 8 Track Recording
**"Hey Jude" recorded in July 1968 in Abbey Road Studios and Trident Studios
Ironically by 1968 Abbey Road was outdated!

24. Experiment: Recordings
Multi-Tracking
Studer J37 Multi-track Recorder
Going 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 engineers
where 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 application
wasn't 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 once
recorded. Still had to create the music linearly unlike todays digital tools for music producers.

25. The BEATLES :: Mobile Web Design
Experiment
Animations & Transitions

26. Experiment: Animations & Transitions
Examples http://nclud.com

27. The BEATLES :: Mobile Web Design
Experiment
Artificial Double-Tracking
Tape delay to create a delayed copy of audio. The effect is doubling of the voices. 1966 by Abbey Road Studios Engineers.

28. 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

29. The BEATLES :: Mobile Web Design
Experiment
Multi-touch

30. Experiment: Multi-touch
Multi-touch
• Pinch & Zoom • Double Tap
• Drag • Flick
• Press & Drag • One Finger
• Squeeze • Two Fingers
• Lasso • Spread
• Cross • Splay
• Gyroscope • …
• Rotate

31. Experiment: Multi-touch
Examples http://github.com/404
uses the accelerometer to create parallax instead of mouse

32. The BEATLES :: Mobile Web Design
Experiment
Classical instruments
George Martin, one of the many mythical fifth beatles, influence and guidance to important to the Beatles explorations. Prior to the beatles Paralophone was know
for 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 to
Yesterday.

33. Experiment: Instruments
Yesterday
String Quartet

34. Experiment: Technology The BEATLES :: Mobile Web Design
Guitar feedback
Samplers
Close micing
Direct Input
Backward Taping

35. Experiment
CSS 3.0
• Animations • RGBA
• Transitions • Media Queries
• Multiple backgrounds • Multi-column layouts
• Rounded Corners • Web fonts
• Shadows

36. Experiment
HTML 5
• Geolocation • Canvas
• Video • Dataset
• Local Storage • Classlist
• History API • Drag and Drop
• Forms • Hidden property
• ARIA • Websocket

37. The BEATLES :: Mobile Web Design
Experiment
Future Friendly
Somewhat
England 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.

38. Experiment: Future Friendly
Mono & Stereo Presses
Why 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.

39. Experiment: Future Friendly
Responsive Web Design
great example the bostonglobe.com

40. Experiment: Future Friendly
Responsive Web Design
http://www.responsinator.com/
http://responsive.is/
http://mediaquri.es

41. The BEATLES :: Mobile Web Design
We have the tools
lets experiment.

42. Experiment
Delight
Define
to put a smile on your face

43. Delight
• Appeal to your audience
• Emotionally connect with the user
• Context matters

44. The BEATLES :: Mobile Web Design
"How did you find
America?,"
John replies,
"Turn left at Greenland."
Hard Days Night (Film)

45. The BEATLES :: Mobile Web Design
Delight
Appeal to your audience

46. Delight: Appeal to your audience
Covered others song
Half 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

47. Delight: Appeal to your audience
FAIL FAST
First two albums where big in the UK but not in the US.

48. Delight: Appeal to your audience
Success
Brian 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 Asher's parents home.

49. Delight: Appeal to your audience
Examples http://1trickpony.com/sxsw
Audience: SXSW, NERDS,

50. The BEATLES :: Mobile Web Design
Delight
Emotionally Connect with
the user

51. Delight: Emotionally connect
Adolescent Romance
At least 25 songs about love

52. Delight: Emotionally connect
Rebellious Themes
Personification of cultural transformation
Quick witted responses to reporters
Constantly trying to be different
Sexual angst in song lyrics

53. Delight: Emotionally connect
Bring the music to the people
Bring 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.

54. Delight: Emotionally Connect
Examples http://nike.com/jumpman23/aj2012/
AirJordans: Become the greatness!

55. The BEATLES :: Mobile Web Design
Delight
Context Matters

56. http://chartingthebeatles.com

58. Delight: Context Matters
Examples http://m.weather.com
Weather sites.

59. Delight: Context Matters
Examples http://www.sapres.org/mobile/
Church web sites

60. Experiment
Delight
Define
to put a smile on your face

61. Experiment
Delight
Define
Establishing the character of,

62. Define
• Don’t Be Afraid to try new styles
• Originality
• Be Brief
• Clear Message

63. The BEATLES :: Mobile Web Design
"Are you a mod or a
rocker?""
Ringo, "I'm a mocker"
Hard Days Night (Film)

64. The BEATLES :: Mobile Web Design
Define
Don’t be afraid to
try new styles

65. Define: Clear Message
Music
Skiffle
Motown, Elvis Presley
Music Hall
Ballads
Bob Dylan, Folk
Classical mixtures
Max Dalton
Be open to outside influences.
After touring they abandoned rock ‘n’ roll, the Beatles gave the world a cluster of hybrid masterpieces
Ar tw o rk Max Dalton

66. Define: Clear Message
Fashion
Mod Youth Suits
Paisley Suits and Shirts
Trousers with floral patterns
Max Dalton
Helped create a professional approach in delivery and presence. While touring Scotland, they would to smoke and eat on stage.

67. Define: Clear Message
A Hard Days Night Trailer

68. Define: Clear Message
Tv/Films
A Hard Days Night
Help!
Magical Mystery Tour
Yellow Submarines
Let It Be
Max Dalton
All of these except Magical Mystery Tour where financial and critical hits.

69. The BEATLES :: Mobile Web Design
Define
Originality

70. ChartingTheBeatles.com

71. 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.

74. Define: Originality
Examples http://m.visitncwine.com

75. Define: Originality
Set the Standard
Bass, Lead Guitar, Guitar, Drums.
Studio albums lead to more experiments.

78. Define: Originality
Examples http://etsy.com
E-commerce

79. The BEATLES :: Mobile Web Design
Define
Be Brief

80. Define: Be Brief
Constraints of medium
The 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

81. Define: Be Brief
Constraints of medium
Average touch device size: 320x480
Helps you focus on what matters

82. The BEATLES :: Mobile Web Design
Define
Clear Message

83. Yesterday
Define: Clear Message I'll 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
I'll Be Back
Tell Me What You
At least 25 songs about love. See
Yes It Is
Michelle
It's Only Love
You're Going to Lose
That Girl
Every Little Thing
For No One
She's Leaving Home
The Long and
Winding Road
This Boy
Norwegian Wood
(This Bird Has
Flown)
You've Got to Hide
Your Love Away

84. Define: Clear Message
you 2262
I 1736
to 1097
me 1060
love 613
Word Count my
be
610
497
it 466
that 466
all 437
know 436
I'm 404
your 403
don't 401
of 369
on 368

85. Define: Clear Message
Examples http://colorado.com/m

86. Experiment
Delight
Define
To try new things

87. Experiment
Delight
Define
to put a smile on your face

88. Experiment
Delight
Define
Establishing the character of,

89. THANKS
Norm Orstad
norm@coderow.com
Sr. Designer, :coderow
@norm0