Cette section est close pour le moment.
Mais je n'arrête pas la veille, loin de là. Retrouvez mes projets sur Github et sur cette page qui sera à jour plus régulierement


Ressources

Définition de ressource : (nom féminin) Qui peut fournir ce dont on a besoin.
Vous l'aurez compris, sur cette page ce ne sont pas vraiment des tutoriels, c'est plutôt des penses-bêtes plus ou moins fournis mais qui vous permettront d'avoir des bases concernant la programmation.
Recherche par tag

Comment adapter son site aux différents supports avec le Responsive Design

Comment adapter son site aux différents supports avec le Responsive Design
Publication : Le 12/10/2012 à 14:09:01

Introduction

Depuis la radio, aucun outil technologique n'a été adopté aussi vite que les tablettes tactiles. C'est donc un support qu'il ne faut surtout pas négliger. Mais le responsive design ne s'arrête pas aux tablettes, les smartphones ou les très grand écran sont aussi concernés.

Comment ça marche ?

Selon le support sur lequel vous visiter votre application web, un style css sera chargé. Il n'est pas nécessaire de développer tout le style, juste adapter certaines sections.

On va beaucoup utiliser la propriété css "display:none", c'est un des défauts de cette technique. En effet, même si le contenu ne sera pas chargé, il sera exécuté. Ça peut être gênant si le matériel n'est pas puissant ou si vous n'avez pas beaucoup de réseau, il faudra donc bien choisir quand développer un site à part (ultra léger) pour pallier à ce défaut.

La taille de l'écran

Les tablettes et smartphone offre des résolution d'écran importantes, cette résolution est gênante quand on surf sur un site non adapté.

Pour contourner ce problème, il faut utiliser une balise méta qui va prendre la taille "réelle" de l'écran.
<meta name="viewport" content="initial-scale:1.0, width=device-width" />

Le médias queries CSS3

Maintenant il faut passer à l'adaptation CSS.

Pour cela on va utiliser des conditions dans le CSS (si si vous avez bien lu, des conditions en CSS !) qui vont selon la taille de l'écran charger la section.
@media screen  and (max-width:800px){
 /* correctif */
}
Dans cet exemple, tout les devices ayant une taille inférieur à 800px vont adopter ce style.

Vous pouvez ainsi redisposer votre menu, enlever une colonne ou étendre le contenu.
@media screen  and (max-width:800px){
.menu ul li a{padding:2px}
.col-right{display:none}
.container{width:100%}
}

Et les anciens navigateurs dans tout ça ?

Après une nouvelle pratique, l'enthousiasme du développeur tombe toujours et une phrase lui vient en tête.

"Et IE6 dans tout ça ?"

Et bien bonne nouvelle, pour les navigateurs anciens (si vous voulez vous en préoccuper) un hack javascript existe (voir lien).

Sur le même thème

Comment adapter son site aux différents supports avec le Responsive Design
Publication : Le 12/10/2012 à 14:09:01

Suggestion :

Pourquoi faire un reset.css sur son site internet ?

Pourquoi faire un reset.css sur son site internet ?