background preloader

Développement web : le responsive design

Facebook Twitter

Responsive webdesign avangtages et bonnes pratiques. Ce n'est un secret pour personne, la navigation mobile sur internet fera mordre la poussière au traffic de bureau classique -plus tôt que vous le pensez. Aux États-Unis, il représente déjà 20% du web global. En Asie et en Afrique, plus de la moitié de tout le traffic provient du mobile. En plus de cela, il y a des milliers et des milliers des millards d'appareils qui peuvent être utilisés pour accéder au web. Concevoir des sites adaptatifs qui fonctionnent correctement dans ce nouvel écosystème est un vrai nouveau défi.

La question à se poser est de savoir comment nous pouvons relever ce défi. Le design adaptatif (aka responsive webdesign), défini par Ethan Marcotte, explique comment construire un site fluide, qui peut se rétrécir ou s'agrandir, pour s'adapter à toute taille d'écran sur n'importe quel appareil. Avec une grille fluide, des images flexibles et des media queries, nous n'avons pas à concevoir, un site mobile dédié séparé. Prototypes et itérations rapides Préparé pour l'avenir.

Safari 9: Using Responsive Design Mode. If you’re a Web designer, boy, are you gonna love this. Under the secret “Develop” menu, the new version of Safari is hiding something cool—the ability to view a site as it would appear on different devices and under different user agents, all in one place! That’s just…well, that’s awesome, is what that is. To use this, first you’ll need to turn on the aforementioned “Develop” menu, the toggle for which is within Safari > Preferences under the “Advanced” tab. Once that’s on, you’ll see “Develop” appear in your menu bar.

Click it, and then choose “Enter Responsive Design Mode.” Then you’ll be treated to a screen where you can see how your current webpage would look on quite a few different devices. If you want, you can also change the User Agent (which browser the site will think it’s loading on) with the drop-down menu at the upper-right. And finally, the site you’ve got open will have little draggy handles around it so you can change the dimensions to match your specific needs.

Top 10 des erreurs Responsive Web Design à éviter. Pourquoi un site web responsive est si important ? - Clécomweb. L’utilisation des tablettes et des smartphones et Iphone est en constante augmentation. Une étude récente (Mobify) a démontré que 30% des internautes abandonnent une transaction si le site web n’est pas adapté à leur mobile, tandis que 57% des clients mobiles ont tendance à quitter un site mobile s’il prend plus de 3 secondes pour se charger. La firme de Mountain View a mis à jour son algorithme cette année, privilégiant ainsi les sites compatibles pour l’affichage mobile. Google cherche à mettre en avant les résultats des sites internet adaptés pour les mobiles. Il y a quelques mois, le label « Mobile Friendly » lancé par Google permet aux propriétaires et webmasters de savoir si les pages de leur site s’affichent sur le mobile. Mais si mon site n’est pas responsive ou “Mobile Friendly” ?

Il sera toujours accessible mais le moteur de recherche de Google le déclassera dans ses pages réponses par rapport aux sites « Mobile Friendly ». Et pour sûr nos tablettes ? Conclusion : 1 internaute français sur 3 se connecte à Internet via les 3 écrans. La croissance des connexions à Internet est portée par celle du mobile et de la tablette selon Médiamétrie/Netratings.

Le monde français du digital est de plus en plus multi-canal. En juillet 2015, un tiers des internautes (33,3%) ont ainsi utilisé les trois écrans (ordinateur, mobile et tablette) pour se connecter à Internet, selon Médiamétrie/Netratings. Cela représente une évolution de 4,5 points par rapport à janvier 2015. Près de 9 Français sur 10 (87,6%) se sont connectés à Internet via au moins un de ces trois écrans au cours du mois de juillet. Ici, la hausse de 947 000 visiteurs uniques par rapport à janvier 2015 est imputable à la progression de la consultation depuis mobile et tablette. En juillet 2015, plus de 3 internautes sur 4 (76,5%) se sont connectés à Internet depuis leur mobile, en progression de 1,8 point depuis janvier 2015. Quant à la tablette, 42,5% des internautes l’ont utilisée au moins une fois au cours du mois, soit une hausse de 5,5 points sur la même période. Pourquoi l’essor du marketing mobile nous renvoie au web des années 90. Paradoxalement, s’il est recommandé de s’inspirer du web, il est primordial de ne pas traiter votre application mobile comme une extension de votre stratégie web.

En 1995, j’ai décroché mon premier emploi dans l’univers du web. A cette époque, peu de personnes en avaient entendu parler en dehors des campus universitaires. 4 ou 5 ans ont été nécessaires pour qu’internet explose en devenant grand public et soit adopté par les entreprises. En 1999, j’ai été embauché en tant que webmaster pour EDS (aujourd’hui HP). Le web était encore considéré comme une nouvelle technologie et personne n’était encore en mesure de prédire sa place et son utilité dans l’organisation de l’entreprise.

Le réflexe dominant consistait à dire : « tout le monde a un site internet, donc il nous en faut un aussi ». Les vieilles habitudes ont la vie dure. Observons comment les entreprises sont en train d’approcher le marketing mobile comme elles l’ont fait avec le web il y a une vingtaine d’années. Apprendre du passé.