heart.css – layout pour web application – Comment construire l'interface d'une application web mobile qui rivalise avec le natif

View Github Repository Open presentation in a new window

Freddy03h

See all presentation from Freddy03h

heart.css – layout pour web application – Comment construire l'interface d'une application web mobile qui rivalise avec le natif

0 0

heart-presentation

On Github Freddy03h / heart-presentation

heart.css

layout pour web application

Comment construire l'interface d'une application web mobile qui rivalise avec le natif

Freddy Harris / @harrisfreddy

UI

Youtube App native

Youtube Web

Readability Web

France 3 Web

tips and tricks

Position : fixed

Utilisable sur mobile depuis iOS 5 et Android 4

overflow-scrolling : touch

overflow:auto insuffisant ?

#main {
  -webkit-overflow-scrolling: touch
}

meta viewport

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

reflows & repaints

Un repaint se produit lors d'un changement qui affecte le skin mais pas le layout. ex: background, color, visibility Le reflow se produit lors d'un changement sur le layout (display, top, margin, padding, position) et lors d'un changement d'id, class, attribute Reflow très couteux en terme de performance car il affecte les éléments enfants, parents et suivant dans le DOM - important sur mobile

layout bondaries

Permet de limiter le reflow à un élément au lieu de toute la page

  • Overflow explicite (scroll, auto ou hidden)
  • Ne pas être display : inline
  • Hauteur et largeur explicite

Inapplicable sur un élément fluide

Avec du CSS on peu délimiter des limites aux layout/frame. En delimitant un scope à nos layouts, une modification dans ce layout ne provoque qu'un 'reflow' partiel - moins couteux en perf Mais nécéssite des conditions dratisques (hauteur et largeur fixe, position absolute, overflow not auto) -> inutilisable sur un élément fluide, à utiliser sur un composant à taille fixe mais pas pour un layout responsive Besoin malgré tout de le minimiser

Animations et transitions

Animer avec transforms3d et opacity

Eviter au maximum d'animer les propriétés provoquant un reflow comme height, width, top, left, …

Compatibilité

Utilisation de Modernizr pour cibler les navigateurs modernes

Ma définition d'un navigateur moderne d'un point de vue CSS :

  • CSS Animations
  • CSS Transform 3D
  • Position Fixed

fastclick

Supprime les 300 ms de délais au click

window.addEventListener('load', function() {
    new FastClick(document.body);
}, false);

heart.css

Documentation et examples

Layer

Contient la logique position: absolute et imbrication overflow-scrolling:touch

<div class="layer"></div>

Layer scrollable

Le wrap permet de forcer une hauteur à 100% même si le contenu ne remplit pas le layer.

<div class="layer">
    <div class="layer-scrollable">
        <div class="wrap">
            …
        </div>
    </div>
</div>

Layer toggle

Permet de gérer les états visible/invisible d'un layer avec une class. Pas besoin de jouer avec la propriété display en JavaScript.

<div class="layer">
    …
</div>    
<div class="layer-toggle">
    …
</div>
<div class="layer">
    …
</div>    
<div class="layer-toggle open">
    …
</div>

Web Starter Kit

http://goo.gl/wKw047