background preloader

Quatre limites très gênantes du Responsive Web Design

Quatre limites très gênantes du Responsive Web Design
Très à la mode, le Responsive Web Design peut cependant ne pas convenir à certains sites. L'expert Rémi Parmentier, du site HTeuMeuLeu.fr, explique certaines limites. "Il y a clairement un effet de mode. 2012 a sans doute été une année marquée par l'adoption du Responsive Web Design. Mais des questions vont aujourd'hui commencer à pouvoir sérieusement émerger autour de cette technique. 1- Le problème de l'affichage des publicités Le premier problème, rédhibitoire pour certains sites monétisés : l'affichage de la publicité, très fortement chahuté par le Responsive Design. 2- Le problème de la connexion des smartphones Le but du Responsive Web Design est de servir le même contenu web aux smartphones, tablettes et ordinateurs. Par exemple, charger dynamiquement une carte issue de Google Maps ne pose aucun problème sur un ordinateur classique, mais en posera depuis un smartphone avec une connexion Edge. 3- Des problèmes de maintenance ? Des pistes d'amélioration à creuser ? Related:  Technos mobilesResponsive webresponsive webdesign

Browser compatibility — viewports Page last changed today Related files: Last major update on 12 November 2013. Here’s the inevitable compatibility table that goes with my viewport research. It treats the viewports themselves as well as some related items. position: fixed was moved to the CSS test pages. See A tale of two viewports for a further explanation of these terms. CSS pixels Expand and contract with zooming; it’s this pixels that are taken as measurement grid for all CSS declarations. Device pixels Formal number of pixels on device. Device pixel ratio The ratio of physical pixel count and ideal viewport. Layout viewport The initial area of the HTML element. Visual viewport The actual screen viewport through which you look at the layout viewport. Ideal viewport The one you get when using width=device-width. This table looks into the properties that are necessary to read out useful information about the three viewports and the two types of pixels. Test page. iOS 6 WebKit 536 Default browser on iPhone 4S with iOS 6.1.3 iOS 7 Presto

E-mail responsive design : ne passez plus inaperçu(e) dans les boîtes mail ! C’est le Père Noël qui l’a dit ! Comment créer une nouvelle expérience utilisateur en e-mailing ? En y ajoutant une pincée de responsive web design, bien sûr ! Saviez-vous que plus de la moitié des internautes ont tendance à refermer, voire effacer un e-mail non optimisé pour leur interface mobile ? Quand on sait ça, on se dit que le responsive design a de beaux jours devant lui… A l’approche des fêtes de fin d’année, vos communications vont se multiplier, raison de plus pour foncer ! Répondez au besoin de mobilité : équipez-vous ! Face à la multiplication des supports de connexion et à l’usage croissant des terminaux mobiles, l’e-mailing est confronté à de nouveaux défis : l’optimisation de son affichage sur toutes les tailles d’écran possibles et imaginables (1). Aux US, les supports mobiles ont déjà dépassé l’ordinateur comme plateforme de consultation des emails. L’e-mail responsive : de l’option à l’obligation ! En image ça donne quoi ? A vous de suivre !

"Suis-je mobile" : de l'iPhone à l'écran 17 pouces, à quoi ressemble votre site web ? Envie de voir à quoi ressemble l'affichage de votre blog sur des terminaux de plus ou moins grande taille ? Le site "suisjemobile.com" vous donne un aperçu réaliste de ce que les internautes et mobinautes voient de vos pages, quelque soit le terminal utilisé. A l'heure de la mobilité et de la multiplication des terminaux avec des tailles d'écran différentes, pas facile de savoir à quoi ressemble son site web ou son blog sur un un smartphone, une tablette ou un écran de PC. Il est pourtant essentiel aujourd'hui d'adapter le design de contenus web aux différents terminaux utilisés, pour éviter de faire fuir ses visiteurs. Le site "Suis-je mobile" va vous aider à y voir plus clair si vous souhaitez tester votre "compatibilité mobile" : insérez l'URL de votre site dans une barre d'adresse, puis simulez l'affichage de votre page dans des écrans virtuels de différents formats : smartphone (affichage horizontal ou vertical), tablette ou écran de PC de bureau. Essayer Suisjemobile.com

How many web browsers support responsive design? | Gabe Sumner For anyone investigating Responsive Design it’s natural to ask what percentage of web browsers support this design technique. Â However, the real question you’re asking is “what percentage of web browsers support CSS3 media queries?”. Â CSS3 media queries are the primary technology involved in responsive design. Responsive design is supported by 70-80% of today’s web devices However, the complete answer is a lot more nuanced than this. This post will examine the details missing from the generic statistic above. What web browsers support CSS3 media queries? CSS3 media queries are the primary technology powering responsive design. [Image courtesy of caniuse.com] The biggest red flag is Internet Explorer, which only recently began supporting CSS3 media queries with IE9. [Image courtesy of statcounter.com]Â If we add IE8 (22.3%), IE7 (3.96%) and IE6 (1.85%) then we quickly begin to climb towards the 20-30 non-supported percentage stated at the beginning of this post.

J-5. Google bientôt "mobile-friendly" : faut-il foncer vers le Responsive ? - JDN Un design Responsive a des avantages, mais ce n'est pas la panacée. 5 jours avant la mise à jour de Google, voici 2 erreurs souvent vues lors des migrations vers le responsive. J-5. Ce 21 avril, les résultats que va remonter Google sur les mobiles vont privilégier les pages optimisées pour ces terminaux, c'est-à-dire celles qui bénéficient du label "site mobile" (aussi appelé "mobile-friendly"). Alors que cette mise à jour se rapproche, le Responsive Web Design peut apparaître comme la solution idéale. Officiellement recommandée par Google, cette solution offre clairement d'attractifs avantages, mais elle n'est pas idéale non plus, et certaines erreurs sont souvent commises lorsque ce design est adopté. En voici deux, sans doute parmi les plus vues, mais ce n'est pas exhaustif... Erreur 1 : croire que le Responsive Web Design est la meilleure solution pour tous les sites "Le Responsive Design, ce n'est pas la solution à tout", prévient d'emblée Aymeric Bouillat.

Responsive Website Design – What is it? [Infographic] » Smashfreakz Responsive website design seems to be a buzzword in the internet marketing world these days. But what is it, really – and why should you pay attention? In the web marketing and development space, new things are popping up every single day – and many fizzle just as quickly as they appear. Responsive design has been around for some time now, and it’s gained traction as a preferred website design practice for many web developers. The infographic below helps to explain the basics of responsive website design: what it is, how it works and the major benefits. Source : Written by Agus Yulianto Smashfreakz delivers Useful and Informative article about Design, Web Resource, WordPress, Top List, Infographic, Inspiration, Photography and Many more.

Responsive Design, la panacée pour le SEO ? En matière de SEO, les attractifs avantages du Responsive Web Design ne doivent pas éclipser l'intérêt d'un site mobile dédié, qui peut se révéler plus intéressant. Récapitulatif des avantages et inconvénients de ces deux voies. Le Responsive Web Design a clairement le vent en poupe. Cette solution permettant d'adapter le même site aux résolutions des mobiles, des tablettes et des PC "Desktop" classiques compte également de sérieux atouts en matière de SEO. Ils sont désormais bien connus. Autre argument, tout aussi souvent avancé : comme le Responsive Web Design concentre sur une seule URL les versions mobile et Desktop, cette URL unique va donc pouvoir bénéficier de tous les backlinks, qui ne peuvent ainsi donc pas se disperser vers une URL dédiée à la version mobile (URL de type m.monsite.fr). De quoi apporter un avantage SEO considérable aux sites "responsive" ? Une version mobile dédiée préférable pour certains sites ? Premier exemple : Pizza Domino.

Web responsive : Google publie un kit de démarrage Pour encourager davantage les développeurs Web à adopter le design responsive, Google a publié un ensemble de modèles disponibles au téléchargement. A l'ère Post-PC, les sites internet sont consultés non seulement sur l'ordinateur mais également sur plusieurs smartphones et tablettes arborant des diagonales différentes. Les pages ainsi que leurs contenus devront donc s'adapter dynamiquement à la définition de l'écran. Google favorise d'ailleurs au sein de son moteur l'indexation des sites responsive. La firme californienne a publié cette semaine son Web Starter Kit. Concrètement il s'agit d'une page HTML présentant divers éléments qui seront automatiquement redimensionnés selon le terminal utilisé par l'internaute. Bien entendu, Google n'est pas la première société à proposer de tels outils. Téléchargez Web Starter Kit A lire également : Post PC : est-il temps d'adopter le Responsive Web Design ?

Responsive Design : Le guide de référence pour les SEOs Depuis février 2012, le smartphone a quasiment atteint 50% du marché mobile aux Etats-Unis. 2012 est ENFIN « l’année du mobile », et cela signifie que vous avez besoin de vous faire votre propre expérience en tant qu’utilisateur. Ami SEO, gardez un œil sur vos stats Google Analytics (statistiques) – le marché du smartphone n’a pas fini de progresser ! Avec toute l’attention que le responsive web design attire, que pourrait faire d’autre les marketeurs et les SEO qui veulent réussir que de s’orienter vers des stratégies mobile à long terme ? Avant tout, qu’est-ce que le Responsive Web Design ? En bref, le RWD (Responsive Web Design, «Web Design réactif» en français) est une technique utilisant une mise en page souple (qui « étire » l’écran en s’adaptant dynamiquement au mieux) en plus des « media queries » CSS, qui appliquent différentes feuilles de style (CSS) basées sur la taille de l’écran de l’appareil. Exemple de Responsive Web Design installé par UC San Diego. Application mobile

"Post pas forcément pertinent, ce qui n'est pas clairement expliqué c'est que pour avoir un site responsive, il est indispensable de le penser/concevoir dès le début du projet."
(tout est dans les commentaires du post) by agnesdelmotte Jan 31

Related: