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

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.

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

The Stats

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.’

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

People have fat fingers and surf on the couch! Microsoft’s new Metro interface based on ‘heatmaps’ generated by user testing on tablets

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)

Responsive Web Design (RWD)

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.

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

A mobile only website using jQuery mobile framework

Desktop version - ‘Full fat’ – maximum screen size

Tablet version - all objects get smaller (width and height specified in % not pixels)

mobile version – Objects re-arrange themselves into mobile friendly format

RWD at Swansea

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

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

Further reading Using the ‘viewport’ metatag jQuery

Links developed-metro-for-windows developed-metro-for-windows