1485 sujets

Web Mobile et responsive web design

Bonjour

Je suis sollicité par une personne de ma famille pour l'aider à ameliorer le look de son site. Il s'agit de quelques pages de texte + images sans grande originalité, mais la question que je me pose c'est comment faire en sorte de bien utiliser l'espace sur differents supports.
Les pages comprennent un <header> et un <footer> fixes et un <article> inclus par un include PHP.
Les pages incluses sont toutes sauf une du bon HTML lambda, comprenant une image en haut et du texte.
Ce que j'aimerais faire, c'est que la taille des images et du texte s'ajustent pour que les pages tiennent sur un écran quelle que soit la taille et l'orientation de l'écran.
Je suppose que ce doit être le B A BA du responsive et qu'il doit y avoir un tutoriel aux petits oignons qui me dise comment faire?
Merci de votre aide
Administrateur
Bonjour,

Je parlerais plutôt de point de départ que de B A BA parce que ce n'est pas exactement basique ni simple Smiley ravi
Raphaël avait publié cette astuce assez mal référencée à mon goût mais bien pratique : http://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html (mais maintenant je la retrouve en cherchant "mobile", c'est un des résultats les plus anciens Smiley murf Bref)
Ça contraint les tailles maximales des éléments qui vont bien.
1- penser à la meta viewport sans quoi...
2- coller cette feuille de style après les existantes
3- remplacer le sélecteur "element1, element2" par les classes et/ou id et/ou element main qui définissent la structure de la page (typiquement #wrapper ou #content)
Et 70% du boulot est fait Smiley smile
Merci encore, j'ai à peu près fait ce que je voulais faire, et je pense maintenant avoir compris comment améliorer le résultat en fonction des besoins.