Référencement naturel, enjeux et solutions

Qu’est-ce que le rĂ©fĂ©rencement naturel (SEO) ?

Le rĂ©fĂ©rencement naturel, Ă©galement appelĂ© SEO (search engine optimisation) en anglais englobe l’ensemble des techniques visant Ă  amĂ©liorer le classement d’un site dans les moteurs de recherche (Google, Bing, Yahoo). Pour rĂ©sumer : Comment ĂȘtre 1er dans Google sur la requĂȘte : « rachat de crĂ©dit » ? (ndlr : Vous comprendrez alors tout l’intĂ©rĂȘt du SEO).

Continuer la lecture de Référencement naturel, enjeux et solutions

Nouveau site internet et certification Google Partner pour l’agence Kelcible

RentrĂ©e 2014, synonyme de changement et de nouveautĂ© pour l’agence web Kelcible d’Angers.

Pour cette rentrĂ©e l’agence, spĂ©cialisĂ©e dans le webmarketing et la crĂ©ation de sites web, fait peau neuve et obtient la certification Google Partner, garante de son expertise en matiĂšre de rĂ©fĂ©rencement sponsorisĂ©!

Continuer la lecture de Nouveau site internet et certification Google Partner pour l’agence Kelcible

L’agence web Kelcible recrute 2 CDI !

Agence web spĂ©cialisĂ©e dans la conception de sites Internet professionnels, le dĂ©veloppement spĂ©cifique d’applications sur mesure, et la crĂ©ation de visibilitĂ© sur le web, Kelcible accompagne une cinquitaine de sociĂ©tĂ©s dans l’objectif de gĂ©nĂ©rer du business avec Internet.
Nos rĂ©fĂ©rences sont variĂ©es allant de la petite PME angevine, Ă  la multinationale, en passant par des sites e-commerce sur diffĂ©rents secteurs d’activitĂ©.

Agence Kelcible

Dans le cadre de notre développement, nous recherchons 2 personnes en CDI pour les postes de Chargé de projet SEM & de Développeur web expérimenté afin de répondre à notre forte croissance sur notre activité.

Chargé de projet SEM H/F

Profil :

Rigoureux(se) et motivé(e), avec une expérience significative dans le domaine du webmarketing, vous maßtrisez parfaitement Google Adwords, Google Analytics, les techniques de marketing à la performance ainsi que les principaux logiciels du Pack Office.
OrganisĂ©(e) et dynamique, vous avez un excellent relationnel et ĂȘtes force de proposition, vous menez vos projets avec enthousiasme, autonomie et vous démontrez une réelle faculté à développer le chiffre d’affaires et la rentabilité des campagnes qui vous sont confiées.

Missions :

  • Pilotage des diffĂ©rents leviers d’acquisitions de trafic
  • Optimisations des budgets e-marketing et des taux de conversion
  • Mesure, suivi et analyse de l’audience via les outils d’analytics
  • Gestion du porte-feuille clients
  • Faire des recommandations stratĂ©giques sur les choix Ă  opĂ©rer
  • RĂ©daction de rapports webanalytics pour les clients

 

DĂ©veloppeur web H/F

Profil :

Autonome et de nature curieuse, vous possĂ©dez un minimum de 2 ans d’expĂ©rience en dĂ©veloppement front-end chez un Ă©diteur de site ou en agence. Vous maĂźtrisez parfaitement les CMS WordPress et Prestashop, PHP, HTML5, CSS3 et vous avez des bases solides en JavaScript, jQuery, et en gestion des bases de donnĂ©es SQL. Des connaissances en gestion de projet, en SEO et en ergonomie web seraient un plus.

Missions :

  • Analyse des besoins et rĂ©daction des cahiers des charges pour chaque projet
  • DĂ©veloppement de fonctionnalitĂ©s spĂ©cifiques sous WordPress, Prestashop et autres CMS
  • IntĂ©gration des maquettes rĂ©alisĂ©es par la graphiste
  • Mise en production et rĂ©alisation de tests
  • Veille technique sur les diffĂ©rentes évolutions du web
  • Gestion client pour les questions techniques

 

Contact

Lieu de travail : Angers, Pays-de-la-Loire
Type de contrat : CDI
Entreprise : Agence web Kelcible
Adresse : 1 boulevard Pablo Picasso 49000 Angers
Site web : http://www.kelcible.fr/

ConsidĂ©rant que le savoir-ĂȘtre est tout aussi important que le savoir-faire, notre attention se portera aussi bien sur l’humain, ses valeurs et sa capacitĂ© d’adaptation Ă  intĂ©grer l’Ă©quipe, que sur ses compĂ©tences techniques lors de ces 2 recrutements.

Merci d’adresser vos candidatures Ă  l’attention de Mme Charline Heurtault et M. Rudy Meyer en utilisant le formulaire de recrutement de notre site Internet ou en envoyant CV et lettre de motivation Ă  contact@kelcible.fr.

Le Responsive Web Design

Responsive web design

En seulement quelques annĂ©es le nombre d’appareils et de rĂ©solutions servant Ă  consulter un site web a tout simplement explosĂ© : ordinateurs, smartphones, tablettes, web TV, format portrait, paysage etc. 
 L’internaute d’aujourd’hui est devenu nomade et veut accĂ©der Ă  ses contenus web n’importe oĂč, n’importe quand. Mais une question s’est ainsi posĂ©e pour les concepteurs de sites :

« Comment offrir aux utilisateurs une expérience optimum quel que soit leur terminal ? »

Le web a su s’adapter et nous donne dĂ©sormais une solution pour rĂ©pondre Ă  ces nouvelles attentes avec l’apparition du bien nommĂ© « Responsive Web design ».

En faisant un peu le tour des nombreux articles traitant du sujet, j’ai fait une sĂ©lection des informations les plus intĂ©ressantes et utiles Ă  mon sens.

 

Qu’est-ce que le « Responsive » ?

DĂ©finition

Le Responsive Web Design (littĂ©ralement conception de sites web adaptatifs) ou RWD pour les intimes peut se traduire comme Ă©tant un ensemble de techniques permettant Ă  un site web d’ĂȘtre rĂ©actif en fonction de l’appareil utilisĂ©. Conçu de cette maniĂšre, le site web s’adapte automatiquement Ă  la taille de l’écran, pouvant par la mĂȘme occasion rĂ©organiser l’affichage des Ă©lĂ©ments du site. Ainsi un menu horizontal peut passer en vertical sur une version mobile et certains contenus jugĂ©s «moins importants » sont masquĂ©s pour n’afficher que les Ă©lĂ©ments essentiels.

Nous pouvons observer cette pratique sur le site 3200 Tigres :

Exemple responsive design

Origines

Le terme de Responsive Web Design a Ă©tĂ© introduit par Ethan Marcotte, web designer de son Ă©tat, en s’inspirant de l’architecture responsive (c’est Ă  la page de s’adapter au support de visualisation, Ă  ses contraintes spĂ©cifiques et non pas l’inverse). Il dĂ©crit dans son livre Ă©ponyme (que je vous invite Ă  lire) que le site web rĂ©actif trouve son fondement principalement sur un trio de techniques :

  • CSS MĂ©dias Queries.
  • Grille de mise en page fluide.
  • Contenus flexibles (images, vidĂ©os etc
).

 

Qu’est-ce que cela change ?

 

Visuellement

AmĂ©lioration de la navigation & de l’expĂ©rience utilisateur (prĂ©sentations diffĂ©rentes & adaptĂ©es)
Support pour la navigation web (adaptation aux diffĂ©rentes rĂ©solutions d’écran + appareils)

 

Techniquement

La fluidité : exit les pixels et bonjour les pourcentages

Nous avons Ă©tĂ© habituĂ©s pendant longtemps Ă  travailler la conception de sites avec des dimensions fixes mais utiliser une mise en page flexible prĂ©sente bien des avantages. Conçu de cette maniĂšre le design n’aura aucun mal Ă  s’adapter Ă  diverses rĂ©solutions d’écran et cela Ă©vitera d’alourdir inutilement la feuille de style.
Les frameworks et thÚmes « «RWD » : une aide bien utile

Les frameworks peuvent se traduire comme une bonne base de travail pour dĂ©marrer un projet. Cela vous donnera une structure de code pour construire un site tout en respectant les critĂšres web actuels et, aspect non nĂ©gligeable, un gain de temps considĂ©rable. Cela tout en vous proposant un design minimaliste qui pourra s’adapter Ă  tous types de projets. Il en va de mĂȘme pour les thĂšmes utilisĂ©s pour les CMS. Avantage des frameworks et thĂšmes responsive ? Des mĂ©dias-queries dĂ©jĂ  inclues !

Quelques frameworks responsive :

responsive boilerplateBootstrap TwitterFoundation RWD

Pensons à l’envers : le mobile-first !

Cette fois-ci le principe consiste Ă  faire le contraire de ce que nous faisons habituellement pour Ă©viter tous problĂšmes de ressources inadaptĂ©es, de temps de chargements inutiles, d’élĂ©ments superflus et non ergonomiques.
Le concept mobile first consiste Ă  imaginer un site en concevant en prioritĂ© la version mobile et en adaptant progressivement celui-ci pour les Ă©crans plus larges. Cette façon de procĂ©der est contraire Ă  la maniĂšre ordinaire qui consiste Ă  dĂ©grader progressivement un site web pour l’adapter Ă  un affichage sur des Ă©crans plus petit. Cette approche peut ĂȘtre utile pour les sites web et applications web qui sont principalement utilisĂ©es sur mobile. Elle a l’avantage d’ajouter des effets/fonctionnalitĂ©s pour les grands Ă©crans au lieu d’en supprimer pour les petits.

Identifier les points de rupture : utiliser les médias-queries

Les Media-Queries CSS3 permettent de dĂ©finir des styles CSS diffĂ©rents en fonction de certaines spĂ©cificitĂ©s du navigateur, comme la rĂ©solution de l’écran. On pouvait dĂ©jĂ  cibler le type de mĂ©dia pour diffĂ©rencier les styles appliquĂ©s au navigateur des styles pour l’impression. GrĂące aux Media Queries, nous pouvons maintenant aller plus loin et faire la mĂȘme chose avec d’autres paramĂštres comme la rĂ©solution d’écran.
On peut ainsi dĂ©tecter la rĂ©solution au sein d’une mĂȘme feuille de style. C’est souvent cette mĂ©thode qui sera retenue afin d’éviter la multiplication des feuilles de style.
Pour cela, il faut commencer par dĂ©finir quels sont les points de rupture, c’est-Ă -dire les dimensions qui nĂ©cessiteront une adaptation du design.

Exemple d’utilisation des propriĂ©tĂ©s mĂ©dias queries :

@media screen and (min-width: 480px) and (max-width: 1024px) {
.sidebar {
display:block;
float:none;
width:100%;
}
}

Dans cet exemple nous dĂ©finissons un style spĂ©cifique pour les rĂ©solutions d’écrans comprises entre 480 pixels et 1024 pixels. GrĂące Ă  ces quelques lignes CSS, notre Ă©lĂ©ment sidebar n’aura pas la mĂȘme disposition sur un Ă©cran de mobile infĂ©rieur Ă  480px de largeur que sur un ordinateur ayant une rĂ©solution supĂ©rieure.

Fixer le viewport

Le terme viewport dĂ©signe la zone d’affichage de la fenĂȘtre du navigateur. Mais cette notion est diffĂ©rente si l’on est sur un ordinateur ou sur un mobile oĂč l’on ne voit pas rĂ©ellement la fenĂȘtre. Et pour rajouter encore des contraintes, chaque navigateur dĂ©finit sa propre surface de viewport, plus Ă©levĂ©e donc que la surface rĂ©elle en pixels.
Mais encore une fois, nous pouvons palier Ă  cette problĂ©matique en modifiant ce fameux viewport, ainsi que le niveau de zoom du navigateur. Cette pratique est possible cĂŽtĂ© HTML avec l’élĂ©ment propriĂ©taireet aussi cĂŽtĂ© CSS avec la rĂšgle @viewport :
En HTML

<meta name="viewport" content="width=device-width,initial-scale=1" />

En CSS

@viewport{
width: device-width;
zoom: 1;
}

Ici nous avons dĂ©fini la largeur du navigateur comme Ă©tant Ă©gale Ă  la largeur du terminal lui-mĂȘme.

Le zoom a Ă©galement Ă©tĂ© imposĂ© Ă  1, le navigateur mobile ne dĂ©zoomera pas et cela aura pour effet de donner le mĂȘme rendu chez tout le monde (au niveau du viewport).

A savoir : privilĂ©gier la rĂšgle @viewport qui sera mieux acceptĂ©e gĂ©nĂ©ralement plutĂŽt que l’élĂ©ment meta viewport qui n’est pas standardisĂ©.

 

Pourquoi faire un site Responsive Design ?

Proposer une seule version de site web censĂ©e s’adapter Ă  tous les terminaux est utopique. Cela revient Ă  faire des compromis qui ne seront pas satisfaisants pour l’utilisateur. Il est en effet difficile d’envisager une interface Web unique confortable Ă  la fois sur les petits et grands Ă©crans : soit le site sera Ă©triquĂ© sur grand Ă©cran avec des boutons surdimensionnĂ©s, soit il faudra sans cesse zoomer dans la page pour pouvoir lire le contenu sur un petit Ă©cran.

Le RWD permet de rĂ©pondre Ă  cette problĂ©matique. PlutĂŽt que de concevoir un gabarit unique faisant le grand Ă©cart pour convenir aux diffĂ©rents contextes, le responsive design permet de construire un site camĂ©lĂ©on qui change de forme selon le contexte, selon la taille de l’écran.

La seule diffĂ©rence sera que sur un petit Ă©cran l’information sera rĂ©organisĂ©e pour une lecture agrĂ©able et plus facile. Par exemple, les colonnes pourront s’ajuster, se dĂ©placer voir mĂȘme disparaĂźtre entiĂšrement. Les images quant-Ă -elles se redimensionnent automatiquement, se dĂ©placent, etc
 Un seul mot d’ordre : La flexibilitĂ©.
RWD

Avantages et inconvénients « Responsive »

Les +

  • Une seule version du site au lieu de diverses dĂ©clinaisons pour les diffĂ©rents types d’appareils.
  • Des informations toujours lisibles sans besoin de zoomer ou de scroller horizontalement.
  • Des mĂ©dias adaptĂ©s aux rĂ©solutions (images et vidĂ©os qui se redimensionnent automatiquement).
  • Universaliser le site web en utilisant les nouvelles rĂšgles et propriĂ©tĂ©s de CSS 3 (media Queries, micro formats…).
  • Des contenus qui ne sont pas tronquĂ©s mais rĂ©organisĂ©s.
  • Un design qui reste agrĂ©able.

Les –

  • Un temps de dĂ©veloppement plus important.
  • Des connaissances techniques plus abouties.
  • Une crĂ©ativitĂ© plus restreinte.
  • IngĂ©rable pour certains gros projets.

 

Conclusion

Le RWD peut se rĂ©vĂ©ler une vĂ©ritable solution pour beaucoup de projets mais avouons-le, difficilement applicable Ă  tous. Pour certains on prĂ©fĂ©rera les applications, plus adaptĂ©es. Cette pratique tend Ă  se dĂ©velopper dans les mois et annĂ©es Ă  venir et il y aurait encore beaucoup Ă  dire dessus. C’est pourquoi je vous invite Ă  suivre de prĂšs ce sujet hautement intĂ©ressant.

 

Autres exemples de sites « Responsive »

Page « test » d’Ethan marcotte

Exemple 1 de site responsive design

Office de tourisme Saint Etienne

Exemple 2 de site internet responsive design

Microsoft

Exemple 3 de site responsive design

Clean Air Challenge

Exemple 4 de site web responsive design

Kelcible est désormais certifiée Google Analytics Consultant

L’agence Kelcible grandit et s’amĂ©liore chaque jour. Depuis dĂ©but AoĂ»t, notre agence est dĂ©sormais certifiĂ© « Google Analytics Individual Consultant« .

L'agence Web kelcible, certifiée Google Analytics Consultant
L'agence Webmarketing Kelcible, certifiée Google Analytics Consultant

Continuer la lecture de Kelcible est désormais certifiée Google Analytics Consultant