beatles&webdesign
DESCRIPTION
Mobile March 2012TRANSCRIPT
WHAT CAN THE BEATLES TEACH US ABOUT MOBILE WEB DESIGN.
Norm Orstad
HELLO
@norm0Sr. Designer, :coderow10+ years design experience, 6 years web
The Beatles1960-1970
English rock group formed in 1960. Ended unceremoniously in 1970 after their personal and financial interests collapsed
John&Paul&Ringo&George.
Defined their generation culturally, unexpectedly and unintentionally
THE FAB FOUR
I think I found some lessons that they can teach us about mobile web design
THE FAB FOUR
The BEATLES :: Mobile Web Design
Beatlemania
The extent of Beatlemania in the United States is evidenced by their single and album sales.
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.
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/]
e Beatles arrive at John F. Kennedy International Airport, 7 February 1964
British Invasion
"I Want to Hold Your Hand" had sold 2.6 million copies in the US over the previous two weeks
The BEATLES :: Mobile Web Design
Mobilemania??
Mobile Browsers
whoo! Here is the infamous WAP browsers
Mobile Browsers
loading…
Internet Communications Device
9th January 2007 iPhone announced
Mr. Jobs introduced us to the mobile safari… OMG!
Mobile-mania?
iPhone 4s launch in Beijing, 13 January 2012
iPhone 4S launch halted in Beijing as SWAT teams break up violence
ExperimentDelightDefine
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
ExperimentDelightDefine
To try new things
Hell yeah!
No not that kind of experiment
The BEATLES :: Mobile Web Design
Multi-TrackingExperiment
Playback of multiple channels that is synchronized down to on track. Allows the artist to record multiple takes, almost to perfection.
Dual Track Recordings
Experiment: 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.
First multi-track Recording
Experiment: Recordings
*"I want to hold you Hand", October 1963
They could now layer and experiment with multiple variations
First 8 Track Recording
Experiment: Recordings
**"Hey Jude" recorded in July 1968 in Abbey Road Studios and Trident Studios Ironically by 1968 Abbey Road was outdated!
Studer J37 Multi-track Recorder
Multi-Tracking
Experiment: Recordings
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.
The BEATLES :: Mobile Web Design
Animations & TransitionsExperiment
Examples http://nclud.com
Experiment: Animations & Transitions
The BEATLES :: Mobile Web Design
Artificial Double-TrackingExperiment
Tape delay to create a delayed copy of audio. The effect is doubling of the voices. 1966 by Abbey Road Studios Engineers.
ADT
Experiment: New Technology
**Tomorrow Never Knows, recorded on April 6, 1966{Flanging, Tape Loops, Leslie speaker cabinet(amplifier)} John wanted to sound like a thousands of monks
The BEATLES :: Mobile Web Design
Multi-touchExperiment
Multi-touch
• Pinch & Zoom• Drag• Press & Drag• Squeeze• Lasso• Cross• Gyroscope• Rotate
• Double Tap• Flick• One Finger• Two Fingers• Spread• Splay• …
Experiment: Multi-touch
Examples http://github.com/404
Experiment: Multi-touch
uses the accelerometer to create parallax instead of mouse
The BEATLES :: Mobile Web Design
Classical instrumentsExperiment
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.
Yesterday
Experiment: Instruments
String Quartet
The BEATLES :: Mobile Web Design
Samplers
Close micing
Guitar feedback
Experiment: Technology
Direct Input
Backward Taping
CSS 3.0
• Animations
• Transitions
• Multiple backgrounds
• Rounded Corners
• Shadows
• RGBA
• Media Queries
• Multi-column layouts
• Web fonts
Experiment
HTML 5
• Geolocation
• Video
• Local Storage
• History API
• Forms
• ARIA
• Canvas
• Dataset
• Classlist
• Drag and Drop
• Hidden property
• Websocket
Experiment
The BEATLES :: Mobile Web Design
Future FriendlySomewhatExperiment
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.
Mono & Stereo Presses
Experiment: Future Friendly
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.
Responsive Web Design
Experiment: Future Friendly
great example the bostonglobe.com
Responsive Web Design
Experiment: Future Friendly
http://www.responsinator.com/http://responsive.is/http://mediaquri.es
The BEATLES :: Mobile Web Design
We have the tools lets experiment.
ExperimentDelightDefine
to 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 find America?," John replies, "Turn left at Greenland." Hard Days Night (Film)
The BEATLES :: Mobile Web Design
Appeal to your audienceDelight
Covered others song
Delight: Appeal to your audience
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
FAIL FAST
Delight: Appeal to your audience
First two albums where big in the UK but not in the US.
Success
Delight: Appeal to your audience
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.
Examples http://1trickpony.com/sxsw
Delight: Appeal to your audience
Audience: SXSW, NERDS,
The BEATLES :: Mobile Web Design
Emotionally Connect with the user
Delight
Adolescent Romance
Delight: Emotionally connect
At least 25 songs about love
Rebellious Themes
Delight: Emotionally connect
Personification of cultural transformationQuick witted responses to reportersConstantly trying to be differentSexual angst in song lyrics
Bring the music to the people
Delight: Emotionally connect
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.
Examples http://nike.com/jumpman23/aj2012/
Delight: Emotionally Connect
AirJordans: Become the greatness!
The BEATLES :: Mobile Web Design
Context MattersDelight
Examples http://m.weather.com
Delight: Context Matters
Weather sites.
Examples http://www.sapres.org/mobile/
Delight: Context Matters
Church web sites
ExperimentDelightDefine
to put a smile on your face
ExperimentDelightDefine
Establishing 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 a rocker?""Ringo, "I'm a mocker"Hard Days Night (Film)
The BEATLES :: Mobile Web Design
Don’t be afraid to try new styles
Define
MusicSkiffle
Motown, Elvis PresleyMusic Hall
BalladsBob Dylan, Folk
Classical mixturesMax Dalton
Define: Clear Message
Be open to outside influences.
After touring they abandoned rock ‘n’ roll, the Beatles gave the world a cluster of hybrid masterpieces
Artwork Max Dalton
FashionMod Youth Suits
Paisley Suits and ShirtsTrousers with floral patterns
Max Dalton
Define: Clear Message
Helped create a professional approach in delivery and presence. While touring Scotland, they would to smoke and eat on stage.
A Hard Days Night Trailer
Define: Clear Message
Tv/FilmsA Hard Days Night
Help!Magical Mystery Tour
Yellow SubmarinesLet It Be
Max Dalton
Define: Clear Message
All of these except Magical Mystery Tour where financial and critical hits.
The BEATLES :: Mobile Web Design
OriginalityDefine
ChartingTheBeatles.com
Self-penned writing
Define: Originality
-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.
Examples http://m.visitncwine.com
Define: Originality
Set the Standard
Define: Originality
Bass, Lead Guitar, Guitar, Drums.
Studio albums lead to more experiments.
Examples http://etsy.com
E-commerce
Define: Originality
The BEATLES :: Mobile Web Design
Be BriefDefine
Constraints of medium
Define: Be Brief
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
Constraints of medium
Define: Be Brief
Average touch device size: 320x480
Helps you focus on what matters
The BEATLES :: Mobile Web Design
Clear MessageDefine
YesterdayI'll Follow the SunI Need YouGirlIn My LifeWords of LoveHere, There and EverywhereSomethingAnd I Love HerIf I FellI'll Be BackTell Me What You SeeYes It IsMichelleIt's Only LoveYou're Going to Lose That GirlEvery Little ThingFor No OneShe's Leaving HomeThe Long and Winding RoadThis BoyNorwegian Wood (This Bird Has Flown)You've Got to Hide Your Love AwayI WillP.S. I Love You
Love SongsAt least 25 songs about love.
Define: Clear Message
Word Count
you 2262
I 1736
to 1097
me 1060
love 613
my 610
be 497
it 466
that 466
all 437
know 436
I'm 404
your 403
don't 401
of 369
on 368
Define: Clear Message
Examples http://colorado.com/m
Define: Clear Message
ExperimentDelightDefine
To try new things
ExperimentDelightDefine
to put a smile on your face
ExperimentDelightDefine
Establishing the character of,
