6_audiovroomhtml5

8/2/2019 6_AudioVroomHTML5

1/13

Responsive Design EssentialsFor Mobile Web Apps

Presented By:Marcos Lara


2/13

DemoMusic Discovery

Social Connected


3/13

Responsive Design is efficient

Responsive Design supportsMulti-resolution & orientation

Responsive Design runs everywhere


4/13

HTML5 is write once, run everywhereCSS and media queries are powerfulAudioVroom is a single template app


5/13

Keys to success with fluid layouts:

Pure CSS presentation layer - decouple the data layerModularize design elements into components


6/13

Keys to success with fluid layouts:

Pure CSS presentation layer decoupled data layerModularize design elements into componentsDesign to the grid


7/13

DemoResponsive Design

Cross Platform


8/13

The Media QueryContinually

Responsive UI

width Aware Grid

Fast to Load

One Template


9/13

Full media-query List

* From the Skeleton CSS framework.


10/13

Additional Styling Hooks

Necessary evilMinimum JS logic

Keeps presentation in CSS


11/13

Front End

Our Stack

Facebook JavaScript SDK - JS SDK to access Facebooks server-side APIs.

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


12/13

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

celerydRESTAPIs


13/13

Tips, Tricks & Pitfalls:

Minimal Viable Product (MVP) design for mobile firstUse MVC it not only smart, its going to save you time and moneyStatic file client Cheap CDN hosting, High availability, HighReplication, Fast JS execution

Minimize HTTP requests they kill performance in mobileenvironments

Minify, consolidate and compress your JS/CSS filesWebkit is amazing, but there are limitationsInternet Explorer HTML5 and Chrome FrameMandible elegant output for production in seconds

6_audiovroomhtml5

Documents