(Mini-Site + Newsletter) en responsive design

Bonjour,

- Nous cherchons 2 profils : un développeur et un graphiste (un prestataire pourra répondre sur l'un ou l'autre ou les 2).

- Délais : asap

1. Périmètre du projet :

Développements à livrer :
- Un site web d’1 seule page
- Un overlay avec formulaire d’inscription en 3 étapes
- Un pop up avec du texte pour les conditions générales
- Un webservice : envoyant les données des inscrits par le formulaire sur l’overlay vers la base de donnée du site (une url sera fournie).
- Maintenance du site

Eléments graphiques à livrer :
- Logo
- Bandeau image pour header
- Charte graphique simple (typo, couleur, picto ?, applats, taille des images, bouton Call to action…)
Livraison des éléments découpés prêt à intégrer.

2. Contexte :
Il s’agit de créer un site web qui référence les nouvelles ventes de produits vues sur des sites marchands. Ce site d’une page sera aussi utilisé quasiment à l’identique comme newsletter. Cette Newsletter sera envoyée par email à la base de données des inscrits au site.

La seule différence du site par rapport à la newsletter est que sur le site, un Overlay se déclenche après le chargement de la page (le code permettant l’affichage de l’overlay sur le site sera clairement identifiable pour permettre de le supprimer facilement pour obtenir le code de la newsletter prêt à être chargé dans le routeur email).

Prévoir un pop up avec les conditions générales accessible par un lien texte depuis le footer du site, depuis l’overlay et depuis la newsletter.

Le périmètre du projet n’inclus pas le routage de la newsletter car nous avons déjà nos propres solutions. Nous n’aurons qu’à copier coller le code HTML du site dans notre routeur email pour pouvoir envoyer la newsletter à la base de donnée.

3. Contraintes techniques : site = newsletter
Pas de javascript, pas de iframe, rien qui soit incompatible avec le HTML rudimentaire d’un email, pour être sûr que la newsletter s’affichera correctement dans les boîtes de réceptions.

4. Hébergement : nous disposons d’un compte d’hébergement illimité sur godaddy - le prestataire devra faire des recommandations et assister au paramétrage du compte et faire la mise en ligne du site.

5. Stockage des images :
Les newsletters pourront être ouvertes plusieurs jours après l’envoi. Dans ce cas pour que l’affichage des images puisse continuer à se faire dans les inbox des internautes, les images de chaque newsletter devront être stockées dans des dossiers qui ne seront pas écrasés par les images des newsletters du lendemain. Il faudra donc stoker les images de chaque newsletter dans des dossiers différents.

Pour ce qui concerne le site web, seul le site de la dernière actualisation pourra être conservé et visible online (pas besoin de conserver un historique des newsletters visible par les internautes).

6. Responsive : le site devra être « responsive design» pour s’afficher sur PC et sur Mobile – Les blocs passant les uns sous les autres pour s’adapter à la taille des écrans.

7. Template responsive :
(A voir si utile) Se baser sur Mailchimp ou campaign monitor ou autre template responsive pour avoir un template responsive qui fonctionne.
Nous disposons d’un compte Litmus.com permettant d’effectuer des tests d’affichages de la newsletter sur différents webmail PC et mobile.

8. Système de mise en ligne :
Le prestataire pourra proposer un système simple permettant programmer la mise en ligne la version du site pour le jour suivant à l’avance. Le changement de site se fera le soir à minuit. Si aucune nouvelle version n’a été « chargée » alors le site restera inchangé.

9. Graphisme :

Logo : Un logo simple autour du NOM DE DOMAINE (pas de picto)

Charte graphique : Une charte très simple par blocs carrés ou rectangulaires, permettant le responsive design
Des applats pas de bordures
Des angles pas d’arrondis

Couleurs : Un fond blanc,

Police : Une police unique déclinée en maximum 2 tailles, gras ou pas, 3 couleurs de typo max (une couleur pour les titres, le noir pour les textes, une couleur pour les liens cliquables).

Boutons : call to action entièrement cliquables, une couleur spécifique pour tous les call to action

Picto : créer un picto à afficher dans l’onglet du navigateur.

10. Images :
Les images des produits seront obtenues directement sur les sites marchands. Une méthode de découpe d’image pour obtenir des images toujours au même format et ayant un poids le plus léger possible pourra être proposée par le prestataire, ainsi qu’une méthode permettant d’ajouter simplement une pastille -XX% sur chaque image.
Prévoir systématiquement un ALT texte sur toutes les images qui s’affiche en Mousse over.