background preloader

Prévoir un site pour toutes les résolutions (design fluide)

Prévoir un site pour toutes les résolutions (design fluide)
La question des dimensions idéales d'un site est souvent posée. Les résolutions d'écran varient généralement de 800x600 pixels à 1280x960 pixels, en passant par 1024x768. Quelle est donc la résolution à privilégier ? Quelle est la dimension idéale pour un site web ? Les sites web étant conçus avec des éléments graphiques (la plupart du temps) non vectoriels, ceux-ci n'adoptent pas le même rendu selon la résolution de l'écran du visiteur, notamment en terme de répartition horizontale. Faut-il centrer ? Quelques statistiques (2010) 1% d'utilisateurs en 800x600 20% en 1024x768 75% en résolutions supérieures (sources : W3Schools, W3counter) Premier constat : pour toucher un maximum de visiteurs (toutes résolutions confondues), un site doit être conçu sur une résolution minimale de 1024x768, et être consultable (avec ascenseurs) dans les résolutions inférieures. Tendances actuelles Il existe plusieurs techniques de design qui s'adaptent bien à toutes les résolutions actuelles : Le design fluide

http://www.alsacreations.com/tuto/lire/547-faire-un-site-pour-toutes-les-resolutions.html

Related:  HTMLHTML- CSS

Comment faire d filer du texte sur ma page 1 / La balise <MARQUEE> ... </MARQUEE> Pour faire défiler du texte, HTML propose un conteneur qui marche sous internet explorer mais pas sur netscape navigator. jQuery : optimiser l'utilisation des sélecteurs CSS (mais aussi Prototype, Mootools & cie) JQuery est une formidable librairie JavaScript car elle offre une grande souplesse et une utilisation simple. Il est cependant important de bien comprendre son fonctionnement pour éviter les débordements liés à une joie mal maîtrisée.S’il est très facile d’utiliser les sélecteurs CSS de jQuery, je constate de ci de là que leur utilisation n’est pas toujours optimale … quand elle l’est déjà un tant soit peu. Alors on se retrousse les manches et c’est parti pour un petit cas pratique sur les sélecteurs CSS jQuery, plus une petite récap’ pour grapiller du temps et des lignes de code ;-) Le cas pratique J’ai pensé à une chose : plutôt que vous papillonniez en lisant cet article, j’ai fait en sorte que vous puissiez y prendre part.

Osez HTML5 et CSS3 ! - Alsacréations Un site perso en fil rouge Pour étayer cet article, nous allons nous servir d'un fil rouge : mon site personnel Goetter.fr dont l'intégration a été réalisée en plusieurs étapes, et destiné à servir de passerelle entre mes différentes activités. Puisqu'il s'agit d'un site sans grande portée médiatique ni contraintes, j'ai pu en profiter pour tester HTML5 et moult règles CSS2 et CSS3 (border-radius, rgba, inline-block, transitions, rotations, @font-face, text-shadow, opacity, :before/:after et autres joyeusetés...). Voyons en détails le cheminement et les écueils de cette intégration... Les Grands Anciens

PxLoader - Contrôler le chargement de ses ressources en Javascript PxLoader est un script JS permettant de contrôler le chargement de vos images, sons etc. dans vos sites et applications web. Si vous lancez un jeu HTML5 ou encore une application très graphique, le temps de chargement des images, sons et autres fichiers lourds est assez significatif. Grâce à PxLoader, vous pourrez précharger ces images et gérer le temps de chargement. Vous pourrez alors proposer un loader pour faire patienter vos visiteurs.

Formulaires HTML5 : Champ de type range Ce champ propose un contenu évalué approximatif. Bien que l'on puisse convertir la position du curseur numériquement (par défaut la valeur la plus basse est 0, la plus haute 100), l'utilisateur n'a pas de repère numérique, seule la position du curseur est un indice. La valeur la plus haute se trouve à gauche (il fallait le deviner ?) pour un sens de lecture ltr (left to right) bien entendu ! Slideshow en CSS3 Beaucoup de Webdesigners en rêvent : utiliser les CSS plutôt que le JavaScript ou le Flash pour animer leur page web. Ce rêve devient petit à petit concret avec les nouvelles implémentations des modules CSS en cours de travail (Working Draft), notamment CSS3 Animations. Celui-ci équipé des keyframes devient fort intéressant pour un contrôle avancé des animations. Nous verrons donc comment utiliser cette nouveauté, mais aussi comment combiner intelligemment la pseudo-classe target pour réaliser un slideshow. Présentation et compatibilité

Les fonctionnalités CSS3 avec Internet Explorer L’utilisation du CSS3 est probablement une des tendances les plus fortes actuellement dans la conception web, permettant ainsi d’implémenter des solutions à des sites web en éliminant l’utilisation de certaines images ou de code JavaScript. Malheureusement, il n’est pas surprenant de voir qu’Internet Explorer, même dans la version 8 du fureteur, ne supporte toujours pas la majorité des nouvelles fonctionnalités qu’offre le CSS3. Vous trouverez, dans le billet suivant, des solutions afin de rendre plusieurs des nouvelles fonctionnalités compatibles avec les différentes versions d’Internet Explorer (6,7 et 8). «Le billet suivant est une traduction d’un article paru sur le site web de SmashingMagazine.com écrit par Louis Lazaris».

Ressources: 7 outils pour simplifier l'intégration - ressources-integration Pour vous webdesigners, voilà 7 outils pour simplifier votre intégration au quotidien. Dochub, anciennement instaCSS, est une doc dynamique pour (presque) tous les langages qui vous seront utiles durant vos intégrations. CSS, évidemment, mais maintenant HTML, Javascript, et même jQuery et PHP, qui ont fait leur apparition récemment. Un site indispensable. Tout le monde connaît le lorem ipsum, moyen pratique et rapide de récupérer du contenu fictif. *.jpg.to à la même volonté de fournir du contenu fictif simplement et rapidement. Mettez en sous-domaine le domaine que vous recherchez, et le site renverra une image en rapport.

Related:  Web design sourcesSite Web