background preloader

La boîte à outils ultime pour le responsive design

La boîte à outils ultime pour le responsive design
Si vous ne savez pas par où commencer votre webdesign responsive, ni quels outils vont vous faciliter la vie, cette liste d’outils concoctée à l’aide du dernier article de Smashing Hub devrait vous égayer. Faisons un petit tour des outils pratiques ou simplement indispensables… Le responsive design est relativement récent et les choses bougent très vite. A peine a-t-on pris connaissance d’une technique qu’il faut déjà apprendre une nouvelle chose ou maîtriser le dernier outil sorti. Avec sa popularité toujours grandissante, de nombreux outils ont vu le jour pour faciliter le travail des concepteurs et intégrateurs de sites. L’article original recense de nombreux outils gratuits qu’on peut trouver sur le web et vous trouverez ci-dessous ma sélection parmi tous ceux présentés dans celui-ci, plus quelques ajouts. Avant de commencer : 1. 2. Vous ne voyez pas très bien comment votre site pourrait réagir au redimensionnement de la fenêtre ou sur un appareil mobile ? 3. 1. 2. 3. 4. 1. 2. 1. 2.

Initializr: With Great Templates Comes Great Responsivity! | @verekia's blog Today I'm proud to announce that a "Responsive template" is now available on Initializr! It will help you dealing with all the various devices used to display your site. Mobiles, tablets, netbooks, laptops, desktop monitors, HUGE desktop monitors... About responsive web design For those who have been living in a cave for the last few months (understand: for those who have a life and don’t spend days reading tweets and blogs) you probably need a short update about what a "responsive" design is. To design a responsive layout, we have to forget about the usual static 960px width layouts and go fluid with percentage widths and media queries. A fluid layout with percentage widths The first thing our page needs is a "fluid" layout. Mobile-first approach media queries Media queries are a cool way to specify different styles depending on the device used (by aiming particular screen resolutions or orientations for example). The mobile view The intermediate view The wide view The maximum-width view

THE BLOWG Menu déroulant en CSS Si vous voulez avoir tout de suite un aperçu du type de menu décrit dans cette page, vous pouvez visiter notre page de démonstration. Et pour garder le script proposé au chaud sur votre PC, vous pouvez aussi le télécharger. Avec ou sans javascript ? Lorsqu'on peut se passer de javascript, il est prudent de le faire. Les principes utilisés pour créer les menus hiérarchiques sont malheureusement incompatibles avec Internet Explorer versions 6 et antérieures. Notre choix a consisté à mettre au point un menu à 2 vitesses qui fonctionne : Sans javascript pour Firefox, Opera, Mozilla et IE7Avec javascript pour IE 5.5 et 6 Ce choix permet à notre menu de rester pleinement opérationnel pour la quasi-totalité des visiteurs. Une partie de cache-cache En réfléchissant au principe de base d'un menu déroulant, vous constaterez qu'il s'agit essentiellement d'une partie de cache-cache : certaines parties en sont masquées et n'apparaissent que lorsque l'utilisateur survole le menu principal. La ligne :

Rundown of Handling Flexible Media When you take the responsive web design route, part of the deal is fluid grids. That is, container elements set in percentage widths. Just one example: an <article> that holds a blog post might be 320px wide on a small screen device and 690px wide on some large screen. Text can be resized and will flow nicely to fill a container. That's not too hard. But media - images, video players, and audio players - demand a bit more attention (e.g. a video that sticks off the edge of the screen == bad). Flexible Images If you're comfortable with IE 7 and up support. If you are caring about IE 7 support (I hope not, but I understand there are scenarios in which you must), use this to make sure the images survive the scale-down: See here for more on that. If you need to care about IE 6 (again...) this Ethan Marcotte article has a JavaScript solution. A shift in thinking There was a time in which resizing images was quite the taboo. However the bandwidth thing is still a (big) issue. Flexible Video

5 Useful CSS Tricks for Responsive Design Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I’m going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They are simple CSS properties such as min-width, max-width, overflow, and relative value — but these properties play an important part in responsive design. View Demos 1. This responsive video CSS trick was discovered by tjkdesign.com. 2. Max-width property allows you to set the max width of the element. Max-Width Container In the example below, I specify the container to display at 800px if possible, but it should not exceed 90% of the boundary width. Responsive Image You can make the image auto resize to the max width of the boundary by using max-width:100% and height:auto. The above responsive image CSS works on IE7 and IE9, but doesn’t work on IE8. Min-Width 3. Relative Margin 4.

Using CSS flexible boxes | CSS The CSS3 Flexible Box, or flexbox, is a layout mode intended to accommodate different screen sizes and different display devices. For many applications, the flexible box model is easier than the block model since it does not use floats, nor do the flex container's margins collapse with the margins of its contents. Many designers find the flexboxes easier to use than boxes. Popular layouts can thus be achieved more simply and with cleaner code. Flexible Boxes Concept The defining aspect of the flex layout is the ability to alter its items' width and/or height to best fit in the available space on any display device. Block layout is vertically-biased; inline layout is horizontally-biased. Flexible Boxes Vocabulary Instead of talking about horizontal (inline) and vertical (block), flexible boxes use the terms main axis and cross axis. Flex container The parent element in which flex items are contained. Flex item Each child of a flex container becomes a flex item. Axes Directions Lines Dimensions

Stitches - An HTML5 sprite sheet generator Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only compatible with modern browsers. Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. Stitches is developed by Matthew Cobbs in concert with the lovely open-source community at Github. Copyright © 2013 Matthew Cobbs Licensed under the MIT license. Implementation After dependencies, Stitches requires a stylesheet, a script, and an HTML element to get the job done: The sprite sheet generator is automatically created in elements that have the stitches class: If you choose, any images that are a part of the initial markup will be loaded onto the canvas: Documentation Documentation is available here. Dependencies Contributing License Download

Really Responsive Design and the Frameless Grid | Pete Wailes Many years ago, the web was a simpler place, in terms of design. After all, it’s quite hard to bring anything of visual beauty to your users, when your canvas is monospaced syntax-highlighted text, and nothing else. Thankfully, we’ve come quite a way since then, and now we can do all sorts of incredible things thanks mainly to advances in CSS & javascript. However, whilst we’re now capable of doing far more, our methods of design are often still stuck in ways of thinking that evolved a few years ago. I’ll be deconstructing some of those in this post, and wondering whether it’s not time for a new way of doing things. the controlled grid The first thing that needs tackling is our relationship with grids and grid layouts. The problem that we’ve come to confused the cause with the symptom, or rather, our method of implementation with our intended results. <div class="col col6">Column 1</div> <div class="col col6">Column 2</div> the fault, dear Brutus, is not in our stars, but in ourselves Back?

On/Off Flipswitch HTML5/CSS3 Generator - Proto.io Generate pure CSS3 On/Off flipswitches with animated transitions. More freebies A bug in Opera overflows content outside of the container's curved corners. IE9+ fully supported.As IE6-8 do not support the CSS :checked selector, the switch will not reflect the "ON" state of the checkbox. Get the CSS Get the HTML Try Proto.io Free for 15 days Please contact us with your ideas, thoughts, questions or for anything else on how we can improve this tool.

Astuce pour les développeurs : HTML, CSS, PHP, Mod Rewrite & SEO Se souvenir des balises Web quand on développe est souvent difficile surtout quand on ne pratique pas tout le temps certains langages de programmation. Ouf ! il existe des fiches pour se simplifier la vie … et aussi pour découvrir des balises & expressions souvent méconnues. Voici quelques fiches sur l’HTML, CSS, PHP, Mod rewrite et SEO que vous pouvez enregistrer (image jpeg – clic droit sur l’image puis « enregistrer sous »), vous verrez c’est très pratique. Voir aussi le PDF : SEO_Web_Developer_Cheat_Sheet Share and Enjoy Publié par : npcmediaClassé sous :web developer3 réactions

Related: