flatbubba
12/12/2017 - 2:44 AM

CSS General Overview Responsice Design

/*
Media Queries
http://mediaqueri.es

Responsive Layouts
http://www.liquidapsive.com

Screen Resolution Stats
http://gs.statcounter.com/screen-resolution-stats

Graceful Degradation
• design for modern browsers first
• then, provide fallbacks for unsupported features
• ensure basic functionality works for older browsers
-start with a full-featured, desktop-centric website
-then scale back by removing, rearranging and restyling content as the viewport gets smaller
-or decrease bandwidth usage by removing large images and video as the viewport gets smaller
-and add touch-centric features for the smaller devices (not relying on mouse hover and making links large enough for finger taps)

Progressive Enhancement (similar but in the reverse)
• focus on content and accessibility first
• create base-level experience first
• then, add advance features for enhancements
-focus on the best experience for mobile first
-reduce reliance on mouse actions
-load content quickly and easily for small screens
-determine the essentials at the beginning, before you start work
-then add enhancements, rather than remove them

/*
Give <img> tag a max-width to automatically make images responsive
*/
img {
  max-width: 100%
}