1. ‘Mobile first’ Alexander Roberts ISS Web Team Manager Swansea University

2. http://www.swansea.ac.uk

3. There is no such thing as standard monitor size? Websites are no longer viewed only on a computer monitor. Smartphones, tablets and netbooks throw a range of resolutions and different screen sizes into the mix for designers to now worry about. http://line25.com/articles/showcase-of-outstanding-responsive-web-designs

4. Website visitor’s – mobile vs. desktop 18/02 – 19/03 2012 = 500,329 Visits. Desktop = 473,159 (mobile = 27,170) 18/02 – 19/03 2011 = 607,080 Visits. Desktop = 593,838 (mobile = 13,242) In 1 year - Desktop -20.32% Mobile +105.18%

5. The Stats

6. What does ‘mobile first’ mean? ‘Mobile First’, term coined by Luke Wroblewski in 2009 ‘More often than not, the mobile experience for a Web application or site is designed and built after the PC version is complete.’ http://www.lukew.com/ff/entry.asp?933

7. What does ‘mobile first’ mean for me as a web developer? It means beginning any web development project with the idea that it will be consumed on a mobile device (smart phone, tablet) first and not on a desktop PC

8. People have fat fingers and surf on the couch! Microsoft’s new Metro interface based on ‘heatmaps’ generated by user testing on tablets http://m.techradar.com/news/software/operating-systems/how-microsoft-developed-metro-for-windows-8-1040926

9. Mobile first benefits Applications/websites are made available to the fastest growing section of internet users Forces the developer and content creators to focus on the most important data and actions Allows an application to utilize the full range of mobile device capabilities (location aware, multi touch, device positioning) http://www.lukew.com/ff/entry.asp?933

10. Responsive Web Design (RWD)

11. What is RWD? ‘Websites are designed to gracefully scale according to the user’s screen size. Resize your browser, view the site on a smartphone, tablet or netbook and you’ll see the same design in a range of well presented formats.’ A choice can be made to either, offer separate websites for mobile and desktop users, or make one website ‘respond’ to both types of user using RWD. http://line25.com/articles/showcase-of-outstanding-responsive-web-designs

12. Mobile only web sites These can be faster to load and more tightly focused on mobile users’ needs Facebook Twitter

13. A mobile only website using jQuery mobile framework http://137.44.18.132/sumo/ http://137.44.18.132/sumo/

14. Desktop version - http://sasquatchfestival.com/http://sasquatchfestival.com/ ‘Full fat’ – maximum screen size

15. Tablet version - http://sasquatchfestival.com/http://sasquatchfestival.com/ all objects get smaller (width and height specified in % not pixels)

16. mobile version – http://sasquatchfestival.com/http://sasquatchfestival.com/ Objects re-arrange themselves into mobile friendly format

17. RWD at Swansea http://www.swansea.ac.uk/includes/test/rwd/

18. Get organised Separate content from presentation! When creating web content think about how it works semantically. How would you arrange the content into headings, paragraphs and lists? Use correctly. This makes it easier to present to mobile audiences

19. How to apply the theory/ethos Start using HTML5 Work with a fluid grid that employs percentages (em) instead of pixels using the formula: target / context = result Employ CSS3 media queries, SASS, and Compass http://www.alistapart.com/articles/fluidgrids/

20. Further reading Using the ‘viewport’ metatag jQuery

21. Links http://www.swansea.ac.uk http://www.lukew.com/ff/entry.asp?933 http://137.44.18.132/sumo/ http://line25.com/articles/showcase-of-outstanding-responsive-web-designs http://sasquatchfestival.com/ http://www.swansea.ac.uk/includes/test/rwd/ http://m.techradar.com/news/software/operating-systems/how-microsoft- developed-metro-for-windows-8-1040926 http://m.techradar.com/news/software/operating-systems/how-microsoft- developed-metro-for-windows-8-1040926 http://www.alistapart.com/articles/fluidgrids/ http://compass-style.org/ http://sass-lang.com/ http://jquerymobile.com/ http://www.sencha.com/products/touch