Embed Size (px)
Citation preview
‘Mobile first’Alexander Roberts
ISS Web Team ManagerSwansea 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.
http://line25.com/articles/showcase-of-outstanding-responsive-web-designs
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%
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.’
http://www.lukew.com/ff/entry.asp?933
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
http://m.techradar.com/news/software/operating-systems/how-microsoft-developed-metro-for-windows-8-1040926
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
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.
http://line25.com/articles/showcase-of-outstanding-responsive-web-designs
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 frameworkhttp://137.44.18.132/sumo/
Desktop version - http://sasquatchfestival.com/
‘Full fat’ – maximum screen size
Tablet version - http://sasquatchfestival.com/
all objects get smaller (width and height specified in % not pixels)
mobile version – http://sasquatchfestival.com/
Objects re-arrange themselves into mobile friendly format
RWD at Swansea
http://www.swansea.ac.uk/includes/test/rwd/
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 <h1> <h2> <h3> 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
http://www.alistapart.com/articles/fluidgrids/
Further reading
• Using the ‘viewport’ metatag• jQuery
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://www.alistapart.com/articles/fluidgrids/• http://compass-style.org/• http://sass-lang.com/• http://jquerymobile.com/• http://www.sencha.com/products/touch
