Responsive Design Essentials

Responsive Design Essentials
For Mobile Web Apps
Presented By:
Marcos Lara
Demo
Music Discovery
Social Connected
Responsive Design is efficient
Responsive Design supports
Multi-resolution & orientation
Responsive Design runs everywhere
•  HTML5 is write once, run everywhere
•  CSS and media queries are powerful
•  AudioVroom is a single template app
Keys to success with fluid layouts:
•  Pure CSS presentation layer - decouple the data layer
•  Modularize design elements into components
Keys to success with fluid layouts:
•  Pure CSS presentation layer – decoupled data layer
•  Modularize design elements into components
•  Design to the ‘grid’
Demo
Responsive Design
Cross Platform
The Media Query
Continually
Responsive UI
‘width’ Aware Grid
Fast to Load
One Template
Full media-query List
* From the Skeleton CSS framework.
Additional Styling Hooks
•  Necessary evil
•  Minimum JS logic
•  Keeps presentation in CSS
Our Stack
Front End
Backbone.js - MVC JS framework that utilizes jQuery and underscore.js.
Skeleton - Grid-based CSS layout system for content reflow to width.
Facebook JavaScript SDK - JS SDK to access Facebook’s server-side API’s.
Soundmanager 2 - Cross-browser HTML5 audio support.
iScroll 4 - JS lib for native scrolling ability in subsections.
Sass - Ruby Gem for organizing and minifying CSS.
Node Interval - Node utility for managing and concatenating template files.
Our Stack
Front End
Backbone.js
Skeleton
Facebook JavaScript SDK
Soundmanager 2
iScroll 4
Sass
Node Interval
Back End
RESTA
PIs
Django
Apache
memcache
celeryd
rabbitMQ
riak (nosql)
Echonest
7Digital
Tips, Tricks & Pitfalls:
•  Minimal Viable Product (MVP) – design for mobile first
•  Use MVC – it not only smart, its going to save you time and money
•  Static file client – Cheap CDN hosting, High availability, High
Replication, Fast JS execution
•  Minimize HTTP requests – they kill performance in mobile
environments
•  Minify, consolidate and compress your JS/CSS files
•  Webkit is amazing, but there are limitations
•  Internet Explorer HTML5 and Chrome Frame
•  Mandible – elegant output for production in seconds