background preloader

Responsive Design

Facebook Twitter

Exemples

Responsive Web design not a long-term solution to mobility: Forrester. By Chantal Tode February 3, 2014 Delivering Web content across devices still a challenge With responsive Web design projects proving more complex than expected while still lacking the ability to leverage key mobile functionality, the answer to how to efficiently deliver experiences across multiple devices is still forthcoming, according to a report released today by Forrester and Moovweb. The survey forming the basis of the report found that 63 percent of companies using responsive Web design today believe it is not suitable for long-term use. “One of the biggest things that came out of this was that responsive Web design was viewed by the majority of the respondents as a tactical short-term solution,” said Mitch Bishop, chief marketing officer of Moovweb, San Francisco.

“Most of the respondents that finished the project said that they spent at least 70 percent of their time and effort on these projects on the backend,” he said. The report uncovered some issues with responsive Web design. Le Responsive Web Design ou comment améliorer l’expérience utilisateur. Ce billet a été lu 3175 fois. À votre tour? Le RWD pour adapter votre site aux comportements de l’utilisateur… Avant d’attaquer le développement, penser expérience utilisateur, ergonomie et contenu! Les comportements des utilisateurs mobiles poussent les entreprises à optimiser leur site pour une lecture adaptée à toutes les tailles d’écran.

Le Responsive Design : entendons-nous bien Un site Web non adapté aux smartphones, tablettes, ordinateurs, télévisions connectées… perd une part d’audience (et donc de revenu) non négligeable. Le but du Responsive Web Design est de permettre à un site Web de s’autoadapter à la taille de l’écran de l’utilisateur, pour améliorer encore et toujours l’expérience de l’utilisateur dans la navigation Web. Le Responsive Web Design regroupe une série de techniques de conception graphique, ergonomique et de développement. Les media queries (CSS3),les grilles fluides etles images flexibles. Le contenu et la navigation d’abord, le développement ensuite Et vous? 8 Reasons Why Pageless Design is the Future of the Web. Right now there is a paradigm shift happening in web design. It’s gaining traction, but it’s going to take the leadership of designers and developers some effort to nudge the rest of the web in the right direction.

What direction is that? The one where we finally free websites from the outdated conventions of print design and fully utilize the digital platform they’re built on. Where we kick archaic elements like pages to the curb and instead create unique, satisfying, web-native experiences. With advances in technology from browser capability to broadband limitations, and of course HTML, CSS and JavaScript, vast improvement is now possible and is just waiting for us to make it happen.

Of course, we’ve talked about this before. It’s a wonderful philosophy-driven article that offers several compelling arguments for pageless design. Think of this post as a series of talking points that you can use with your clients, boss, manager or other developers/designers. 1. Why do we have websites? Responsive webdesign : adapter un site à toutes les résolutions.

Le Responsive webdesign (conception adaptative ou réactive en français) représente un ensemble de méthodes et techniques permettant d’universaliser un site Web. Qu’il soit consulté sur ordinateur, tablette, e-reader ou mobile, le site ainsi conçu s’adapte automatiquement à la taille de l’écran. Cette évolution très séduisante du Web pose néanmoins certaines questions d’ergonomie et oblige à repenser la conception des sites. Nous abordons dans cet article les objectifs du responsive design, les critères qui doivent décider à le mettre en œuvre, les recommandations de conception et les considérations techniques.

Objectifs du responsive webdesign Pour commencer, rien de tel qu’une démonstration. Entrons dans le vif du sujet. Les sites Web sont aujourd’hui consultés sur une multitude d’appareils ayant des résolutions différentes Proposer une seule version du site Web censée s’adapter à tous ces terminaux est utopique. Le site ifttt n’est pas adaptable. Responsive ou versions séparées ? Ten things you need to know about responsive design. Type is not one size fits all. That 24-point Helvetica that renders beautifully on a desktop may be impossible to read on a much slimmer mobile device. Typography should follow the same guidelines as the rest of your responsive design. The key concept when it comes to responsive typography is line length. The eye can only handle so many letters and breaks with ease.

To maintain readability, type should be optimized based on screen width. For websites, 50 to 75 characters per line are considered ideal, but that drops to 35 to 50 characters per line on mobile devices. Select a point size for type based on this guideline to ensure optimum readability. Consider the fact that blocks of type need to be easy to read vertically as well, sometimes for many scrolls. Finally, think about the kind of typeface used. Qu'est-ce que le Responsive Web Design ? Plus personne ne doute aujourd'hui que l'usage des smartphones est en train d'exploser. De plus en plus de personnes visitent aujourd'hui des sites web depuis leur navigateur mobile. Sur le Site du Zéro, déjà plus de 5% des visiteurs viennent depuis un appareil mobile. Ils étaient la moitié (2,5%) un an plus tôt.

Le site statcounter.com montre des courbes éloquentes par rapport à l'évolution du mobile par rapport aux ordinateurs de bureau : Evolution de l'usage des ordinateurs et mobiles Vous avez un site ou vous prévoyez d'en faire un ? De plus en plus de monde parle de responsive web design, qui semble être une solution magique à ce problème... mais qu'est-ce que c'est concrètement ? Un site dédié aux mobiles : une fausse bonne idée ? Quand on voit qu'il y a de plus en plus de personnes qui vont sur le web depuis leur mobile, le premier réflexe est en général de dire : Mais c'est simple ! Cela paraît sensé. Etes-vous sûr de vouloir créer plusieurs sites web ? ). Ah bon ? Les Media Queries. Définir ses points de rupture.

Mettre en place une stratégie responsive sur son Web design implique des réflexions en amont qu’il ne faut pas négliger. Le responsive Web design est bien plus qu’une unité de pourcentage : c’est une réelle adaptation du contenant, et parfois, du contenu, en fonction du support de lecture afin de privilégier au maximum la lisibilité des informations. En s’appuyant sur un exemple concret et relativement standard, Nicolas Torres vous montre comment définir intelligemment les différents paliers d’adaptation, également appelés points de rupture.

Le mythe des périphériques Selon une légende urbaine, les points de rupture sont égaux à la taille d’écran des périphériques (devices en anglais). Ceux qui ont d’abord écrit et utilisé un tel manifeste l’ont fait à une époque où l’iPad et l’iPhone dominaient de loin leurs marchés respectifs. Facile donc : on adapte à ces périphériques qui représentent 90% de la navigation portable, et c’est terminé ! Oui, mais non. Une histoire de contenu Le texte. Responsive Web Design, pour tous les sites ? Lors d’une formation, on m’a posé une question toute simple : « Faut-il rendre tous les sites responsives ? ». Ma première réponse est de dire que le contexte l’emporte dans certains cas et donc, il n’est pas toujours pertinent de faire une version mobile. Après réflexion, le sujet est peu plus compliqué que cela. Pour rappel, un site « Responsive » s’adapte à la largeur et à la définition de l’écran (ou de la fenêtre) sur lequel il est affiché.

Historiquement, on a adapté des sites faits pour les ordinateurs aux écrans moins larges des mobiles, puis des tablettes. De plus en plus, la conception se fait directement dans une optique de site responsive sans passer par la case « PC ». C’est un peu paradoxal, quand j’ai commencé à travailler, il y avait encore pas mal de poste de travail équipé d’écrans de 13″ avec une résolution de 640×480 ou 800×600 pixels. Dans le même temps, en 2001, j’ai travaillé pour Orange sur le portail WAP. Les mobiles Tablette et PC Support, usage et contexte. Le responsive design ne fait pas tout : 4 étapes pour concevoir un site adapté aux utilisateurs mobiles.

Lorsque nous abordons le sujet du mobile avec des créateurs de sites web, nous entendons souvent des phrases comme : « Nous avons fait un site responsive, donc il est adapté aux utilisateurs mobiles ». Si seulement c’était aussi simple que ça… Les résultats obtenus avec le responsive design sont magnifiques, et c’est probablement le seul moyen pratique de s’adapter aux très nombreuses tailles et résolutions d’écran du monde mobile.

Cependant, le responsive design est une technique, et non pas une solution. Dire que le responsive design résout tous les problèmes rencontrés par vos utilisateurs mobiles, c’est comme dire que posséder un marteau vous permettra de construire une maison. La plupart des discussions sur le responsive design concernent essentiellement la mise en œuvre de cette technique : le prototypage plutôt que l’utilisation de designs statiques, les stratégies de navigation, la forme des icônes, etc. Quelques conseils sur la démarche à adopter 1. 2. 3. 4. Complex Navigation Patterns for Responsive Design. The most frequently asked question I get since posting my responsive navigation patterns article is: How do I handle complex navigation for responsive designs?”

Great question, but before we get down to brass tacks, I urge you: use mobile as an excuse to revisit your navigation. Look at your analytics. What are your experience’s key sections? Where are people spending most of their time? Another thing: if you have a zillion sections and pages, prioritize search. OK, now that all that’s out of the way, time for some real talk. Sometimes you just have a complex navigation. The Multi-Toggle Barack Obama's Multi-Toggle Navigation from his redesigned campaign site The multi-toggle is basically just nested accordions.

Quick tip: use one of two emerging icons: the plus sign (+) or downward caret (▼ ▼) to let users know there’s more content. Pros Scannable – users can quickly scan parent categories before making a decision to go to the next level.Scalable – Got a menu that’s 17 levels deep? Media Queries. Mobile web content adaptation techniques. Introduction This article will help you pick from amongst the many techniques for building a mobile website. It doesn't describe how to do it, rather it instead tries to help you to pick the right approach. Before we begin it's worth clarifying exactly what the goal of the exercise is. Generally speaking, people who are looking to build a mobile site fall into two categories. They're either: trying to make an existing website work passably well on mobile devices or, building a mobile experience from the ground up These two goals are quite different and tend to result in different approaches and solutions.

In order to distinguish between the techniques available this article will use the terms resolution independence and content adaptation respectively. Evolution of content adaptation This article is designed to serve as a reference that describes many of the content adaptation techniques available, and some of the benefits and issues with each one. Responsive Design Progressive Enhancement. Sender 11: Mobile screen size trends. Over at mBricks my colleagues have put a lot of work into the device database (we work with WURFL data and contribute back as well as we can). I took the opportunity to take a closer look at screen size trends. The data I have covers about 400 different device models sold from 2005 to today. This shows the the most significant screen sizes, from the smallest to the largest.

I have added a couple of upcoming phones as well, they are the ones with the dotted lines. Over the years the relative screen size difference has increased. You can see that the smaller screens have a portrait orientation and the large screens have a landscape orientation. Resolution I did a rough dpi (ppi to be exact) calculation for some popular phone models. There is an upper limit to what dpi is meaningful. Unfortunately, for LCD screens, increased pixel density doesn't give us more brightness. Yes, a grand total of 26 different screen sizes. It is obvious that 240 x 320 (also called QVGA) is on a roll. Future. Touch Target Sizes. People interact with touch-based user interfaces with their fingers. So user interface controls have to be big enough to capture fingertip actions without frustrating users with erroneous actions and tiny targets. Ok, so how big?

In the iPhone Human Interface Guidelines, Apple recommends a minimum target size of 44 pixels wide 44 pixels tall. Since physical pixel size can vary by screen density, Apple's pixel specifications apply best to the iPhone's 320 by 480 pixel, 3.5 inch display (164ppi). Since the release of the iPhone 4's Retina Display (326ppi) Apple has updated these specs to points instead of pixels. In the Windows Phone UI Design and Interaction Guide (PDF), Microsoft goes further and suggests: a recommended touch target size of 9mm/34px; a minimum touch target size of 7mm/26px; a minimum spacing between elements of 2mm/8px; and the visual size of a UI control to be 60-100% of the touch target size. Know of any other resources for touch target sizes?