IDEA The ﬁrst thing we need is an idea that inspires us.
NEEDS & GOALSIDEA The ﬁrst thing we need is an idea that inspires us.Identify a basic need with our desired user.
CONTEXTNEEDS & GOALSIDEA The ﬁrst thing we need is an idea that inspires us.Identify a basic need with our desired user.The circumstances where information adds value.
STRATEGYCONTEXTNEEDS & GOALSIDEA The ﬁrst thing we need is an idea that inspires us.Identify a basic need with our desired user.The circumstances where information adds value.How we can add value to the business.
DEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA The ﬁrst thing we need is an idea that inspires us.Identify a basic need with our desired user.The circumstances where information adds value.How we can add value to the business.Choose the devices that best serves our audience.
DESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA The ﬁrst thing we need is an idea that inspires us.Identify a basic need with our desired user.The circumstances where information adds value.How we can add value to the business.Choose the devices that best serves our audience.Create a user experience based around needs.
PROTOTYPEDESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA The ﬁrst thing we need is an idea that inspires us.Identify a basic need with our desired user.The circumstances where information adds value.How we can add value to the business.Choose the devices that best serves our audience.Create a user experience based around needs.Test the experience within the context.
DEVELOPMENTPROTOTYPEDESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA The ﬁrst thing we need is an idea that inspires us.Identify a basic need with our desired user.The circumstances where information adds value.How we can add value to the business.Choose the devices that best serves our audience.Create a user experience based around needs.Put all the pieces together.Test the experience within the context.
TESTINGDEVELOPMENTPROTOTYPEDESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA The ﬁrst thing we need is an idea that inspires us.Identify a basic need with our desired user.The circumstances where information adds value.How we can add value to the business.Choose the devices that best serves our audience.Create a user experience based around needs.Put all the pieces together.And test, and test, and test some more.Test the experience within the context.
OPTIMIZATIONTESTINGDEVELOPMENTPROTOTYPEDESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA The ﬁrst thing we need is an idea that inspires us.Identify a basic need with our desired user.The circumstances where information adds value.How we can add value to the business.Choose the devices that best serves our audience.Create a user experience based around needs.Put all the pieces together.And test, and test, and test some more.Reduce all assets to its lowest possible size.Test the experience within the context.
PORTINGOPTIMIZATIONTESTINGDEVELOPMENTPROTOTYPEDESIGNDEVICE PLANSTRATEGYCONTEXTNEEDS & GOALSIDEA The ﬁrst thing we need is an idea that inspires us.Identify a basic need with our desired user.The circumstances where information adds value.How we can add value to the business.Choose the devices that best serves our audience.Create a user experience based around needs.Put all the pieces together.And test, and test, and test some more.Reduce all assets to its lowest possible size.Adapt for other devices that ﬁt our strategy.Test the experience within the context.
DiscussionWhat do you want to learntoday?• Is it to create visual experiences?• Is it to take advantage of the mobileopportunity?• Is it to ﬁgure out how to make sense ofthis new medium?• Is it something more?• All of the above?
What is MobileDesign?
JARGON ALERTMobile DesignThe creation of user experiencesfor the mobile context.
It doesn’t startwith Photoshop
Generation Y97% own a computer94% own a mobile phone76% use Instant Messaging69% use Facebook56% own an iPod
Generation ZBorn in the modern digitalage. Technology is infused atbirth.
Generation ZBorn in the modern digitalage. Technology is infused atbirth.The iPhone is to them
Generation ZBorn in the modern digitalage. Technology is infused atbirth.The iPhone is to themas the Macintosh was to us.
The Mobile Generation2009 2010 2011 2012 2013 2014 2015Everyone Elsesource: us census bureau
In less ﬁve years, themobile generationcould have morebuying power than allother demographics
DiscussionWhy are you here?• What is it about mobile that appeals toyou the most?• What do you see as being the obstacles?(your understanding? your company? thetechnology? etc.)• What are the biggest opportunities?
JARGON ALERTNeedsThe circumstances in whichsomething is necessary, or thatrequire some course of action.
Abraham Harold Maslow(April 1, 1908 – June 8, 1970)was an American psychologist.He is noted for his concept-ualization of a "hierarchy ofhuman needs", and isconsidered the founder ofhumanistic psychology.
JARGON ALERTGoalsThe object of a persons ambitionor effort; an aim or desired result
JARGON ALERTNeurolinguisticProgrammingA model of interpersonalcommunication chieﬂy concerned withthe relationship between successfulpatterns of behavior and the subjectiveexperiences underlying them.
Learning TypeAuditory20% of all peopleconnect with others verballyis all they need to feelconnected and productivewith others
Learning TypeVisual35% of all peopleBeing able to see conceptsillustrated as diagrams orcharts and graphs is helpfulfor this majority learningtype.
Learning TypeKinesthetic45% of all peopleincorporate muscle memoryand hand-eye movement toprocess and retain newinformation
ExerciseNeeds & Goals• Let’s examine BBC• What human needs does the BBC serve?• What are the goals of the BBC’saudience?• Does the BBC utilize neurolinguisticprogramming models? If so, how?• How do we document our ﬁndings?
JARGON ALERTContextThe circumstances that form thesetting for an event, statement, oridea, and in terms of which it canbe fully understood and assessed.
ContextBIG CContext with a capital Cis how the user will derivevalue from somethingthey are currently doing.In other words, theunderstanding ofcircumstance. It is themental model they willestablish to formunderstanding.
contextlittle cThe mode, medium, orenvironment in which weperform a task or thecircumstances ofunderstanding.• our present location• our device of access• our state of mind
PhysicalContextMy present location.My physical context willdictate how I accessinformation and thereforehow I derive value from it.
MediaContextMy device of access.The media context isn’tjust about the immediacyof the information wereceiveHow to engage people inreal time.
ModalContextOur present state ofmind.• Where should I eat?• Should I buy it now orlater?• Is this safe or not?
ExerciseDefine the Context• Again lets use the BBC as our example• What are the physical contexts?• What are the media contexts?• What are the modal contexts?• What is the BIG Context?• What are some of the possible businessstrategies simply by addressingcontext?
Types of AppsApplicationMedium
SMSExperiences where the goalis to alert users of newinformation.
WEBSITEExperiences that providethe user with simpleinformational data.
WIDGETSExperiences that are basedon an existing multi-platform framework.
WEBAPPSWhen you want to employ across-platform applicationstrategy.
NATIVEAPPSExperiences that takeadvantage of the nativefeatures of the device.
GAMESExperiences that entertain.
DeviceSupportComplexityUserExperienceLanguageOfflineSupportDeviceFeaturesInitial CostLong TermCostSMS All Simple Limited N/A No None Low HighMobileWebsitesAll Simple Limited HTML No None Low LowMobileWebWidgetsSome Medium Great HTML Limited Limited Low LowMobileWebApplicationSome Medium GreatHTML, CSS,JSLimited Limited Mid LowNativeApplicationAll Complex Excellent Various Yes Yes High MidGames All Complex Excellent Various Yes Yes Very High HighMEDIUM MATRIX
Types of AppsApplicationContext
UTILITYA simple at-a-glance tool.
LOCALEAn application based onthe physical context.
INFORMATIVEAn application meant toinform.
PRODUCTIVITYMeant to increase ouravailable time.
IMMER-SIVEAn application meant todistract or entertain.
User Experience Type Task Type Task Duration Combine withUtility At-a-Glance Information Recall Very Short ImmersiveLocale Location-based Contextual Information Quick ImmersiveInformative Content-based Seek Information Quick LocaleProductivity Task-based Content Management Long UtilityImmersive Full Screen Entertainment Long Utility, LocaleCONTEXT MATRIX
ExerciseDesigning a MobileInformation Architecture• Lets build a mobile wireframe for theBBC• Sketch out an IA for both touch andtraditional devices.• What are the primary navigation items?• How can you can you “tease” content?• How are they different? How are theythe same?
The Tent PoleThe business goal of a tent-poleproduction is to support or propup the losses from otherproductions.However, to create a tent-poleproduction, the creators involvedmust make an artisticwork that they knowwill appeal to thelargest possibleaudience, providingsomething for everyone.
Best Possible ExperienceIn mobile development, the risksand costs of creating that tent-pole product are just too high.This lesson is so easily seenthrough bad or just plainuninspired mobile design.Asking creative peopleto create uninspiringwork is a fast trackto mediocrity.
vs.iPhone The Rest
Elements of Mobile Design|CONTEXT|MESSAGE|LOOK & FEEL|LAYOUT|COLOR|TYPE|GRAPHICS
ContextWho are the users?What do you know about them?What type of behavior can you assumeor predict about the users?What is happening?What are the circumstances in whichthe users will best absorb the contentyou intend to present?When will they interact?Are they at home and have largeamounts of time? Are they at workwhere they have short periods of time?Will they have idle periods of timewhile waiting for a train, for example?Where are the users?Are they in a public space or a privatespace? Are they inside or outside?Is it day or is it night?Why will they use your app?What value will they gain from yourcontent or services in their presentsituation?How are they using their mobiledevice?Is it held in their hand or in theirpocket?How are they holding it?Open or closed? Portrait or landscape?
MessageWhat you are trying to say aboutyour site or application visually?Your message is the overall mentalimpression you create explicitlythrough visual design.How someone willreact to your design?If you take a step back,and look at a designfrom a distance, whatis your impression?
Look & FeelLook & Feel is used to describe theappearanceAs in “I want a clean look and feel”or “I want a usable look and feel.”The problem is:As a mobile designer,what does it mean?
LayoutHow the user will visually processthe pageThe structural and visualcomponents of layout often getmerged together, creatingconfusion and makingyour design moredifficult to produce.
ColorThe most common obstacle youencounter when dealing with coloris mobile screens.When complex designs aredisplayed on different mobiledevices, the limited color depthon one device can causebanding, or unwantedposterization in theimage.
TypographyHow type is rendered on mobilescreens:• subpixel-based screens• A subpixel is the division of eachpixel into a red, green, and blue(or RGB) unit at a micro-scopic level, enablingfor a greater level ofantialiasing for eachfont character or glyph.
TypographyHow type is rendered on mobilescreens:• pixel density or greater pixels perinch (PPI)The pixel density is determined bydividing width of the displayarea in pixels, by widthof the display area ininches.
GraphicsUse of images that are used toestablish or aid a visualexperience.Graphics can be used tosupplement the look and feel, or ascontent displayed inline with thetext.• Iconography• Photos & Images
Different Screen SizesMobile devices come in all shapesand sizes. Choice is great forconsumers, but bad for design.It can be incredibly difficult tocreate that best possible experiencefor a plethora of different screensizes.
The Right DeviceThe truly skilled designer doesn’tcreate just one product—theytranslate ideas into experiences.The spirit of your design should beable to be adapted to multipledevices.The days of tent-polesare gone.
ExerciseDesign Critique• Lets pick on the BBC one last time...• Does the current design addresscontext? If so how?• What message does it convey?• What about the look & feel?• What about layout?• What about color & type?• What about graphics?
Web Appsvs.Native Apps
JARGON ALERTUbiquity PrincipleThe easiest it is to producequality content and servicesfor the largest availablemarket will always win.
Getting your applicationon one platform is a snap,but getting it on two is achallenge, ﬁve a costlyheadache, and supportingﬁfty virtually impossible.
Reason #2The Web
Anyone who’s bettingagainst the Web rightnow is an idiot.Daniel Appelquist,Co-Chair W3C Mobile Web Initiative
Mobile applicationdistribution cannotand will likely never beunder the control ofthe developer.
Consumersexpect thingsto just work.
THE MOBILE WEB ISTHE ONLY LONG-TERMCOMMERCIALLYVIABLE CONTENTPLATFORM FORMOBILE DEVICES
So what is the dealwith BONDI?
When to make aMobile Web App?
Web 1.0ProprietaryWalled GardensFirst to marketBrand-centeredWeb 2.0StandardsWeb ServicesWeb as a PlatformUser-centered
JARGON ALERTMobile 2.0The convergence of mobile servicesand web services. The promise ofMobile 2.0 is to add portability,ubiquitous connectivity and location-based services to enhance informationand services found on the web.
Widgets VoIPVideoTransactionsSocial MediaShoppingSearchQR CodesPoint of SaleMobile AdvertisingMicrobloggingMessaging Media SharingAudioPlatformsEnterpriseApp StoresImagingLocation-based
sensoringbiometricstransactionslifestreamingrecommendationimage recognitionaugmented realitymobile connected gameslocation-based social mediaretail proximity mediaconsumptionHot Trends
Mobile 1.0ProprietaryWalled GardensFirst to marketBrand-centeredMobile 2.0StandardsWeb ServicesWeb as a PlatformUser-centered
Change occursbecause there isa gap betweenwhat is and whatshould be.— Craig McCaw
Multiple Mobile BrowsersDesigning and developing formultiple mobile browserssimultaneously is a challenge, butnot an impossibility.It requires looking at your designsand code from many contexts.Being able to visualizehow your designs willbe rendered on avariety of devices inyour head, as you lay down code.
Fixed vs. Fluid
Multiple vs. SingleColumn Layouts
Class A Browsers• Excellent XHTML 1.0 support• Good HTML5 support; speciﬁcally,the canvas element and offlinestorage• Excellent CSS support, includingmost of CSS Level 2.1 (scores 90percent or higher on the ACID2 test)and the majority of CSS Level 3(scores 75 percent or higher on theACID3 test)• Support for web standards layouts,including absolute positioning, ﬂoats,and complex CSS-based layouts• Support for image replacementtechniques
XHTMLThe same XHTML we use inweb browsers every day hasworked in most mobilebrowsers for over ﬁve years.
XHTML-MPA mobile version of XHTMLis supported on virtually allmodern mobile browsers.It is practically the same asXHTML Basic.
HTML5While HTML5 is still beingdeﬁned, it is only supportedby a handful of Class Abrowsers.
THE BOX MODELThe box model is one of thekey concepts of CSS design,and therefore the ﬁrst thingthat tends to go wrong inmobile devices. The boxmodel is the imaginary boxthat is around every elementin your markup.
Class A Class B Class C Class D Class FBox Model Great Good OK Poor FailTHE BOX MODEL
SELECTORSThe selector is used to tellwhich markup elements itshould apply rules to—basically, what makes CSSwork to control thepresentation.
Class A Class B Class C Class D Class FUniversal Yes Yes Yes Yes YesType Yes Yes Yes Yes FlakyDescendent Yes Yes Flaky Flaky NoChild Yes Yes Flaky Flaky NoAdjacent Yes Yes Flaky No NoClass Yes Yes Yes Yes FlakyID Yes Yes Yes Yes FlakySimple Attribute Yes Flaky No No NoAdvanced Attribute Yes No No No NoPseudoselector Yes Flaky No No NoSELECTORS
FONTS & TEXTThe typography options onmobile devices can be lessthan stellar, but like mostthings CSS-related, we areseeing mobile browsers movecloser to their desktopcousins in this respect.
Class A Class B Class C Class D Class FAvailable Fonts Web-safe Web-safeSans-serif andserifSans-serif andserifSans-serif andserifFont Size Any Any Keyword Keyword KeywordFont-weight Yes Yes Yes Yes LimitedFont-style Yes Yes Yes Yes LimitedText-transform Yes Yes Yes Yes LimitedText-decoration Yes Yes Yes Yes FlakyLine-height Yes Yes Yes Yes FlakyText-align Yes Yes Yes Yes YesWhite-space Yes Yes Yes Limited FlakyText Shadow Yes No No No NoFont replacement Limited No No No NoFONTS & TEXT
BOX PROPERTIESBeing able to style the boxarea around an element is acrucial part of web standardsdesign. Basic CSS level 2 boxstyling techniques work wellon most mobile devices,allowing you to style contentwith some level of precision.
Class A Class B Class C Class D Class FHeight & Width Yes Yes Limited Flaky FlakyMin & Max dim Yes Flaky No No NoMargins Yes Yes Yes Yes LimitedPadding Yes Yes Yes Flaky FlakyBorders Advanced Limited Limited Flaky FlakyBox Shadow Yes No No No NoBOX PROPERTIES
COLORStyling an element meansdeﬁning colors andbackground images. Relyingon CSS instead of images tocreate desired visual effectsreduces time to download aswell as cost.
Class A Class B Class C Class D Class FBackground color Yes Yes Yes Yes YesBackground image Yes Yes Yes Flaky FlakyMultiplebackground imagesYes No No No NoCOLOR
PAGE FLOWCSS can also be used todeﬁne the design layout ofthe page. Using positioningand page ﬂow attributes, wecan add style to the page andhelp make it easier to read orinteract with on smallscreens.
Class A Class B Class C Class D Class FDisplay Yes Yes Yes Yes FlakyToggle Display Yes Yes Limited No NoFloats Yes Yes Limited Limited FlakyClearing Yes Yes Limited Limited FlakyPositioning Yes Yes Limited Flaky NoOverflow Yes Limited Flaky No NoStacking Order Yes Yes Limited Flaky NoPAGE FLOW
Don’t count on it.
What makes aMobile Web App?
URL BarBrowser Controls
What is WebKit?
Android Palm webOSNokia S60
Android Palm webOSNokia S60
Android Palm webOSNokia S60
Android Palm webOSNokia S60
98%OF ALL U.S. MOBILE WEBTRAFFIC IS COMING FROMWEBKIT
XHTMLThe iPhone and WebKitsupport the XHTML 1.0 Strictand Transitional doctype,which is the recommendedlanguage for writing iPhoneweb apps.
XHTML-MPThe iPhone will renderXHTML Basic and XHTML-MP pages, but it won’t like it.Given the option to render adesktop version, or a mobileor WAP version of a site, theiPhone will render thedesktop version.
HTML5HTML5 creates someinteresting newopportunities for mobile webapplications, like the canvaselement, offline storage,document editing, and mediaplayback.
OFFLINE DATAAlso part of HTML5 andsupported by WebKit and theiPhone is the ability to createclient-side data storagesystems, which essentiallyallow you to create webapplications that work whenoffline.
CSS2The iPhone has excellentCSS2 support for a mobilebrowser. In fact, the iPhonemight render CSS a bit betterthan the desktop webbrowser you’re using thesedays.
CSS3The iPhone supports themajority of the CSS3speciﬁcation, allowing us tocreate visually stunning andbandwidth-friendly designsusing minimal amounts ofcode.
RAWKBe in the App Store.Charge money for your app.Be in full control of your app.Be able to deﬁne the designhow ever you want.Spend less making your app.Increase your proﬁtability.Support multiple devices.
TomorrowTomorrow’s innovations will notonly involve mobile technology,but they will come from the mobileinvestments that are made today.This won’t be because of the iPhoneor Android phones,operators, or the bigdevice makers, butbecause of people.
1985The Web is supposed to bring ustogether, but people feel moreisolated than ever.In a survey conducted in 1985,respondents said that they had atleast three close friendsthey felt they couldtalk to aboutimportant issues.
2006In 2006, a Duke University studyfound that the number of friendspeople felt they could talk to wasdown to two people.25 percent stated they had noclose friends at all.
GoMobile!Mobile technology by itsnature is designed tofacilitate interactionbetween people.It is portable, personal,and ubiquitouslyconnected.It enables us to not just tocommunicate in real time,but to collaborate.
The Mobile Generation2009 2011 2013 2015Everyone Elsesource: us census bureau
Today’s investors, boardrooms, andentrepreneurs are looking for value in all thewrong places. Facebook’s game of musicalchairs won’t solve big economic problems—and neither will making token investments ingreen tech.Where is the next industrial revolution cryingout for revolutionaries? Simple: in industriesdominated by clear, durable, structuralbarriers to efficiency and productivity.—Umair Haque21st Century Industrial Revolution
IN 100 YEARSWe need a new IndustrialRevolution that will deﬁne thestepping stones for the nexthundred years.We need a deep examination of theimpact that the InformationAge will have on realpeople for generationsto come.
MOBILE ISWHERE THECONVERSATIONSTARTS
MOBILE IS......the introduction to the larger concepts of howto address the user’s context in a multi-deviceenvironment...how to deal with data portability...about making content accessible to all people,regardless of location, education,or ability...how to leverage the mobileweb, the social web, thedesktop web, desktopsoftware, and otheremerging technologiesto the beneﬁt of your users.
What do youthink?
My name is Brian Fling and I’m a Mobile Designertwitter.com/flingcompany: pinchzoom.comblog: flingmedia.comFonts used: Archer & AvenirIllustrations by Simon Oxley (www.idokungfoo.com)THANK YOU