Beatles&webdesign

WHAT CAN THE BEATLES TEACH US ABOUT MOBILE WEB DESIGN.

Norm Orstad

@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

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

To try new things

Hell yeah!

No not that kind of experiment

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

*"I want to hold you Hand", October 1963

They could now layer and experiment with multiple variations

First 8 Track Recording

**"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

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.

Animations & TransitionsExperiment

Examples http://nclud.com

Experiment: Animations & Transitions

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.

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

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

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

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

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

great example the bostonglobe.com

Responsive Web Design

http://www.responsinator.com/http://responsive.is/http://mediaquri.es

We have the tools lets experiment.

to put a smile on your face

Delight

• Appeal to your audience

• Emotionally connect with the user

• Context matters

"How did you find America?," John replies, "Turn left at Greenland." Hard Days Night (Film)

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

First two albums where big in the UK but not in the US.

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.

Examples http://1trickpony.com/sxsw

Audience: SXSW, NERDS,

Emotionally Connect with the user

Delight

Adolescent Romance

Delight: Emotionally connect

At least 25 songs about love

Rebellious Themes

Personification of cultural transformationQuick witted responses to reportersConstantly trying to be differentSexual angst in song lyrics

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.

Examples http://nike.com/jumpman23/aj2012/

Delight: Emotionally Connect

AirJordans: Become the greatness!

Context MattersDelight

http://chartingthebeatles.com

Examples http://m.weather.com

Delight: Context Matters

Weather sites.

Examples http://www.sapres.org/mobile/

Delight: Context Matters

Church web sites

Establishing the character of,

Define

• Don’t Be Afraid to try new styles

• Originality

• Be Brief

• Clear Message

"Are you a mod or a rocker?""Ringo, "I'm a mocker"Hard Days Night (Film)

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

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

Tv/FilmsA Hard Days Night

Help!Magical Mystery Tour

Yellow SubmarinesLet It Be

Max Dalton

All of these except Magical Mystery Tour where financial and critical hits.

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

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

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.

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

Examples http://colorado.com/m

To try new things

Establishing the character of,

THANKS

Norm Orstadnorm@coderow.comSr. Designer, :coderow@norm0

Beatles&webdesign

Technology

Transcript of Beatles&webdesign

Webdesign in kerala

Fsjuice webdesign

WEBDESIGN II

WebDesign and development

Responsive webdesign-introduction

002 webdesign

Webdesign at

Datourinfo webdesign

Webdesign - Fundamentos

catalog webdesign

Revista WebDesign

FLC Conference webdesign

Nesher webdesign - overview

rcwx webdesign portfolio

responsible webdesign

Artigo_Revista WebDesign

Tutorial Joomla Webdesign

Principles of Webdesign

006 Webdesign

Marketing Plan WebDesign