L’accessibilité et le responsive : un certain conflit d’intérêt ? | Édition Nº7 Si vous vous considérez webdesigner/intégrateur au top de votre art, vous êtes sans doute habitué à contempler les constantes nouvelles tendances que l’on voit défiler dans nos métiers. Évidemment, j’imagine que vous ne vous autorisez pas à embrasser ces nouvelles tendances sans en remettre en cause les impacts sur les axes habituels de la qualité web (que ce soit par les dégradations apportées par la technologie en elle-même, ou parce que nous en sommes encore au stade de peaufinage des bonnes pratiques). Dans tous les cas, la “mode” du Responsive Web Design ne peut pas avoir échappé à votre radar, et vous vous êtes peut-être même trouvés en situation de tenter d’en décortiquer les usages pour vous faire un avis critique. Vous avez entendu à droite et à gauche “Le responsive, ça fait mal aux performances !”, alors vous avez peut-être décidé que le responsive, c’est bien, mais c’est sans doute mal aussi un peu parfois ! L’accessibilité : restons pragmatiques ! La fureur du “Responsive”
960 Grid System 5D Institute | The Future of Immersive Design 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. De nos jours, il n’y a pas un client qui demande un site Internet sans demander une version mobile de celui-ci. Seulement en quelques années le nombre d’appareils et de résolutions servant à consulter des sites web a tout simplement explosé : ordinateurs, smartphones, tablettes, web TV, grille-pain, format portrait, paysage, etc… Entre 2005 et 2008 on a identifié pas moins de 400 résolutions d’écran différentes pour tous les appareils vendus. Définition du responsive web design La mise en page La typo
Responsive Museum Week Adaptive Web Design "Adaptive Web Design" est un petit livre de poche de 130 pages édité initialement chez Easyreaders en 2011 et traduit en français chez Pearson en 2013. L'auteur, Aaron Gustafson est un expert mondial front-end reconnu, et son préfacier Jeffrey Zeldman n'est pas moins une célébrité. C'est quoi le webdesign adaptatif ? Pour être très honnête, je pensais que l'"Adaptive Web Design" était un univers dans lequel s'inscrivait le Responsive Webdesign. Ce n'est pas faux, mais j'avoue que je m'attendais à un bouquin qui traiterait en grande partie de RWD… or ce n'est pas du tout le cas, loin de là. Bref, j'ai donc été un peu frustré lors de mon premier survol du livre. Je connaissais très peu Aaron Gustafson avant de lire ce bouquin. En clair, le public ciblé par ce livre est plutôt large : quelles que soient vos compétences, vous y apprendrez quelque chose. Sommaire
CSS media queries - Web developer guide Syntax A media query is composed of an optional media type and any number of media feature expressions. Multiple queries can be combined in various ways by using logical operators. A media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. Note: A style sheet with a media query attached to its <link> tag will still download even if the query returns false. Media types describe the general category of a device. all Suitable for all devices. print Intended for paged material and documents viewed on a screen in print preview mode. screen Intended primarily for screens. speech Intended for speech synthesizers. Note: CSS2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in Media Queries 4 and shouldn't be used. Logical operators and not only , (comma) You can also target multiple devices.
Media Queries