• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile Web Development
 

Mobile Web Development

on

  • 401 views

Mobile computing has been a major trend for the past a few years. This talk to the ACM student chapter at GSU gives an overview of web site design and application development for mobile devices and ...

Mobile computing has been a major trend for the past a few years. This talk to the ACM student chapter at GSU gives an overview of web site design and application development for mobile devices and discuss key issues of adapting to this change. Topics include choices of mobile application development and delivery, basic principles and best practices of mobile friendly web sites and web applications, and major tools and frameworks.

Statistics

Views

Total Views
401
Views on SlideShare
285
Embed Views
116

Actions

Likes
1
Downloads
5
Comments
1

14 Embeds 116

http://cubicle-h.blogspot.com 83
http://cubicle-h.blogspot.ru 6
http://cubicle-h.blogspot.in 5
http://cubicle-h.blogspot.ch 4
http://cubicle-h.blogspot.de 4
http://cubicle-h.blogspot.co.uk 3
http://cubicle-h.blogspot.tw 2
http://cubicle-h.blogspot.ca 2
http://www.linkedin.com 2
http://cubicle-h.blogspot.com.au 1
http://cubicle-h.blogspot.fr 1
http://cubicle-h.blogspot.ie 1
http://educate.spsu.edu 1
http://cubicle-h.blogspot.com.br 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Utilization become more channelized and deserve to be more spectacular view.So the web application has to be developed in such a way it should be opt to any kind of web devices.This presentation would provide a good assistance to know and access the web through several smart devices includes i phones
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile Web Development Mobile Web Development Presentation Transcript

    • Mobile Web Development A Presentation to Georgia State University Student Chapter of ACM Jack Zheng, Ph.D. http://jackzheng.net Assistant Professor Information Technology Department School of Computing and Software Engineering March 6, 2014
    • Questions What is mobile web and why do we care about it? What are the basic choices to develop and deliver contents and services to mobile devices? What is different of mobile web and what are the design principles and best practices? What are the development tools and frameworks? Where can you learn more about mobile web?
    • What is mobile web? • Mobile web refers to the access and use of websites and web applications using smart mobile devices (and optimized for these devices) through computer networks – Particularly with a focus on user interfaces and interactions. – It's mainly about user experience, but recently it has begun to impact the architecture.
    • St. Peter's Basilica at the Vatican http://photoblog.nbcnews.com/ _news/2013/03/14/17312316- witnessing-papal-history- changes-with-digital-age 4
    • Cisco Visual Networking Index Global Mobile Data Traffic Forecast Update, 2013–2018 • 2013 global mobile data traffic – grew 81 percent – 1.5 exabytes per month at the end of 2013, from 820 petabytes per month at the end of 2012. – nearly 18 times the size of the entire global Internet in 2000. • Smartphones (in 2013) – 7 billion mobile devices and connections total, with 526 million added. – Smartphones accounted for 77 percent of that growth, with 406 million net additions. – Smartphones represented only 27% of total global handsets in use, but represented 95% of total global handset traffic. – The typical smartphone generated 48 times more mobile data traffic (529 MB per month) than the typical basic-feature cell phone. • Mobile network connection speeds – Globally, the average mobile network downstream speed was 1.4 mbps. – More than doubled in 2013.
    • 2013 Internet Trends by Mary Meeker
    • netmarketshare.com • Browsing by Device Category Trend
    • User Experience • Mobile-friendly sites turn visitors into customers http://googlemobileads.blogspot.com/2012/09/mobile-friendly-sites-turn-visitors.html
    • Mobile Development Options 9 http://wiki.developerforce.com/page/ Native,_HTML5,_or_Hybrid:_Under standing_Your_Mobile_Application_ Development_Options A program designed to run on a specific mobile operating system. A program designed to run on a specific mobile operating system. A web based application that runs in any web browser especially that designed for mobile devices. A web based application that runs in any web browser especially that designed for mobile devices. Web development wrapped in an app container Web development wrapped in an app container
    • Appcelerator/IDC 2013Q4 Mobile Trends Report
    • Traffic Sources • http://blogs.adobe.com/digitalmarketing/digital-marketing/tablets-trump-smartphones-in-global-website-traffic/ • http://success.adobe.com/en/na/programs/digital-index/1205_18011_tablet_report.html • http://chitika.com/insights/2014/android-by-manufacturer
    • Mobile Website Delivery Strategy • Separate mobile version site – Walmart: http://mobile.walmart.com/ – Ikea: http://m.ikea.com/us (jQuery Mobile) – Costco: http://m.costco.com/ – Google finance https://www.google.com/m/finance – Why Separate Mobile & Desktop Web Pages? http://www.lukew.com/ff/entry.asp?1390 • One Web – One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using.
    • One Web • One Web – Does not mean that the content is available in exactly the same representation across all devices. – The context of mobile use, device capability variations, bandwidth issues and mobile network capabilities all affect the representation. • Approaches – Responsive design – Device detection and adaptation (dynamic serving) • Client-side adaptive designs • Server-side adaptation (RESS) • Examples – http://mashable.com – http://google.com (not responsive to browser width on the desktop but uses device detection)
    • Design for Different UI Experiences • Adapt to screen size – Responsive design – Layout – Content prioritization • Touch friendly UI – Touch area – Touch target size – Gestures
    • Responsive Design • Responsive Web Design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience, easy reading and navigation with a minimum of resizing, panning, and scrolling, across a wide range of screen sizes and devices. • Basic principles and practices – Media query – Fluid layout - no horizontal scrolling – Content adaptation • Example (adjust the browser width and see the changes) – http://mashable.com – http://www.gsu.edu • Non-responsive example – http://cs.gsu.edu
    • Media Query • A CSS3 module allowing content rendering to adapt to conditions such as screen resolution. • A W3C recommended standard (June 2012) • Mobile first – http://tripplanner.travelalberta.com /* Default styles first then media queries */ @media screen and (min-width: 400px) {...} @media screen and (min-width: 600px) {...} @media screen and (min-width: 1000px) {...} @media screen and (min-width: 1400px) {...} /* Default styles first then media queries */ @media screen and (min-width: 400px) {...} @media screen and (min-width: 600px) {...} @media screen and (min-width: 1000px) {...} @media screen and (min-width: 1400px) {...} Specific styles for each condition (browser display area width) Specific styles for each condition (browser display area width)
    • Fluid Layout • Using relative (%) width http://getbootstrap.com/examples/dashboard/
    • Layout http://jasonweaver.name/lab/offcanvas/ Off Canvas Column Drop http://www.lukew.com/ff/entry.asp?1514
    • Content Prioritization • Non-major content needs to be off screen
    • Where to Put Menu? • Main navigation is hidden by default until activated, using – Navicon – Slide/brush (off canvas fly out) http://bradfrostweb.com/blog/web/responsive-nav-patterns/ http://designinstruct.com/web- design/navicon-transformicons/
    • Touch Areas • Thumb (one or two) oriented operation is common http://www.lukew.com/ff/entry.asp?1649
    • Touch Area Size • Size matters on small screens
    • Gestures • Challenges – No keyboard shortcut? – No hover? – No right click? – No scrolling wheel? – No scroll bar? – Limited browser buttons? • No problem! – Gestures represent the future UI opportunities. http://www.lukew.com/touch/
    • Development Tools and Frameworks • Responsive design test – http://www.responsinator.com – http://johnpolacek.github.io/Responsivator/ – https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View • Platforms and Frameworks – (Twitter) Bootstrap: http://getbootstrap.com – jQuery mobile: http://jquerymobile.com – PhoneGap: http://phonegap.com – http://www.iui-js.org/ – http://jqtjs.com/ – http://www.sencha.com/products/touch/ – http://app-framework-software.intel.com/ – http://www.appcelerator.com/titanium/ – http://monocross.net/ – http://mwf.ucla.edu/ – http://kurogo.org/home/ – http://www.the-m-project.org/ – More: http://mobile-frameworks-comparison-chart.com/ • Generator – http://www.dudamobile.com – https://codiqa.com • Detector – http://detectmobilebrowsers.com
    • Learning Resources • Books – http://www.amazon.com/dp/1449334970 – http://www.amazon.com/dp/1849693188 – http://www.amazon.com/dp/1593274874 – http://www.amazon.com/dp/1449311415 • Online learning resources – http://mobilewebbestpractices.com/ – http://mobilewebbestpractices.com/resources/ – http://www.w3.org/standards/webdesign/mobilweb – http://www.w3.org/TR/mwabp/ – http://www.lukew.com/ • News – http://mashable.com/category/mobile-web/ • Vendor resources – http://www.google.com/think/multiscreen/ – http://msdn.microsoft.com/en-us/library/aa286514.aspx – https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile – http://www.kinvey.com/native-web-hybrid-developers-ebook • GSU? • SPSU/KSU • BSIT "Mobile and Web" senior elective track • IT 4213 Mobile Web Development • GSU? • SPSU/KSU • BSIT "Mobile and Web" senior elective track • IT 4213 Mobile Web Development