background preloader

Webdesign adaptatif : 5 astuces indispensables

Webdesign adaptatif : 5 astuces indispensables
Depuis l’année dernière, la tendance est au webdesign adaptatif. Avec la sortie du nouvel iPad et l’explosion du marché téléphone mobile, cette tendance devrait doit devenir la norme d’ici la fin de l’année. Si les travailleurs du web ne plongent pas dans ces nouvelles pratiques, je parie sur un beau IE6 revival pour leurs sites internet. Voici 5 conseils pour vous aider à créer un design de qualité, accessible et adaptable. Vous apprendrez dans cet article : Comment cacher du contenu pour les petits écrans ? Avant de commencer la lecture de cet article je vous invite à visiter le site smashing magazine. Non, c’est du webdesign adaptatif. Pour maîtriser la technique de changement du contenu installez vous confortablement et prenez des notes ! Cacher du contenu Au XXème siècle, le contenu était optimisé pour une taille d’écran de 1024*768px. Utilisez la propriété CSS display:none en fonction de la taille de votre périphérique. L’effondrement du contenu Structure HTML Comportement Javacript

http://davidl.fr/blog/webdesign-adaptatif-5-astuces-indispensables.html

Related:  HTML - CSS - PHPTrucs à savoir wordpressResponsiveCôté web

Navigation à onglets fluides avec les transitions CSS - Créer un menu avec display: table-cell Note : ce tutoriel a été initialement publié dans WebDesign Magazine Hors-série 16. Suivez pas à pas les 18 étapes de ce tutoriel. 01 - La structure HTML La première étape de ce tutoriel consiste à créer notre structure HTML. Des images à la une responsives pour votre theme Wordpress - Kune.fr Depuis quelques années, et avec l’utilisation de plus en plus importante des terminaux mobiles pour naviguer sur internet, les designs responsives sont devenus monnaie courante. Cette tendance n’est d’ailleurs pas prête de s’arrêter, car de plus en plus de sites deviennent responsives. Seulement voilà, il existe encore et toujours quelques barrières à l’utilisation optimale du responsives et nous allons voir comment travailler sur un point particulier, les images, dans un thème WordPress. Dans cet article, nous allons donc aborder un problème récurrent dans la création de design responsive, les images. Nous verrons comment utiliser les fonctions natives pour améliorer leurs utilisations. Mais avant tout, petit point sur la question.

Filtre CSS « flou localisé » ou « flou progressif » - Créer de la profondeur de champ avec les filtres et les masques Cette démo fait suite à Effet « soft-focus » en CSS, mais fait entrer les masques CSS et SVG pour créer des effets de « flou progressif » ou de « flou localisé ». Le principe est donc strictement le même que la démo précédente, hormis l’utilisation des masques sur la seconde image qui superpose la première. (Je vous conseille de lire le premier article avant de continuer) Ajout des filtres CSS et SVG Dans ce tuto, je vais entrer sur la partie spécifique des filtres et des masques.

Structure HTML5 en colonnes CSS, fluide et adaptative (responsive) - Trucsweb.com Mise à jour du gabarit CSS classique avec entête, pied de page et alignement de colonnes. Exemple simple et fluide à 3 colonnesAdapté en 2 colonnes sous les 800 pixelsPuis en une seule colonne à partir de 600 pixels de large. Il suffit de changer la valeur de la largeur du « conteneur » pour un design fixe (max-width) ou fluide (100%).

Changez Vos Permaliens Sans Nuire A Votre Site WordPress Crédit photo : khunaspix Modifier les permaliens sur un site en place peut être risqué. Vous devez être absolument sûr de vouloir faire ce changement, car il peut avoir un impact sur votre référencement. Responsive design : définition, fonctionnement, ressources et tutoriels Si vous vous intéressez de près ou de loin au webdesign ou à l’intégration, vous n’avez pas pu échapper au dernier terme à la mode : le “responsive web design”. Cette avancée technologique est également une nouvelle philosophie de création de site. Voici un article pour définir ce qu’est le “responsive web design” et expliquer quels en sont les points-clés (puis plein de liens, de tutoriels et de ressources super cools aussi !). Le “responsive web design” est né suite à un besoin grandissant.

25 ressources CSS et plugins Javascript pour vos interfaces Rien de tel que de nouveaux plugins et ressources Javascript pour booster vos sites web et votre inspiration ! Pour assouvir votre soif de nouveauté, je vous invite à découvrir 25 ressources en tout genre pour rendre vos sites plus efficaces. Au-delà de design, une bonne expérience utilisateur est plus qu’essentielle pour accompagner vos utilisateurs sur votre site web. Les ressources suivantes vont vous permettre de rendre votre site plus animé, plus fluide, plus propre, plus innovant, bref plus cool et remarquable que jamais. Utilisables tels quels ou personnalisables à souhait, vous êtes à présent libre d’adapter les scripts pour y apporte une touche originale ! Attention bien sûr à ne pas surcharger votre projet, au risque d’obtenir le résultat inverse.

Rédaction web : la technique de "l'angle éditorial" Pour réussir la rédaction web d’un article de blog ou autre page, il ne suffit pas de bien écrire. La notion « d’angle éditorial » est essentielle afin d’assurer la cohérence et le fil rouge de votre contenu. L’angle éditorial en rédaction web : créer un fil rouge dans votre discours Le comportement de lecture sur le web est très volatile. La concentration est difficile devant un écran. Résultat, l’internaute va lire le contenu en diagonale, cherchant les idées principales.

Les fondamentaux du Responsive Web Design Prenons deux exemples simples. Le premier pourrait être ces vitres qui s'opacifient en fonction de la luminosité extérieure. Ou encore ces murs-miroirs où plus nous nous approchons, plus ils nous semblent se déformer. Bref, ce que cherchent les architectes dans ce mouvement, c'est de dépasser/s'abstraire des contraintes inhérentes liées aux différents supports. 25 ressources jQuery et CSS3 pour vos sites web Pour que votre futurs projets web soit encore plus beaux, plus agréables et plus utilisables, je vous propose de découvrir 25 plug-ins et tutoriels utilisant jQuery et CSS3. Certains sites de référence comme Codrops méritaient des articles quasi hebdomadaires, tant la qualité des ressources proposées y est impressionnante. Pour garder que le meilleur de cet amas de ressources disponibles sur le web, j’ai sélectionnés pour vous quelques outils utiles pour posséder les ingrédients d’un site moderne. Commençons par des effets de chargement, suivi d’effets de pages, des effets de survol, quelques sliders et gestionnaires d’images.

Comprendre le poids des règles CSS Certain d’entre vous ont peut être encore quelques soucis à comprendre les spécificités des css, spécialement avec les « pas si nouveaux » sélecteur CSS3. Légende : X-0-0 : représente les sélecteurs de type ID, illustrés par les requins.0-Y-0 : représente les sélecteurs de type class, attribut, pseudo-class , illustrés par les poissons0-0-Z : représente les sélecteurs de type balises, pseudo-élément, illustrés par Plankton.* : le sélecteur universel n’a pas de valeur+,>,~ : sont des combinateurs ils offrent plus de spécificités sur les sélecteurs, mais n’augmentent pas la valeurs. Créer un user admin sans accès à la base de données Il y a des tas de raisons qui peuvent faire qu’on n’accède plus à son tableau de bord : hackoubli des mots de passele webmaster a disparu dans la naturemon chat a sauté sur le clavier quand je tapais mon mot de passe Une procédure existe, en passant par phpmyadmin.

jQuery – Effet smooth scroll (défilement fluide) - Tutoriels Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 110 465 fois. L’effet de scroll fluide est déjà intégré, en fonction de vos paramètres utilisateur, sur certains navigateurs.

Related: