Guidelines (beta)

Add some text
• Redaction style
• Text hierarchy
• Font style in paragraphs
• Nomenclature of nouns and lexicon

Add some images
• Nomenclature of images
• Images accessibility
• Weight and quality of images

Improve performances
• Improve SEO
• Improve the accessibility (WCAG 2.0)

Redaction style

Writing texts dedicated to the web does not necessarily follow the same rules as writing creative texts. For example, in a creative text, it is well seen to use synonyms to avoid repetition, but in the case of a website, repetition is a good way to make search engines understand which keywords summarize your website.

• repetition is important for a well-referenced website (SEO)
• think clarity of information rather than editorial creativity

Text Hierarchy

You have at your disposal several HTML tags to structure your text, title or header tags (h1, h2, h3 up to h6) and the block or paragraph tag p. These tags allow you to structure your page and are essential for a good referencing on search engines (SEO).

• tags are useful for structuring information, not for stylizing text
• a title/header is always shorter than the following block/paragraph
• the keywords of your page should be in the titles/headings
• titles/headings never contain a colon ":" at the end of a line 🙏

Font style in paragraphs

Avoid multiple font styles in blocks/paragraphs to make information stand out. To capture the attention of readers, prefer short, concise paragraphs and put keywords in titles/headings.

• color is for links only (you don't have to do anything)
• italic is reserved for the mention of work titles, quotations and foreign words
• underline can be used for links according to the chosen typeface (in this case you don't have to do anything)
• bold can be used to highlight part of the sentence
• keywords of your message must appear in the title/headings

Nomenclature of nouns and lexicon

Nomenclature of nouns
Take the examples of Build&nsbp;Up and L-Étagère. For these two proper names, several ways of writing them are possible: "Build&nsbp;Up", "BuildUp" in the first case, "L-Étagère", "L-Etagère", "L'Étagère", "L'Etagère" (etc.) in the second case. Choose a syntax for your nouns and don't change any more. In addition to a more professional rendering, this is important for your search engine optimization (SEO). Systematically use non-breaking spaces for compound proper nouns (e.g. Buil Up): even if the word concerned is not cut on your computer screen, it could be cut on a mobile or tablet.

Lexicon
Avoid using different terms to describe the same thing. Let's take the example of L-Étagère and its cultural space. We have decided between "cultural space", "exhibition space", "cultural centre" and we don't make any variations in the menus and texts. This habit allows readers to understand the concept and contributes to good SEO (Search Engine Optimization).

• proper nouns are always written according to the same syntax (spaces, hyphens, accents)
• do not forget the unbreakable spaces " " (or   in HTML language) in between two words (e.g: Build Up)
• the HTML tag <nobr> allows to make a hyphenated noun unbreakable (e.g: L-Étagère)
• the terms of the chosen lexicon are always the same (e.g. cultural space)
• ^⌘R (shift command R) on mac, allows you to visualize what you just inserted on mobile and tablet

Nomenclature of images

To avoid potential technical problems that may break your website, it is forbidden to use accents and spaces in the nomenclature of your images (e.g. "letagere.jpg" and not "l Etagere.jpg"). If you do not follow these rules, it is likely that nothing visible will happen, but it will weaken your website in the long run. For optimal accessibility, also make sure to give a real name to your images. (e.g: "all-staff.members.jpg" et non "img 0005.jpg"). In order to avoid having to rename an entire library in the medium term, it is recommended to take the right habits straight away.

• No spaces, uppercase letters or accents in filenames .jpg, .png, .gif, etc.
• Descriptive name for better accessibility (if several images, add "_001, _002, etc.")
• Dash "-" to separate words (e.g: all-staff-members.jpg)
• Underscore "_" to separate info (e.g: all-staff-members_001.jpg)

Images accessibility

Images must be accessible to people with visual disabilities. To have an accessible and well-referenced website (SEO), it is important to fill in the three fields "alternative text", "caption" and "description" in the WordPress media library. The alternative text explains what the image communicates. It is not visible on the site but appears if the image is missing for example. The caption may or may not be visible and typically contains the title (if the image represents a work of art for example) and/or the name the illustrator/photographer and/or copyrights. The description allows people to use a screen reader to read the image.

• alternative text = meaning of the image in case it cannot be displayed in the browser
• caption = title, author, year, copyrights, comment on the image, useful information for everyone
• description = visual and semantic description for people using a screen reader

Weight and quality of images

It's more complicated than it sounds to get the right formatted pictures. You need sufficient quality to avoid pixelated images, and you need to avoid images that are too heavy so as not to slow down the website in the long term. Today's mobile phones take pictures of such good quality that it is unlikely that you will end up with pixelated pictures. But beware of images that are too heavy. A single image that is too heavy won't make much difference, but when the server is saturated, the whole media library will have to be lightened. Below, the web export window on Photoshop. Whether you have access to Photoshop or not, make sure to respect the following points. I remain at your disposal to resize your images if needed. If there is only one image, send it to me by email and if you want me to crop a batch, rename the images correctly (see entry above) then gather them in a folder that you compress and send it to me by Wetransfer.

• the image should be as light as possible, between 100-800K
• the image should be between 500px and 2000px of width
• the image should be in .jpg format (.png is reserved for transparent images and .gif for animated images)
• do not keep images imported by mistake in your Wordpress media library.

Improve SEO

SEO is dependent on dozens of factors and having the best SEO imaginable is a mandate in itself. In the case of a non-commercial project, you have to respect the rules of ABC and let time do the rest. To contribute to a good SEO, the lexicon you use has a direct impact. Do the exercise of listing the keywords that categorize your organization and make sure they appear regularly in your texts. On each page, make sure that the most important keywords to describe the content of the page are present in the title (h1). In the subtitle (h2, h3), summarize the content of the page. You then expand in the paragraphs/blocks (p). Information that is mentioned in the title/header should be expanded in the subtitle and further developed in the text that follows. The work to be done in the media library (see Accessibility of images) also contributes to referencing.

Improve Accessibility

When you go online, I install on your website the free widget of User Way (floating icon on the left side of the page). This menu allows people with a visual and/or hearing disability to adapt the appearance of the site to their needs (text size, contrasts, dyslexia-friendly typeface, etc). At the same time, it is important to fill in all the fields in the media library (see Images accessibility). These two things combined are not always sufficient to meet the requirements set by the WCAG 2.0 norms that are difficult to reach at a lower cost. I therefore encourage you not to neglect the media library until I find a solution to offer an Accessibility Guarantee to my clients that would be included in the annual maintenance.

Conclusion

Following these few tips requires time and discipline and I'm willing to bet that it will not be perfect. That's okay, my website isn't either! Respecting these notions will allow us to gain or avoid losing time in the long run. So just do your best. As you know, I'll stay by your side once the website is online for maintenance. You can contact me by email or make an appointment on Zoom in case of doubts and questions. Good luck!