LA PRÉPARATION DE LA LANDING PAGE (suite)

Version française

La création du site web responsive

  • Concepts importants à maîtriser avant tout
  • Recueil des besoins
  • Préparation du cahier des charges
  • Rédaction du cahier des charges
  • Les compétences nécessaires au sein du projet
  • Préc-conception et gabarits
  • Conception et prototypage
  • Design de la page
  • Intégration et A/B tests
  • Développement et administration
  • Contribution éditoriale
  • Mise en ligne

– – – – –

Pour démarrer, une page toute prête utilisant un code « propre » est préférable. Le designer du MIT Dave Gamache nous offre la sienne sur son site : getskeleton

Modèle utilisable pour bien partir

Aller sur cette page : http://www.getskeleton.com/ pour télécharger le modèle :

Cliquer sur ce bouton :

Une fois le dossier compressé téléchargé sur l’ordinateur, le décompresser et découvrir ces deux dossiers (images and stylsheets) et ce fichier (index).

L’essentiel des sites qu’on visite sur Internet comporte une page d’entrée vers le site qui s’intitule « index.html » ou « index.htm » ou « index.php ». Elle correspond au fichier « index » téléchargé.

Le dossier « images » contient les images des favicones que l’on voit sur les onglets dans les navigateurs, utiles pour savoir quel site est ouvert dans tel onglet :

Les différentes tailles correspondent aux possibilités offertes selon les réglages au niveau de l’utilisabilité de l’ordinateur, de la tablette ou du smartphone choisis par l’utilisateur.

Le dossier « stylesheets » contient 3 feuilles de styles (CSS) qui s’ajustent en fonction du navigateur de l’utilisateur, et des paramètres choisis en terme d’utilisabilité. Nous utiliserons la feuille de style base.css pour l’exemple qui va suivre.

Le programme permettant de travailler avec les fichiers HTML et CSS

Dreamweaver est un logiciel agréable et facile à utiliser pour les débutants comme pour les professionnels du web, grâce à son interface permettant de passer du code HTML à la version « Aperçu » ou WYSIWYG (What You See Is What You Get d’un site codé en HTML).

English version

is a good software enabling non-programers to work with html very easily thanks to its wysiwyg interface…

You can download the evaluation software here : http://www.adobe.com/fr/products/dreamweaver.html

Make your choice of colors

Look on this page to find the tools that you will need to prepare the colors of your document :http://scoop.it/t/color.

You can for example choose colors from a photo thanks to http://www.colorhunter.com/

You can try to attain a good contrast ratio using the Accessibility color wheel :http://gmazzocato.altervista.org/fr/colorwheel/wheel.php The most important is to try to find a good contrast ratio (> 8.1) between the foreground and background color


or

You can choose as much colors as you want, but 3 should be enough for one website

Choice of fonts

Go to http://www.google.com/webfonts

Select among the huge number of fonts the one you want for your titles and body text, or filter using the appropriate filters

Decide which font is the best for your titles/body texts by modifying the text

Once you have chosen a font, press the Add to collection button

A new page appears

You can choose as much fonts as you want, but 3 should be enough for one website

You then have to copy this link


To paste it into the index.html file, in the CSS section

You then have to paste the name of the fonts into the css file (base.css in this case)

Of course, you can do the same for the body text, by modifying the “body” style :

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.