mobile web development
DESCRIPTION
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.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