Mickaël Floc’hlay

 

Un même site pour le bureau et le mobile, c’est possible ?

L’internet devient mobile. Derrière cette évidence se cache une problématique élémentaire pour tous les designers de sites web : faut-il désormais créer pour chaque site une version pour la navigation sur ordinateur et une autre pour la navigation sur mobile ? Pas vraiment, le CSS est là pour vous sauver.

Fluid Grids

La première technique à utiliser est celle des fluid grids. Utiliser des fluid grids est une méthode de définition de fichiers CSS n’utilisant pas de tailles absolues mais uniquement des tailles relatives : à la taille de police par défaut d’un navigateur d’une part, aux éléments parents de chacun des blocs html ensuite.

Cette technique permet ainsi d’avoir des design HTML/CSS qui ont un bon comportement lorsque l’utilisateur change la taille de sa fenêtre : tous les éléments gardent la même proportion.

Media Queries

Que se passe-t-il alors quand l’écran atteint une taille critique et fait en sorte que l’apparence d’une page sur un écran trop petit n’est plus adaptée et ne permet pas une bonne lisibilité ? Là, une seconde technique rentre en jeu : les media queries.

Là encore, il s’agit d’une technique CSS qui permet de réorganiser le layout d’une page selon des conditions. Par exemple, si la largeur d’un écran de navigateur est en deça d’une certaine taille limite, il est sans doute pertinent d’abandonner un layout en colonnes au profit d’un layout mono-colonnes ou les blocs de succèdent les uns en dessous des autres.

Fluid Images

Bien sûr, cela n’est pas suffisant à créer un site complet et des problèmes vont se poser lorsqu’on va essayer de mettre des contenus de tailles fixes dans nos pages (des images, des vidéos YouTube, etc.).

Quelques éléments de réponses existent, notamment la méthode max-width de CSS. Cela pose néanmoins quelques problèmes de compatibilité entre navigateurs, Internet Explorer en tête.

Adaptation à iOS

Ce qui m’intéresse ici particulièrement, ce n’est pas vraiment Internet Explorer mais réussir à faire des sites qui ont un bon rendu sur les devices iOS, c’est-à-dire l’iPhone et l’iPad. J’ai donc cherché à tester cette technique avec un layout assez simple que voici :

Il s’agit d’un layout de 10 colonnes de 82px chacune, séparées par des espaces de 20px. Avec 2 gouttières extérieures de 12px chacune, on obtient une grille définie par rapport à une largeur d’écran par défaut de 1024px.

Pour construire ma CSS, quelques calculs sont nécessaires :

Ils me permettent de construire ma CSS rapidement pour la page de test que j’ai mise en ligne.

Cette page a les rendus suivants en modes portrait et paysage :

Conclusion

J’adapterai bientôt ce site, pour l’instant construit très rapidement avec ZPIP, pour qu’il utilise ces méthodes et soit adapté, avec un design sympa, à la consultation par iPhone et iPad. Stay tuned...

Les ressources web qui m’ont aidé :
- Fluid Grids
- Responsive Web Design
- Fluid Images

samedi 7 août 2010

Répondre à cet article

69 Messages de forum

Blog

SortMash 2.0 est sortie !
SortMash version 2.0 vient d’être mise à disposition sur l’App Store. Pourquoi déjà une version 2 plutôt qu’une 1.1 ? Même si ça ne se voit pas de l’extérieur, le moteur interne a été complètement réécrit (...)
12/09/2011

ShakinDice 1.2 est sortie !
Petite mise à jour de ShakinDice, dont la version 1.2 vient d’être mise à disposition sur l’App Store. Au rayon des nouveautés : Une version en français à 100%. Une utilisation plus facile. Le pile ou (...)
08/09/2011

Just Show It 1.0 est sortie !
L’application Just Show It, que j’ai développées en collaboration avec Johann Barthel, est publiée sur l’iTunes App Store depuis le 24 juillet. Il s’agit d’un "dictionnaire visuel du voyageur", (...)
15/08/2011

Morning Coffee

Horrible Jeu sur iOS
ou comment défier la loi du marché avec des in-app products médiocres à 100$. iPhone Garbage: Super Monster Bros by Adventure Time Pocket Free Games – YouTube.
30/04/2013

Mon coeur de Brestois est triste
Mon coeur de Brestois est triste, mais il faut aussi voir les choses en face : Brest est la plus faible équipe de L1 et sa relégation est on ne peut plus logique. via PIERROT FOOTBALL BLOG – (...)
29/04/2013

La différence entre James et Durant
J. A. Andade comparant James et Durant : James est une superstar à plein temps. Durant, un basketteur à plein temp (Via L’Equipe.fr Actu Basket)
12/04/2013

Copé et la transparence du patrimoine selon James
Jour 340: (Via Je veux travailler pour le canard enchaîné)
11/04/2013

Quelques principes de design par les développeurs de Polar
4 Surprising App-Design Principles, From The Instagram Of Quick Quizzes | Co.Design: business + innovation + design: Analyse de 4 principes de design de l’application Polar : - Design For (...)
09/04/2013

Tweets

Contact