Le Blog

Le blog laboratoire de F.L.D. Studio
0

ToDoList 2016

To Do List 2015

Responsive Design

Adopter un framwork CSS

Taille écran

  • La fin du support de IE8 afin de ne plus mesurer en pixel mais en unité relative (rem et em) pour améliorer la notion de réponse dynamique de l’interface à travers le navigateur.
  • Utilisation de Sass plutôt que Less pour une compilation plus rapide et profiter d’une large communauté active.
  • Amélioration du système de grilles
  • Une réécriture complète de tous les plugins JavaScript pour profiter des nouvelles améliorations.
  • Une documentation largement améliorée.

Un outil pour tester le responsive : https://responsivedesign.is/resources/testing/ish avec convertisseur PS/EM intégré

Des ressources pour comprendre les contraintes du responsive design et des solutions : 

Connaissance des médias

Système de navigation

http://navnav.co/

Délivrer la bonne image au bon format

Utiliser les balises HTML srcset et size, articles à lire : 

En français

Anglais

http://responsiveimages.org/

Le systeme de la BBC : https://github.com/BBC-News/Imager.js

Polyfill : 

Service en ligne de redim d'image (gratuit pour 100 image par mois puis payant ensuite)

https://www.sizzlepig.com/pricing

http://cloudinary.com/

Générateur de srcset : http://cloudinary.com/blog/introducing_intelligent_responsive_image_breakpoints_solutions

Outil de cloudinary : http://www.responsivebreakpoints.com/

Solutions PHP coté serveur :

A lire :

Flexbox

Flexbox

et encore 

Cas concrets

Etude de cas avec tout le code : https://www.isotoma.com/blog/2016/09/07/going-all-in-on-flexbox/?utm_source=codropscollective

Flexbox et les fallback : http://www.smashingmagazine.com/2015/11/flexbox-interfaces-tracks-case-study/

pattern : http://philipwalton.github.io/solved-by-flexbox/

Videos : 20 vidéos gratuites : http://flexbox.io/#/

Le polyfil pour IE8,IE9 : https://github.com/10up/flexibility

Des composants aux format FlexBox : http://www.flexboxpatterns.com/home

Composer un numéro de tél

    <a href="tel:+33102030405"> Appeler la société xxx </a> 

 

Faire un formulaire avec post en AJAX

ajax

Image vectoriel SVG

Bitmap et SVG

Utiliser la technique du sprite SVG.

Site One Page

CSS

et lire et relire :  http://iamvdo.me/blog/ce-que-vous-avez-toujours-voulu-savoir-sur-css

a voir et revoir absolument :  https://stylesheets.co/ (Collection de ressources pour et autour du CSS )

et aussi :

OUTILS

OUTILS MAISON

Commentaires: Pas de commentaires

0

new wave

Nouvelle vague

Suite à un tutoriel de chez Grafikart (  http://www.grafikart.fr/tutoriels/javascript/material-design-wave-644  ) sur l'effet "wave" inventé par Google dans son concept de " Material design ', voiçi un test réalisé sur codepen à partir du code fournis. Une petite variante permet de choisir via le CSS la couleur de remplissage de la vague.  Il s'agit d'une nouvelle rêgle qui demande à  la classe .wave-effect qui est surchargée par la rêgle rouge de changer la couleur du background, autrement dit du remplissage. Pratique si on dispose d'un bouton transparent ou si on souhaite des couleurs de remplissages différentes sur des boutons.

Exemple :

CSS

/*Gestion couleur du remplissage*/
 .wave-effect.rouge > .wave{
  background-color:red;
 }

HTML

class="bt-envoyer wave-effect rouge"

Catégories: Développement WEB

Commentaires: Pas de commentaires

0

Unité de mesure REM et rythme vertical

Unité CSS REM

Nouveauté apportée par CSS3 en 2013, l'unité de mesure REM pour Root EM qui est une unité de mesure relative.

A la différence de l’unité EM qui est relative à la valeur de son parent, le REM est une unité relative à la racine du document (HTML). L'unité REM n'est donc pas soumise aux règles de la cascade comme le EM ce qui la rend plus simple à utiliser.

On l'utilisera avec bonheur pour tout projet de type responsive. Il sera alors facile de modifier une seule fois la taille de la police de base du site pour à l'aide des Medias Queries CSS3  l'agrandir ou la rapetisser en fonction des différentes tailles d'écran et ainsi modifier toutes les tailles de polices, mais aussi les interlignes et les marges internes ou externe (padding, margin)  des différents éléments de décoration ou d'interface. C'est le principe même d'un design « fluide ».

La taille de l'élément racine

Par défaut la plupart des navigateurs utilisent une taille de police par défaut de 16px. L'utilisateur à  la possibilité de modifier cette donnée. Le mieux est donc de se baser sur cette valeur afin de l'utiliser  en valeur relative soit en plus grand ou plus petit. Dans ce cas on sort de l'approche "Perfect Pixel" pour entrer dans celle du "Lacher Prise". En effet, il ne s'agit plus de respecter une maquette au pixel pret mais plutôt de s'en approcher en laissant les tailles d'écrans, orientations et taille des polices commander le design.

Comment trouver les valeurs ?

Il faut faire un petit calcul pour convertir une unité PX en unité EM ou REM et cela peux être fastidieux. Le plus simple est de diminuer la taille de la police de base par défaut ( 16px ) pour la ramener à une taille de 10px à l'aide de cette opération :  16 * 0,625 = 10. De la sorte les calculs pourront se faire « de tête » puisque une taille de 10px fait 1em/1rem, une taille de 8px fait 0.8em/0.8rem, une taille de 14px fait 1.4em/1.4rem, une taille de 100px fait 10em/10rem...etc

Exemple en CSS

html{
	font-size:62.5% ; */  Police par défaut : 16px * 62.5% = 10px /*
}
h1{
	font-size:2.6rem ; */ Police de 26px /*
}

Exemple avec une définition corrigeant un bug de Internet Explorer 5 et 7  sous Windows  (la déclaration en 100% sur le html)

html {font-size : 100%;}
body {font-size :62.5%;}


Le seul bémol, c'est la non compatibilité avec IE8 qui comprend le EM mais pas le REM. Si l'on doit supporter cette version du navigateur de Microsoft il suffira de doubler les règles avec du PX ou du EM pour IE et du REM pour les autres.
Exemple :

div{
	font-size:16px ;
	font-size:1.6rem ;
}

Gestion de l'interlignage

Toutes les polices de caractères n'utilisent pas les espaces réservés en haut et bas de la même manières. Pour régler se problème il faut définir une hauteur de ligne à l'aide de la propriété ligne-height.

Les unités de mesure

Le px, em et rem ne sont pas les seules unitées de mesure à notre disposition. Ci dessous un extrait de cette article : http://bitsofco.de/2015/css-font-sizing/ et pour comprendre leur utilisation utiliser ce site : http://katydecorah.com/css-ruler/

UnitTypeDescription
pxAbsolute1 “viewport pixel
ptAbsolute1 point is 1/72 of an inch
pcAbsolute1 pica is equal to 12 points
%RelativeRelative to the parent element’s font size
emRelativeRelative to the parent element’s font size
remRelative(root em) Relative to the html font size
keywordRelativexx-small, x-small, small, medium, large, x-large, xx-large
vwRelative1/100th of the width of the viewport
vhRelative1/100th of the height of the viewport
vminRelative1/100th of the viewport’s smaller dimension (height or width)
vmaxRelative1/100th of the viewport’s larger dimension (height or width)

Articles de fond :

Vidéo :

Calculateurs en ligne

Outil pour le ryhtme vertical

Retour sur expérience :

Catégories: Typographie

Tags: font

Commentaires: Pas de commentaires