Colonnes, marges et nth-child en CSS3 http://ow.ly/8H0E6 WebDesign CSS
La tête dans le Flux !
RSSFloat, ça pue du flux !
- Moi
Bonjour, je cherche un livre pour graphiste qui aimerait apprendre le CSS et le HTML que me conseillez vous ?
Anonyme
Bonjour,
L’univers littéraire de l’intégrateur HTML / CSS s’est considérablement étoffé depuis quelques années.
On est passé de quelques livres “de base” expliquant les rudiments à des thèmes extrêmement variés :
- Apprentissage pour débutant (ex. livre “Réalisez votre site web avec HTML5 et CSS3” de Mathieu Nebra - que je n’ai pas pu lire encore, donc pas d’avis)
- Apprentissage avancé / expert (ex. mon livre “CSS avancées - Vers HTML5 et CSS3”)
- Gestion de projet CSS (ex. livre “SMACSS” de Jonathan Snook)
- Livres exclusivement sur CSS3 (ex. livre “CSS3 pour les web designers” de Dan Cederholm)
- Livres exclusivement sur HTML5 (ex. livre “HTML5” de Rodolphe Rimelé ou “HTML5 : De la page web à l’application web” de Jean-Pierre Vincent et Jonathan Verrecchia)
- Livres dédiés au Webdesign (ex. livre “Transcender CSS” de Andy Clarke - qui a un peu vieilli à mon goût)
- Livres sur le Webdesign pour mobiles (ex. livre “Responsive Web Design” d’Ethan Marcotte, ou “Mobile First” de Luke Wroblewski)
- Des aide-mémoires (ex. mes Mémentos CSS2 et CSS3)
- etc.
Au final, le choix est bien vaste et il est difficile de conseiller un bouquin plutôt qu’un autre. Pour information, sur Alsacréations nous tenons à jour une liste de livres commentés et critiqués.
Connais-tu des podcasts (audio) sur le monde merveilleux du webdesign (en français)? Si non, à quand des podcasts "made in" alsacreations? :)
Anonyme
Bonjour,
Comme toi, je n’ai jamais vraiment trouvé de podcast de webdesign en français intéressant. Et pourtant j’ai un peu cherché et le sujet m’intéresse.
Du côté d’Alsacréations, ça ne fait pas partie de nos projets à venir pour le moment, c’est tout ce que je peux dire sinon on va me fjqflihap*^^cù$
HTML5please
Un rapide mais complet aperçu de tout ce qui est aujourd’hui exploitable en HTML5 (et CSS3) : supports navigateurs, conseils d’utilisation, pré-requis, etc.
Très visuel et très clair.
Quel type de navigation pour les sites mobiles ?
Les menus de navigation sont vraiment une plaie pour les périphériques mobiles, à commencer par le menu horizontal, et - le plus vicieux d’entre tous -, le menu déroulant… (même si nous proposons une solution pertinente sur Alsacréations.)
En y réfléchissant bien, chaque type de navigation est problématique dès lors que l’écran commence à se réduire : il faut non-seulement tenter de tout afficher sur une colonne, mais également agrandir la surface cliquable de chaque lien.
Et quand tout cela est enfin optimisé, il reste un dernier problème, et non des moindres : votre menu occupe à présent toute la taille de l’écran visible de votre page d’accueil !
Forcément, le menu de navigation parfait pour mobile n’existe pas, ou plutôt : il sera différent selon les cas de figure et besoins.
J’ai regroupé ici quelques idées de navigation “responsive” qui pourraient bien s’adapter à nos smartphones. Ils ont sans-doute chacun des avantages et des inconvénients…
Simple adaptation visuelle
Principe :
Adaptation d’un menu classique pour le Web mobile pour obtenir un affichage sous forme de colonne avec grands boutons.
Réalisation :
Les CSS3 Media Queries sont nos amis pour appliquer une feuille de styles lorsque la taille d’écran se réduit.
Exemple en ligne :
Il y en a un peu partout, dès lors que le webdesigner a fait un premier effort de “responsive design”.
Menu poussé en bas de page
Principe :
La navigation est non seulement adaptée aux petits écrans, mais par un stratagème magique, elle est déplacée en bas du document. L’objectif d’afficher le contenu principal en priorité est atteint.
Réalisation :
Les techniques pour modifier l’ordre d’affichage des éléments HTML relèvent soient de spécifications en brouillon (CSS3 Flexible Model ou Grid Layout), ou de “bidouilles” telles que d’afficher un bloc comme un <tfoot> pour le reléguer en bas.
Exemple en ligne :
C’est cette dernière technique que nous avons utilisée pour http://www.alsacreations.fr
Menu remplacé par une liste select
Principe :
Le site CSS Tricks propose une idée intéressante : remplacer le menu classique par un élément HTML <select>. Ce type d’élément est généralement très ergonomique sur les smartphones.
Réalisation :
La page HTML contient les deux types d’éléments, tour à tour masqués en display none selon la largeur d’écran. Un coup de JavaScript est nécessaire pour lien les options du select aux pages correspondantes lors du pointage.
Exemple en ligne :
Un tutoriel de CSS Tricks dévoile cette technique : http://css-tricks.com/convert-menu-to-dropdown/
Menu rétractable
Principe :
Une des solutions adaptée aux menus déroulants, l’idée est d’afficher le menu contracté par défaut, puis lors du clic sur un élément, de dévoiler les sous-menus afférents.
Réalisation :
Il est possible de réaliser ce type de comportement exclusivement en CSS (pour éviter une requête JavaScript ?) à l’aide de la pseudo-classe :target
Exemple en ligne :
Je me suis amusé à réaliser cet exemple : http://ie7nomore.com/fun/responsive-menu/
Menu coulissant latéral
Principe :
La navigation est masquée (placée en haut ou sur le côté). Un bouton “menu” permet de faire apparaître en glissant la navigation vers la partie visible de l’écran.
Réalisation :
Le bloc de menu peut simplement être positionné en absolu ou relatif avec un décalage. Le clic sur le bouton “menu” modifie la valeur du décalage. Un petit coup de transition CSS3 et le tour est joué.
Exemple en ligne :
Voilà un exemple concret : http://ie7nomore.com/fun/responsive-menu/menu2.html
Menu coulissant vertical (ajout du 30 janvier)
Principe :
Une des (sans-doute) nombreuses variantes de la version précédente : la navigation est placée en haut de page. Seul un bandeau est visible et fixé en haut. Un bouton “menu” permet de faire apparaître en glissant la navigation vers la partie visible de l’écran.
Réalisation :
Le bloc de menu doit avoir une hauteur connue et positionné en “fixed”, puis décalé de sa hauteur. Le clic sur le bouton “menu” modifie la valeur du décalage.
Exemple en ligne :
J’ai appliqué ce principe sur mon site personnel Goetter.fr
Et sinon ?
Cette liste des “bonnes idées” de menus pour mobiles est certainement loin d’être exhaustive.
Je suis preneur d’autres bonnes suggestions, et surtout de vos retours d’expériences, notamment en ce qui concerne la compatibilité ou l’accessibilité (ARIA ?) de toutes ces techniques.
À propos La tête dans le Flux !
Bonjour, je suis Raphaël Goetter, webdesigner alsacien, intégrateur HTML5 / CSS3, auteur de quelques livres et créateur d'Alsacréations.
