background preloader

Nouveau site de l’agence Nealite : retour d’expérience sur le responsive design

Nouveau site de l’agence Nealite : retour d’expérience sur le responsive design
Le challenge Refondre son site web est toujours un défi pour une agence web. Notre précédent site fêtant son 3ème anniversaire, il n’était plus très en phase, ni avec notre discours, ni avec nos méthodologies et commençait à être technologiquement obsolète. Avec l’arrivée du HTML5, des CSS3 (media queries, @font-face, multi-columns, animations…) et l’expansion du javascript (à travers jQuery ou Mootools…), nous possédons désormais les outils nécessaires pour pouvoir mettre en ligne simplement des sites à la fois agréables, accessibles, rapides et portables. Avec cette refonte, nous avons voulu construire un site qui soit en phase avec notre image, nos méthodes de travail et notre vision du Web. Au-delà de notre satisfaction d’avoir sorti un site dont nous sommes particulièrement fiers, nous avons voulu partager notre retour d’expérience sur la refonte de notre site en responsive design. Faire les bons choix Trois points cruciaux ont émergé de ces discussions : Le mobile d’abord !

Une feuille de styles de base pour le Web mobile Parce que faire un site web pour terminal mobile, ce n’est pas fixer sa largeur à 320 pixels ou proposer une version iPhone uniquement, je vous propose un tour d’horizon de quelques solutions offertes par CSS pour adapter une présentation existante aux mobinautes : gérer la largeur, redimensionner les éléments, passer à une seule colonne, gérer les débordements, supprimer le superflu, adapter les liens et les tailles de polices selon l'orientation. Pour vous faciliter la tâche, voici ci-dessous une feuille de style dédiée au média mobile qui condense diverses bonnes pratiques et astuces. Ces règles peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l’aide d'une règle media query de type @media (max-width: 640px) {...}. L’objectif de cette feuille de styles est avant tout de poser un socle de bases communes que vous pourrez adapter à vos convenances ou besoins personnels. Préambule : fixer le Viewport

Dan Wellman » Fixing jQuery Click Events for the iPad I recently had a situation where I had built something for a client, tested it, etc and made it live. It worked as intended on ‘normal’ computers, but my boss, who has an iPad, found that it didn’t work at all on the iPad. Well, I say it didn’t work at all, it kinda worked, although it very definitely didn’t work as intended. The thing in question was an animated hero panel, with navigation buttons along the side, which enabled the visitor to see different panels of content by clicking the buttons. What was actually happening was that a single click was being treated as a hover, and so the active style was being applied to the navigation buttons when one of them was pressed a single time. Fixing the issue turned out to be surprisingly easy, we just need to sniff the userAgent string and look for iPad. The code turned out to be as simple as this: var ua = navigator.userAgent, event = (ua.match(/iPad/i)) ?

Responsive Webdesign : cas d'études C’est une évidence, le responsive webdesign occupe le devant de la scène webdesign depuis maintenant de nombreux mois. Nouveauté, les retours d’expériences se multiplient et permettent de gagner en savoir-faire. Petite sélection des articles à lire. Au début du responsive webdesign, difficile de trouver un support clair et précis sur le sujet. Ce qui est au final tout à fait normal me direz-vous ! L’évolution constante du web et de ses technologies ne permettent pas d’aborder un sujet comme le responsive de manière ferme et arrêtée. Aujourd’hui, les agences et les professionnels du web ont clairement inscrit le reponsive dans les process courants. Nealite : retour d’expérience sur le responsive design Zee Agency On enchaine avec le site Zee, l’agence Brésilienne des fondateurs d’Abduzeedo. Zurb – Case Studies Zurb, créateur du framework Responsive Foundation propose une dizaine de cas d’études plus ou moins détaillés. Rainy Pixels – The New Microsoft CSS Tricks .net Magazine RD2 Inc. Viget

How to Design a Mobile Responsive Website To build a mobile site or not to build a mobile site; this is a question at the forefront of many a discussion. There is, however, another option: responsive web design. When, why, and how should you go about designing a responsive website? With mobile internet users set to surpass desktop internet users in the US by 2015, with tablets becoming more popular, and even with TV internet usage increasing, it’s important for companies to provide a great user experience for all their visitors no matter what device they’re on. How does responsive design help us do this? Well, by allowing us to create one website solution that is flexible for different screen widths. Why should you design a responsive site? There are many options to consider when a client asks for a mobile solution for their website, and the suitability of these options depend on the business requirements and budget; it’s also important to consider any existing solutions or sites they already have. You’re starting from scratch

Responsive Data Table Roundup There has been a bunch of takes on responsive data tables since I first published about it. The idea of the original was to abandon the grid layout of the table and make each cell its own line. Each of those lines is labeled with a pseudo element. This creates a much taller table, requiring more vertical scrolling, but does not require horizontal scrolling. It's easier to browse the data without losing context of what's what. Mobifreaks published a very similar idea, which uses the same layout change and pseudo element labeling. Derek Pennycuff took the original and applied the "mobile first" concept. Scott Jehl cooked up two clever ideas. Pretty cool, but clearly all tables can't be converted into charts. Scott's other idea focuses on the problem that large data tables can stretch out the width of a parent container beyond what a small screen is capable of displaying. View Demo Stewart Curry had the idea of just hiding less important columns for smaller screens. Updates Share On

Responsive Web Design Techniques, Tools and Design Strategies Advertisement Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now! Back in January, we published an article on responsive design, Responsive Web Design: What It Is and How to Use It1. To that end, we’ve compiled this round-up of resources for creating responsive website designs. Further Reading on SmashingMag: Link Responsive Design Techniques Link CSS Transitions and Media Queries5 Elliot Jay Stocks provides insight into the combination of CSS media queries and CSS transitions. Responsive Data Tables7 Chris Coyier and Scott Jehl are experimenting with responsive design techniques for displaying data tables. Responsive Images, Responsive Videos Link Responsive Image: Experimenting With Context-Aware Image Sizing15 An alternative approach to fluid images by Filament Group.

15 Responsive CSS Frameworks Worth Considering Taking the next step of our responsive layout coverage (we recently published the articles Responsive WordPress Themes and jQuery Plugins to help with Responsive Layouts), today we are taking a look at responsive CSS frameworks that we feel are worth your consideration. Just like most CSS frameworks, all of the frameworks below will help you rapidly develop sites by eliminating the need to write basic CSS styles yourself, as you would expect. But, on top of that, they also come with a responsive layout helping you to quickly and easily create mobile-specific sites. Less Framework 4 The Less Framework contains 4 adaptive layouts and 3 sets of typography presets, all based on a single grid, composed of 68 px columns with 24 px gutters. Foundation Foundation is a a 12-column, future-friendly responsive grid framework that includes dozens of styles and elements to help you quickly put together clickable prototypes, that can then be adapted and styled into polished production code. MQFramework

Responsive Tables Demo A quick and dirty look at some techniques for designing responsive table layouts. This was put together in haste (and with the aid of Twitter Bootstrap) for What Do You Know Brisbane hosted by Web Directions. I work for a really great little web design agency in Brisbane, and you should say hello. The Unseen Column This technique, first described by Stuart Curry (@irishstu) involves simply hiding less important columns on smaller screen sizes. Example Code The approach I've presented here assumes you know the index of the columns to be hidden. <table> <thead> <tr> <th>Code</th> <th>Company</th> <th class="numeric">Price</th> <th class="numeric">Change</th> <th class="numeric">Change %</th> <th class="numeric">Open</th> <th class="numeric">High</th> <th class="numeric">Low</th> <th class="numeric">Volume</th> </tr> </thead> <tbody> <tr> <td>AAC</td> <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED. Flip Scroll This technique was first published by David Bushell (@dbushell). No More Tables

Related: