Le responsive design par plus petit dénominateur commun

Le développement de votre site selon les différents tailles d’écrans

eMarketer: Have ESPN sites transitioned to responsive web design?

Ryan Spoon: There are sites that are responsive, like Grantland, and  others that we’re testing for responsive. As you can imagine, it’s an  undertaking to roll out responsive given our size. We need to do it holistically  and in a way that is well thought out from a functional, design, content and  product perspective. I can say we’re experimenting with it with absolute  enthusiasm. If you open up Grantland, you’ll notice that it has different break  points for the iPad vs. a 20-inch screen vs. the iPhone.

We’re always thinking from a mobile-first mentality. We want to create the  best experience for the fan in whatever environment they’re in—in native  applications or the mobile web. The fan’s experience could be on their phone,  tablet or computer—all have different screen sizes. Responsive is a key part of  the strategy going forward in that it allows us to maneuver among all those  screens in a way that enables us to serve the fan best wherever they are.

eMarketer: How does ESPN define responsive design? Definitions among  publishers seem to vary wildly.

Spoon: How you define it impacts how you build for it. At the simplest  approach, we’re building everything from a mobile-first perspective, and then we  apply that globally. What that means is that we want to build the absolute best  experience for mobile devices and then make sure it’s equally fantastic for  tablet and computer in a way that’s universal. We’re mobile-first and we start  with the smartphone. It’s challenging to take the other approach because  distilling the largest screen possible into the smallest is a difficult cycle.  We need to be thoughtful about the real estate, the content, the layout,  advertising, etc.

We want to offer a universal experience that renders differently based on  where the fan is. To me, those core experiences are on the smartphone, tablet  and big screen. But it’s a universal experience that just lays out and renders  differently.

eMarketer: To what extent is ad serving and ad inventory affected on a  responsively designed site? Are there any issues or challenges there that you  can determine at this point?

Spoon: I think that there would be issues if you didn’t think about it  from the ground up as you’re building the site. And if you are thinking about  responsive, and advertising is functioning the way the web does today, then you  might ask those questions once it’s launched. But that’s not our approach.

Our approach is to build the best experience for each specific environment.  That means delivering content, video and scores and a great ad experience. As  long as you take that approach from day one and build these things from the  ground up, as opposed to bolting them on, everyone wins. Advertising is a key  part of that.

eMarketer: Can you share insight into the percentage of ESPN’s traffic  that’s coming from smartphones and tablets?

Spoon: I don’t have the exact numbers, but directionally I can tell  you it’s changed in a way that is absolutely up. Some of that traffic is from  native-usage applications and some of it is from the mobile web. Our traffic  depends on the time of day and seasonality. The type of content that is consumed  in the morning vs. at lunch vs. in the evening and then post-game are very  different, and they’re also consumed in different locations.

eMarketer: Does EPSN consider tablets mobile or are they an extension  of the desktop?

Spoon: I consider tablet part of mobile. Obviously it has some desktop  features. But the interesting part is that responsive design, at the highest  level, suggests that you are creating a single experience served differently for  each device. That’s a kind of unification, if you will. So our approach,  generally, is using the best screen available. For certain content types like  WatchESPN, for instance, the best screen available might be your iPad. For  scores, it might be your phone. And for the piece on Michael Jordan’s 50th  birthday in ESPN The Magazine, which is thousands of words, it might be the  desktop. In some cases the best screen available is the 60-inch TV in my living  room via the WatchESPN app that ports the content over to my TV.

Read more at http://www.emarketer.com/Article/ESPN-Responsive-Design-Build-Best-Experience-Each-Platform/1009898#gjfZ6rperUkgXr6X.99

La notion de Responsive Web Design (conception de sites web adaptatifs) regroupe différents principes et technologies qui forment une approche de conception de sites Web dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation. L’utilisateur peut ainsi consulter le même site Web à travers une large gamme d’appareils (moniteurs d’ordinateur, smartphones, tablettes, TV, etc.). Le Responsive Web Design est souvent abrégé par RWD dans les articles traitant du sujet.Principe

La notion de Web adaptatif repense la manière de concevoir les parcours de navigation sur Internet, puisqu’il ne s’agit plus de concevoir autant de parcours qu’il y a de famille de terminaux mais de concevoir une seule interface auto-adaptable. Ainsi, les sources d’information et les socles techniques ne sont pas dupliqués. Cela engendre des économies d’échelles dans la conception et la maintenance de sites internet bénéficiant de ce mode de conception.

Composants principaux

Un site web pensé sur le principe du RWD utilise la technologie CSS3 media queries, une extension de la règle @media pour adapter la mise en page à l’environnement de consultation grâce à une grille fluide dans laquelle se casent les différents contenus de la page^.

• Media queries permet à la page d’utiliser des règles CSS différentes en fonction des caractéristiques du terminal de consultation. Le plus communément il s’agit des règles appliquées en fonction de la largeur du terminal. Ces différentes largeurs sont appelées « points de rupture » et correspondent à un besoin de modifier la mise en page à partir d’un certain seuil critique pour la facilitation de la navigation et de la lecture du contenu.
• Le concept de grille fluide consiste en un dimensionnement relatif des différents blocs de la page. Les unités relatives comme les pourcentages ou les EMs sont assez adaptées pour cela, beaucoup plus que les unités absolues comme les pixels ou les points.
• Les images ayant un besoin de flexibilité sont également redimensionnées en unité relative, afin de prévenir un éventuel débordement du contenu en dehors de son élément conteneur.

Technique

Le concept de RWD, tel que décrit par Ethan Marcotte s’appuie sur les trois éléments techniques cités précédemment.

Si les Media Queries sont souvent mises en avant comme l’élément technique principal du Responsive Web Design, pour Marcotte E., ils ne servent qu’à apporter quelques modifications dans l’interface quand l’utilisation de grilles fluides ne permet pas de résoudre tous les problèmes liés à l’adaptabilité du produit^.

Cette « sacro-sainte trinité », comme l’appelle Raphaël Goetter, est parfois critiquée, certains considérant que la grille fluide n’est pas nécessaire pour avoir un produit complètement adaptatif.

Pour faciliter la création de templates responsives pour le web, et gagner du temps, il existe de nombreux framework en responsive CSS (Twitter Bootstrap, Foundation, Gumby, Skeleton, …]

Conception et approches : Mobile First (le mobile en premier)

Le concept de RWD est apporté avec la multiplication des terminaux de consultation de sites web. Il convient d’avoir à l’esprit deux approches différentes du Design de site web adaptatif.

La notion de « Mobile First » peut-être considérée comme un mode de pensée dans lequel on privilégierait la construction d’une interface ergonomique pour terminaux mobiles avant d’établir l’ergonomie pour un terminal « desktop » (de bureau). Ce qui est, dans l’histoire d’Internet, l’affichage traditionnel. Cette pensée à pour objectif d’améliorer l’expérience utilisateur (UX)

L’élaboration d’une interface ergonomique sous la contrainte d’un faible espace d’affichage force à épurer au maximum les éléments visibles par l’utilisateur final. Une tendance que l’on retrouve de plus en plus dans l’ergonomie des interfaces web.

Cette pensée est de plus en plus privilégiée par des outils destinés à la création de site web. Par exemple le CMS Drupal élabore la version 8 de son CMS en essayant d’intégrer cette pensée « Mobile First »^[10]. L’augmentation constante des ventes de « Smart Connected Devices » (PC, Smartphone et tablette) a augmenté l’intérêt de réalisation de templates en RWD pour la plupart des outils de gestion de contenu. WordPress et Joomla proposent également des design intégrant la dimension responsive. Pour aller plus loin, de nouveaux Système de gestion de contenu intègrent le responsive web design dans leur conception. Certains CMS comme Rubedo intègrent nativement des systèmes de mise en page à l’aide de Grille Fluides et permettent (grâce aux Media Queries) de définir les éléments des pages qui s’afficheront en fonction des support à l’aide de simples cases à cocher.

Déclinaison

Le Responsive Web Design peut s’appliquer à d’autres usages qu’un site internet^[11]. Tout ce qui utilise des technologies web peut être pensé adaptatif. Il est ainsi possible de concevoir des emails HTML adaptatifs, des applications HTML5 mobiles adaptatives ou bien des applications Facebook Responsive.