background preloader

Comment tester un site responsive? (partie 1)

Comment tester un site responsive? (partie 1)
Savoir si un site développé se comporte bien en responsive est devenu une nécessité de nos jours. Il est donc important de connaître tous les moyens mis à notre disposition pour réaliser cette étude. Deux lignes de conduites (probablement complémentaires) sont à prendre en compte : soit on teste sur des outils simulant le comportement des appareils, soit on teste directement sur les supports que l'on souhaite prendre en charge. Bien évidemment, la méthode la plus fiable reste celle qui consiste à utiliser le smartphone ou autre appareil dont l'éligibilité est à vérifier. La première méthode est moins fiable mais reste intéressante, voici pourquoi : Avantages Pas d'installation sur le poste et de ce fait, compatible avec toutes les plateformes. Inconvénients L'évènement Touch n'est généralement pas pris en charge. Nous vous proposons dans un premier temps de découvrir les différentes méthodes de simulations proposées par les éditeurs de navigateurs et des services en ligne. Chrome Firefox

http://www.alsacreations.com/article/lire/1634-comment-tester-un-site-responsive-partie-1.html

Related:  Web mobileSite responsiveSEO - Référencementresponsive

Media queries Une media query (ou requête média) consiste en un type de média, et au moins une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou leur affichage des couleurs. Ajouté dans CSS3, les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même. Syntaxe Les requêtes de média sont formées d'un type de média, et peuvent, d'après la spécification CSS3, contenir une ou plusieurs expressions, traitant des fonctionnalités du média, qui sont interprétées comme vraies ou fausses. Le résultat de la requête est vrai si le type de média indiqué correspond au type de périphérique sur lequel le document est affiché et que toutes les expressions dans la requête sont vraies.

Google récompense les sites responsive Google est le premier moteur de recherche au monde. En France 9 français sur 10 l’utilisent au quotidien. A partir du 21 avril 2015, le célèbre moteur de recherche apportera des modifications dans ses algorithmes pour récompenser les sites responsive dans les résultats de recherche. Cours de responsive Webdesign - Jonathan Path Voir la présentation sur SlideShare Voir le cahier des charge sur Google Drive Contexte Référencement Google SEO: 20 étapes pour référencer site Liste 20 Étapes pour référencer votre site dans les moteurs de recherche. État de l’art du référencement Google SEO Cet article est une nouvelle mouture des précédentes versions que j’avais réalisées auparavant, en 2010 (Référencement Google SEO de site en 15 étapes) et en 2012 (Bonnes pratiques SEO en 20 étapes).

Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Approche historique

Comprendre le Viewport dans le Web mobile Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de "fenêtre" réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile. Comprendre la notion de viewport est absolument indispensable dans un projet d'intégration de site web pour tablettes et smartphones, ou dans un esprit d'adaptation "Responsive Web Design". Les différentes surfaces d'un mobile

Responsive design : définition, fonctionnement, ressources et tutoriels « Design Spartan : Art digital, digital painting, webdesign, illustration et inspiration… Si vous vous intéressez de près ou de loin au webdesign ou à l’intégration, vous n’avez pas pu échapper au dernier terme à la mode : le “responsive web design”. Cette avancée technologique est également une nouvelle philosophie de création de site. Voici un article pour définir ce qu’est le “responsive web design” et expliquer quels en sont les points-clés (puis plein de liens, de tutoriels et de ressources super cools aussi !).

Résolution, tablettes & smartphones Avec une troisième génération d’iPad, Apple a semé le trouble dans les résolutions d’écrans. En effet l’iPad 3 présente un nombre plus élevé de pixels que la majorité des PC avec une taille d’écran divisé par deux. Je propose donc un petit tableau pour essayer de faire le point sur le parc des résolutions d’écrans. Les smartphones convergent vers une taille physique de l’écran de 3,5 pouces. Cela correspond simplement à la taille d’un objet que peut saisir la main d’un adulte. LabSense, l’algorithme qui rêve de remplacer les rédacteurs Quelques millisecondes pour rédiger un feuillet de 1 500 signes ? C’est ce qu’affirme pouvoir faire LabSense, une start-up parisienne qui a développé une technologie de rédaction automatisée des contenus. « Notre algorithme utilise la data dont dispose une entreprise, la rend intelligible et la transforme en langage naturel », explique Edouard de Ménibus, le confondateur de l’entreprise. Si l’on pense à la presse, c’est avant tout d’autres secteurs du Web que cible la société. Parmi ceux-ci, des e-commerçants qui ont besoin de contenus pour leurs fiches produits, les annuaires en ligne, ou encore les instituts de sondage pour la présentation de leurs études. « Un client qui commercialise les offres de 300 000 hôtels dans le monde souhaitait une fiche unique pour chaque établissement. Une fois les paramétrages effectués, il a fallu une nuit de temps-machine pour rédiger les 300 000 fiches », affirme M. de Ménibus. LabSense: les données clés

Utilisation avancée des sélecteurs JQuery - Olivier El Mekki Après avoir utilisé longtemps Prototype et Scriptaculous qui forment le framework Javascript par défaut dans Ruby on Rails, les sélecteurs de JQuery m’ont convaincu de passer à ce dernier (enfin, ça et la possibilité de ne charger qu’une partie du DOM de la réponse dans les requêtes ajax replace ). Dans un article récent faisant partie d’un ensemble d’articles d’initiation à JQuery, Dave Lizotte à fait une présentation rapide des sélecteurs. J’y reviens maintenant pour présenter les fonctionnalités avancées. Le DOM, c’est quoi? Au préalable, il est important que vous ayez saisi ce qu’est le DOM , car c’est sur lui qu’agissent les sélecteurs. Je ne vais pas réécrire ici la documentation du w3c , sachez simplement, si vous êtes étranger à cette notion, qu’il s’agit d’une structure représentant votre fichier HTML.

Comment Apple fait tenir un écran 4 pouces dans le nouvel iPhone ... et résistance améliorée aux rayures dans une vidéo détaillée ! - iPhone 6, 6 Plus, iPad Comment Apple fait tenir un écran 4 pouces dans le nouvel iPhone ... et résistance améliorée aux rayures dans une vidéo détaillée ! Par iSt le vendredi 3 août 2012, 16:22 - Rumeurs iPhone & iPod Touch - Lien permanent Les pièces détachées du probable nouvel iPhone (iPhone 5, iPhone 6 ou autre cf cet article) n'en finissent pas de se répandre dans les rédactions. Cette fois-ci, on dépasse le stade de la photo pour avoir enfin des dimensions ainsi qu'une longue vidéo. C'est ETrade Supply, spécialisé dans les pièces détachées qui nous propose une analyse précise des différences entre la face avant du nouvel iPhone et celle des iPhone 4 et 4S. On comprend vite comment un écran de taille plus importante peut tenir dans une boitier d'iPhone plus haut mais pas tant que cela et on y découvre également d'autres différences (attention, maltraitance d'écran inside ;-) ) :

Les 200 facteurs de référencement Google 2014: la liste complète! Aujourd’hui, j’ai pris le temps de vous résumer les 200 facteurs de référencement Google de cette année 2014. La liste a été mise à jour depuis la parution de l’infographie d’origine en Juin 2013. Adaptés à partir de l’article du très bon site Backlinko, la traduction de cet article m’a pris un temps fou. J’espère qu’il vous sera utile! Vous allez le voir, il est très compliqué d’être blanc comme neige aux yeux de notre cher et tendre Google.

Related: