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...
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>
<H...
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, locati...
Native App Cost
Getting less expensive
Mobile app “factories”
Each additional platform adds cost
Can be offset by charging ...
Hybrid Apps
Uses frameworks / wrappers like PhoneGap
Created as web apps
Better device access than web
May not look comple...
Web Apps
Like a web site, but more “appy”
HTML, CSS, JavaScript
Inherently multi-platform
One codebase
might include tweak...
HTML5 Web Apps
More access to device features
Location (GPS and compass)
Local storage
Offline applications
Feature support...
Native, Hybrid or Web App
It depends
Which platforms do you need to support?
What features do you need?
What’s your budget...
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 infre...
WTF is mobile anyway?
Laptops are not considered “mobile”
One day I used my laptop in
my home
my local Starbucks
my office
...
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
Wi...
It’s all relative: my laptop
15” screen (up to 2880x1800)
23” monitor (1920x1200) in office
16GB RAM
500GB fast SSD
2.7GHz ...
It’s all relative: my first laptop
12” screen (800x600)
15” monitor (1024x768) in office
72MB RAM
2GB slow hard drive
133MH...
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 do...
A new-ish approach:
Responsive Design
History
No mobile web
Separate mobile sites
using mobile web frameworks
Progressive Enhancement
mobile browser & device fe...
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.st...
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</...
Modern version
<!DOCTYPE html>

<html>

<head>

<title>Nobel Laureates</title>

</head>

<body>

<article>

<h1>Kenneth J....
Upcoming SlideShare
Loading in …5
×

Mobile tech briefing 2013

189 views

Published on

Intro presentation for https://github.com/scottylogan/nobeldir

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
189
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile tech briefing 2013

  1. 1. Mobile: Web & Apps Scotty Logan
  2. 2. 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
  3. 3. The early days One of my early web pages
  4. 4. 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>
  5. 5. Back then that was HTML Now we call it “Content First”
  6. 6. It was even “mobile friendly” http://www.stanford.edu/~swl/tardis.html
  7. 7. Back to the Future For a little while
  8. 8. Survey time How many of you have an iOS device? ! iPod Touch iPhone iPad
  9. 9. Survey time How many of you have an Android device? ! Nexus phone / tablet Samsung Galaxy HTC One etc etc
  10. 10. Survey time How many of you have something else? ! Blackberry Windows Phone “feature” phone
  11. 11. 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
  12. 12. 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
  13. 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. 14. 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
  15. 15. 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/
  16. 16. 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
  17. 17. Mobile Web Required Easiest way for people to discover your app
  18. 18. 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
  19. 19. 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
  20. 20. Desktop Large high resolution screen Large memory Large storage Fast CPU Fast network Always on network
  21. 21. 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
  22. 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. 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. 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. 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. 26. A new-ish approach: Responsive Design
  27. 27. History No mobile web Separate mobile sites using mobile web frameworks Progressive Enhancement mobile browser & device feature detection Responsive Design content first, dynamic layout
  28. 28. Stop. Do not pass GO. There are many tools to help you
  29. 29. Drupal Stanford has responsive themes for Drupal http://itservices.stanford.edu/
  30. 30. WordPress Many responsive WordPress themes http://itarch.stanford.edu/blog/ http://emergency.stanford.edu/
  31. 31. 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/
  32. 32. Doing it the hard way
  33. 33. Do not do this
  34. 34. This is just educational
  35. 35. Content First
  36. 36. 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>
  37. 37. 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>


×