Guide de style du site Web

mis à jour le 25/10/12

Table des matières

01. Logo


02. Typographie

H1/Héros/Titre

H2/Sous-titre/Titres de bloc

H3 Titre

H4 Titre

Titre H5
H6 Titre

Titres des sections

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis diam enim, a blandit ex vestibulum vel. Pellentesque nec dui id nisi feugiat pharetra ut et justo. Nam pretium magna ac rhoncus placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec lobortis diam massa, ut egestas nisi iaculis nec. 


03. Couleurs

Mandarine #F26B39

Emerald Shores #3E9976

Marée de minuit #273D3B

Coquillage #F9F6F0

Lever de soleil doré #FBC731

Sables coralliens #FABDB6

Sérénade écume de mer #85C9AF

Gris acier #707070


04. Mise en page – Page d'accueil

La page d'accueil est organisée de la manière suivante :

  • Barre de navigation
  • Image ou vidéo principale, pouvant comporter ou non un texte superposé
  • Titre
  • Sous-titre
  • Texte d'introduction
  • Découvrez nos villes
  • Lien vers le module carte
  • Saveurs du moment – Contenu sélectionné
  • Les expériences de Palm Beaches
  • Signature Events
  • Module Offres
  • Tendances actuelles – derniers contenus
  • Module de carte interactive
  • Module « Conseils des habitants »
  • Contenu sponsorisé
  • Module réseaux sociaux
  • Bloc de conversion – Moteur de réservation d'hébergement, inscription à la newsletter et au guide du visiteur
  • Pied de page

05. Mise en page – Pages de premier niveau


06. Mise en page – Pages de listes


07. Blog et pages générales


08. Tailles des images – Images principales

Tailles des images de bureau

Image complète : 1900 x 1000

Zone de vie : 1400 x 850

Toutes les images des héros doivent être 1900 × 1000, Cependant, en raison de la barre de navigation et des paumes, la zone visible (sujet de la photo) est limitée à 1400 × 850 avec 150 px de l'espace au-dessus de la zone active. Si vous avez une photo dont le sujet doit être visible (voir la page d'accueil de la collection), assurez-vous que celui-ci s'inscrit dans la zone active de 1400 × 850. Voir le schéma à droite. 

IMAGES DES AFFICHES : 1600 x 900

Les images d'affiche sont utilisées comme espaces réservés pendant le chargement des vidéos. En général, elles ne sont visibles que pendant une seconde ou moins. Il est fortement recommandé d'utiliser la première image de la vidéo afin d'assurer une transition fluide après le chargement et le démarrage de la vidéo.

IMAGES DU BLOG HERO : 1900 x 1000

(Les images principales ne sont pas obligatoires pour chaque article de blog, mais elles sont recommandées. Si aucune image principale n'est fournie, une image de remplacement représentant une aquarelle sera utilisée.)

Une famille prend un petit-déjeuner tropical au Palm Beaches Resort, entourée d'une végétation luxuriante et d'un décor élégant.
Un golden retriever jouant à la balle sur une plage ensoleillée

Tailles des images mobiles

Image complète : 900 x 1600 

Zone de vie : 700 x 1300 

Toutes les images des héros doivent être 900 × 1600, avec une zone sécurisée (sujet de la photo) limitée à 700 × 1300 avec 135 px de l'espace au-dessus et 165 px de l'espace sous la zone active. Si vous avez une photo contenant un sujet ou du texte (voir la page d'accueil Love), assurez-vous que le sujet s'inscrit dans la zone active de 700 × 1300. Voir le schéma à droite. 

IMAGES DES AFFICHES : 900 x 1600 

Les images d'affiche sont utilisées comme espaces réservés pendant le chargement des vidéos. En général, elles ne sont visibles que pendant une seconde ou moins. Il est fortement recommandé d'utiliser la première image de la vidéo afin d'assurer une transition fluide après le chargement et le démarrage de la vidéo. 

IMAGES DU BLOG HERO : 900 x 1600 

(Les images principales ne sont pas obligatoires pour chaque article de blog, mais elles sont recommandées. Si aucune image principale n'est fournie, une image de remplacement représentant une aquarelle sera utilisée.)

Une famille de quatre personnes, habillée en tenue d'été, marche main dans la main vers un phare pittoresque entouré de verdure luxuriante et de palmiers.
Un paysage serein avec un vaste champ vert sous un ciel bleu clair

09. Tailles des images – Pages de premier niveau

IMAGES DE HÉROS: 1900 x 1000 

CONTENU PHARE DE HAUT NIVEAU 

HORIZONTAL : 950 x 500 

VERTICAL : 500 x 850 

PAGE D'ACCUEIL ÉVÉNEMENT ET À LA UNE 

LISTE DES ARCHES : 450 x 800 

GRILLES DE MAÇONNERIE DE NIVEAU SUPÉRIEUR 

Les images en orientation paysage sont fortement recommandées. Veuillez consulter l'exemple à droite. 

1 × 1,5 : 700 x 900 

2 x 0,5 : 1400 x 450 

1x.5 : 700 x 450 

1×1 : 700 x 700 

ACTUALITÉS LES PLUS POPULAIRES DU MOMENT : 

500 x 650 

PUBLICITÉS SPONSORISÉES: 600 cm x 350 cm


10. Tailles des images – Corps, listes et relations publiques

IMAGES DU CONTENU EN VEDETTE 

Image horizontale : 950 x 500 

Image verticale : 500 x 850 

Veuillez tenir compte de l'orientation de l'image lorsque vous sélectionnez une image. Veuillez consulter l'exemple ci-dessous. 

Un site web qui présente des contenus vedettes sur des destinations de voyage, y compris un séjour dans un hôtel de luxe, une expérience de safari VIP et l'exploration de la culture côtière.

BLOG CORPS/IMAGES EN LIGNE : 1000 x 700 

Les images en orientation paysage sont fortement recommandées. Veuillez consulter l'exemple ci-dessous.

Enfants et adultes se rassemblent sur un sol de pétales de fleurs colorés lors d'une célébration de Diwali à West Palm Beach, créant une atmosphère vibrante et festive.



GRILLE ET DÉTAILS DES ANNONCES, ET IMAGES DE LA PAGE RELATIONS PUBLIQUES : 

1 150 w x 700 h 

Les images en orientation paysage sont fortement recommandées. Veuillez consulter l'exemple ci-dessous.


11. Tailles des images – Publicités

IMAGES SPONSORISÉES/PUBLICITAIRES : 600 x 350 

Les images en orientation paysage sont fortement recommandées. Veuillez consulter l'exemple ci-dessous. Veuillez consulter l'exemple ci-dessus.