10 petits conseils pour le Responsive Web Design ! – Graphisme & interactivité Aujourd’hui, rendre son site internet utilisable à tous ses utilisateurs ressemble parfois à un challenge ! En effet, on trouve tout type d’utilisateurs qui navigueront : sur Chromesur FirefoxSur Internet Explorersur Safarietc.Mais aussi :sur iPhonesur iPhone 5 (pas la même taille)sur Androidsur BlackBerrysur Windows Phoneetc.Mais aussi :sur iPadsur Galaxy tabsur Galaxy Notesur iPad Minisur les tablettes Archossur Kindle FireMais aussi :sur la télévisionsur le frigo connectésur l’Amstrad CPC de mamie zinzin.. 😀 De nombreux outils, de nombreux supports et des tailles qui ne cessent de changer ! Aujourd’hui, ce sont dix conseils pour le Responsive Web Design que l’agence Splio nous propose :
HTML Cheat Sheet (Updated With New HTML5 Tags) - WebsiteSetup Interested in HTML? Awesome. Having a proper cheat sheet will make your life a ton of easier. When I started out with web development (back in 2004), I used to have a cheat sheet, too. Now it’s all in my head, though. Whether you’re a savvy web developer or just a trying to experiment a little, feel free to use this HTML cheat sheet below. I’ve listed out all the mainstream HTML tags as well as the new HTML5 tags. If you wish to download .pdf, click here (237kb) – This version is based on the HTML Cheat Sheet in .PNGAlternate HTML Cheat Sheet in .pdf, optimal for tabloid paper size (11x17in) printing, click here (138kb) to downloadIf you wish to use this as an image, click here (3508 x 2717) 1. 2. 3. If you spot any errors in this cheat sheet, please contact us – info@websitesetup.org
Autoprefixer CSS online – make your vendor prefixes is actual. CSS3 : initiation aux media-queries pour adapter ses pages web à tout type d'écran - CSS débutant Avec l'avènement des smartphones ou autre tablette, la multiplication des tailles et des résolutions d'écran, il devient de plus en plus aléatoire de ne réaliser qu'une seule disposition graphique de sa page web... Comment en effet visualiser correctement sur un smartphone une page qui aurait été pensée pour une résolution minimale de 1900px ? (ce qui est très mal, d'ailleurs...) Les Media-Queries, permettent de cibler différents cas et ainsi d'adapter la restitution de sa page html à différentes caractéristiques des terminaux. Les Media Queries permettent donc de cibler : Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation ... Pour en expliquer le principe, on se limitera à deux exemples : La largeur de la fenêtre avec un contrôle du width ;La largeur de l'écran du terminal avec le contrôle de device-width (ah non, ce n'est pas la même chose que width tout seul) ; Fonctionne avec : Chrome, Safari Firefox, SeaMonkey MSIE 9 Opéra Haut
LESS (langage) Pour les articles homonymes, voir Less. Less est diffusé en open source. Sa première version a été écrite en Ruby, les versions ultérieures en JavaScript. La compilation du code Less ci-dessus donne le code CSS suivant : Les mixins permettent d'embarquer des propriétés d'une classe dans une autre classe en incluant le nom de la classe dans les propriétés. Less dispose également de blocs de règle particuliers qui sont des mixins acceptant des arguments et se comportant comme des fonctions. CSS supporte l'imbrication, mais les blocs eux-mêmes ne peuvent pas être imbriqués. Less propose les opérations et fonctions. Less autorise également l'utilisation d'expressions JavaScript. À partir de la version 1.4, Less supporte les règles imbriquées et héritées via les pseudo-sélecteurs &:extends et @extends. Less est inspiré par Sass[4]. Des versions plus récentes de Sass ont également introduit une syntaxe à la CSS appelée SCSS (Sassy CSS)[2],[5].
Liquidapsive (Liqui-dap-sive) HTML5 : le guide du débutant La capacité à créer de belles et convaincantes pages web est une compétence utile qu'il faut avoir. Elle vous permet de présenter des informations qui vous intéressent tout en capturant l'attention des personnes qui visitent votre page web. Si vous ne souhaitez pas utiliser les gestionnaires de contenu (tels que WordPress, Drupal et Joomla) pour mettre sur pied votre site web et que vous voulez apprendre les bases du HTML5, alors ce guide est fait pour vous ! Et au fait, une fois que vous aurez appris les ficelles du métier pour le HTML5, je vous suggère de jeter un œil à ma « Fiche de révision HTML5Fiche de révision HTML5 » ci-dessous. Historiquement, les sites web sont créés à partir du HTML, du CSS et du JavaScript. Ce renouveau est appelé HMTL5, et il est utilisé avec beaucoup d'enthousiasme par les entreprises et les développeurs. Même si tout ça peut sembler intimidant au premier abord, ça ne l'est pas du tout. Ici on trouve beaucoup de choix VI-A. VI-B. VI-C. VI-D. VI-E. <! <!
Hamburgers by Jonathan Suh Table of Contents Usage Using Hamburgers for your site is easy (well, that was my intention anyway). Sass .scss source files are available if you use Sass as your CSS precompiler. It’s customizable and modular. Hamburgers is available via npm, yarn and Bower.npm install hamburgers yarn get hamburgers bower install css-hamburgers Also available as a Ruby gem to use within your Rails application—see below for more information. * Be sure to run the CSS through Autoprefixer since the Sass doesn’t account for vendor prefixes. Install for Ruby on Rails Add Hamburgers to your Gemfile.gem 'hamburgers' Run bundle install. ** More information on why Sass’s native @import + why you should ditch Sprockets directives altogether. Customization To override default settings, declare them before importing Hamburgers: $hamburger-padding-x: 20px;$hamburger-padding-y: 15px;$hamburger-types : (collapse); @import "hamburgers"; @import "hamburgers-settings"@import "hamburgers"; $hamburger-padding-x : 15px ! ems or rems
Media queries Une media query (ou requête média) consiste en un type de média, et au moins une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou leur affichage des couleurs. Ajouté dans CSS3, les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même. Syntaxe Les requêtes de média sont formées d'un type de média, et peuvent, d'après la spécification CSS3, contenir une ou plusieurs expressions, traitant des fonctionnalités du média, qui sont interprétées comme vraies ou fausses. Lorsqu'une media query est vraie, la feuille de style ou les règles correspondantes sont appliquées selon les règles normales de la cascade. À moins que vous n'utilisiez les opérateurs not ou only, le type de média est optionnel et le type all est supposé. Opérateurs logiques and @media (min-width: 700px) {…} Listes separées par des virgules not Un autre exemple.
Simplifiez-vous la vie avec LESS La partie fun du cours commence. Vous allez apprendre à utiliser LESS pas à pas. On commence ? Veuillez noter que CSS est totalement compatible avec LESS, ce qui signifie que vous pourrez tout à fait utiliser du CSS pur dans votre code si vous le souhaitez. Constantes Tout d’abord, LESS vous permet d’utiliser des constantes. un bleu électrique (#17B6FF) ;un magenta pétant (#FF17B6) ;un vert citron (#B6FF17) ;un vert acide (#1BFF17). Si vous décidez de changer une des couleurs de votre palette, vous allez devoir vous battre avec votre éditeur à coups de « rechercher / remplacer ». LESS générera le CSS suivant : On pourrait pousser un peu plus loin le concept en utilisant des noms de variables plus ciblés : Vous pouvez utiliser des variables de différents types (couleurs, dimensions, pourcentages, chaînes de caractères, etc.). Classes abstraites Les classes abstraites peuvent être comparées à des fonctions. Si vous souhaitez utiliser plusieurs paramètres, séparez-les par des virgules. Imbrication
OpenClassrooms - Mémento des propriétés CSS Cette page est une liste non exhaustive des propriétés CSS qui existent en CSS3. Pour la plupart, ce sont des propriétés que nous avons vues dans le cours, mais vous trouverez aussi quelques nouvelles propriétés que nous n'avons pas abordées. La liste est non exhaustive car mon but n'est pas de faire la liste de toutes les propriétés CSS qui peuvent exister : il y en a vraiment trop (plus de deux cents !) et certaines sont très rarement utilisées. Mémento Propriétés de mise en forme du texte Je résume ici la plupart des propriétés de mise en forme du texte. Qu'est-ce que la mise en forme de texte ? Propriétés de couleur et de fond Propriétés des boîtes Propriétés de positionnement et d'affichage Propriétés des listes Propriétés des tableaux Autres propriétés
Design fluide et design responsive | Clic Story à Lure (70) Design fluide et design responsive sont souvent confondus. Pourtant, si l’objectif est le même : adapter l’affichage aux dimensions de l’écran, les moyens sont différents. Design fluide Le design fluide existe depuis l’invention du web : on définit les dimensions des éléments structurels de la page (grille, colonnes…) proportionnellement à la largeur de l’écran. Par exemple, une colonne de texte de largeur 75% et une colonne latérale de largeur 25%. Ainsi, le site s’adapte automatiquement aux dimensions de l’écran. Avantage : on utilise toute la largeur de l’écran, quelle que soit sa taille. Inconvénient : sur les écrans de tailles extrêmes, les colonnes peuvent devenir trop larges ou trop étroites et nuire à la lisibilité du texte, voire désorganiser la mise en page du site. Design responsive Le design « responsive » est apparu avec les appareils mobiles et la nécessité d’adapter l’affichage à des écrans très petits. Combiner les deux En pratique
Responsive Data Tables: A Comprehensive List of Solutions Tables are an important part of HTML. Although they were often used in the past for layout, today they’re mainly used for marking up data. Since the adoption of responsive web design, various approaches have been developed for establishing tables that can scale well in different viewport sizes. In this article, I’ll go over and analyze many of these approaches. Keep in mind that I’ll be focused mostly on the JavaScript-based ones, as I think they offer more options and features compared to the pure CSS solutions. The Basic Markup for Our Table Before diving into the core methods, let’s have a look at the example table that will be used throughout this article to demonstrate the different methods for achieving responsive tables: <table summary="Example table"><caption>Example Table Caption</caption><thead><tr><th>Country</th><th>Languages</th><th>Population</th><th>Median Age</th><th>Area (Km²)</th></tr></thead><tbody><tr><td>Argentina</td><td>... Bootstrap’s Responsive Tables Stacktable.js