Responsive Design Essentials

bolivialodgeInternet and Web Development

Dec 14, 2013 (3 years and 6 months ago)

65 views

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

Front End
Our Stack
Facebook JavaScript SDK
- JS SDK to access Facebook

s server-side API

s.
Sass
- Ruby Gem for organizing and minifying CSS.
Node Interval
- Node utility for managing and concatenating template files.

Skeleton
- Grid-based CSS layout system for content reflow to width.
Backbone.js
- MVC JS framework that utilizes jQuery and underscore.js.
iScroll 4
- JS lib for native scrolling ability in subsections.
Soundmanager 2
- Cross-browser HTML5 audio support.
Facebook JavaScript SDK

Sass

Node Interval

Skeleton

Backbone.js

iScroll 4

Soundmanager 2

Front End
Our Stack
Facebook JavaScript SDK

Sass

Node Interval

Skeleton

Backbone.js

iScroll 4

Soundmanager 2

Back End
memcache

riak (nosql)

Echonest
7Digital

Apache

Django

rabbitMQ

celeryd

RESTA
PIs
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