This document discusses approaches for delivering web content and services to mobile devices. It summarizes that mobile web use is growing rapidly and will overtake desktop use by 2015. It explores responsive design techniques that adapt content for different screen sizes using fluid grids, images, and media queries. The document also discusses responsive frameworks and whether to use a mobile-first, separate, or native mobile app approach. It encourages the use of responsive design to provide content for both desktop and mobile users.

1. Delivering Web to Mobile
Scott Wilson (scott.bradley.wilson@gmail.com)
JISC CETIS Assistant Director
http://jisc.cetis.ac.uk/
Future of web applications webinar, May 2012
By Scott Wilson, Licensed under Creative Commons attribution only licence, see
http://creativecommons.org/licenses/by/3.0/

2. About the report
This report is intended to help staff of UK
education institutions, involved in the
development of content, gain an understanding
of the emerging approaches to delivering
services and content for mobile devices using the
Web.
Future of web applications webinar, May 2012
By Scott Wilson, Licensed under Creative Commons attribution only licence, see
http://creativecommons.org/licenses/by/3.0/

3. The JISC Observatory
The JISC Observatory is a JISC-funded initiative to
systematise the way in which the JISC anticipates and
responds to projected future trends and scenarios in the
context of the use of technology in Higher & Further
Education in the UK. It involves CETIS and UKOLN in their
role as JISC Innovation Support Centres
Future of web applications webinar, May 2012
By Scott Wilson, Licensed under Creative Commons attribution only licence, see
http://creativecommons.org/licenses/by/3.0/

4. State of the mobile web
Mobile web use to
Global % of web use by overtake desktop:
2015
mobile browsers
Sources: Morgan Stanley, IDC
Mobile accounts for
12.5%
Source: globalstats; http://
gs.statcounter.com/#mobil
e_vs_desktop-ww-
monthly-200812-201205
Of UK web use
Source: Tecmark
Future of web applications webinar, May 2012
By Scott Wilson, Licensed under Creative Commons attribution only licence, see
http://creativecommons.org/licenses/by/3.0/

5. Mobile web in education: key numbers
Annual growth
mobile use in
UK HE
mobile use in
UK HE
Future of web applications webinar, May 2012
By Scott Wilson, Licensed under Creative Commons attribution only licence, see
http://creativecommons.org/licenses/by/3.0/

6. Exploring the options
Future of web applications webinar, May 2012
By Scott Wilson, Licensed under Creative Commons attribution only licence, see
http://creativecommons.org/licenses/by/3.0/

7. Responsive websites
Future of web applications webinar, May 2012
By Scott Wilson, Licensed under Creative Commons attribution only licence, see
http://creativecommons.org/licenses/by/3.0/

8. Responsive websites
Future of web applications webinar, May 2012
By Scott Wilson, Licensed under Creative Commons attribution only licence, see
http://creativecommons.org/licenses/by/3.0/

9. Responsive techniques: Media Queries
@media screen and (max-width:480px) {
/* CSS Rules */ }
<link rel="stylesheet"
type="text/css" media="screen and
(max-width: 480px)" href="480.css" />
Future of web applications webinar, May 2012
By Scott Wilson, Licensed under Creative Commons attribution only licence, see
http://creativecommons.org/licenses/by/3.0/

10. Responsive techniques: Fluid grid layouts
Future of web applications webinar, May 2012
By Scott Wilson, Licensed under Creative Commons attribution only licence, see
http://creativecommons.org/licenses/by/3.0/

11. Responsive techniques: Fluid images
img { max-width: 100%
}
Future of web applications webinar, May 2012
By Scott Wilson, Licensed under Creative Commons attribution only licence, see
http://creativecommons.org/licenses/by/3.0/

12. Mobile First?
Future of web applications webinar, May 2012
By Scott Wilson, Licensed under Creative Commons attribution only licence, see
http://creativecommons.org/licenses/by/3.0/

13. Mobile Separate?
Future of web applications webinar, May 2012
By Scott Wilson, Licensed under Creative Commons attribution only licence, see
http://creativecommons.org/licenses/by/3.0/

14. Mobile App? Web, hybrid or native?
Future of web applications webinar, May 2012
By Scott Wilson, Licensed under Creative Commons attribution only licence, see
http://creativecommons.org/licenses/by/3.0/

15. Responsive Frameworks
Future of web applications webinar, May 2012
By Scott Wilson, Licensed under Creative Commons attribution only licence, see
http://creativecommons.org/licenses/by/3.0/

16. Read Delivering web to mobile
http://bitly.com/jiscobs-tw-2
See also CETIS Mobile Web Apps briefing paper:
http://publications.cetis.ac.uk/2011/178
Future of web applications webinar, May 2012
By Scott Wilson, Licensed under Creative Commons attribution only licence, see
http://creativecommons.org/licenses/by/3.0/