SlideShare una empresa de Scribd logo
1 de 15
Descargar para leer sin conexión
Ten things web designers need
to do before going mobile


                                16 April 2009
                                      CHI*A
One



                                                                       Live a
                                                                       mobile life




                                                                                                      2

Start using a phone for accessing the Internet.
•Use it as much as you can; don’t whip out a laptop or wait till you get home.
•Try not to make it an iPhone.
•If you have the means or resources, switch to other devices periodically, so you see the strengths
and weaknesses of the various platforms, and don’t get stuck in a single UI mindset.
Two




                                                Believe it’s
                                                a phone


                                                                                                     3

It's a phone first.
•Your customers might have a high end large screen phone with unlimited 3G data and/or wi-fi and a
 battery charger at hand ... or they might not. And you probably won't know. So: fast, responsive, light.
•Add weight only when it significantly enhances the user experience.
•Want more interaction logic? Make an app instead.
Three


                                                       Use mobile analytics

                                                       Desktop web tools
                                                       won’t cut it




                                                                                                        4

Use a mobile analytics package.
•Bango, Admob, Flurry, Pinchmedia.
•The desktop-focused packages don't understand mobile.

•Analytics are boring. Any ideas. This is a generic cool photo instead, but it sorta implies heatmap,
etc. Thoughts?
Four



         Know your
         platform




                                                                                                             5

Learn the capabilities of your platform.
•Your developers may not already know.
•For example, we were told by a developer that Android couldn't use CSS layout to do something we
provided code for; they insisted on using tables.
•If you only do what they say you can, you aren't serving your users.
•Above: VZW doesn’t allow links in SMS messages they didn’t originate. How does this affect your
install process?
•stream of consciousness: platform defines what you can and can’t do but if you don’t know what it can’t do you
 can only do what you think it can and your design gets smaller with each assumption - especially when developers
 take things way
Five


                                                          Target the devices
                                                            your users have




                                                                                                 6

Think carefully about how to target devices.
•Remember that most people do not have a high end phones. Are they target customers? You might
not want to abandon them.
•But don't shortchange your high end device users, either. Like personas, you might need to work
with multiple types of devices.
•Texting and even web are not high end features, think what you really mean by categorizing features
in any particular manner; don’t just assume everyone knows what a “smartphone” means anymore.

•While not a low-end appeal, it works I think.
Six




   Design for
   contexts of use                                                                                    7

Think carefully about the users and what they are doing.
•Don't just consider the quot;in a cafequot; or quot;on a busquot; contexts, but the quot;lying in bed before falling asleepquot;
and quot;while watching televisionquot; contexts. (Or even, while “riding a bike”).
•And of course quot;I don't have another device to access the Internet.”
•Are your users task-based or otherwise-engaged? If you don’t know, find out.
•A mobile is not used like a computer on a desk or lap. It can only capture attention for brief periods.
Seven
              Understand the
                  region and
                      culture




                                                                                                  8

Remember that devices vary from country to country.
•Don't assume that because a phone type is popular where you live, that it's popular where your
customers live.
•Devices, networks, and customers will vary from region to region.
•Knowing is not the same as understanding.
Eight


             Learn the implications of
             intermediaries




                                                                        9

Learn about what impact operators, transcoders, and aggregators have.
•They can change your content and may block messaging.
•They can also give you access to deeper user data.
Nine



      Use device
      repositories




                                                                                                10

Learn about assistive technologies.
•You should know what device description repositories are, and how they can help you. E.g.,
DeviceAtlas, WURFL (shown)
•Make your content and layout and software intelligent so it behaves appropriately based on device
capabilities
Ten


                                             Send only what
                                             is needed




                                                                                                      11

Don't put all rendering logic on the page.
•Don't, for example, pull three image versions down to the page and then render only one.

•Obviously, I don’t think much of this photo
•I am not sure I love this point as stated, anyway. Something else about client vs. server, or page
weight or what?
Eleven

          Design with
          rules and
          patterns

          Not pixels




                                                          12

(and last of all) embrace flexible design.
•Abandon pixel-perfect design.
•Photoshop rendering is not your friend.
•Use rules, charts, themes, patterns, styles.
•Use modular design principles and polymorphic objects.
Twelve


                                                               Be part of the
                                                               community




                                                                                13

Come to Design for Mobile
•April 20-22, 2009 in Lawrence
•Or visit the design pattern wiki http://patterns.design4mobile.mobi.
•Or at least read some books, subscribe to blogs, etc.
•Don’t live in a cave, or silo. Understand the whole mobile ecosystem.
Barbara Ballard
Usability, human factors, interaction
design, industrial design, marketing,
engineering, entrepreneurship, MBA

Product designer, product strategist,
blogger

Mobilist                                14
P.O. Box 44-2302
Lawrence, KS 66044

785 838 3003

littlespringsdesign.com
design4mobile.mobi
                          15

Más contenido relacionado

Destacado

Online Ethics and Etiquette
Online Ethics and Etiquette Online Ethics and Etiquette
Online Ethics and Etiquette JessamenTino21
 
Office Etiquette: Basic rules of office conduct
Office Etiquette: Basic rules of office conductOffice Etiquette: Basic rules of office conduct
Office Etiquette: Basic rules of office conductMonica Dhoundiyal
 
17 Copywriting Do's and Don'ts: How To Write Persuasive Content
17 Copywriting Do's and Don'ts: How To Write Persuasive Content17 Copywriting Do's and Don'ts: How To Write Persuasive Content
17 Copywriting Do's and Don'ts: How To Write Persuasive ContentHenneke Duistermaat
 
Leader's Guide to Motivate People at Work
Leader's Guide to Motivate People at WorkLeader's Guide to Motivate People at Work
Leader's Guide to Motivate People at WorkWeekdone.com
 
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your BusinessBarry Feldman
 

Destacado (6)

Online Ethics and Etiquette
Online Ethics and Etiquette Online Ethics and Etiquette
Online Ethics and Etiquette
 
Office Etiquette: Basic rules of office conduct
Office Etiquette: Basic rules of office conductOffice Etiquette: Basic rules of office conduct
Office Etiquette: Basic rules of office conduct
 
Office Etiquette
Office EtiquetteOffice Etiquette
Office Etiquette
 
17 Copywriting Do's and Don'ts: How To Write Persuasive Content
17 Copywriting Do's and Don'ts: How To Write Persuasive Content17 Copywriting Do's and Don'ts: How To Write Persuasive Content
17 Copywriting Do's and Don'ts: How To Write Persuasive Content
 
Leader's Guide to Motivate People at Work
Leader's Guide to Motivate People at WorkLeader's Guide to Motivate People at Work
Leader's Guide to Motivate People at Work
 
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business32 Ways a Digital Marketing Consultant Can Help Grow Your Business
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
 

Similar a 10 Things Web Designers Need to Do Before Going Mobile

10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App DevelopersJigyasa Makkar
 
10 stops towards a responsive web design mindset
10 stops towards a responsive web design mindset10 stops towards a responsive web design mindset
10 stops towards a responsive web design mindsetMiika Puputti
 
The mobile ecosystem & technological strategies
The mobile ecosystem & technological strategiesThe mobile ecosystem & technological strategies
The mobile ecosystem & technological strategiesIvano Malavolta
 
BLUG 2013 - Mobile Application Delivery - Choices, choices, choices
BLUG 2013 - Mobile Application Delivery - Choices, choices, choicesBLUG 2013 - Mobile Application Delivery - Choices, choices, choices
BLUG 2013 - Mobile Application Delivery - Choices, choices, choicesRené Winkelmeyer
 
Android Material Design Quick Presentation
Android Material Design Quick PresentationAndroid Material Design Quick Presentation
Android Material Design Quick PresentationDeimantas Brandišauskas
 
The mobile ecosystem & technological strategies
The mobile ecosystem & technological strategiesThe mobile ecosystem & technological strategies
The mobile ecosystem & technological strategiesIvano Malavolta
 
Planning your Dream Mobile App
Planning your Dream Mobile AppPlanning your Dream Mobile App
Planning your Dream Mobile AppSean Katz
 
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Jeremy Johnson
 
Overcoming design challenges in HAT-based multichannel publishing
Overcoming design challenges in HAT-based multichannel publishingOvercoming design challenges in HAT-based multichannel publishing
Overcoming design challenges in HAT-based multichannel publishingJack Molisani
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive WebMatt Carver
 
How to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseHow to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseFlashGuy13
 
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)Bram Vanderhaeghe
 
Apple iPad Publishing Best Practices | Jim Nasr | Armedia
Apple iPad Publishing Best Practices | Jim Nasr | ArmediaApple iPad Publishing Best Practices | Jim Nasr | Armedia
Apple iPad Publishing Best Practices | Jim Nasr | ArmediaArmedia LLC
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyChad Currie
 

Similar a 10 Things Web Designers Need to Do Before Going Mobile (20)

10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers
 
10 stops towards a responsive web design mindset
10 stops towards a responsive web design mindset10 stops towards a responsive web design mindset
10 stops towards a responsive web design mindset
 
Mobile UX Challenges
Mobile UX ChallengesMobile UX Challenges
Mobile UX Challenges
 
Mobile ux sot a and challenges
Mobile ux sot a and challengesMobile ux sot a and challenges
Mobile ux sot a and challenges
 
The mobile ecosystem & technological strategies
The mobile ecosystem & technological strategiesThe mobile ecosystem & technological strategies
The mobile ecosystem & technological strategies
 
Uxperts mobi 2013 soa & challenges
Uxperts mobi 2013   soa & challengesUxperts mobi 2013   soa & challenges
Uxperts mobi 2013 soa & challenges
 
BLUG 2013 - Mobile Application Delivery - Choices, choices, choices
BLUG 2013 - Mobile Application Delivery - Choices, choices, choicesBLUG 2013 - Mobile Application Delivery - Choices, choices, choices
BLUG 2013 - Mobile Application Delivery - Choices, choices, choices
 
Android Material Design Quick Presentation
Android Material Design Quick PresentationAndroid Material Design Quick Presentation
Android Material Design Quick Presentation
 
The mobile ecosystem & technological strategies
The mobile ecosystem & technological strategiesThe mobile ecosystem & technological strategies
The mobile ecosystem & technological strategies
 
Planning your Dream Mobile App
Planning your Dream Mobile AppPlanning your Dream Mobile App
Planning your Dream Mobile App
 
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
 
Ux guide
Ux guideUx guide
Ux guide
 
Overcoming design challenges in HAT-based multichannel publishing
Overcoming design challenges in HAT-based multichannel publishingOvercoming design challenges in HAT-based multichannel publishing
Overcoming design challenges in HAT-based multichannel publishing
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
 
How to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseHow to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the Enterprise
 
Some of our recent thinking
Some of our recent thinkingSome of our recent thinking
Some of our recent thinking
 
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
Responsive Web Design (Microsoft Web & Phone UX Tour 2011)
 
Apple iPad Publishing Best Practices | Jim Nasr | Armedia
Apple iPad Publishing Best Practices | Jim Nasr | ArmediaApple iPad Publishing Best Practices | Jim Nasr | Armedia
Apple iPad Publishing Best Practices | Jim Nasr | Armedia
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think Responsively
 
IXDA_2009
IXDA_2009IXDA_2009
IXDA_2009
 

Más de Barbara Ballard

Mobile Content Discoverability
Mobile Content DiscoverabilityMobile Content Discoverability
Mobile Content DiscoverabilityBarbara Ballard
 
M2 Ballard Full Web Isnt
M2 Ballard Full Web IsntM2 Ballard Full Web Isnt
M2 Ballard Full Web IsntBarbara Ballard
 
Mobile Design Evolution: Trends in speciation, specialization, and fragmentation
Mobile Design Evolution: Trends in speciation, specialization, and fragmentationMobile Design Evolution: Trends in speciation, specialization, and fragmentation
Mobile Design Evolution: Trends in speciation, specialization, and fragmentationBarbara Ballard
 
Leveraging Device Characteristics
Leveraging Device CharacteristicsLeveraging Device Characteristics
Leveraging Device CharacteristicsBarbara Ballard
 
Mobile Usability Testing
Mobile Usability TestingMobile Usability Testing
Mobile Usability TestingBarbara Ballard
 
Class-based design for mobile development
Class-based design for mobile developmentClass-based design for mobile development
Class-based design for mobile developmentBarbara Ballard
 

Más de Barbara Ballard (10)

Quantity quality
Quantity qualityQuantity quality
Quantity quality
 
Mobile Content Discoverability
Mobile Content DiscoverabilityMobile Content Discoverability
Mobile Content Discoverability
 
Symbian? What's That?
Symbian? What's That?Symbian? What's That?
Symbian? What's That?
 
Gestures For Mobile
Gestures For MobileGestures For Mobile
Gestures For Mobile
 
Foolish Consistency
Foolish ConsistencyFoolish Consistency
Foolish Consistency
 
M2 Ballard Full Web Isnt
M2 Ballard Full Web IsntM2 Ballard Full Web Isnt
M2 Ballard Full Web Isnt
 
Mobile Design Evolution: Trends in speciation, specialization, and fragmentation
Mobile Design Evolution: Trends in speciation, specialization, and fragmentationMobile Design Evolution: Trends in speciation, specialization, and fragmentation
Mobile Design Evolution: Trends in speciation, specialization, and fragmentation
 
Leveraging Device Characteristics
Leveraging Device CharacteristicsLeveraging Device Characteristics
Leveraging Device Characteristics
 
Mobile Usability Testing
Mobile Usability TestingMobile Usability Testing
Mobile Usability Testing
 
Class-based design for mobile development
Class-based design for mobile developmentClass-based design for mobile development
Class-based design for mobile development
 

Último

一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样awasv46j
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...nirzagarg
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherrymeghakumariji156
 
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...Amil baba
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxtrose8
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证eqaqen
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证eeanqy
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证ehyxf
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...gajnagarg
 
Essential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive GuideEssential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive GuideDesign Studio UI UX
 
Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxShoaibRajper1
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...sriharipichandi
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...nirzagarg
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKMarekMitek1
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证wpkuukw
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Websitemark11275
 
BLOCK CHAIN PROJECT block chain project
BLOCK CHAIN  PROJECT block chain projectBLOCK CHAIN  PROJECT block chain project
BLOCK CHAIN PROJECT block chain projectujraj8767
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahimamgadibrahim92
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证eeanqy
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证wpkuukw
 

Último (20)

一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
 
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
 
Essential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive GuideEssential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive Guide
 
Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptx
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
BLOCK CHAIN PROJECT block chain project
BLOCK CHAIN  PROJECT block chain projectBLOCK CHAIN  PROJECT block chain project
BLOCK CHAIN PROJECT block chain project
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 

10 Things Web Designers Need to Do Before Going Mobile

  • 1. Ten things web designers need to do before going mobile 16 April 2009 CHI*A
  • 2. One Live a mobile life 2 Start using a phone for accessing the Internet. •Use it as much as you can; don’t whip out a laptop or wait till you get home. •Try not to make it an iPhone. •If you have the means or resources, switch to other devices periodically, so you see the strengths and weaknesses of the various platforms, and don’t get stuck in a single UI mindset.
  • 3. Two Believe it’s a phone 3 It's a phone first. •Your customers might have a high end large screen phone with unlimited 3G data and/or wi-fi and a battery charger at hand ... or they might not. And you probably won't know. So: fast, responsive, light. •Add weight only when it significantly enhances the user experience. •Want more interaction logic? Make an app instead.
  • 4. Three Use mobile analytics Desktop web tools won’t cut it 4 Use a mobile analytics package. •Bango, Admob, Flurry, Pinchmedia. •The desktop-focused packages don't understand mobile. •Analytics are boring. Any ideas. This is a generic cool photo instead, but it sorta implies heatmap, etc. Thoughts?
  • 5. Four Know your platform 5 Learn the capabilities of your platform. •Your developers may not already know. •For example, we were told by a developer that Android couldn't use CSS layout to do something we provided code for; they insisted on using tables. •If you only do what they say you can, you aren't serving your users. •Above: VZW doesn’t allow links in SMS messages they didn’t originate. How does this affect your install process? •stream of consciousness: platform defines what you can and can’t do but if you don’t know what it can’t do you can only do what you think it can and your design gets smaller with each assumption - especially when developers take things way
  • 6. Five Target the devices your users have 6 Think carefully about how to target devices. •Remember that most people do not have a high end phones. Are they target customers? You might not want to abandon them. •But don't shortchange your high end device users, either. Like personas, you might need to work with multiple types of devices. •Texting and even web are not high end features, think what you really mean by categorizing features in any particular manner; don’t just assume everyone knows what a “smartphone” means anymore. •While not a low-end appeal, it works I think.
  • 7. Six Design for contexts of use 7 Think carefully about the users and what they are doing. •Don't just consider the quot;in a cafequot; or quot;on a busquot; contexts, but the quot;lying in bed before falling asleepquot; and quot;while watching televisionquot; contexts. (Or even, while “riding a bike”). •And of course quot;I don't have another device to access the Internet.” •Are your users task-based or otherwise-engaged? If you don’t know, find out. •A mobile is not used like a computer on a desk or lap. It can only capture attention for brief periods.
  • 8. Seven Understand the region and culture 8 Remember that devices vary from country to country. •Don't assume that because a phone type is popular where you live, that it's popular where your customers live. •Devices, networks, and customers will vary from region to region. •Knowing is not the same as understanding.
  • 9. Eight Learn the implications of intermediaries 9 Learn about what impact operators, transcoders, and aggregators have. •They can change your content and may block messaging. •They can also give you access to deeper user data.
  • 10. Nine Use device repositories 10 Learn about assistive technologies. •You should know what device description repositories are, and how they can help you. E.g., DeviceAtlas, WURFL (shown) •Make your content and layout and software intelligent so it behaves appropriately based on device capabilities
  • 11. Ten Send only what is needed 11 Don't put all rendering logic on the page. •Don't, for example, pull three image versions down to the page and then render only one. •Obviously, I don’t think much of this photo •I am not sure I love this point as stated, anyway. Something else about client vs. server, or page weight or what?
  • 12. Eleven Design with rules and patterns Not pixels 12 (and last of all) embrace flexible design. •Abandon pixel-perfect design. •Photoshop rendering is not your friend. •Use rules, charts, themes, patterns, styles. •Use modular design principles and polymorphic objects.
  • 13. Twelve Be part of the community 13 Come to Design for Mobile •April 20-22, 2009 in Lawrence •Or visit the design pattern wiki http://patterns.design4mobile.mobi. •Or at least read some books, subscribe to blogs, etc. •Don’t live in a cave, or silo. Understand the whole mobile ecosystem.
  • 14. Barbara Ballard Usability, human factors, interaction design, industrial design, marketing, engineering, entrepreneurship, MBA Product designer, product strategist, blogger Mobilist 14
  • 15. P.O. Box 44-2302 Lawrence, KS 66044 785 838 3003 littlespringsdesign.com design4mobile.mobi 15