Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013

Anna Dahlströmfounder byflock

www.annadahlstrom.com annadahlstrom

New York, October 7 2013DESIGNING FOR MULTIPLE DEVICES

http://www.annadahlstrom.co

http://www.annadahlstrom.co

www.flickr.com/photos/dahlstroms/4411448782/

I’m AnnaIA & UX DESIGNER | FREELANCE SINCE 2011

SWEDISH | IN LONDON SINCE 2006This is the bridge between Sweden & Denmark

http://www.flickr.com/photos/dahlstroms/4411448782/


AGENDA 1. DEVICE USAGE & PATTERNS

2. IMPLICATIONS FOR UX & DESIGN THINKING

3. BESPOKE MOBILE SITE vs. RESPONSIVE vs. AN APP

4. RESPONSIVE

5. APPS

6. PRACTICE

7. SUMMARY

8. Q & A

www.flickr.com/photos/publicenergy/1846375599

1. FIRST UP...DEVICE USAGE & PATTERNS

http://desktopwallpaper-s.com/19-Computers/-/Future/



DEVICE: a thing defined for a specific purpose or task & which can connect to the internet




THE FOCUS OF TODAYSMARTPHONES | DESKTOP ( TABLETS) - iOS & ANDROID

www.flickr.com/photos/hlkljgk/5764422581

For every human that enters the world, five mobile devices are created** Source: http://blogs.windows.com/ie/b/ie/archive/2013/07/17/the-companion-web-the-internet-and-how-we-use-it-is-evolving.aspx





www.flickr.com/photos/nasamarshall/6289116940

In 2009 1% of global internet traffic came from mobiles. By the end of 2012 it had risen to13% and by 2015 it’s expected to be above 50%.** Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile





www.flickr.com/photos/jayfresh/3388253576/

41% of emails are now opened on mobile devices ** Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-devices



http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-devices

http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-devices

www.flickr.com/photos/jorgeq82/4732700819

The average person looks at their phone 150 times a day.** Source: www.textually.org/textually/archives/2012/02/030229.htm





www.flickr.com/photos/exlibris/2552107635

40% of people use their phone in the bathroom** Source: http://www.lukew.com/ff/entry.asp?1500





www.flickr.com/photos/yahnyahn/2996454839

” The best computer is the one you have with you when you want something done. “- JACOB NIELSEN

MOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE



USAGE PATTERNS ACROSS DEVICES

www.flickr.com/photos/brandoncwarren/4236278556

“...as devices become more mobile, it’s not only changing where we read, but when. ”- POCKET (formerly Read it Later)




POCKET’S STATS - DESKTOP

Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read






POCKET’S STATS- iPHONE







POCKET’S STATS- iPAD






PEAK TIMES


•When we get up

•On our way to/ just arrived at work

•Commuting home

•Post dinner



www.flickr.com/photos/chicitoloco/8468592748/in/photostream/

“MOBILE USERS ARE RUSHED & ON THE GO”

THIS IS A MYTH

http://www.flickr.com/photos/theirmind/5001267661/

http://www.flickr.com/photos/theirmind/5001267661/

http://www.flickr.com/photos/hanhutton/320464105/

A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVE TIME TO KILLCOMMUTING, WAITING BUT ALSO AT HOME



www.flickr.com/photos/edduddiee/4307943164

THE SAME TASKS ARE CARRIED OUT ON SMARTPHONES AS

ON DESKTOPSAS DEVICES & EXPERIENCE BECOME MORE

OPTIMISED USAGE & TASK EXECUTION IS INCREASING



2. THIS HAS...IMPLICATIONS FOR UX & DESIGN

http://www.flickr.com/photos/eyesore9/3206408088/



www.flickr.com/photos/frantaylor/4296536332

LIMITED DEVICE CAPABILITIES USED TO MEAN LIMITED TASKSE.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENU




RESULTED IN MOBILE SPECIFIC WEBSITESLESS CONTENT & LINKS BACK TO THE FULL DESKTOP VERSION

DESKTOP FULL WEBSITE

BESPOKE CUT

DOWN WEBSITE

BESPOKE CUT

DOWN WEBSITE



www.flickr.com/photos/demandaj/7287174776

PEOPLE ARE CLICKING THE ‘FULL DESKTOP VERSION’ LINKTHERE IS A REASON FOR THAT

http://www.flickr.com/photos/demandaj/7287174776

http://www.flickr.com/photos/demandaj/7287174776

www.flickr.com/photos/joachim_s_mueller/7110473339

AN EQUAL & CONTINUOS EXPERIENCE

ACROSS DEVICESTHIS EXPECTATION WILL

ONLY GROW STRONGER



http://www.flickr.com/photos/young_einstein/74097753/

3. A CLOSER LOOK AT... BESPOKE MOBILE SITES vs. RESPONSIVE SITES vs. APPS




BESPOKE MOBILE SITES HAVE SEPARATE URLSUSUALLY LESS CONTENT & A LINK BACK TO THE FULL DESKTOP VERSION

DESKTOP FULL WEBSITE

BESPOKE CUT

DOWN WEBSITE

BESPOKE CUT

DOWN WEBSITE




FULL WEBSITE

FULL WEBSITE

FULL WEBSITE

RESPONSIVE SITES HAVE THE SAME URLSIT’S BASICALLY “ONE SITE”



www.flickr.com/photos/st3f4n/3476036180

PRIMARY REASONS FOR A BESPOKE MOBILE SITE• TECHNICAL LIMITATIONS TO CMS

• REQUIRED FOR THE AUDIENCE



www.flickr.com/photos/mkhmarketing/8468995025

Roughly 1 in 10 people that access Facebook each month do so from a feature phone** Source: www.thenextweb.com/facebook/2013/07/22/facebooks-every-phone-app-for-feature-phones-passes-100-million-monthly-active-users





http://www.flickr.com/photos/edenandjosh/2892956576/

BEST AVOIDED IF POSSIBLE

IT CAN CAUSE ALL SORTS OF PROBLEMS



www.flickr.com/photos/lastquest/1472794031

BUT WHY?” Today's popular devices are

not tomorrow's so building something which works on any

device is better than building something which works on

today's devices “- COMBINED WISE WORDS FROM @ONEXTRAPIXEL &

@TRENTWALTON



www.flickr.com/photos/ericconstantineau/5618576278

THE ALTERNATIVE IS MESSY & COSTLY

MAINTAINING DIFFERENT VERSIONSUSERS HAVING PROBLEMS FINDING

WHAT THEY ARE AFTER (E.G. IN SEARCH)



www.flickr.com/photos/jmtimages/2883279193

CORE CONTENT SHOULD REMAIN THE SAME BUT THE EXPERIENCE SHOULD BE OPTIMISEDBOTH IN DISPLAY OF CONTENT, REGARDING USING DEVICE CAPABILITIES & FOR TOUCH INTERACTIONS



www.flickr.com/photos/andwhynot/2946734025

MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APPMOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT ITA BIT OF BOTH THEN CONSIDER....

MOBILE OPTIMISED SITE, & APP?USE ANALYTICS FOR GUIDANCE



www.flickr.com/photos/31878512@N06/4704140020

WHETHER TO DO AN APP OR NOT COMES DOWN TO...• THE OBJECTIVE (USER & BUSINESS)

• IF THERE ARE SPECIFIC DEVICE CAPABILITIES YOU WANT TO UTILISE

• IF OFFLINE READING/USAGE IS REQUIRED

• & OF COURSE BUDGET



DIFFERENT TYPES OF APPSTHE MAIN TWO TYPES

NATIVE APPS (e.g. Instagram)

• MOST OPTIMISED USER EXPERIENCE• ACCESS TO DEVICE CAPABILITIES & APIs• BUT REQUIRES PLATFORM SPECIFIC CODE BASE

HYBRID (e.g. old Facebook)

• USE OF HTML5 & JAVASRIPT• WRAPPER TO PROVIDE NATIVE CAPABILITIES• FEWER “VERSIONS” TO MAINTAIN• BUT CAN BE TIME CONSUMING TO CREATE APP LIKE INTERACTIONS• CAN'T JUST BE WRAPPED. MUST HAVE APP LIKE FUNCTIONALITIES

www.flickr.com/photos/cristiano_betta/2909483129

” Money spent developing a pretty but limited iPhone app only benefits...the few, but money spent on the website UI would have benefitted everyone “- Gary Marshall on ‘The app trap’ in .net Magaizine



www.flickr.com/photos/taytom/5277657429

4. THERE IS SOMETHING CALLED... RESPONSIVE DESIGN

http://www.flickr.com/photos/paperpariah/4301471586/

http://www.flickr.com/photos/paperpariah/4301471586/

www.flickr.com/photos/adactio/5818096043

“ Design & development should respond to the user’s behaviour & environment based on screen size, platform & orientation. [It’s]...a mix of flexible grids & layouts, images & an intelligent use of media queries. ”- SMASHING MAGAZINE



http://www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goods


http://foundation.zurb.com/docs/layout.php

DEFINE YOUR GRID & BREAK POINTS• USE AS THE BASIS OF

YOUR PAGE LAYOUTS

• CHECKPOINT FOR MODULE SIZES & VARIANTS

• FIXED OR FLUID COLUMNS

• DEFINES HOW CONTENT WILL BEHAVE ACROSS DEVICES



“ Content needs to be choreographed to ensure the intended message is preserved

on any device and at any width ”- TRENT WALTON

www.flickr.com/photos/theaftershock/2811382400/



DEFINE YOUR CONTENT STACKING STRATEGYACROSS DEVICES & ORIENTATION

3 Nav

7Related products

2 Header

4Bath

section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

Desktop & Tablet

Mobile

MOBILE VS. DESKTOP FIRST•START LARGE OR SMALL

WHAT EVER WORKS BEST FOR YOU

•ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES

www.flickr.com/photos/stephangeyer/

CONSIDER THE MOBILE CONTEXT

THE USE CASE MAY BE THE SAME BUT

USING A MOBILE DEVICE IS DIFFERENT



LIKE PLAYING REAL LIFE TETRISPRE-DEFINED POCKETS FOR THE CONTENT TO SLOT INTOwww.flickr.com/photos/fritzon/195008860



www.flickr.com/photos/adactio/6153481666

80% of traffic in your analytics will often come from 20% of devices…seems a shame not to ensure that the site looks and works especially well on these devices.** Source: www.slideshare.net/yiibu/pragmatic-responsive-design





THE WEB IS FULL OF EXAMPLESLOOK FOR INSPIRATION & BEST PRACTICE

BUT DON’T BE AFRAID TO CHALLENGE OR COME UP WITH SOMETHING... BETTER.

http://mediaqueri.es/popular/



www.flickr.com/photos/tim_norris/2789759648

CONSIDER YOUR NAVIGATIONDIFFERENT WAYS OF OPTIMISING WITH DIFFERENT PROS & CONS



EXCELLENT READ

‘RESPONSIVE NAVIGATION PATTERNS’by Brad Frost.*Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns



www.flickr.com/photos/melodramababs/2766765248/

“ Mobile navigation should be like a good friend: there when you need them but cool enough to give you your space.” ** Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns





www.flickr.com/photos/dopey/123646856



http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/

5. WHAT ABOUT... DOING AN APP?



www.flickr.com/photos/elwillo/5247084642

” Small, downloadable chunks of software, they give people access to information in a neatly packaged format “- Apps on tap, The Economist Oct 8th 2011

APPS ARE FOCUSED & PERSONAL



www.flickr.com/photos/gadl/3570118243

EVERY PLATFORM IS ITS OWN LITTLE WORLDWITH THEIR OWN UI GUIDELINES THAT USERS ARE USED TO



www.flickr.com/photos/nrkbeta/3906687294/in/photostream

NOT AS EASY AS JUST ANDROID OR iOSFRAGMENTATION ACROSS DIFFERENT VERSIONS & BACKWARDS COMPATIBILITY SHOULD BE CONSIDERED



RELATIVE NUMBER OF ACTIVE ANDROID DEVICES

Source: http://developer.android.com/about/dashboards/index.html

www.flickr.com/photos/blakespot/4773693893

http://developer.android.com/about/dashboards/index.html

http://developer.android.com/about/dashboards/index.html



EXAMPLE OF ADOPTION OF NEW iOS VERSION

Source: www.fiksu.com/iOS-7-iPhone-5s-5c-Usage-Tracker

www.flickr.com/photos/blakespot/4773693893

http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1

http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1



KEY DIFFERENCES BETWEEN DESIGNING FOR ANDROID & iOS

iOSCONSISTENCY

CONSISTENCY BETWEEN VERSIONS & HANDSETS

QUICK ADOPTION OF NEW VERSIONS

BACK BUTTON

SETTINGS BUTTON OR 'MORE' TO ACCESS APP WIDE SETTINGS & INFORMATION

ANDROIDFRAGMENTATION

DIFFERENT FOR DIFFERENT VERSIONS & HANDSETS

SLOWER IMPLEMENTATION & UPTAKE OF NEWER VERSIONS

HANDLED WITH EITHER SYSTEM BACK BUTTON (EARLIER VERSIONS) OR BACK & UP BUTTONS (LATEST VERSION)

OPTIONS MENU USED TO HOUSE APP WIDE SETTINGS & INFORMATION

Design

UI elements & principles

Version adoption

Back navigation

Settings etc.

www.flickr.com/photos/nrkbeta/3906687294/in/photostream



iPHONE RESOURCESHELP & INSPIRATION WELL DOCUMENTED

http://www.androidpatterns.com/


ANDROID RESOURCESHELP & INSPIRATION A LITTLE LESS WELL DOCUMENTED FOR EARLIER VERSIONS

BASIC iOS NAVIGATIONCONSISTENT ACROSS VERSIONS

NAVIGATION BAREnables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen.

BACK BUTTONShould always take the user one step back from where they came from & be descriptive.

TAB BARCan often be customised. Holds the main sections of the app.

‘MORE’ TAB BAR ITEMUsed to hold & provide access to all other sections of the app that don’t fit in the tab bar.

Source: http://developer.android.com/design/patterns/new-4-0.html




ANDROID NAVIGATIONDIFFERENT BETWEEN VERSIONS:

NAVIGATION BARFor devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents'

ACTION BARHolds the most important action buttons for your app (3 + overflow menu)

UP VS. BACK BUTTONThe Up button is used to navigate up one level based on the hierarchical structure of the site.

Back is used to navigate back one step from where you came from & as such works in reverse chronological order.




www.flickr.com/photos/jojoneil/6359536591

HOW TO TAME THE BEAST?YOU LEARN BY DOING



START BY SKETCHINGYOUR SCREEN FLOWS, NAVIGATION & CONTENTwww.flickr.com/photos/saucef/7184615025



6. TIME TOPRACTICE

http://www.flickr.com/photos/kalexanderson/6302660289/


BESPOKE MOBILE SITE vs RESPONSIVE vs AN APPCONSIDER THE FOLLOWING:The city of New York has asked you to come up with a site that collates everything about Christmas in NYC. The aim is to raise awareness of events that are taking place and to drive sales on the high street through promoting offers from participating stores the month leading up to Christmas.

What do you recommend in terms of their mobile strategy and why? I.e. an app, responsive or bespoke mobile site, or a combination?

10 MINUTES

EXERCISE ONE



www.flickr.com/photos/andwhynot/2946734025

MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APPMOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT ITA BIT OF BOTH THEN CONSIDER....

MOBILE OPTIMISED SITE, & APP?USE ANALYTICS FOR GUIDANCE




WHETHER TO DO AN APP OR NOT COMES DOWN TO• THE OBJECTIVE (USER & BUSINESS)







EXERCISE ONE

BESPOKE MOBILE SITE vs RESPONSIVE vs AN APPCONSIDER THE FOLLOWING:The city of New York has asked you to come up with a site that collates everything about Christmas in NYC. The aim is to raise awareness of events that are taking place and to drive sales on the high street through promoting offers from participating stores the month leading up to Christmas.

What do you recommend in terms of their mobile strategy and why? I.e. an app, responsive or bespoke mobile site, or a combination?

10 MINUTES

HOW WOULD MOST PEOPLE ACCESS IT?

•MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP

•MOSTLY VIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT

ALSO CONSIDER...

•THE OBJECTIVE (USER & BUSINESS)





BUILDING A RESPONSIVE SITEFOR THE CHRISTMAS SITE THE CLIENT WANTS TO INCLUDE THE FOLLOWING:

• About page• Event calendar• Christmas focused map• List of highstreet offers

PART 1

Pick either mobile or desktop & do a rough sketch of what the home page should contain & how the content should be prioritised.

PART 2

Using content stacking methodology define how the content should be prioritised on desktop & mobile.

15 MINUTES

EXERCISE TWO

• Search• Most popular • Login & registration• Share functionality



DEFINE YOUR CONTENT STACKING STRATEGYACROSS DEVICES & ORIENTATION

3 Nav

7Related products

2 Header

4Bath

section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

Desktop & Tablet

Mobile

“ Content needs to be choreographed to ensure the intended message is preserved on any device and at any width ”- TRENT WALTON


EXERCISE TWO

BUILDING A RESPONSIVE SITEFOR THE CHRISTMAS SITE THE CLIENT WANTS TO INCLUDE THE FOLLOWING:


PART 1

Pick either mobile or desktop & do a rough sketch of what the home page should contain & how the content should be prioritised.

PART 2

Using content stacking methodology define how the content should be prioritised on desktop & mobile.

15 MINUTES

3 Nav

7Related products

2 Header

4Bath

section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1 Logo

5Ad

3 Nav

7Related products

2Header

4Bath section intro

6Types of baths

9 Tools

10Footer

8 Store locator

1Logo

5Ad

Desktop & Tablet

Mobile



BUILDING AN APPBASED ON THE CONTENT & FUNCTIONALITY REQUIREMENTS, CONSIDER WHAT WOULD BE SUITABLE FOR AN APP:


PART 1

Define the main sections your app would have.

PART 2

Looking at the navigation how would you structure this if you were to do an iOS app & an Android app? Focus on the Tab bar items respectively Action bar items & what would go in the ‘More’ respectively ‘Overflow menu’.

10 MINUTES

EXERCISE THREE




BASIC iOS NAVIGATIONCONSISTENT ACROSS VERSIONS

NAVIGATION BAREnables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen.

BACK BUTTONShould always take the user one step back from where they came from & be descriptive.

TAB BARCan often be customised. Holds the main sections of the app.

‘MORE’ TAB BAR ITEMUsed to hold & provide access to all other sections of the app that don’t fit in the tab bar.





ANDROID NAVIGATIONDIFFERENT BETWEEN VERSIONS. IN ICE CREAM SANDWICH:

NAVIGATION BARFor devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents'

ACTION BARHolds the most important action buttons for your app (3 + overflow menu)

UP VS. BACK BUTTONThe Up button is used to navigate up one level based on the hierarchical structure of the site.

Back is used to navigate back one step from where you came from & as such works in reverse chronological order.





EXERCISE THREE

BUILDING AN APPBASED ON THE CONTENT & FUNCTIONALITY REQUIREMENTS, CONSIDER WHAT WOULD BE SUITABLE FOR AN APP:


PART 1

Define the main sections your app would have.

PART 2

Looking at the navigation how would you structure this if you were to do an iOS app & an Android app? Focus on the Tab bar items respectively Action bar items & what would go in the ‘More’ respectively ‘Overflow menu’.

10 MINUTES


http://www.flickr.com/photos/martinteschner/4569495912/

7. TOSUMMARISE



www.flickr.com/photos/thecaucas/2597813380

DEVICE USAGE & PATTERNSFUTURE DEVICESThe number of different devices will only grow & we don’t know what’s coming.USED EVERYWHERE & ANYWHERE And we’re not only using them on the go but increasingly when we have some downtime including the sofa.USE OF MOBILE DEVICESOur use of mobile devices is increasingly replicating that of desktop.



IMPLICATIONS FOR UX & DESIGN THINKINGAN EQUAL & CONTINUOUS EXPERIENCE ACROSS DEVICESAs they & the services we use become more sophisticated & optimised we expect more from them.KEEP THE CORE BUT OPTIMISEConsider the limitations but also the opportunities with mobile devices.




WHEN DO WHATBESPOKE MOBILE WEBSITETry to avoid it but do it if necessaryRESPONSIVE DESIGNThe most device & future “proof ” approach right now. Use if possible. But challenge content delivery.APPBase on user & business needs. Strong argument if you require offline reading/functionality & access to device capabilities. Base which type on objectives & stats. www.flickr.com/photos/thecaucas/2597813380



FOR RESPONSIVEDEFINE YOUR GRID & BREAKPOINTSThis is the backbone of responsive design & content choreography.DON’T FORGET THE NAVIGATIONConsider the pros & cons of different methods.TEST & COLLABORATEThis is new grounds & we’re all learning so work together & test as you go.www.flickr.com/photos/thecaucas/2597813380



FOR APPSREMEMBER PLATFORM SPECIFIC GUIDELINESAdhering to them will make your app easier to use.CONSIDER BACKWARDS COMPATIBILITYNot everyone will be on the latest version. Ensure you cater for the majority.CONSULT THE INTERNETThere are a number of great resources for knowledge & inspiration. Use them.




8. BEFORE I GO...REMEMBER THAT




www.flickr.com/photos/jolives/2889944573/

...IT’S NOT JUST ABOUT THE SMALLER SCREENS

BUT ALSO THE BIG ONES

http://www.flickr.com/photos/jolives/2889944573/


www.flickr.com/photos/jolives/2889944573/

IT’S ABOUT THINKING AHEAD

THINK 3-5 YEARS AHEAD WITH “FUTURE PROOFING” IN MIND



IT DOESN’T HAVE TO BREAK

THE BANKBESIDES CONSIDER LOST

CUSTOMERS & MAINTAINING MULTIPLE VERSIONShttp://www.flickr.com/photos/gi/5537770007/

http://www.flickr.com/photos/gi/5537770007/

http://www.flickr.com/photos/gi/5537770007/

www.flickr.com/photos/oter/5090592214

BE CREATIVE & CHALLENGE WHAT EXISTS TODAYTHAT’S WHAT MOVES US FORWARD



www.flickr.com/photos/stevendepolo/3378152784

CLOSER & MORE REWARDING COLLABORATIONBETWEEN DISCIPLINES & WITH CLIENTS



- Wilson Minor

“ We’re not just making pretty interfaces. We’re actually in the process of making an environment where we’ll spend most of our time, for the rest of our lives. We’re the designers. We’re the builders. What do we want that environment to feel like? What do we want to feel like.

http://www.flickr.com/photos/funch/4679422945/

”

BUT ABOVE ALL...




9. FOR THE ROADSOME TAKE AWAYS




PLATFORM GUIDELINEShttp://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.htmlhttps://developer.apple.com/library/ios/designhttp://mrgan.tumblr.com/post/10492926111/labeling-the-back-buttonhttp://developer.android.com/design/index.html



http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html















PATTERN LIBRARIEShttp://pttrns.com/http://mobile-patterns.com/http://www.patternsofdesign.co.uk/http://www.mobiledesignpatterngallery.com/mobile-patterns.phphttp://www.androidpatterns.com/http://androidpttrns.com/http://inspired-ui.com



http://pttrns.com/

http://pttrns.com/

http://mobile-patterns.com/

http://mobile-patterns.com/

http://www.patternsofdesign.co.uk/

http://www.patternsofdesign.co.uk/

http://www.mobiledesignpatterngallery.com/mobile-patterns.php








http://androidpttrns.com/





RESPONSIVE DESIGNhttp://mediaqueri.es/popular/http://www.alistapart.com/articles/responsive-web-design/http://designmodo.com/responsive-design-examples/http://jamus.co.uk/demos/rwd-demonstrations/http://bradfrostweb.com/blog/web/responsive-nav-patterns/http://www.gridsetapp.com/http://grid.mindplay.dkhttp://goldengridsystem.com/http://foundation.zurb.com/docs/layout.php





http://www.alistapart.com/articles/responsive-web-design/




http://designmodo.com/responsive-design-examples/




http://jamus.co.uk/demos/rwd-demonstrations/




http://bradfrostweb.com/blog/web/responsive-nav-patterns/




http://www.gridsetapp.com

http://www.gridsetapp.com

http://grid.mindplay.dk

http://grid.mindplay.dk

http://goldengridsystem.com

http://goldengridsystem.com



www.flickr.com/photos/dahlstroms/4411448782/

Thank you!QUESTIONS?

annadahlstromannadahlstrom

[email protected]



mailto:[email protected]




http://www.annadahlstrom.com

http://www.annadahlstrom.com

Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013

Design

Transcript of Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013