1480 sujets

Web Mobile et responsive web design

Hello,

ça fait un petit moment que je n'ai pas suivi ce qui se fait et j'avoue être un peu perdu.

Je compte réaliser un petit site pour un ami photographe (photos + textes) et je me suis posé la question d'une (ou plusieurs ?) versions mobile.

Avec les tablettes des différents constructeurs (et leur version !) et les iphones et autres android (et leur version !) qu'est ce qu'on est censé faire pour que le site soit bien utilisable dans tous ses supports ?

Merci d'avance pour vos réponses,

h+
Hello hitzerod,

Le terme que tu cherches est responsive ou adaptive.
Pour avoir un site cross-device, on utilise les (CSS media queries) de type


@media (min-width:500px) { … }
@media (orientation: portrait) { … }


Les media-queries peuvent rapidement donne mal a la tete en terme de gestion des priorites. Plutot que de designer pour desktop et d'implementer les media-queries pour mobile, On recommende de commencer par le mobile first, et d'utiliser le progressive enhancement.

Quelques liens à garder sous la main pour information ou inspiration:
- Responsive Web Design as the Demand of Time (avec un super infographique)
- mediaqueri.es/
- Le probleme du responsive design

Et bien sur, sur alsacreations:
- Responsive Webdesign – présent et futur de l’adaptation mobile
- Les Media Queries CSS3
- Recherche par tag "responsive"

- Formation Web Mobile

Si tu n'es pas familier, je conseille de commencer avec un framework de style bootstrap ou boilerplate qui integrent deja plusieurs elements necessaires a un site et inclus une grid responsive.

Si tu utilises un CMS comme wordpress ou tumblr, il existe beaucoup de themes responsive gratuits dont tu peux te servir de base.

La plus grosse problèmatique du responsive aujourd'hui est la gestion des images, Smashing Magazine en a parle recemment:
- Choosing A Responsive Image Solution
- Automate your responsive images with Mobify.js

Si ton site va contenir beaucoup de photos, je te conseille d'y jeter un oeil attentif.

Voila, bon courage Smiley smile
Un grand et sincère merci Sugarskill, après un premier coup d'oeil sur les super ressources que tu fournis il semble bien que je vais trouver les bonnes réponses à mes questions et pouvoir me raccrocher au wagon !
Merci encore, @++
Tout le plaisir est pour moi, partages-nous ton résultat une fois fini (ou tes soucis en cours de route Smiley cligne )