Responsive Web Design The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. But no design, fixed or fluid, scales seamlessly beyond the context for which it was originally intended. In short, our flexible design works well enough in the desktop-centric context for which it was designed, but isn’t optimized to extend far beyond that. Becoming responsive#section2 media types
css3-mediaqueries-js - css3-mediaqueries.js: make CSS3 Media Queries work in all browsers (JavaScript library) css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support. UPDATE: Google discontinued the downloads section. Usage: just include the script in your pages. (And you should combine and compress with other scripts and include it just before </body> for better page speed - but you already knew that). Write your media queries like you would for browsers with native support. Note: Doesn't work on @import'ed stylesheets (which you shouldn't use anyway for performance reasons). Happy media querying!
Fluid Grids par Ethan Marcotte : une traduction française | Goban Club Les Grilles Fluides par ETHAN MARCOTTE Au début de l’année dernière, j’ai travaillé sur la refonte d’un site plutôt riche en contenu. Le client a donné peu de consignes : il fallait conserver le logo de l’organisme, déjà présent sur le site, améliorer la typographie et la lisibilité. Au début du processus, nous avons donc passé beaucoup de temps à concevoir une grille bien organisée pour accueillir les différents modules du contenu. Cette façon de penser est devenue plus commune ces dernières années. Frameworks CSS et divers outils pour les compléter ont vu le jour, tous conçus pour permettre au concepteur moyen d’utiliser les grilles encore plus simplement. Framework rationnel et structuré, et les utilisateurs peuvent consulter des sites organisés et lisibles. Mais notre client avait une dernière requête, et pas des moindres : la mise en page devait être fluide et s’adapter à la taille de la fenêtre du navigateur. La résolution d’écran minimale : un pieux mensonge verboten Par où commencer ?
Responsive Design is Not About Screen Sizes Any More In March 2012, Guy Podjarny ran a test comparing the performance of hundreds of shiny new responsive websites across four different screen resolutions. The results were very dissapointing. (1) Two years into the rise of Responsive Web Design, after every imaginable sort of designer and developer had jumped into the train, it took a test to almost rock the theory to its foundations. Guy proved that almost every known responsive site was overweight. We've made the internet in our image… ObeseJason Grigsby But, most importantly, every mobile user was receiving the same kilobyte overload as a desktop user. The community had different reactions to the fact. Thankfully, the Web community can always count on a number of people who will grab the bull by the horns and turn the situation around. If your website is 15MB, it's not HTML5, it's stupidChristian Heilmann Web performance has traditionally been built around (no offence) developer-exclusive jargon. Good performance is good designBrad Frost (2)
Le responsive design à l’assaut des terminaux mobiles Ces derniers temps je parle de plus en plus des terminaux mobiles, et pour cause : ils prennent une place de plus en plus importante dans notre quotidien et surtout dans notre consommation de l’internet (services et contenus). Avec la multiplication des plateformes mobiles et même des formats de terminaux alternatifs, les concepteurs de sites et services en ligne s’arrachent les cheveux pour trouver des solutions à cette fragmentation. Présentée à la communauté l’année dernière, la technique du Responsive Web Design semble apporter une réponse concrète à la prolifération des formats d’écran. L’exemple ci-dessus vous permet de tester ce principe en redimensionnant la fenêtre de votre navigateur. Ce type d’interface demande un minimum d’expertise et surtout un gros travail de préparation en amont pour “penser” une interface en plusieurs largeurs.
Content Choreography The concept of permanently placing content on a web page for a single browsing width or resolution is becoming a thing of the past. Media-queried responsive & adaptive sites afford us the ability to re-architect content on a page to fit its container, but with this exciting new potential come equally exciting challenges. Web designers will have to look beyond the layout in front of them to envision how its elements will reflow & lockup at various widths while maintaining form & hierarchy. Media queries can be used to do more than patch broken layouts: with proper planning, we can begin to choreograph content proportional to screen size, serving the best possible experience at any width. As I step into my 3rd responsive project with Paravel, I’ve made a habit out of picking apart media-queried sites I happen across, noting how things get rearranged at various widths. Content Stacking This is unavoidable. The Content Change-up De-compartmentalize the Workflow
Ingrid – a fluid CSS layout system Hello, my name is Ingrid Ingrid is a lightweight and fluid CSS layout system, whose main goal is to reduce the use of classes on individual units. Making it feel a bit less obtrusive and bit more fun to reflow for responsive layouts. Ingrid is also meant to be an extendable system, easy to customize to your own needs. Some examples unit A document is a work of non-fiction writing intended to store and communicate information, thus acting as a recording. A document is a work of non-fiction writing intended to store and communicate information, thus acting as a recording. unit A document is a work of non-fiction writing intended to store and communicate information, thus acting as a recording. unit A document is a work of non-fiction writing intended to store and communicate information, thus acting as a recording. Ingrid's famous cat gallery
Modern Fluid Typography Using CSS Clamp GoMo: An Initiative From Google Multi-Screen Resources Skip to content Make Your Website Work Across Multiple Devices Build a website that showcases your business on every screen from smartphones and tablets to computers and TVs. Whitepaper Building websites for the multi-screen consumer Learn about the most typical structures for multi-screen websites, with tips on how to create a great user experience and avoid some of the more common mistakes. Learn more. Case Study American Cancer Society mobilizes 7,000 web pages in one quarter The Society increased mobile visits by 250% and trippled mobile donations with a smart content strategy and deep understanding of visitor needs. Read more. Case Study Baines & Ernst’s new site increase mobile conversions Baines & Ernst launched a Responsively Designed Site. Read more. Case Study Beyond the Rack’s mobile conversion rate doubles Read more. Case Study Plusnet sees traffic grow 2x and sales 10x Plusnet implemented a multi-screen strategy based on Responsive Design. Read more. Read more.
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. Le problème est qu’on ne peut pas – ou du moins ce ne serait pas très pratique – développer autant de versions d’un site qu’il y a de résolutions différentes. Définition du responsive web design Cette évolution des techniques de webdesign, d’intégration et de développement se base sur un objectif simple : un même site doit pouvoir s’adapter lui-même aux différentes résolutions d’écrans… et donc son contenu aussi ! Voici 2 exemples pour illustrer des webdesigns crées de façon “responsive” : La typo 1.