SlideShare une entreprise Scribd logo
1  sur  18
Télécharger pour lire hors ligne
NETC 2010 – Auburn
Motorola DynaTAC 8000x

           LED display
           30 min. talk time


 Only $3995.00




May 29, 2010                    NC State University
Motorola DynaTAC 8000x

           LED display
           30 min. talk time


 Only $3995.00 $8723.67




May 29, 2010                    NC State University
    4.2B mobile devices vs. 1.3B PCs
                   ~840M MD internet enabled
                   2009 the NA web share rose 110%,
                    148% globally
                   Forecast is 1.7B mobile web users
                    by 2013

               The main or only access for many

               Statistics from Vint Cerf, WWW 2010 and Quantcast.


May 29, 2010           NC State University
Many reasons contribute to the increase in use of
  mobile devices on the Internet.
           Faster, better connectivity
           Better data plans
           Devices with larger, color displays
           Touch screens
           Better browsers (Webkit, Mozilla, Opera)
           Software designed specifically for MDs




May 29, 2010                  NC State University
     Small, variable screen size and resolution
      Input is awkward
      Selection of items is often difficult
      Networks, even 3G, are slow and may cost
      Flash is white space
      Looking for a small amount of information




May 29, 2010            NC State University
     Use CSS for layout, not tables.
      Put important information near the top.
      Use images sparingly and make sure they are
       optimized.
      Less is more.
      Use links like breadcrumbs to navigate your
       site.




May 29, 2010           NC State University
     Meet the user need quickly
      Input is awkward, make it easy
      Show only essential information
           Breadcrumb trails vs. navigation
      Mobile friendly page layout
           Single column (Google, Yahoo, FB, Twitter)
           Clearly distinguish selected items
           Large icons for buttons
           Consistent layout
       Acknowledgements: Abid Warsi, webcredible.co.uk (Oct. 2007), et al


May 29, 2010                        NC State University
With smarter, better, mobile browsers is there a
   reason to develop mobile sites?

 Increase usability for the mobile user.

 Mobile users were successful 64% of the time on
  mobile sites compared to a 53% success rate for
  standard websites (Jakob Nielsen, 2009). 


May 29, 2010          NC State University
With smarter, better, mobile browsers is there a
   reason to develop mobile sites?

 Take advantage of specific capabilities of MDs, for
   example:
      - telephone
      - navigation / location based services
      - camera


May 29, 2010         NC State University
With smarter, better, mobile browsers is there a
   reason to develop mobile sites?

 A lot of the world only has access to the web via a
    mobile device. Is your target audience or is a
    new audience within this group?




May 29, 2010         NC State University
With smarter, better, mobile browsers is there a
   reason to develop mobile sites?

 Is location-sensitivity important to you? Are you
    able to provide content or services that users
    need “in the field?”




May 29, 2010         NC State University
     Make your current site mobile friendly
      Provide different functionality for MDs vs. PCs
      Create a site specific to MDs




May 29, 2010            NC State University
     Don’t reinvent the wheel
           Libraries to detect if and what type MD


      View source

      Initial testing in Safari, final testing on device
       or http://www.opera.com/mobile/demo/




May 29, 2010                  NC State University
     Principles of design for a mobile site are quite a
       bit different than for a traditional web site.

      Simplify - Some sites can be made mobile
       friendly with logical, semantic markup, a
       different style sheet, and fluid design.

      You might decide you need to design a mobile
       site to utilize a specific functionality of the
       device.
May 29, 2010             NC State University
     With the explosion in usage of touch screen
       phones and the iPad it becomes increasingly
       harder to decide how to display content.

      The mobile market is growing rapidly, so if
       possible, offer a choice.




May 29, 2010            NC State University
     MobiForge.com (ready.mobi – validator)
      Tips on Designing and Developing Mobile
       Web http://journal.code4lib.org/articles/2055
      MIT Code:
       http://sourceforge.net/projects/
       mitmobileweb/
      Opera mini emulator:
       http://www.opera.com/mobile/demo/



May 29, 2010           NC State University
http://m.ces.ncsu.edu




May 29, 2010       NC State University

Contenu connexe

Similaire à Web Development for Mobile Devices

Design of mobile browsers
Design of mobile browsersDesign of mobile browsers
Design of mobile browsersArpan Baishya
 
Going mobile - Highed Web Presentation - 2011
Going mobile - Highed Web Presentation - 2011Going mobile - Highed Web Presentation - 2011
Going mobile - Highed Web Presentation - 2011Nathan Gerber
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop UsabilityDoug Gapinski
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldDoug Gapinski
 
Building Mobile Friendly Websites
Building Mobile Friendly WebsitesBuilding Mobile Friendly Websites
Building Mobile Friendly WebsitesCittrex
 
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
 
Why A Smartphone Class?
Why A Smartphone Class?Why A Smartphone Class?
Why A Smartphone Class?Kathy Gill
 
Taking Your Library Website Mobile
Taking Your Library Website MobileTaking Your Library Website Mobile
Taking Your Library Website Mobilebaldwind1976
 
Adapting Your Website to a Mobile World
Adapting Your Website to a Mobile WorldAdapting Your Website to a Mobile World
Adapting Your Website to a Mobile WorldTom Jelen
 
Going mobile edu web presentation - 2011
Going mobile   edu web presentation - 2011Going mobile   edu web presentation - 2011
Going mobile edu web presentation - 2011Nathan Gerber
 
Mobile Trends & Innovations: What Your Business Needs To Know
Mobile Trends & Innovations: What Your Business Needs To KnowMobile Trends & Innovations: What Your Business Needs To Know
Mobile Trends & Innovations: What Your Business Needs To KnowNavigationArts
 
Mobile site design best practices
Mobile site design best practicesMobile site design best practices
Mobile site design best practicesAyantek LLC
 
Mobile Web Design & Development 2011
Mobile Web Design & Development 2011Mobile Web Design & Development 2011
Mobile Web Design & Development 2011Dave Wallace
 
Mobile web technologies_overview_v1_0_en
Mobile web technologies_overview_v1_0_enMobile web technologies_overview_v1_0_en
Mobile web technologies_overview_v1_0_enHemant Shah
 
Mobile Learning or m-Learning
Mobile Learning or m-LearningMobile Learning or m-Learning
Mobile Learning or m-LearningB. Sutherland
 
Mobile Apps at NCSU Libraries
Mobile Apps at NCSU LibrariesMobile Apps at NCSU Libraries
Mobile Apps at NCSU LibrariesCory Lown
 
Mobile and Tablet Design for Business
Mobile and Tablet Design for BusinessMobile and Tablet Design for Business
Mobile and Tablet Design for BusinessFrancis Ibikunle
 

Similaire à Web Development for Mobile Devices (20)

Design of mobile browsers
Design of mobile browsersDesign of mobile browsers
Design of mobile browsers
 
Going mobile - Highed Web Presentation - 2011
Going mobile - Highed Web Presentation - 2011Going mobile - Highed Web Presentation - 2011
Going mobile - Highed Web Presentation - 2011
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop Usability
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
 
Building Mobile Friendly Websites
Building Mobile Friendly WebsitesBuilding Mobile Friendly Websites
Building Mobile Friendly Websites
 
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
 
Why A Smartphone Class?
Why A Smartphone Class?Why A Smartphone Class?
Why A Smartphone Class?
 
Taking Your Library Website Mobile
Taking Your Library Website MobileTaking Your Library Website Mobile
Taking Your Library Website Mobile
 
mobile browsers.pptx
mobile browsers.pptxmobile browsers.pptx
mobile browsers.pptx
 
Adapting Your Website to a Mobile World
Adapting Your Website to a Mobile WorldAdapting Your Website to a Mobile World
Adapting Your Website to a Mobile World
 
LESSON1 (1).pptx
LESSON1 (1).pptxLESSON1 (1).pptx
LESSON1 (1).pptx
 
Going mobile edu web presentation - 2011
Going mobile   edu web presentation - 2011Going mobile   edu web presentation - 2011
Going mobile edu web presentation - 2011
 
Mobile Trends & Innovations: What Your Business Needs To Know
Mobile Trends & Innovations: What Your Business Needs To KnowMobile Trends & Innovations: What Your Business Needs To Know
Mobile Trends & Innovations: What Your Business Needs To Know
 
Mobile site design best practices
Mobile site design best practicesMobile site design best practices
Mobile site design best practices
 
Mobile Web Design & Development 2011
Mobile Web Design & Development 2011Mobile Web Design & Development 2011
Mobile Web Design & Development 2011
 
Mobile web technologies_overview_v1_0_en
Mobile web technologies_overview_v1_0_enMobile web technologies_overview_v1_0_en
Mobile web technologies_overview_v1_0_en
 
Mobile Learning or m-Learning
Mobile Learning or m-LearningMobile Learning or m-Learning
Mobile Learning or m-Learning
 
Mobile Apps at NCSU Libraries
Mobile Apps at NCSU LibrariesMobile Apps at NCSU Libraries
Mobile Apps at NCSU Libraries
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Mobile and Tablet Design for Business
Mobile and Tablet Design for BusinessMobile and Tablet Design for Business
Mobile and Tablet Design for Business
 

Dernier

How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
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
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
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
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
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
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfPrecisely
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
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
 
"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
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 

Dernier (20)

How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
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
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
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
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
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
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
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
 
"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
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 

Web Development for Mobile Devices

  • 1. NETC 2010 – Auburn
  • 2. Motorola DynaTAC 8000x   LED display   30 min. talk time Only $3995.00 May 29, 2010 NC State University
  • 3. Motorola DynaTAC 8000x   LED display   30 min. talk time Only $3995.00 $8723.67 May 29, 2010 NC State University
  • 4.   4.2B mobile devices vs. 1.3B PCs   ~840M MD internet enabled   2009 the NA web share rose 110%, 148% globally   Forecast is 1.7B mobile web users by 2013 The main or only access for many Statistics from Vint Cerf, WWW 2010 and Quantcast. May 29, 2010 NC State University
  • 5. Many reasons contribute to the increase in use of mobile devices on the Internet.   Faster, better connectivity   Better data plans   Devices with larger, color displays   Touch screens   Better browsers (Webkit, Mozilla, Opera)   Software designed specifically for MDs May 29, 2010 NC State University
  • 6.   Small, variable screen size and resolution   Input is awkward   Selection of items is often difficult   Networks, even 3G, are slow and may cost   Flash is white space   Looking for a small amount of information May 29, 2010 NC State University
  • 7.   Use CSS for layout, not tables.   Put important information near the top.   Use images sparingly and make sure they are optimized.   Less is more.   Use links like breadcrumbs to navigate your site. May 29, 2010 NC State University
  • 8.   Meet the user need quickly   Input is awkward, make it easy   Show only essential information   Breadcrumb trails vs. navigation   Mobile friendly page layout   Single column (Google, Yahoo, FB, Twitter)   Clearly distinguish selected items   Large icons for buttons   Consistent layout Acknowledgements: Abid Warsi, webcredible.co.uk (Oct. 2007), et al May 29, 2010 NC State University
  • 9. With smarter, better, mobile browsers is there a reason to develop mobile sites? Increase usability for the mobile user. Mobile users were successful 64% of the time on mobile sites compared to a 53% success rate for standard websites (Jakob Nielsen, 2009).  May 29, 2010 NC State University
  • 10. With smarter, better, mobile browsers is there a reason to develop mobile sites? Take advantage of specific capabilities of MDs, for example: - telephone - navigation / location based services - camera May 29, 2010 NC State University
  • 11. With smarter, better, mobile browsers is there a reason to develop mobile sites? A lot of the world only has access to the web via a mobile device. Is your target audience or is a new audience within this group? May 29, 2010 NC State University
  • 12. With smarter, better, mobile browsers is there a reason to develop mobile sites? Is location-sensitivity important to you? Are you able to provide content or services that users need “in the field?” May 29, 2010 NC State University
  • 13.   Make your current site mobile friendly   Provide different functionality for MDs vs. PCs   Create a site specific to MDs May 29, 2010 NC State University
  • 14.   Don’t reinvent the wheel   Libraries to detect if and what type MD   View source   Initial testing in Safari, final testing on device or http://www.opera.com/mobile/demo/ May 29, 2010 NC State University
  • 15.   Principles of design for a mobile site are quite a bit different than for a traditional web site.   Simplify - Some sites can be made mobile friendly with logical, semantic markup, a different style sheet, and fluid design.   You might decide you need to design a mobile site to utilize a specific functionality of the device. May 29, 2010 NC State University
  • 16.   With the explosion in usage of touch screen phones and the iPad it becomes increasingly harder to decide how to display content.   The mobile market is growing rapidly, so if possible, offer a choice. May 29, 2010 NC State University
  • 17.   MobiForge.com (ready.mobi – validator)   Tips on Designing and Developing Mobile Web http://journal.code4lib.org/articles/2055   MIT Code: http://sourceforge.net/projects/ mitmobileweb/   Opera mini emulator: http://www.opera.com/mobile/demo/ May 29, 2010 NC State University
  • 18. http://m.ces.ncsu.edu May 29, 2010 NC State University