Ad

Saturday, April 23, 2016

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/


No comments:

Post a Comment

K mean clustering sklearn best practice - Udacity Machine Learning Nanodegree Unsupervised Learning

There are three key k means clustering parameters in sklearn that you will need to pay attention to: Number of centroids, aka center of c...