Tutorial Spotlight - Front End Coding Tutorials Responsive Design Interactivity UX UI Design

Summary
Background

• Responsive Design is an UI Trend 2015 "responsive design for The Internet of Things (IoT)"
• Appears in job description of Front-End Developer job posts, lead UI designer job posts

Devices to be considered

Breakpoints 

• Desktop
• Large Tablet
• Small Tablet
• Smart Phone

Responsive design (CSS Tricks by Treehouse)
Responsive Columns Grid
https://css-tricks.com/guide-responsive-friendly-css-columns/

Dev tool - responsive column responsive grid calculator
http://www.responsivegridsystem.com/calculator/

A godzilla list of responsive design resources
https://bradfrost.github.io/this-is-responsive/resources.html

Use Twitter Bootstrap for responsive grids
<div class="row">
<div class="col-md-4">
</div>
</div>
Must enclose the column div in a row class div

Using Media Queries in JavaScript
http://modernweb.com/2014/03/24/using-media-queries-in-javascript/

Pure - a small light-weight responsive css library
http://purecss.io/start/

Useful libraries

Pizza Pie Charts is a responsive pie chart based on the Snap SVG framework from Adobe. It displays responsive pie charts (data diagrams) on websites.
http://zurb.com/playground/pizza-pie-charts

Dev tool - WordPress - create responsive WordPress themes without coding
CloudPress
http://cloud-press.net/