Mobile First – Front-end for the forefront of the web

View Github Repository Open presentation in a new window

Kaixhin

See all presentation from Kaixhin

Mobile First – Front-end for the forefront of the web

1 0

mobile-first

Presentation for IC SaaS on Mobile First web development

On Github Kaixhin / mobile-first

Mobile First

Front-end for the forefront of the web

Kai Arulkumaran / @kailasharul

Numbers

"10.11 percent of Website hits/pageviews come from a handheld mobile device"

"Many mobile Web users are mobile-only"

Mobithinking

Previous approaches

"Desktop first"

Responsive design

Back to basics

"Content is king"

Variety of devices

Creating experiences

Graceful degradation

Progressive enhancement

Feature detection (Modernizr)

Optimize

Costs: bandwidth, requests, processing

Pre-compile (eg. templates)

Start with simpler code

          /* Desktop first */
          @media screen and (max-width: 400px) {}
          /* Mobile first */
          @media screen and (min-width: 600px) {}

Load large images in media queries

Debugging

Emulators, virtual machines, actual devices

weinre - Web Inspector for (WebKit) mobile

Client-side errors (Qbaka)

THE END