RESPONSIVE WEB DEVELOPMENT

RESPONSIVE WEB DESIGN (2010)

Ethan Marcotte 

http://www.alistapart.com/articles/responsive-web-design/ 

Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences . Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things .” 

PRINCIPLES AND COMPONENTS

mobile first / progressive enhancement 

fluid layouts

media queries and breakpoints

MEDIA QUERIES

@media (query) {
  /* CSS Rules used when query matches */
}

attributes: 

• min-width/max-width
• min-height/max-hwight
• orientation=portrait / orientation=landscape

MEDIA QUERIES

@media (min-width: 500px) {
    div {
      width: 30%;
    }
}


@media  (max-height: 600px) {
    span {
        font-weight: bold;
    }
}


@media (min-width: 500px) and (max-width: 600px) {
    h1 {
      color: fuchsia;
    }
}

BREAKPOINTS

Hybrid Mobile Applications

Hybrid vs native apps

Next time...

BUILDING Hybrid apps

BUILDING Hybrid apps

WebView based

    Cordova/PhoneGap
    Trigger.io

Compiled hybrid app

    Xamarin (C#)
    Appcelerator Titanium (JavaScript)

    React Native (JavaScript)

IONIC FRAMEWORK

An open source front-end framework for developing hybrid mobile apps with HTML5, AngularJS and Cordova (and Sass).

Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript

version 5.0.0

http://cordova.apache.org/