Thème : Mise en page

Openweb.eu.org > Thème : Mise en page

0 | 10 | 20

Responsive Webdesign – présent et futur de l’adaptation mobile

par Walter Stéphanie, le 1er juin 2013

La problématique du responsive est bien plus complexe que ce qu’on peut lire sur certains blogs qui essaient de nous faire croire qu’il suffit aujourd’hui, pour optimiser un site pour mobile, d’ajouter 2 Media Queries pour l’iPhone et l’iPad et redimensionner toutes les images. Le Responsive Web Design est une technique toute jeune, loin d’être parfaite et en constante évolution. Beaucoup de choses sont aujourd’hui possible, mais hélas il reste encore pas mal de chemin à parcourir dans le domaine.

Le modèle tabulaire en CSS

par Raphaël Goetter, le 30 décembre 2012

Le modèle de construction tabulaire (HTML et CSS) compte sans aucun doute parmi les plus fascinants qui soient, après avoir été d’abord adulé puis banni vigoureusement par les intégrateurs de tous poils.

En 1998, les spécifications CSS2 étendent les historiques valeurs de la propriété display et proposent depuis belle lurette des possibilités de rendus et positionnements « tabulaires » sans pour autant interférer dans la sémantique et le bon usage des éléments HTML.

Passons immédiatement à table et découvrons en détail le monde mal connu du Modèle Tabulaire en CSS

CSS3 Flexbox Layout module

par Raphaël Goetter, le 29 octobre 2012

Parmi les nouveaux modules apportés par CSS3 se trouve « CSS Flexible Box Layout », qui peut être traduit par « modèle de boîte flexible ».

Raphaël Goetter nous explique les principes et les possibilités de ce module qui risque fortement de révolutionner nos pratiques en termes de positionnement CSS.

Sprites CSS : performance et maintenabilité

par Nicolas Hoffmann, le 16 août 2011

L’optimisation des performances des sites implique de diminuer le nombre de requêtes HTTP. Pour ce faire, il est possible de regrouper les images utilisées dans les CSS, cette technique s’appelle les sprites CSS.

Adapter un site pour les Smartphones

par Nicolas Hoffmann, le 1er octobre 2010

Avec la démocratisation des Smartphones, il devient nécessaire de penser en concevant un site à sa version sur petit écran... voyons donc quelles peuvent être les approches pour adapter un site sur ce nouveau support et en quoi les standards peuvent grandement faciliter cette adaptation.

Maîtriser l’impression CSS

par Nicolas Hoffmann, le 16 août 2010

Les feuilles de style destinées à l’impression (CSS print) sont un moyen économique de proposer une version imprimable de vos documents en ligne, mais elles ne produisent pas toujours le résultat escompté. Voici un inventaire des soucis les plus fréquents, accompagné de quelques conseils qui vous permettront de mieux gérer ces difficultés.

Compatibilité multi-navigateurs des polices de caractères

par Aurélien Levy, le 9 mars 2008

Quelles sont les unités et les valeurs à utiliser pour dimensionner la taille des caractères de façon homogène sur le plus grand nombre possible de navigateurs Web ? Aurélien Levy a mené une campagne de tests pour donner une réponse à ce problème récurrent pour les développeurs de sites web.

Cascade CSS et priorité des sélecteurs

par Laurent Denis, le 21 avril 2005

CSS signifie « feuilles de styles en cascade »... Mais au fait, la cascade, qu’est-ce que c’est, à quoi ça sert, comment cela fonctionne ? Plongez avec nous dans la cascade sans risque de noyade !

Utilisation de background

par Pascale Lambert Charreteur, le 21 mars 2005

Comment utiliser la propriété CSS background pour gérer des images d’arrière-plan ?

Styles auteur, utilisateur et agent utilisateur : 3 raisons de lâcher prise sur votre design

par Laurent Denis, le 21 mars 2005

Le rendu final d’une page Web n’est pas le produit figé des règles de présentation fixée par son auteur : il résulte de la combinaison des 3 sources de styles de l’auteur, de l’agent utilisateur et de l’utilisateur lui-même.

0 | 10 | 20

La mise en page de site a considérablement évolué ces dernières années. Pour le développeur Web qui a appris le métier à la fin des années 90, le changement est rude. Il est bien loin, le temps des sites optimisés pour IE en 800x600.

Avec l’avènement des standards, l’arrivée de nombreux navigateurs alternatifs, le support de XHTML et des CSS dans les nouvelles versions de MSIE, la nécessité de faire des sites accessibles, la trop fréquente réduction des coûts qui a suivi la fin de la nouvelle économie, tout cela contribue à l’utilisation croissante de XHTML et de CSS.

L’utilisation de tableaux pour la mise en page est abandonnée car trop coûteuse en maintenance, et donne des sites difficilement accessibles. Les feuilles de style et leurs possibilités de positionnement s’imposent, avec l’avantage d’une maintenance simplifiée.

A l’attention des développeurs expérimentés, qui utilisent déjà les CSS pour styler du texte, notre contributeur Laurent Denis nous gratifie d’une série d’articles sur le positionnement CSS
, qui pourra aussi rendre service aux débutants, dès lors qu’ils ont compris les bases des CSS
.

Mais comment passer à XHTML sans trop perdre de temps ? OpenWeb a pensé à vous proposer un tutoriel qui devrait vous prendre moins d’une heure pour apprendre la base du web moderne. Pour les développeurs web de la première heure, un autre article leur est dédié, se focalisant sur les différences entre HTML et XHTML
.

Le modèle de tableaux étant différent de celui des CSS, un certain nombre d’auteurs Web se sont demandé comment centrer un bloc dans une page. Les membres d’OpenWeb sont eux aussi passés par là et livrent tous leurs secrets sur ce sujet épineux.

Pour le gourou qui croit déjà tout connaître d’XHTML et de CSS, Nous avons préparé avec amour un article sur l’Overflow avec un fond fixe qui secoue les neurones à en décoller la pulpe du fond.

Avec de telles lectures, produire du contenu conforme aux spécifications ne devrait être qu’une simple formalité, non ?