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 ! Related:  thomaslecrouhennec

Responsive web development with WordPress — a case study By Rachel McCollin Responsive web design is maturing. Many of us have moved on from thinking about media queries and responsive layout towards addressing the challenges of responsive images, navigation, UX and more. Content and planning are important too. In this article I'll look at some of these considerations in the light of a specific case study — a responsive WordPress site I developed to support the campaign for an elected mayor in Birmingham, England (we'll say nothing more about whether it worked — the result was a 'no' vote — but building the site was fun anyway!) Planning the site The site in question — What's a mayor for? Before any design or coding was done, we needed to know what the site had to achieve. Once we'd agreed all of this and put a team in place, we started to identify exactly what the site should include: Articles and posts: opinion pieces, political analysis and straightforward news. More than just media queries - what this meant for development Resources

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

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

Media Queries Tutorial - Convert Burnstudio into a Responsive Website Howdy Folks! If you’re following the series, we have converted Burnstudio Design Agency from PSD to working HTML/CSS. We have discussed how we will markup the HTML and how we will style it using CSS. By the end of this media queries tutorial you will learn how to convert any website into a responsive website. Let’s get started! Demo | Download Step 1: Preparation Make sure that you followed the previous tutorial where we converted a PSD file into a working HTML/CSS website. Click to see full preview. In the image above you can see the elements are the same but I styled it in a way that will suit the 320px width of a mobile version. Lastly, of course you still need your favorite code editor, debugging tools and lastly the web browser where we can view our coded layout. Step 2: Getting Files Ready Make sure you open up the HTML file and the CSS file in your text editor and we’re ready to go. Step 3: Adding Meta Tag This will take control of the layout on mobile browsers. We’re done, Finally!

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

Avantages et Inconvénients du Responsive Web Design Présentation du Responsive Design Si vous vous intéressez aux évolutions du Web, en voici une qui fait beaucoup parler d’elle. C’est le responsive Webdesign soit une savante formule qui permet de rendre son site ergonomique et adapté aux supports mobiles et aux supports classiques. Chaque évolution amène son lot de questions. Le responsive design permet d’adapter le contenu d’un site sur différents supports. Le Responsive Design fait appel aux nouvelles règles et propriétés du CSS 3 comme par exemple les Media Queries, micro formats … Ces normes sont supportées par la majorité des navigateurs. Les Inconvénients des Sites Internet en Responsive La conception est plus importante dans les projets de sites responsives Le développement d’un site en responsive est un travail ambitieux car il nécessite d’avoir une réflexion en amont plus importante. La conception des boutons, des images et les blocs de textes doivent se mouvoir et se redimensionner de façon parfaite selon chaque support

Related: