On en parle ici, ici, sur wordpress-fr.net et Matt Mullenweg a rédigé un post à ce sujet. Voici les fondamentaux pour sécuriser un site WordPress.

Une attaque massive par brute force

Le principe de ce genre d’attaque est simple. Des pirates essaient de deviner votre identifiant et mot de passe pour accéder à votre site et le pirater. Même si depuis sa version 3.0 WordPress permet de choisir son identifiant lors de l’installation, de nombreux administrateurs ont utilisé par défaut l’identifiant « admin ». La moitié du chemin est parcouru puisqu’il ne reste plus qu’à deviner votre mot de passe.

Les pirates utilisent des réseaux de machines (botnets) afin de mutliplier le nombre de tentatives. Des milliers de robots (les bots) vont alors tenter des combinaisons de login/mot de passe afin de forcer le cadenas de votre site.

Attention aux mots de passe faibles

Le problème se pose si vous avez choisi un mot de passe faible. Pour effectuer ce genre d’attaque les pirates demandent à des machines robots de tenter des listes de mots de passes en se servant d’une sorte de dictionnaire. Pour vous donner un exemple voici les mots de passe qu’on retrouve le plus fréquemment lors de ces attaques :

• admin
• admin123
• 123456
• 123123
• 123456789
• password
• 1234
• root
• 1234567
• 12345
• qwerty
• welcome
• pass
• abc123
• 12345678
• 1111
• test
• monkey
• iloveyou
• dragon
• demo

La solution : sécuriser un site WordPress

Protéger le compte administrateur

Puisque les pirates tentent d’accéder à votre site avec le login « admin » et les mots de passe évoqués plus haut, la solution consiste à changer l’identifiant du compte administrateur si celui-ci est admin, et à renouveler son mot de passe en en choisissant un plus fort.

Limiter le nombre de tentatives de connexions

Il existe plusieurs moyens de limiter les tentatives de connexion.

Etant donné que des milliers de machines sont utilisées le blocage par adresse IP ne sera pas efficace (l’hébergeur Hostgator qui a publié l’alerte ce we aurait dénombré plus de 90 000 adresses IP différentes).

Une meilleure alternative consiste à activer une authentification en 2 temps (2-factor authentication). Il existe bien entendu un plugin pour le mettre en place rapidement sur votre site : le plugin Google Authenticator.

Mettre à jour sa version de WordPress et les plugins

Des failles de sécurité sont régulièrement corrigées dans WordPress, il faut le mettre à jour (à l’heure de cet article on en est à la version 3.5.1) ainsi que les plugins.

Conclusion

Si vous n’utilisez pas l’identifiant admin, que votre mot de passe est un peu plus compliqué à trouver que « 123456″ ou « motdepasse » et que votre site WordPress et ses plugins sont à jour, vous ne devriez pas vous affoler.

Si vous avez besoin d’aide pour sécuriser votre site WordPress, n’hésitez pas à nous contacter.

Cet article Attaque en cours : Comment sécuriser un site WordPress est apparu en premier sur Soluo.

C’est ce qui vient de m’arriver alors que je souhaiter partager un article sur la page Facebook de Soluo.

Comment débugger une url qui pose problème ?

Après quelques recherches je tombe sur cette réponse sur StackOverflow. Il existe un outil de deboggage chez Facebook (lien en bas de l’article). Il suffit de saisir l’url de la page qui pose problème et Facebook l’analyse pour vous renseigner sur les données OpenGraph qu’il est possible d’extraire.

Le deuxième effet KissCool

Forcément si je vous en parle ce n’est pas pour que vous contempliez les données OpenGraph de votre page. Le deuxième effet kiss cool donc, c’est que ce débugage va corriger ce qui posait problème (surement une histoire de cache chez Facebook). Bref, réessayer de publier votre contenu, vous devriez voir s’afficher les miniatures et pouvoir choisir une image à afficher sur votre mur.

Outil Debug OpenGraph Facebook : cliquez ici

C’est la première fois que je rencontre ce problème ! Est-ce que ça vous arrive souvent ?

Cet article Quand l’OpenGraph Facebook fait des siennes est apparu en premier sur Soluo.

Si Google se préoccupe de la vitesse de chargement de vos pages Internet, c’est que ça compte pour vos visiteurs. En effet Google a défini la frontière entre un site rapide et un site lent à 1,5 secondes. En dessous de 1,5 sec de temps de chargement, votre site est considéré comme rapide. La rapidité de chargement des pages est un des nombreux critères d’évaluation de votre site par Google. On peut parier que ce facteur va prendre de l’importance dans les mois/années à venir.

Quels outils pour tester la vitesse de chargement d’une page ?

Tester la vitesse de chargement dans le navigateur

Pour les développeurs il existe plusieurs add-ons que l’on peut facilement ajouter à son navigateur.

Ces outils reprennent les paramètres permettant d’optimiser la vitesse de chargement et les retranscrivent dans une interface graphique.

Yahoo YSlow

Google Page Speed

Mesure de la vitesse par des services en ligne

Pingdom Tools

Il existe également de très bons services en ligne. Citons notamment PingdomTools qui permet de tester son site depuis différents emplacements (pour l’Europe il existe un serveur aux Pays-Bas).

Après avoir travaillé à l’optimisation du site de soluo, voici mes résultats : « Votre site se charge plus rapidement que 99% des sites testés » avec une note de performance de 99/100.

Comme pour Yahoo YSlow et Google Page Speed, cet outil fourni également quelques explications sur le détail des notes attribuées aux différents critères retenus pour l’évaluation des performances de la page.

Ici on retrouve par exemple une note de 94/100 concernant l’optimisation du cache navigateur. Malheureusement on y peut rien, il s’agit du code javascript de Google Analytics. Il faut savoir analyser les recommandations. Dans ce cas précis, l’impact est quasi nul car le script de Google est chargé de manière asynchrone et ne bloque pas le chargement de la page.

WebPageTest

J’ai récemment entendu parler de WebPageTest qui semble fournir des rapports plus détaillés. Avec un point intéressant : le temps nécessaire au premier chargement puis à un rafraîchissement de la page. Ce qui peut mettre en avant des problèmes de cache.

Voilà quelques outils qui peuvent aider à mieux tester les performances d’un site web. Il convient bien sûr de garder du recul et de savoir interpréter les résultats obtenus et les recommandations faites par l’outil. Et surtout continuer de se préoccuper de l’expérience des utilisateurs plutôt que de chercher absolument le 100/100 sur tous les critères.

Et vous quels outils utilisez-vous pour mesurer le temps de chargement de votre site web ? Faites-le moi savoir en commentaires et je n’hésiterai pas à les ajouter à cet l’article.

Cet article Comment tester la vitesse de chargement d’une page web est apparu en premier sur Soluo.

Il est facile d’ajouter de nouveaux moteurs de recherche dans cette barre de recherche rapide.

Si comme dans mon cas vous avez le moteur Google.com par défaut et que vous souhaitez ajouter un moteur national comme Google.fr ou Google.es voici une liste des moteurs de recherche Google régionaux.

Il vous suffit de cliquer sur le moteur de votre choix et il va s’ajouter à la liste des moteurs de recherche de Firefox. Vous pouvez également cliquer sur « Gérer les moteurs de recherche » puis réordonner vos moteurs en fonction de vos préférences d’utilisation. J’ai mis ici Google France en haut de la liste.

Dernière étape, pour utiliser un moteur de recherche il vous suffit de cliquer sur la flèche dans la barre de recherche rapide et de sélectionner le moteur de recherche que vous souhaitez utiliser.

Cet article Ajouter des moteurs de recherche Google dans Firefox est apparu en premier sur Soluo.

Nous avons repensé l’ensemble de la structure du site, ajouté de nombreux contenus dans le but de vous présenter le plus clairement possible notre activité, les services que nous vous proposons et vous donner un aperçu de nos réalisations aussi bien en termes de Création de Site, de Design Graphique et Création de Logos et de Développement d’Applications Web.

Ce nouveau site a été intégré de manière totalement responsive pour vous offrir un confort de lecture quelque soit le support avec lequel vous y accédez (mobile, tablette, portable ou ordinateur de bureau).

Il nous reste encore quelques améliorations et optimisations à faire; j’y travaillerai dans les prochains jours.

Si vous avez des remarques sur cette nouvelle version, n’hésitez pas à les partager en nous laissant un commentaire.

–
Julien

Cet article Mise en ligne du nouveau site est apparu en premier sur Soluo.

Pour la première édition de l’année, nous allons nous pencher sur le site Life In My Shoes. Quelles sont ses forces au niveau du design et de l’expérience utilisateur ? Quelles sont ses points faibles ?

Présentation du site

La campagne Life In My Shoes a pour vocation de combattre les idées reçues sur les personnes atteintes par le VIH. Il a été commissionné par l’association Body and Soul qui lutte pour le respect, la dignité et le bien-être des enfants, des jeunes et des familles vivant avec le VIH.

Le site vise un public jeune qu’il tente de sensibiliser à ces problématiques.

J’ai choisi de parler de Life In My Shoes car tout en étant un site relativement simple, le sujet est traité de manière intéressante et attractive, avec une expérience utilisateur assez riche.

Le style graphique

Le design de ce site est relativement épuré, voire minimaliste.

Couleur

La palette de couleurs est très réduite : en fait, une seule couleur est utilisée : le jaune. Pour l’accompagner, le designer a choisi d’utiliser toute une gamme de gris. Le gris, et les aplats de gris clair en particulier, on l’avantage de créer une atmosphère posée et propre, propice à la lisibilité de texte gris foncé ou noir.

Imagerie

Le travail sur les graphismes et les photos est intéressant. La plupart des visuels sont des mélanges de photographie et dessin manuel. Les photos on été découpées afin d’éliminer le fond et de ne conserver que le sujet principal.

Ce traitement de l’imagerie a permis d’harmoniser les visuels entre eux. Même si les différentes photos fournies étaient de style hétérogènes, leurs différences sont gommées par leur découpage et leur assemblage avec du dessin.

Typographie

Le travail typographique a été réalisé avec beaucoup d’habileté même si je ne suis pas une adepte du texte centré (sauf exception). La police d’écriture à l’honneur est Houschka Rounded. C’est une police sans empâtement, à la fois très lisible et agréable à regarder.

La police utilisée pour les titres en lettres capitales est Sevigne ST.

La taille du corps de texte varie entre 16px sur le blog, et 19px sur d’autres pages. L’interligne est très bien ajusté, ce qui fait que le tout est très facile et plaisant à lire.

Beaucoup de web designers (moi y compris) se permettent des tailles de police de 12px ou 11px sans se rendre compte que c’est très difficile à lire. L’interligne est souvent beaucoup trop serré, ce qui ne donne pas envie d’aller au bout du premier paragraphe.

Comme l’explique cet article du Typographe (Mise à jour du 18/04/2012 : cet article n’est plus disponible mais vous pouvez consulter un article de Smashing Magazine sur ce sujet, en anglais), un corps de texte en 16px est idéal car cette taille correspond à peu près à la taille de texte que nous avons l’habitude de lire sur papier.

Depuis que ma vue a baissé légèrement, je réalise à quel point il est important de ne pas proposer des tailles de textes en dessous de 14px. Très faible est la portion de la population ayant une vision à la Superman.

C’est la mode des designs minimalistes sur internet, bien qu’ils ne soient pas appréciés de tous. On peut le comprendre ; même si l’équilibre entre vides et pleins est harmonieux et que la typographie est belle, ces designs peuvent être visuellement un peu fade.

Dans le cas de Life In My Shoes, je trouve que cet écueil a été évité grâce à plusieurs techniques et astuces subtilement utilisées.

L’interactivité

« (Design is) not just what it looks like and feels like.Design is how it works. »
Steve Jobs

Pour paraphraser cette citation du brillant Steve Jobs, le design n’est pas uniquement affaire d’esthétique et de cosmétique. Le design comprend aussi la manière dont le produit – ici le site web – va réagir aux interactions. Pour résumer, ce qui importe ce n’est pas seulement si c’est « joli », c’est l’expérience utilisateur dans son ensemble.

J’ai trouvé que l’expérience utilisateur sur ce site était subtilement enrichie par différents niveaux d’interactivité et de réactivité.

Les transitions

Lors du passage d’une page à l’autre, la zone de contenu est balayée avec un effet de transition. On aurait pu simplement charger la nouvelle page de manière traditionnelle, mais cet effet est un petit plus assez attractif.

Les contenus de la page d’accueil et de la page Journey So Far apparaissent de manière animée eux aussi. Notez l’effet subtil de parallax sur la page d’accueil, c’est à dire que la photo de l’homme apparait en premier et le fond dessiné circulaire s’insère en décalé dans le temps. On retrouve cet effet sur les différentes pages de Journey So Far lorsqu’on navigue avec les flèches jaunes.

Sur la page About us, on retrouve l’effet de parallax qui est cette fois vertical. Lorsque l’on descend dans la page, que ce soit en utilisant la molette de la souris ou les boutons présents dans la page, on voit que les morceaux de textes et les éléments graphiques bougent à des vitesses différentes. C’est une bonne manière d’inciter à parcourir toute la page, et de faire lire le texte à l’audience.

User input

Autre aspect sympa du site se passe sur la page Be Involved dont le contenu est généré par les utilisateurs. On leur propose d’uploader une photo de leurs pieds chaussés (référence au nom de la campagne) et de partager en une phrase un moment où ils se sont sentis différents, mis à l’écart.

C’est une manière simple et ludique pour l’internaute de s’impliquer et de partager avec d’autres. Visuellement, cela crée ces petites vignettes que l’on peut retourner d’un clic. La simplicité du concept et de l’interface donne envie d’explorer les différentes vignettes, et pourquoi pas d’y ajouter son emprunte.

Responsiveness

Le site a été conçu de manière a s’afficher correctement sur toutes les plateformes et résolutions d’écran. Que vous le consultiez sur un smartphone ou un grand écran d’ordinateur, l’interface devrait à peu près s’adapter. Je dis « à peu près » car le résultat n’est pas parfait sur certaines pages.

Si vous voulez en savoir plus sur ce sujet, je vous recommande de lire ce cas d’étude que j’ai écrit sur le « responsive design ».

Vidéos

Dans la liste des interactions avec le site, j’aimerais ajouter une petite note sur les vidéos car ce site en comprend plusieurs.
Il n’est pas a la portée de tous de proposer des vidéos sur un site, cependant lorsque c’est possible et que c’est pertinent, cela peut être une vraie valeur ajoutée. En tant qu’utilisateur on n’a pas toujours envie de lire du texte. Regarder une vidéo bien faite peut être tout aussi informatif et demander moins d’effort.

Rollovers

Sur la page Journey So Far, j’ai apprécié les petites bulles qui apparaissent lorsqu’on passe la souris sur les noms en noir des personnes citées. C’est une manière ludique de présenter plus d’informations à l’internaute tout en les rendant « optionnelles ». De cette manière elles ne polluent pas la page en étant tout le temps présente.

J’aurais aimé retrouver ce comportement sur d’autres liens du site, dans les contenus mais aussi par exemple sur les icônes des réseaux sociaux ou les logos des partenaires en bas de page.

Note sur l’ergonomie

Elle est plutôt bien pensée dans l’ensemble. La navigation est aisée, le texte est découpé en blocs faciles à lire. J’aurais cependant quelques critiques à émettre.

Navigation

L’état sélectionné d’un élément de navigation ne saute pas aux yeux. Lorsqu’on se trouve sur une page, l’élément de navigation correspondant est d’un gris un peu plus foncé que les autres éléments mais la distinction entre les deux états n’est à mon sens pas suffisante.

La navigation sur la page About us grâce à la barre verticale de droite n’est pas très explicite. J’ai mis du temps à comprendre pourquoi plusieurs points étaient en jaune. Je vous laisse deviner la raison mais voici un indice : cela dépend de la hauteur de votre fenêtre et de votre écran.

Heureusement, l’utilisateur a deux autres options pour naviguer dans cette page : en scrollant à l’aide de la souris ou de la barre de défilement du navigateur et à l’aide des boutons noirs sur jaune situés dans la zone de contenu.

URLs

La section Journey So Far est divisée en trois écrans. Au niveau du code il s’agit d’une seule et même page, mais du point de vue de l’utilisateur ce sont trois pages séparées. On navigue de l’une à l’autre à l’aide des flèches jaunes.

Une bonne pratique consiste à donner des URLs différentes à ces pages, même si en réalité il n’y a qu’une seule page. Dans cet exemple l’URL ne change pas.

En résumé

Les « plus »

• Palette de couleurs lumineuse et épurée
• Style d’imagerie créatif et homogène
• Typographie de qualité et hautement lisible
• Interactivité variée
• Animations par petites touches
• Site « responsive », c’est à dire qui s’adapte aux différentes résolutions d’écrans
• Vidéos qui égayent et informent

Les « moins »

• Ergonomie médiocre de la navigation
• Le texte centré est à éviter
• Utilisation de javascript pour répartir du contenu sur plusieurs pages, sans changer l’URL

Conclusion

J’ai aimé ce site à la fois pour sa simplicité et pour tous les détails qui apportent un « plus » à l’expérience utilisateur.

On sent que ce projet a nécessité beaucoup de temps et de réflexion afin d’aborder ce sujet sensible de manière ludique, interactive et attractive pour les jeunes (et les moins jeunes), sans tomber dans l’excès au niveau des animations.

Le mois prochain, je vous présenterai la critique d’un autre site.
D’ici là si n’hésitez pas à poster vos commentaires. Êtes-vous d’accord avec mon analyse ? Pas d’accord du tout ?

Cet article Revue de site : l’interface de LifeInMyShoes.org est apparu en premier sur Soluo.

Rappel sur le design « responsive » (ou « réactif ») : il s’agit d’utiliser les media-queries pour s’adapter à la taille du device et/ou du navigateur de manière intelligente et ergonomique. Pour plus d’infos, voir cet article sur les media-queries par Alsacréations.

Voir l’exemple

Nouveau site, nouveaux challenges

Cet été nous préparons la refonte du site de soluo.fr. En fait, plus qu’une refonte, nous refaisons tout !

Notre nouveau site sera « responsive » (ou réactif), comme le site de Secri Gestion dont nous avons parlé dans des articles antérieurs.

Pour le nouveau site, nous avons choisi de séparer le blog. Il reprendra la charte graphique du site mais aura une structure et un design différent.

Tout blog qui se respecte contient des articles, auxquels certaines données « meta » sont associées. En général il y a au moins une date de publication et un auteur. L’article peut aussi être catégorisé et taggué par exemple.

Concentrons nous sur la date de publication d’un article. Notre blog sera lui aussi réactif, c’est à dire que son interface va s’adapter à la taille du navigateur et de l’appareil utilisé pour le visualiser.

Dans mon design « grand format », c’est à dire pour écrans d’ordinateurs classiques, j’ai choisi de montrer la date comme sur un petit bloc-calendrier. Je veux que l’abréviation du mois en 3 lettres s’affiche en haut, au dessous duquel on verra le jour en gros, puis l’année en plus petit, comme sur cette image :

Facile, sauf que dans le design pour petits formats (pour les smartphones par exemple) je veux montrer la date d’une autre manière. Le tout s’afficherait sur une ligne avec jour, mois, année, comme ceci :

Positionner les mêmes éléments de manières différentes ne me fait pas peur. Avec les media-queries, c’est facile. Dans le premier cas on peut se servir des positions absolute / relative, et dans le second cas, on laisse les éléments inline se positionner les uns après les autres naturellement.

Le problème : le format de la date

Je ne suis pas développeuse, mais je me doute que si je demande à mon collègue développeur de me fournir 2 formats de date différents selon que certaines media-queries sont déclenchées ou pas, il va me regarder de travers.

Une solution serait d’avoir la date 2 fois dans le code, dans 2 formats différents. Dans un cas on masque l’un, ou l’autre.

Cette solution ne me satisfait pas car j’aime que mon code reste propre.

J’ai posé la question sur Twitter et on m’a suggeré le pseudo-element :after et la propriété content de CSS.

Même si je n’ai pas tout à fait compris la suggestion car je ne souhaitais pas utiliser de lien, cela m’a donné une bonne piste.

J’ai aussi demandé l’avis de la communauté de Sitepoint sur leur forum, et j’y ai posté ma solution (English)

La solution : utiliser l’attribut TITLE

La solution qui me parait la meilleure est de générer la date dans 2 formats différents, du moins pour le mois, qui est l’élément problématique ici.

La balise contiendra le nom entier du mois, et l’attribut TITLE contiendra l’abréviation en 3 lettres.

Après il suffit d’un peu de CSS avec des media-queries pour afficher l’un ou l’autre.

Voici le code que j’ai écrit assez rapidement. Je ne suis pas contente de la manière dont je cache le mot « juillet », je pense qu’on peut mieux faire. Mais ça marche !

<head>

<style type="text/css">

.dateBox {
	font-family: trebuchet ms, helvetica, arial;}

@media screen and (min-width: 800px) {
.dateBox {
	-moz-box-shadow: 2px 2px 0 #dcdcdc;
	-webkit-box-shadow: 2px 2px 0 #dcdcdc;
	box-shadow: 2px 2px 0 #dcdcdc;

	background: #eee;
	color: #000;
	font-size: 14px;
	overflow: hidden;
	padding: 15px 2px 2px;
	position: relative;
	text-align: center;
	width: 50px; }

.day {
	font-family: georgia, serif;
	font-size: 34px; }

.month {
	color: #eee;
	left: 3px;
	margin-top: -15px;
	position: absolute;
	text-transform: uppercase;
	top: 3px;
	width: 50px; }

.month:after {
	color: #000;
    content: attr(title);
    display: block; }
}

@media screen and (max-width: 800px) { 

.dateBox {
	color: #666;
	font-size: 12px;
	font-style: italic;}

}

</style>
</head>
<body>

<div class="dateBox">
	<span class="day">12</span>
	<span title="JUL" class="month">juillet</span>
	<span class="year">2011</span>
</div>

Pour voir comment ça marche, redimmensionnez la fenêtre de votre navigateur.

Voir l’exemple

N’hésitez pas à me faire part d’améliorations éventuelles, notamment pour la manière de cacher le contenu de la balise « month ».

Note sur la compatibilité

Cet exemple ne fonctionnera que sur les navigateurs modernes, qui comprennent les media-queries. C’est un petit essai que j’ai fait rapidement, sans me soucier de la compatibilité avec mon très cher Internet Explorer (6, 7 et 8). Cependant il est tout à fait possible de faire fonctionner tout ça sur IE en utilisant un outil tel que 320 and up qui inclut des fichiers javascript.

Credits : merci à IconSweets pour l’icône Calendrier.

Cet article Faire varier le format d’une date avec CSS et les media-queries est apparu en premier sur Soluo.

En principe ce n’est pas très compliqué : il suffit de suivre la méthode de 320 and up qui consiste à intégrer d’abord pour la taille de fenêtre la plus petite.

Je dis « en principe », car nous avons rencontré un certain nombre de difficultés, notamment avec Internet Explorer 7 et 8, malgré les outils javascript fournis dans le template.

Note : Comme pour la majorité des sites que nous réalisons, nous avons décidé de ne pas supporter IE6 pour ce projet.

L’intégration pour 320px et 480px de large

Note : Pour tester j’ai utilisé un iPhone 3GS ainsi que Firefox 3.6, Chrome, Safari, IE7 et IE8 sur desktop. J’aurais voulu pouvoir tester sur d’autres smartphones mais je n’avais pas cette possibilité.

Andy Clarke propose deux versions du template : la première avec une feuille de style unique et la seconde avec de multiples feuilles de styles. J’ai préféré travailler avec plusieurs feuilles de styles car cela me paraissait plus « propre », mais c’est un choix très personnel.

On commence donc par style.css qui est la feuille de style de base. Elle correspond à une largeur de fenêtre de 320px au maximum.

La méthode de 320 and up consiste à intégrer d’abord pour les plus petits formats, et de rajouter des feuilles de styles les unes au dessus des autres en allant vers le format le plus large.
Cela signifie que les règles CSS contenues dans style.css seront prises en compte par toutes les tailles écrans. Certaines devront être écrasées par la suite afin de positionner les éléments d’une nouvelle manière pour une taille de fenêtre supérieure.

Pour les écrans allant jusqu’à 480px de large, on doit penser aux appareils mobiles de type smartphone. Les zones cliquables doivent être suffisamment larges pour effectuer un « clic » avec le doigt. On peut faire le choix de masquer certains éléments s’ils sont superflus et si leur absence peut rendre l’interface plus claire et intuitive.

Dans une logique d’optimisation et de performance, on évitera l’utilisation d’images de fond volumineuses, et on limitera les effets graphiques d’une manière générale.

L’utilisateur d’un appareil mobile a très peu de patience – encore moins que sur un ordinateur classique – c’est pourquoi il est si important de peaufiner l’ergonomie de l’interface pour les petits formats.

Une fois satisfaite du résultat sur mon iPhone en mode portrait, je suis passée à l’intégration du mode paysage, c’est à dire en 480px de large. Rien ne nous oblige à tout changer pour chaque taille d’écran. Je pense que le passage de 320px à 480px demande un petit travail d’adaptation qui n’est pas radical dans un le cas d’un site comme celui-ci.

En l’occurrence j’ai principalement changé la présentation des biens sur la page d’accueil et sur les pages « A louer » et « A vendre » pour que la fiche du bien passe en mode horizontal. L’image est plus petite qu’en mode portrait mais au moins on voit toutes les informations en un clin d’oeil.

Annonce immobilière sur la page d'accueil en 320px de large (iPhone)

Si j’avais laissé exactement les même styles qu’en 320px de large, la photo du lieu aurait paru énorme et il aurait fallu scroller pour voir les information relatives à un lieu.

Annonce immobilière sur la page d'accueil en 480px de large (iPhone)

L’intégration pour 728px et 992px de large

Le passage entre les versions 728px et 992px de large était un petit peu plus complexe, notamment à cause du header et de la navigation que je devais adapter. Je m’en suis souvent sortie en ajoutant plus de markup (généralement des DIVs), chose qui n’est pas idéale.

En effet, si le site avait été de largeur statique, j’aurais utilisé beaucoup moins de balises mais puisque la disposition de certains éléments doit pouvoir changer, il faut de quoi les positionner de différentes manières : tantôt avec un positionnement absolu ou relatif, tantôt avec un float.

Il faut jongler avec les différents éléments du HTML et de CSS pour arriver à ses fins et ne pas oublier de tester le site sur différentes tailles d’écran et sur tous les navigateurs à supporter lorsque l’on apporte des changements à une feuille de style.

Pour les pages « A louer » et « A vendre » j’ai souhaité utiliser des selectors CSS3 grâce à Selectivizr et à un plugin pour jQuery qui étend le support des pseudo-class et selectors CSS3. J’aurais voulu pouvoir utiliser des selectors tels que nth-of-type(2n+4) sur tous les navigateurs, mais après quelques échecs nous avons abandonné cette belle idée car cela ne fonctionnait pas sur Internet Explorer.

Nous comptons revenir sur ce problème prochainement afin de comprendre d’où est venu cet échec.

Page d’annonces en 768px de large

Page listing des annonces en 960px de large

Adaptation de 320 and up

Sur la page d’accueil j’avais prévu deux colonnes à hauteur égale pour « Syndic » et « Gestion locative ». Dans ce cas de figure j’étais obligée de recourir à un petit peu de javascript pour calculer la hauteur de la colonne la plus haute et forcer la hauteur de l’autre colonne. C’est très facile à implémenter, cependant le problème est que si la fenêtre est redimensionnée, la hauteur des colonnes ne change pas.

Pour résoudre ce problème j’ai « triché » en ajoutant suffisamment de padding-bottom pour que le texte ne déborde pas lorsque la largeur d’écran est réduite.

Cependant, le vrai problème était pour les versions 320px et 480px car étant très étroites, j’ai voulu positionner les colonnes l’une au dessus de l’autre. Comme je ne souhaitais plus qu’elles aient la même hauteur, j’ai ajouté une media-query et une feuille de style pour viser toutes les largeurs de fenêtre en dessous de 768px.

Le seul style que cette feuille de css contient est :

section.homeMainContent article {
height: auto !important;
}

Ainsi, la j’écrase la hauteur générée par le javascript afin que les deux colonnes prennent une hauteur « naturelle », en fonction de leur contenu.

Internet Explorer…

En théorie 320 and up contient je javascript nécessaire au bon fonctionnement des media-queries sur Internet Explorer.

Lors de la phase d’intégration j’étais assez contente du résultat sur IE7 et IE8 sur XP et Windows 7, même si ce n’était pas parfait à 100% ; certains éléments de l’interface ne se positionnaient pas tout à fait comme ils auraient dû lors du redimensionnement de la fenêtre. Néanmoins, ces légers « bugs » me paraissaient suffisamment discrets pour que le site soit mis en ligne tel quel.

Après la mise en ligne du site, le client nous a signalé un problème que nous n’avons pas réussi à reproduire à ce jour : sur 2 de leurs ordinateurs, seule style.css était prise en compte, ce qui donnait un résultat catastrophique sur un écran classique.

Nous avons l’intention d’investiguer mais pour l’instant nous préférons fournir une version statique en 960px de large aux utilisateurs d’Internet Explorer 7 et 8. A suivre…

Dans le prochain article je ferai le bilan de cette expérience : je vous donnerai quelques astuces pour réussir votre site réactif, et je vous ferai part des leçons apprises grâce à cette aventure, dans l’espoir de vous éviter de vous confronter aux mêmes problèmes.

Cet article Responsive web design : Comment optimiser son site pour mobiles et tablettes (3ème partie) est apparu en premier sur Soluo.

Cependant, avant de passer à l’intégration du site il nous a fallu repenser le design. En effet, le visuel du site en 960px de large avait déjà été validé par le client, avant que nous décidions d’en faire un site réactif.

Note : en principe une telle décision devrait se faire en amont et avec l’accord du client car cela représente plus de travail qu’un site statique (et donc un coût un peu plus important) mais nous avions envie d’expérimenter sur ce projet qui s’y prêtait bien.

Le design initial

Le design de départ, qui avait déjà été validé par le client, prenait la largeur classique de 960px.

Page d'accueil en 960px de large

Page listing des annonces en 960px de large

J’ai estimé qu’il faudrait prévoir 4 « versions » du site réactif.

• La plus petite irait jusqu’à 320px de large (ce qui correspond au mode portrait de l’iPhone)
• La suivante serait utilisée pour les largeurs entre 320px et 480px (480px étant la largeur de l’iPhone en mode paysage)
• La suivante pour les largeurs entre 480px et 768px (768px est la largeur de l’iPad en mode portrait)
• La dernière correspondrait au design conçu pour le site statique en 960px, et irait de 768px à 1000px de large.

Étant donné que le site secri.fr contient relativement peu de contenu, je n’ai pas vu l’intérêt de prévoir une largeur supérieure car l’interface aurait perdu en ergonomie et en esthétique.

Pour d’autres types de projet on peut tout à fait envisager des largeurs de fenêtre supérieures, comme le fait le site de 320 and up.

Adaptations du design

Page d’accueil en 768px de large

Je suis brièvement repassée par la case Photoshop pour visualiser la page d’accueil en largeur 768px. Il fallait surtout revoir la navigation car les éléments risquaient de ne pas tous rentrer à droite du logo. J’ai donc choisi de sortir le logo de la barre de navigation et de le centrer, ainsi que de centrer la liste des liens.

La liste des biens passe en mode horizontal, ce qui fonctionnera aussi très bien pour la version d’en dessous qui est de 480px de large, avec quelques adaptations.

Page d'accueil en 768px de large

Liste des annonces en 768px de large

Pour les pages « A louer » et « A vendre », il n’y a plus assez de place pour 4 annonces par ligne, on passe donc à 3 annonces seulement. Le reste ne change pas.

Page d'annonces en 768px de large

Pour les deux versions les plus petites (320px et 480px), je n’ai pas eu besoin de travailler dans Photoshop car le travail effectué sur la version de largeur 768px m’a permis de les visualiser dans ma tête pour ensuite les implémenter directement pendant la phase d’intégration.

Ce que je ferai différemment à l’avenir

• Je travaillerai probablement sur 2 ou 3 tailles du site en parallèle, sans forcément décliner tous les gabarits pour chacune d’entre elles. Il est très possible que je continue à me baser sur un design en 960px de large, tout en réfléchissant à chaque étape à mes choix graphiques et à la manière dont ils vont affecter la syntaxe HTML.
• Je réfléchirai un peu plus aux conséquences de mes choix ergonomiques sur la phase d’intégration, notamment pour éviter l’ajout de scripts supplémentaires.

Dans un prochain article je parlerai de la phase d’intégration. Celle-ci s’est déroulée relativement bien grâce à l’outil 320 and up mais il y a eu quelques petits soucis liés à javascript et à certains navigateurs, pour ne pas citer de noms…

Cet article Responsive web design : Comment optimiser son site pour mobiles et tablettes (2ème partie) est apparu en premier sur Soluo.

En pratique, cela signifie qu’on utilise les media-queries (CSS3) pour appliquer des styles différents selon la taille de l’écran, de la fenêtre, ou encore de l’orientation d’un appareil mobile (smartphones et tablettes).

Cela permet donc de présenter à l’utilisateur un design et une ergonomie optimisés pour chaque type d’appareil qu’il utilise ainsi que pour la taille de la fenêtre de son navigateur.

Pour voir de quoi il s’agit, amusez-vous à redimensionner la fenêtre de votre navigateur lorsque vous êtes sur secri.fr.

Notons que selon les projets, il peut être préférable de créer un site ou une application mobile séparés. Cependant, dans la plupart des cas, l’utilisation des media-queries est la meilleure option car elle est relativement facile à implémenter et reste peu coûteuse.

Les problèmes liés à la création d’un site réactif

Lorsqu’on approche le sujet pour la première fois, cela peut paraître très complexe car très vite, on comprend qu’il va falloir changer ses méthodes de travail.

Quelques questions peuvent venir à l’esprit :

• Dois-je créer une maquette graphique pour chacune des différentes apparences du site ? Cela représente beaucoup de travail et d’échanges avec le client !
• CSS3 ne fonctionne que sur les navigateurs récents ; que faire des navigateurs plus anciens ?
• Comment aborder la phase d’intégration ?
• Est-ce compliqué d’obtenir différentes « versions » d’un site en gardant la même syntaxe HTML ?

Lors de la réalisation du site de Secri Gestion, notre premier site réactif, je me suis confrontée à ces problématiques. Je vais vous faire part du cheminement que nous avons suivi en espérant que cela vous aidera à réaliser vos sites.

L’idée de départ

Peu avant de commencer l’intégration de secri.fr, j’ai trouvé le template 320 and up, créé par le talentueux Andy Clarke. C’est une extension de HTML5 Boilerplate (par le tout aussi talentueux Paul Irish) que nous utilisions déjà pour tous nos sites.

Ces templates, composés de HTML, de CSS et de Javascript, sont une très bonne base pour créer un site réactif en bénéficiant des meilleures pratiques. Grâce au Javascript fourni, même Internet Explorer 6 se comportera comme un navigateur moderne. Enfin presque.

Plus qu’un template, 320 and up est une méthode de travail. C’était ça la vraie nouveauté pour moi car j’ai dû repenser ma manière de travailler. En effet, pour un site statique on passe généralement du design à l’intégration d’une façon assez linéaire.

Dans le cas d’un site réactif ayant 4 apparences différentes (la première pour les fenêtres allant jusqu’à 320px de largeur, puis jusqu’à 480px, 768px, et supérieure à 992px), il va falloir travailler autrement. La méthode d’Andy Clarke consiste à intégrer d’abord la version la plus petite, puis à passer au cran au dessus et ainsi de suite, jusqu’à l’intégration de la version la plus large en dernier. Ayant tenté le procédé inverse par le passé, je ne suis pas prête de revenir en arrière car c’était laborieux !

A noter que nous souhaitions réaliser un site à la fois réactif et flexible, c’est à dire qu’au lieu de « sauter » d’une apparence à l’autre lors du redimensionnement de la fenêtre, les éléments devaient s’adapter à la largeur de la fenêtre avec souplesse. Il fallait donc utiliser des pourcentages pour les largeurs des différents éléments.

Nous verrons dans un prochain article comment je m’en suis sortie au niveau du design, puisque la maquette graphique faisant 960px de large avait déjà été validée par le client.

Deuxième partie de cet article : la phase de design

Cet article Responsive web design : Comment optimiser son site pour mobiles et tablettes (1ère partie) est apparu en premier sur Soluo.