Mobile Web Development

67 %
33 %
Information about Mobile Web Development
Technology

Published on March 6, 2014

Author: jgzheng

Source: slideshare.net

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.

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? • What comes to mind when you hear the phrase “Mobile Web”? • Mobile web refers to the access and use of websites and web applications using smart mobile devices through computer networks – Particularly with a focus on user interfaces and interactions.

St. Peter's Basilica at the Vatican http://photoblog.nbcnews.com/ _news/2013/03/14/17312316witnessing-papal-historychanges-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

Mobile Development Options A program designed to run on a specific mobile operating system. http://wiki.developerforce.com/page/ Native,_HTML5,_or_Hybrid:_Under standing_Your_Mobile_Application_ Development_Options Web development wrapped in an app container A web based application that runs in any web browser especially that designed for mobile devices. 8

Appcelerator/IDC 2013Q4 Mobile Trends Report

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/ • 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 exactly the same information 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 adaptation • Client-side adaptive designs • Server-side adaptive designs (RESS) • Examples – http://mashable.com – Google.com (not responsive 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 – 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 /* 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) – http://tripplanner.travelalberta.com

Fluid Layout • Using relative (%) width http://getbootstrap.com/examples/dashboard/

Layout Column Drop http://www.lukew.com/ff/entry.asp?1514 Off Canvas http://jasonweaver.name/lab/offcanvas/

Content Prioritization

Where to Put Menu? • Where to put menu? https://www.google.com https://plus.google.com/ http://bradfrostweb.com/blog/web/responsive-nav-patterns/

Touch Areas • Thumb oriented operation http://www.lukew.com/ff/entry.asp?1649

Touch Area Size

Gestures • No keyboard shortcut? • No hover? • No right click? • No scrolling wheel? • No scroll bar? • Limited browser buttons? • No problem! 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/enUS/docs/Tools/Responsive_Design_View • Frameworks – – – – (Twitter) Bootstrap: http://getbootstrap.com jQuery mobile: http://jquerymobile.com PhoneGap: http://phonegap.com More: http://www.gajotres.net/top-7-mobile-applicationhtml5-frameworks/ • Generator – http://www.dudamobile.com

Learning Resources • Courses – GSU? – SPSU/KSU • BSIT "Mobile and Web" senior elective track • IT 4213 Mobile Web Development • 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://mashable.com/category/mobile-web/ http://mobilewebbestpractices.com/ http://mobilewebbestpractices.com/resources/ https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile http://www.w3.org/standards/webdesign/mobilweb http://www.w3.org/TR/mwabp/ http://www.lukew.com/

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Mobile Web Development - Web developer guides | MDN

This page provides an overview of some of the main techniques needed to design web sites that work well on mobile devices. If you're looking for ...
Read more

Mobile Web Development - msdn.microsoft.com

This page provides guidance to Mobile Web Development resources in the MSDN Library and elsewhere on microsoft.com.
Read more

Mobile Web Development | Udacity

In this course, you'll learn how to build great mobile web experiences. We'll cover performance issues on mobile, and how to make use of mobile sensors.
Read more

A Beginner's Guide to Mobile Web Development - mobiForge

While accessing the web on a mobile device is nothing new, a renewed interest in developing mobile web content has been ignited by the increased ...
Read more

23go .. mobile web development

Web app development von klein bis groß. World wide web apps, a world of devices wide.
Read more

Thimo Klüser | Mobile & Web Development

Thimo Klüser entwickelt Produkte, Systeme und Dienstleistungen im IT-Sektor für Kunden jeder Größe. Von der App-Entwicklung über Website-Entwicklung ...
Read more

Mobile and Web Development Courses | Coursera

Browse Mobile and Web Development courses and specializations. Mobile and web development courses will build your skills in creating web applications and ...
Read more

Web Developer und Mobile Developer | webundmobile.de

webundmobile ist das Fachmagazin für Web-Entwickler und -Designer, für Programmierer von Apps für die Plattformen Android, iOS und Windows Phone.
Read more

Guidelines for mobile web development - Smashing Magazine

This collection of top quality articles focuses on design for mobile devices, Android and iPhone Web App support and mobile development.
Read more

mobiForge - Mobile Web Development

Mobile Web Development ... Mobile audience growth driven by web, not apps: report. October 4, 2016, by Martin Clancy
Read more