Mobile First


  • Focus on content first, then features
  • Mobile has outnumbered desktops sold
  • Progressively Enhanced (apart of Adaptive Design) websites - recall Peanut M&M
  • Characteristics 
    • Simplify content 
    • Prioritize layout 
    • Optimize user experience

Responsive 

WEB DESIGN

RWD vs. Adaptive




All RWD sites are Adaptive

Not all Adaptive are Responsive

Content Defines breakpoints - for both





"Responsive designs provide continuity between contexts.
Responsive designs are portable and accessible "

-Ethan Marcotte

RECAP


Fluid Layout has limitations with viewport size

Adaptive  Design doesn't cover universal web

Responsive Design is flexible and universal

Advanced media queries


 /* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
} /* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}
/* Multiple Media Queries */@media all and (max-width: 1000px) and (min-width: 700px) { /* Between 1000px and 700px */ }

Responsive Web Design (RWD)

By Manikoth

Responsive Web Design (RWD)

  • 1,747