Mobile: Web & Apps
Scotty Logan
About Me
IT Architect in IT Services
Started at Stanford in 1999
20th anniversary of my first web page
Worked on web “stuff” since then
but never as a “web developer”
An instigator of ITS / UComm Mobile Aware
Web project
The early days
One of my early web pages
Really basic HTML
<HTML>
<HEAD>
<TITLE>The Tardis WWW Server</TITLE>
</HEAD>
<BODY>
<HR>
<H1>The Tardis WWW Server</H1>
<HR>
<P>
<I>This is a quick description of how the WWW server on</I>
<TT>www.tardis.ed.ac.uk</TT>
<I>is set up, and where all the relevant files live.</I>
</P>
<P>
<I>The pages containing descriptions of the hardware that the
server runs on (a DEC MicroVAX II) have yet to be written.</I>
</P>
<HR>
<P>
<TT>www.tardis</TT> currently runs the
<A HREF="/~www/httpd_docs/index.html">CERN httpd server</A>.
The files used by the server can be split into those belonging to
<A HREF=#user>users</A> and those belonging to the
<A HREF=#server>server</A>.
</P>
Back then that was HTML
Now we call it “Content First”
It was even “mobile friendly”

http://www.stanford.edu/~swl/tardis.html
Back to the Future
For a little while
Survey time
How many of you have an iOS device?
!

iPod Touch
iPhone
iPad
Survey time
How many of you have an Android device?
!

Nexus phone / tablet
Samsung Galaxy
HTC One
etc
etc
Survey time
How many of you have something else?
!

Blackberry
Windows Phone
“feature” phone
Native Apps
Available from app store
Downloaded and installed on device
Available offline
Full device access
camera, location, storage, etc.
Unique development tools for each platform
Separate codebases
Native App Cost
Getting less expensive
Mobile app “factories”
Each additional platform adds cost
Can be offset by charging for app
Only really worth it for iOS and Android
some exceptions for niche markets
Hybrid Apps
Uses frameworks / wrappers like PhoneGap
Created as web apps
Better device access than web
May not look completely native
Easier to support less common platforms
“mostly” one codebase
Can / must be deployed via app store
Web Apps
Like a web site, but more “appy”
HTML, CSS, JavaScript
Inherently multi-platform
One codebase
might include tweaks for some platforms
Used to not be available offline
Less access to device features
HTML5 Web Apps
More access to device features
Location (GPS and compass)
Local storage
Offline applications
Feature support varies by OS and version
http://caniuse.com/
http://modernizr.com/
Native, Hybrid or Web App
It depends
Which platforms do you need to support?
What features do you need?
What’s your budget?
How quickly do you need to make changes?
Web usually faster than app store
Mobile Web Required
Easiest way for people to discover your app
Web App vs Web Site
Mobile web site
Link to app store(s)
No support for devices without apps
Might be unpopular with infrequent users
Mobile web app
Support less mainstream devices
Useful for infrequent users
WTF is mobile anyway?
Laptops are not considered “mobile”
One day I used my laptop in
my home
my local Starbucks
my office
Coupa Cafe (Y2E2)
a vendor’s offices in Los Altos
Desktop
Large high resolution screen
Large memory
Large storage
Fast CPU
Fast network
Always on network
Everything else
Small to medium screen
Small to medium resolution
Small memory
Limited storage
Wide range of CPU speeds
Wide range of network speeds
Sometimes on network
It’s all relative: my laptop
15” screen (up to 2880x1800)
23” monitor (1920x1200) in office
16GB RAM
500GB fast SSD
2.7GHz quad core cpu
801.11n wifi
It’s all relative: my first laptop
12” screen (800x600)
15” monitor (1024x768) in office
72MB RAM
2GB slow hard drive
133MHz single core cpu
10Mbps ethernet via PCMCIA card
It’s all relative: my phone
3.5” screen (960x640)
512MB RAM
64GB flash storage
1GHz dual core cpu
801.11n wifi and 3G GSM
Network Speed
Laptop:
campus wifi: 91Mbps down / 88Mbps up
home wifi: 35Mbps down / 8Mbps up
Phone:
campus wifi: 21Mbps down / 14Mbps up
AT&T 3G: 3Mbps down / <1Mbps up
A new-ish approach:
Responsive Design
History
No mobile web
Separate mobile sites
using mobile web frameworks
Progressive Enhancement
mobile browser & device feature detection
Responsive Design
content first, dynamic layout
Stop. Do not pass GO.

There are many tools to help you
Drupal

Stanford has responsive themes for Drupal
http://itservices.stanford.edu/
WordPress

Many responsive WordPress themes
http://itarch.stanford.edu/blog/
http://emergency.stanford.edu/
Frameworks
For custom apps or sites
Bootstrap
http://getbootstrap.com/
base off our responsive Drupal themes
http://news.stanford.edu/nobel/
Also
http://responsive.vermilion.com/compare.php
http://designinstruct.com/roundups/html5-frameworks/
Doing it
the hard way
Do not do this
This is just
educational
Content First
Back to the past future
<HTML>
<HEAD>
<TITLE>The Tardis WWW Server</TITLE>
</HEAD>
<BODY>
<HR>
<H1>The Tardis WWW Server</H1>
<HR>
<P>
<I>This is a quick description of how the WWW server on</I>
<TT>www.tardis.ed.ac.uk</TT>
<I>is set up, and where all the relevant files live.</I>
</P>
<P>
<I>The pages containing descriptions of the hardware that the
server runs on (a DEC MicroVAX II) have yet to be written.</I>
</P>
<HR>
<P>
<TT>www.tardis</TT> currently runs the
<A HREF="/~www/httpd_docs/index.html">CERN httpd server</A>.
The files used by the server can be split into those belonging to
<A HREF=#user>users</A> and those belonging to the
<A HREF=#server>server</A>.
</P>
Modern version
<!DOCTYPE html>

<html>

<head>

<title>Nobel Laureates</title>

</head>

<body>

<article>

<h1>Kenneth J. Arrow</h1>

<img src=”images/Arrow_68.jpg”>

<a href=”arrow.html”>Economics, 1972</a>

</article>

</body>

</html>


Mobile tech briefing 2013

  • 1.
    Mobile: Web &Apps Scotty Logan
  • 2.
    About Me IT Architectin IT Services Started at Stanford in 1999 20th anniversary of my first web page Worked on web “stuff” since then but never as a “web developer” An instigator of ITS / UComm Mobile Aware Web project
  • 3.
    The early days Oneof my early web pages
  • 4.
    Really basic HTML <HTML> <HEAD> <TITLE>TheTardis WWW Server</TITLE> </HEAD> <BODY> <HR> <H1>The Tardis WWW Server</H1> <HR> <P> <I>This is a quick description of how the WWW server on</I> <TT>www.tardis.ed.ac.uk</TT> <I>is set up, and where all the relevant files live.</I> </P> <P> <I>The pages containing descriptions of the hardware that the server runs on (a DEC MicroVAX II) have yet to be written.</I> </P> <HR> <P> <TT>www.tardis</TT> currently runs the <A HREF="/~www/httpd_docs/index.html">CERN httpd server</A>. The files used by the server can be split into those belonging to <A HREF=#user>users</A> and those belonging to the <A HREF=#server>server</A>. </P>
  • 5.
    Back then thatwas HTML Now we call it “Content First”
  • 6.
    It was even“mobile friendly” http://www.stanford.edu/~swl/tardis.html
  • 7.
    Back to theFuture For a little while
  • 8.
    Survey time How manyof you have an iOS device? ! iPod Touch iPhone iPad
  • 9.
    Survey time How manyof you have an Android device? ! Nexus phone / tablet Samsung Galaxy HTC One etc etc
  • 10.
    Survey time How manyof you have something else? ! Blackberry Windows Phone “feature” phone
  • 11.
    Native Apps Available fromapp store Downloaded and installed on device Available offline Full device access camera, location, storage, etc. Unique development tools for each platform Separate codebases
  • 12.
    Native App Cost Gettingless expensive Mobile app “factories” Each additional platform adds cost Can be offset by charging for app Only really worth it for iOS and Android some exceptions for niche markets
  • 13.
    Hybrid Apps Uses frameworks/ wrappers like PhoneGap Created as web apps Better device access than web May not look completely native Easier to support less common platforms “mostly” one codebase Can / must be deployed via app store
  • 14.
    Web Apps Like aweb site, but more “appy” HTML, CSS, JavaScript Inherently multi-platform One codebase might include tweaks for some platforms Used to not be available offline Less access to device features
  • 15.
    HTML5 Web Apps Moreaccess to device features Location (GPS and compass) Local storage Offline applications Feature support varies by OS and version http://caniuse.com/ http://modernizr.com/
  • 16.
    Native, Hybrid orWeb App It depends Which platforms do you need to support? What features do you need? What’s your budget? How quickly do you need to make changes? Web usually faster than app store
  • 17.
    Mobile Web Required Easiestway for people to discover your app
  • 18.
    Web App vsWeb Site Mobile web site Link to app store(s) No support for devices without apps Might be unpopular with infrequent users Mobile web app Support less mainstream devices Useful for infrequent users
  • 19.
    WTF is mobileanyway? Laptops are not considered “mobile” One day I used my laptop in my home my local Starbucks my office Coupa Cafe (Y2E2) a vendor’s offices in Los Altos
  • 20.
    Desktop Large high resolutionscreen Large memory Large storage Fast CPU Fast network Always on network
  • 21.
    Everything else Small tomedium screen Small to medium resolution Small memory Limited storage Wide range of CPU speeds Wide range of network speeds Sometimes on network
  • 22.
    It’s all relative:my laptop 15” screen (up to 2880x1800) 23” monitor (1920x1200) in office 16GB RAM 500GB fast SSD 2.7GHz quad core cpu 801.11n wifi
  • 23.
    It’s all relative:my first laptop 12” screen (800x600) 15” monitor (1024x768) in office 72MB RAM 2GB slow hard drive 133MHz single core cpu 10Mbps ethernet via PCMCIA card
  • 24.
    It’s all relative:my phone 3.5” screen (960x640) 512MB RAM 64GB flash storage 1GHz dual core cpu 801.11n wifi and 3G GSM
  • 25.
    Network Speed Laptop: campus wifi:91Mbps down / 88Mbps up home wifi: 35Mbps down / 8Mbps up Phone: campus wifi: 21Mbps down / 14Mbps up AT&T 3G: 3Mbps down / <1Mbps up
  • 26.
  • 27.
    History No mobile web Separatemobile sites using mobile web frameworks Progressive Enhancement mobile browser & device feature detection Responsive Design content first, dynamic layout
  • 28.
    Stop. Do notpass GO. There are many tools to help you
  • 29.
    Drupal Stanford has responsivethemes for Drupal http://itservices.stanford.edu/
  • 30.
    WordPress Many responsive WordPressthemes http://itarch.stanford.edu/blog/ http://emergency.stanford.edu/
  • 31.
    Frameworks For custom appsor sites Bootstrap http://getbootstrap.com/ base off our responsive Drupal themes http://news.stanford.edu/nobel/ Also http://responsive.vermilion.com/compare.php http://designinstruct.com/roundups/html5-frameworks/
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
    Back to thepast future <HTML> <HEAD> <TITLE>The Tardis WWW Server</TITLE> </HEAD> <BODY> <HR> <H1>The Tardis WWW Server</H1> <HR> <P> <I>This is a quick description of how the WWW server on</I> <TT>www.tardis.ed.ac.uk</TT> <I>is set up, and where all the relevant files live.</I> </P> <P> <I>The pages containing descriptions of the hardware that the server runs on (a DEC MicroVAX II) have yet to be written.</I> </P> <HR> <P> <TT>www.tardis</TT> currently runs the <A HREF="/~www/httpd_docs/index.html">CERN httpd server</A>. The files used by the server can be split into those belonging to <A HREF=#user>users</A> and those belonging to the <A HREF=#server>server</A>. </P>
  • 37.
    Modern version <!DOCTYPE html>
 <html>
 <head>
 <title>NobelLaureates</title>
 </head>
 <body>
 <article>
 <h1>Kenneth J. Arrow</h1>
 <img src=”images/Arrow_68.jpg”>
 <a href=”arrow.html”>Economics, 1972</a>
 </article>
 </body>
 </html>