background preloader

Les fondamentaux du Responsive Web Design

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. Dans le monde de l'architecture, nous pouvons affirmer que ces supports sont vraiment multiples et nombreux. Le « Responsive Web Design » est né, car nous sommes de plus en plus confrontés aux mêmes problèmes que les architectes : s'adapter aux supports. Voyez plutôt : autrefois, nous n'avions qu'un ou deux navigateurs et les tailles d'écrans variaient peu. Et tout cela, c'est ce que nous avons maintenant. Pour faire une application Web qui soit Responsive Web Design, nous devons établir les trois points suivants : Si nous faisons une analogie avec l'architecture, les trois derniers points représentent nos outils. <! Horreur !

http://viseo.developpez.com/tutoriels/css/responsive-design/

Related:  ResponsiveDEVELOPP | PART 01Responsive

Comment penser son contenu web pour le responsive design ? 20 juin 2013 Comment penser son contenu web pour le responsive design ? La technique du responsive design permet de décliner son site Internet sur tous les types de support : smartphone, tablette, ordinateur ou télévision. Un arrière-plan extensible intelligent Certains sites affichent une (grande) image de fond qui s'adapte à toutes les dimensions de la fenêtre du navigateur, proportionnellement, sans la déformer. La réalisation de ce genre de prouesse n'est pas si évidente techniquement, contrairement à ce que l'on pourrait croire de prime abord. Comment fait-on ? Nous allons présenter ici deux méthodes parmi celles qui sont possibles : une entièrement en CSS , une autre basée sur jQuery. Exemples

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.

Les 10 commandements du web adaptatif En 320px ton webdesign, tu commenceras Partir de la plus petite taille d’écran ciblée, pour ensuite enrichir les possibles du site ; c’est s’assurer d’aller à l’essentiel sur le mobile. Ton contenu rédactionnel, tu soigneras 11/03/14 ODA - Un desassembleur en ligne - Korben ODA – Un desassembleur en ligne Si vous aimez désassembler des trucs, mais que vous n'avez pas vos outils sous la main, je vous propose d'aller faire un tour sur ODA. ODA pour Online DisAssembler est comme son nom l'indique un désassembleur en ligne supportant de nombreuses architectures machines. ODA vous permettra d'analyser les chaines, l'hexadécimal, les pointeurs, les sections et les instructions-machine contenus dans n'importe quel binaire à importer vous-même ou disponible en ligne. Pratique pour de l'analyse de malware ou pour rechercher des failles ou des trucs cachés dans des softs.

Responsive webdesign : adapter un site à toutes les résolutions Le Responsive Web design (conception adaptative ou réactive en français) représente un ensemble de méthodes et techniques permettant d’universaliser un site Web. Qu’il soit consulté sur ordinateur, tablette, e-reader ou mobile, le site ainsi conçu s’adapte automatiquement à la taille de l’écran. Cette évolution très séduisante du Web pose néanmoins certaines questions d’ergonomie et oblige à repenser la conception des sites. Nous abordons dans cet article les objectifs du responsive design, les critères qui doivent décider à le mettre en œuvre, les recommandations de conception et les considérations techniques. Objectifs du responsive webdesign

Centrer un float en CSS Une zone – la galerie – doit être constituée de un ou plusieurs éléments – les boites – centrés à l’interieur et sur une seule ligne. En HTML « à la papy » c’est très facile à faire : la galerie est une cellule d’un tableau avec la propriété align="center", et le contenu est un tableau d’une seule ligne dont le nombre de cellules varie de 1 à 5 (le nombre maximum de boites pour tenir sur une seule ligne). Mais comment faire ça en CSS ? Problématique L’effet recherché ressemble à ça :

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.

La transparence de couleur avec RGBa en CSS3 Le module de couleurs de CSS3 introduit la notion de transparence dans les valeurs associées à une couleur, l'écriture RGBa. Cette composante de la couleur permet de jouer sur les effets d'opacité entre les différentes couches d'éléments HTML. Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity (également CSS3 mais assez ancienne déjà) : cette dernière est une propriété qui s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement.

25/02/14 - Performance web : optimiser son code HTML et CSS De la compression du code HTML à la normalisation des CSS, voici quelques bonnes pratiques indispensables pour réduire le poids des pages web, et améliorer leur vitesse de chargement et d'exécution par les navigateurs. Comme nous l’avons vu dans l’article Pourquoi optimiser un site web ?, améliorer la vitesse de chargement des pages d’un site à au moins quatre impacts directs : le nombre de visiteurs (et par effet de levier le référencement), un manque à gagner économique et un impact environnemental réel. Ensuite, nous avons vu dans l’article Optimiser l’utilisation des images d’une page web comment améliorer la performance du poste le plus gourmand en ressources inutiles, les images, avec la prétention de réduire, parfois, de plus de 75% le volume global. Pour le dernier article de cette série, je vous propose quelques techniques concernant le code HTML des pages.

Web mobile : introduction et glossaire Le Web mobile a depuis longtemps envahi notre quotidien de concepteur de sites web : aujourd'hui, smartphones et tablettes font partie intégrante du parc de périphériques sur lesquels nous jouissons de notre dose quotidienne d'Internet, sur lesquels nous consultons nos sites web préférés, et pestons - à juste titre - lorsque celui-ci ne s'affiche pas correctement. Afin de mieux dégrossir ce vaste sujet, voici une introduction à la conception web mobile sous forme d'un glossaire des principaux termes et d'une double méthodologie pratique. Glossaire Application native

Tutoriel Flottement CSS Float Et Superposition Z-index Le positionnement nous offre encore d'autres possibilités afin d'organiser notre page. Après avoir vu le positionnement absolu, fixe et relatif dans le tutoriel précédent, voyons maintenant le positionnement flottant. Les flottants 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.

Related:  ProgrammationResponsive Design