SlideShare une entreprise Scribd logo
1  sur  23
10 Things Mobile Sites are Different from Full Web Sites Shanshan Ma @shanshanma 8/9/2011
1. Content Prioritization & Hierarchy In comparison to desktop Web sites, which usually contain a wide range of content and information, mobile sites usually include only the most crucial and time- and location-specific functions and features.
Example: orbitz.com
2. Vertical Navigation & Horizontal Navigation On desktop Web sites, horizontal navigation at the top of a page is a widely accepted way of structuring and presenting a site’s content. However, vertical navigation replaces horizontal navigation on more than 90% of the mobile sites we analyzed.
Example: urbanoutfitters.com
3. Bars, Tabs & Hypertexts Hypertext is the signature component of the Internet and the Web. However, on mobile sites, there are few or no hypertexts on pages.
Example: kayak.com
4. Text & Graphics On desktop Web sites, designers use graphics for many different purposes, including promoting, marketing, and navigating. Mobile sites avoid using promotional and marketing graphics and use minimal graphics for navigation.
Example: dell.com
5. Contextual & Global Navigation Various types of navigation are available on desktop Web sites. Some are global, so are consistent across a site, while others are contextual and change depending on where users are on a site. In contrast, while most mobile sites have global navigation, contextual navigation is rare on mobile sites.
Example: bestbuy.com
6. Footers On desktop Web sites, footers typically provide either links to content users might expect to see on a site’s home page or quick links that are available across a site to provide access to content users often need. Mobile sites employ a minimal form of the first type of footer, but they do not use footers containing quick links.
Example: dell.com
7. Breadcrumbs On desktop Web sites, breadcrumbs reassure users that they are on the right page and let them backtrack on their navigational path. Breadcrumbs are rare on mobiles sites and really aren’t necessary, because of the relatively flat structure of mobile sites.
Example: amazon.com
8. Progress Indicator Process funnels on desktop Web sites frequently use a progress indicator at the top of each page to guide users through the process. Such progress indicators do not appear on mobile sites.
Example: amazon.com
9. Integration with Phone Functions Such as Direct Calling and Text Messaging Mobile sites offer better integration with phone functions—and present marketing opportunities such as facilitating direct orders by phone or sending promotional text messages.
Example: bestbuy.com
10. Localized & Personalized Search Mobile sites can take advantage of technology that automatically detects where users are to present local search results. When users set up their preferences or profile, personalized search results become even more relevant and valuable to them.
Example: kayak.com
About me: @shanshanma: user experience designer
Thank you!

Contenu connexe

En vedette

Profil CH training & motivation
Profil CH training & motivation Profil CH training & motivation
Profil CH training & motivation Chori Hakiki
 
Skripsi bab Metodologi penelitian
Skripsi  bab Metodologi penelitian Skripsi  bab Metodologi penelitian
Skripsi bab Metodologi penelitian Chori Hakiki
 
Golden Business Opportunity
Golden Business OpportunityGolden Business Opportunity
Golden Business OpportunityChori Hakiki
 
Creating Cultural Agility -The Impact study
Creating Cultural Agility -The Impact study Creating Cultural Agility -The Impact study
Creating Cultural Agility -The Impact study Diversity Best Practices
 
Get solar panels at home and save money
Get solar panels at home and save moneyGet solar panels at home and save money
Get solar panels at home and save moneyCharlesSolarman
 
UX design & redesign
UX design & redesignUX design & redesign
UX design & redesignShanshan Ma
 
Go green with the quick diy solar panels at home
Go green with the quick diy solar panels at homeGo green with the quick diy solar panels at home
Go green with the quick diy solar panels at homeCharlesSolarman
 
Company profile CH training
Company profile CH training Company profile CH training
Company profile CH training Chori Hakiki
 
How to Create an Inclusive Advantage: Embedding Cultural Inclusion
How to Create an Inclusive Advantage: Embedding Cultural InclusionHow to Create an Inclusive Advantage: Embedding Cultural Inclusion
How to Create an Inclusive Advantage: Embedding Cultural InclusionDiversity Best Practices
 

En vedette (12)

Profil CH training & motivation
Profil CH training & motivation Profil CH training & motivation
Profil CH training & motivation
 
Iss
IssIss
Iss
 
Skripsi bab Metodologi penelitian
Skripsi  bab Metodologi penelitian Skripsi  bab Metodologi penelitian
Skripsi bab Metodologi penelitian
 
Golden Business Opportunity
Golden Business OpportunityGolden Business Opportunity
Golden Business Opportunity
 
Creating Cultural Agility -The Impact study
Creating Cultural Agility -The Impact study Creating Cultural Agility -The Impact study
Creating Cultural Agility -The Impact study
 
Get solar panels at home and save money
Get solar panels at home and save moneyGet solar panels at home and save money
Get solar panels at home and save money
 
UX design & redesign
UX design & redesignUX design & redesign
UX design & redesign
 
Go green with the quick diy solar panels at home
Go green with the quick diy solar panels at homeGo green with the quick diy solar panels at home
Go green with the quick diy solar panels at home
 
Company profile CH training
Company profile CH training Company profile CH training
Company profile CH training
 
Autonoom
AutonoomAutonoom
Autonoom
 
Unit 1 sony subsidiaries
Unit 1 sony subsidiariesUnit 1 sony subsidiaries
Unit 1 sony subsidiaries
 
How to Create an Inclusive Advantage: Embedding Cultural Inclusion
How to Create an Inclusive Advantage: Embedding Cultural InclusionHow to Create an Inclusive Advantage: Embedding Cultural Inclusion
How to Create an Inclusive Advantage: Embedding Cultural Inclusion
 

Similaire à 10 things mobile sites are different from full web sites

Shamit Khemka describes Top 5 web designing trends
Shamit Khemka describes Top 5 web designing trendsShamit Khemka describes Top 5 web designing trends
Shamit Khemka describes Top 5 web designing trendsSynapseIndia
 
Mobile web marketing - eSalesData
Mobile web marketing - eSalesDataMobile web marketing - eSalesData
Mobile web marketing - eSalesDataeSalesData
 
17 Essential Elements of Web Design | FODUU
17 Essential Elements of Web Design | FODUU17 Essential Elements of Web Design | FODUU
17 Essential Elements of Web Design | FODUUAnuj Kumar Singh
 
SurfOpen Diary Study & Customer Insights
SurfOpen Diary Study & Customer InsightsSurfOpen Diary Study & Customer Insights
SurfOpen Diary Study & Customer InsightsMartin Sandström
 
Mobile usability for emerging markets
Mobile usability for emerging marketsMobile usability for emerging markets
Mobile usability for emerging marketsHelga Stegmann
 
Making The Most of Mobile
Making The Most of MobileMaking The Most of Mobile
Making The Most of Mobileguestca744f
 
Design proposal final
Design proposal finalDesign proposal final
Design proposal finalvirtzZz
 
SES Berlin OMCap 2013
SES Berlin OMCap 2013SES Berlin OMCap 2013
SES Berlin OMCap 2013Rachel Pasqua
 
The Death of the Desktop: The Future For Mobile SEO
The Death of the Desktop: The Future For Mobile SEOThe Death of the Desktop: The Future For Mobile SEO
The Death of the Desktop: The Future For Mobile SEORegan McGregor
 
Responsive Web Design vs Mobile Web App
Responsive Web Design vs Mobile Web AppResponsive Web Design vs Mobile Web App
Responsive Web Design vs Mobile Web AppPamela Ireri
 
Web In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross BrowsingWeb In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross BrowsingGreg SHIN
 
Ppt on Website Planning
Ppt on Website PlanningPpt on Website Planning
Ppt on Website PlanningOm Prakash
 
Mobilegeddon Is Coming!
Mobilegeddon Is Coming!Mobilegeddon Is Coming!
Mobilegeddon Is Coming!Bhoomi Patel
 
Unveiling Mobile Mastery Crafting Seamless User Experiences.docx
Unveiling Mobile Mastery Crafting Seamless User Experiences.docxUnveiling Mobile Mastery Crafting Seamless User Experiences.docx
Unveiling Mobile Mastery Crafting Seamless User Experiences.docxkubalesniak93
 
Mobile and Tablet Design for Business
Mobile and Tablet Design for BusinessMobile and Tablet Design for Business
Mobile and Tablet Design for BusinessFrancis Ibikunle
 
straight-north-lead-gen-website-whitepaper
straight-north-lead-gen-website-whitepaperstraight-north-lead-gen-website-whitepaper
straight-north-lead-gen-website-whitepaperMatthew J. Lane
 

Similaire à 10 things mobile sites are different from full web sites (20)

Mobile seo
Mobile seoMobile seo
Mobile seo
 
Shamit Khemka describes Top 5 web designing trends
Shamit Khemka describes Top 5 web designing trendsShamit Khemka describes Top 5 web designing trends
Shamit Khemka describes Top 5 web designing trends
 
Mobile web marketing - eSalesData
Mobile web marketing - eSalesDataMobile web marketing - eSalesData
Mobile web marketing - eSalesData
 
17 Essential Elements of Web Design | FODUU
17 Essential Elements of Web Design | FODUU17 Essential Elements of Web Design | FODUU
17 Essential Elements of Web Design | FODUU
 
SurfOpen Diary Study & Customer Insights
SurfOpen Diary Study & Customer InsightsSurfOpen Diary Study & Customer Insights
SurfOpen Diary Study & Customer Insights
 
Mobile usability for emerging markets
Mobile usability for emerging marketsMobile usability for emerging markets
Mobile usability for emerging markets
 
Making The Most of Mobile
Making The Most of MobileMaking The Most of Mobile
Making The Most of Mobile
 
15 Point Checklist For An Accessible Research Website
15 Point Checklist For An Accessible Research Website15 Point Checklist For An Accessible Research Website
15 Point Checklist For An Accessible Research Website
 
Design proposal final
Design proposal finalDesign proposal final
Design proposal final
 
SES Berlin OMCap 2013
SES Berlin OMCap 2013SES Berlin OMCap 2013
SES Berlin OMCap 2013
 
The Death of the Desktop: The Future For Mobile SEO
The Death of the Desktop: The Future For Mobile SEOThe Death of the Desktop: The Future For Mobile SEO
The Death of the Desktop: The Future For Mobile SEO
 
Responsive Web Design vs Mobile Web App
Responsive Web Design vs Mobile Web AppResponsive Web Design vs Mobile Web App
Responsive Web Design vs Mobile Web App
 
Web In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross BrowsingWeb In Extreme Environment: Beyond Cross Browsing
Web In Extreme Environment: Beyond Cross Browsing
 
Ppt on Website Planning
Ppt on Website PlanningPpt on Website Planning
Ppt on Website Planning
 
Mobile seo
Mobile seoMobile seo
Mobile seo
 
Mobilegeddon Is Coming!
Mobilegeddon Is Coming!Mobilegeddon Is Coming!
Mobilegeddon Is Coming!
 
Unveiling Mobile Mastery Crafting Seamless User Experiences.docx
Unveiling Mobile Mastery Crafting Seamless User Experiences.docxUnveiling Mobile Mastery Crafting Seamless User Experiences.docx
Unveiling Mobile Mastery Crafting Seamless User Experiences.docx
 
Mobile and Tablet Design for Business
Mobile and Tablet Design for BusinessMobile and Tablet Design for Business
Mobile and Tablet Design for Business
 
Sn web-whitepaper
Sn web-whitepaperSn web-whitepaper
Sn web-whitepaper
 
straight-north-lead-gen-website-whitepaper
straight-north-lead-gen-website-whitepaperstraight-north-lead-gen-website-whitepaper
straight-north-lead-gen-website-whitepaper
 

Dernier

DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 

Dernier (20)

DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 

10 things mobile sites are different from full web sites

  • 1. 10 Things Mobile Sites are Different from Full Web Sites Shanshan Ma @shanshanma 8/9/2011
  • 2. 1. Content Prioritization & Hierarchy In comparison to desktop Web sites, which usually contain a wide range of content and information, mobile sites usually include only the most crucial and time- and location-specific functions and features.
  • 4. 2. Vertical Navigation & Horizontal Navigation On desktop Web sites, horizontal navigation at the top of a page is a widely accepted way of structuring and presenting a site’s content. However, vertical navigation replaces horizontal navigation on more than 90% of the mobile sites we analyzed.
  • 6. 3. Bars, Tabs & Hypertexts Hypertext is the signature component of the Internet and the Web. However, on mobile sites, there are few or no hypertexts on pages.
  • 8. 4. Text & Graphics On desktop Web sites, designers use graphics for many different purposes, including promoting, marketing, and navigating. Mobile sites avoid using promotional and marketing graphics and use minimal graphics for navigation.
  • 10. 5. Contextual & Global Navigation Various types of navigation are available on desktop Web sites. Some are global, so are consistent across a site, while others are contextual and change depending on where users are on a site. In contrast, while most mobile sites have global navigation, contextual navigation is rare on mobile sites.
  • 12. 6. Footers On desktop Web sites, footers typically provide either links to content users might expect to see on a site’s home page or quick links that are available across a site to provide access to content users often need. Mobile sites employ a minimal form of the first type of footer, but they do not use footers containing quick links.
  • 14. 7. Breadcrumbs On desktop Web sites, breadcrumbs reassure users that they are on the right page and let them backtrack on their navigational path. Breadcrumbs are rare on mobiles sites and really aren’t necessary, because of the relatively flat structure of mobile sites.
  • 16. 8. Progress Indicator Process funnels on desktop Web sites frequently use a progress indicator at the top of each page to guide users through the process. Such progress indicators do not appear on mobile sites.
  • 18. 9. Integration with Phone Functions Such as Direct Calling and Text Messaging Mobile sites offer better integration with phone functions—and present marketing opportunities such as facilitating direct orders by phone or sending promotional text messages.
  • 20. 10. Localized & Personalized Search Mobile sites can take advantage of technology that automatically detects where users are to present local search results. When users set up their preferences or profile, personalized search results become even more relevant and valuable to them.
  • 22. About me: @shanshanma: user experience designer