Skip to content →

rocioalvarado.ca Posts

The very basics of Google Analytics

A tool like Google Analytics helps you visualize the traffic on your site. You can see how many unique visitors come to your site every day, see where they come from, what operating system they use (Apple, Linux, Windows), and, among other things, what browser they use.

The purpose of this tool is to target the recurring visitors and provide them with content they would be most interested in.

The following link is a very good overview of what Google Analytics has to offer: Beginner’s Guide to Google Analytics. Also view this excellent Google Analytics Interface Tutorial video by Google. From there you can find other video tutorials that have more advanced topics.

Alternatives to Google Analytics do exist, but are not always free or as easy to install.

Le fondamental de Google Analytics

Un outil tel que Google Analytics vous permet de visualiser le trafic sur votre site. Vous pouvez voir combien d’uniques visiteurs  viennent sur votre site tous les jours, voir d’où ils viennent, voir quel système d’exploitation (Apple, Linux, Windows) ils utilisent et, entre autres choses, quel navigateur ils utilisent.

Le but de cet outil est de cibler les visiteurs récurrents et de leur fournir du contenu adapter à leurs intérêts.

Le lien qui suit est un très bon aperçu de ce que Google Analytics a à offrir: Beginner’s Guide to Google Analytics. Voir aussi ces tutoriels vidéo Google Analytics et Présentation du nouveau Google Analytics.

Il existe des alternatives à Google Analytics, mais elles ont parfois des frais et ne sont pas aussi facile à installer.

Comments closed

HTML5 For Web Designers – A must read

Even if you are just starting to use HTML5 or have been using it for a while, I highly recommend all web designers, developers and any one in between to read this book. It was an easy read with amazing layout, great graphics and images. The author was witty and concise, but also humble in his limitations.

Jeremy Keith, the author, summarizes the topics in six distinct chapters:

  1. A Brief History of Markup
  2. The Design of HTML5
  3. Rich Media
  4. Web Forms 2.0
  5. Semantics
  6. Using HTML5 Today

All chapters seems to be very carefully thought out. It is obvious that the author barely scratched the surface of what HTML5 can do in such a small book, but he managed to describe key elements with ease and clarity.

50 Comments

The advantages of a CMSLes avantages d’un SGC

A CMS (Content Management System) is a program that is installed as a website and allows the user to modify content without having to go into the code, thus it separates the input of content from the design and general layout of the website.

In the Wikipedia page List of content management systems, there is over a hundred CMS: some I’ve heard of, others I’ve used, and most that I’ve never seen before. The top three are WordPress, Joomla and Drupal.

WordPress is user-friendly, has a huge community of volunteer web designers and web developers, offers loads of free resources like themes and plugins. There is no lack of tutorials, how-to’s and information on WordPress. It is pretty impressive actually. WordPress started as a simple blog application which was a bit limiting and slowly evolved into a fully grown, highly customizable CMS.

Joomla is apparently a simple “out of the box” (meaning ready to use) installation. I say apparently because I installed it once about 5 years ago and never touched it again. According to a comparison of all three CMS, Joomla’s core structure is rock solid and offers features that the other two have to be done by a developer. (Side note: I noticed that  the website of the comparison link was running on WordPress. Food for thought!)

Drupal, over that last couple of years, has been gaining momentum in the world of CMSes. Although maybe not as user-friendly or simple “out of the box” experience, with the right developer at your side, the sky’s the limit. In the latest version of Drupal, we can see that the Drupal community has been working hard to improve usability. Drupalites mainly consist of geeks, and you know that geeks are always up to neat and awesome things. And as far as I know, Drupal is the only system that has an aggressive web accessibility team to ensure that the core features of Drupal be usable by everyone.

So depending on what type of website you want, you can choose a CMS that suits your needs. If you are not sure, ask an expert. But no matter what CMS you end up choosing, these are the fundamental advantages you, the client, will have:

  • No need to learn any programming or coding,
  • Complete control of your content,
  • Add and modify content anytime and anywhere,
  • A lot of features are all ready to install and use,
  • Get the latest system updates.

Un SGC (Système de Gestion de Contenu) est un programme qui est installé comme un site Web et permet à l’utilisateur de modifier le contenu d’un site web sans avoir à aller dans le code, séparant l’entrée de données et la présentation visuelle du site.

Dans la page Wikipédia Liste de systèmes de gestion de contenu, il existe plus de cent système. J’ai entendu parler de quelque uns, j’en ai utilisé d’autres, mais la plus part je n’ai jamais vu avant. Les trois plus important sont WordPress, Joomla et Drupal.

WordPress est convivial, a une énorme communauté bénévole de concepteurs de sites Web et développeurs web, offre une grande quantité de ressources comme des thèmes et des plugins. Les tutoriaux, les comment-faire et les informations sur WordPress ne sont pas ce qui manque. C’est assez impressionnant. WordPress a commencé comme un simple gestionnaire de blog qui était un peu limité, mais lentement a évolué pour devenir un SGC personnalisable.

Joomla est apparemment un système prêt à utiliser à son installation. Je dis apparemment parce que je l’ai installé il y a environ 5 ans et je ne l’ai jamais touché après. Selon une comparaison des trois SGC que j’ai lu, la structure de base de Joomla est solide et offre des fonctionnalités que les deux autres n’ont pas sans l’intervention d’un développeur.

Au cours des dernières années, Drupal a pris de l’ampleur dans le monde des systèmes de gestion de contenu. Bien que pas aussi convivial ou prêt à utiliser, avec un bon développeur à vos côtés, il n’y a pas de limite. Dans la dernière version de Drupal, nous pouvons voir que la communauté Drupal a travaillé fort pour améliorer la convivialité. Les Drupalites se composent principalement de geeks, et vous savez que les geeks se lancent toujours dans des choses géniales. En plus, Drupal est le seul système qui ont une équipe agressive en accessibilité du Web en vue de s’assurer que les fonctions de base de Drupal peuvent être utilisées par tout le monde.

Selon le type de site que vous voulez, vous pouvez choisir un SGC qui répond à vos besoins. Si vous n’êtes pas sûr, demandez à un expert. Mais peu importe le système que vous choisissez, voici les avantages fondamentaux que vous, le client, aura:

  • Pas besoin d’apprendre de la programmation ou du codage,
  • Un contrôle complet de votre contenu,
  • Ajouter et modifier le contenu à tout moment et n’importe où,
  • Un grand nombre de fonctionnalités sont tous prêts à installer et à utiliser,
  • Obtenir les dernières mises à jour du système.

Comments closed

Ultimate checklist for making your plugin accessible

HTML code semantics

Following HTML code semantics is fundamental in making your web applications accessible because assistive technologies, like screen readers, rely on the code to transmit the correct information to the user.

Forms are communly inaccurate due to a lack of the label tag or the misuse of the input fields.(Check out the W3C for forms in HTML4 or W3C for forms in HTML5.)

Another commun mistakes involves data tables weither by not structuring your table with the proper elements or  by adding visual attributes that should go in the CSS, (Check out W3C for tables in HTML4 or W3C for tables in HTML5.)

Follow W3C standards to the letter and you will have a good start.

Use CSS

To keep the integrity of your code separate content from presentation. In the case of a data table, attributes like cellspacing and cellpadding should be replaced by padding of the td element in your css file. This will allow users to strip down the visuals to suit their own needs.

Tabbed Navigation

Many users use only the tab key to navigate within a web browser and webpage, because they cannot use a mouse (in case of limited motor skills or blindness).

Colour contrast

There are many tools to help you choose the appropriate colour contrasts between background and foreground of your text.

A proper ratio of luminosity assures that users with visibility issues can clearly see differences between elements. Think of users with colourblindness or eye sensitivity.

WAI-ARIA attributes

If you want to go a step further and you are coding in HTML5, you can use ARIA attributes to compliment all previous steps. WAI-ARIA is a set of elements that give extra code information to assistive technologies.

More information about ARIA:

1,072 Comments

Making your site search engine friendlyRendre votre site convivial aux moteurs de recherche

Terms like search engine optimization (SEO), metadata, ranking and search engine marketing (SEM) can be a bit confusing. I will instead give you three basic ways to get your site more visibility on any search engine.

Follow accessibility standards

This is the most technical point, but the most critical of all three points. It demands the know-how from your web professional. The main focus is on making your content available and providing coherent HTML code.
Accessibility standards include:

  • Providing alternative text to anything non-textual or complex,
  • Using headings sequentially,
  • Conserving the purpose (semantics) of all HTML code,
  • Making the content of links and destination comprehensible as is.

Get known outside of your sphere

Use external resources to attract attention to your site. Social Networking sites are a great way of increasing your online presence. Facebook, Twitter, LinkedIn and now Google + are the most well known social networking sites, but there are much more out there. They all have different particularities. It is up to you to judge which one fits your needs most. You can also participate in forums, discussion boards and sites with comments that target your desired audience.

Web tools from your favourite search engine

All of the major search engines have what is called “Webmaster tools”. Search engines provide us with the possibility to send them data about your site directly. Data like your site URL and an index of your site, in turn they provide you with basic information on your site and submit it to their database (webcrawler).

Remember that making your site appear in search results takes time and dedication. There are no magic tricks to make your site be in the top results. The tips I gave you should give you a head start into attracting more people to your site.

Des termes tels que SEO, métadonnées, classement des sites Web et SEM peut être un peu compliqués. Je vais plutôt vous donner trois façons de donner à votre site Web plus de visibilité dans n’importe quel moteur de recherche.

Suivre les normes d’accessibilité

C’est le point le plus technique, mais le plus critique de tous les trois points. Elle exige du savoir-faire de la part de votre professionnel du Web. L’objectif principal est de rendre votre contenu disponible et de fournir du code HTML cohérent.
Les normes d’accessibilité comprennent les implications suivantes:

  • Il fault fournir un texte alternatif à tous les éléments non textuelles ou complexe,
  • Il faut utiliser des en-têtes de façon séquentielle,
  • Il faut conserver la signification (sémantique) de tous les codes HTML,
  • Il faut rendre le contenu et destinations des liens compréhensibles.

Obtenez connu en dehors de votre sphère

Utiliser des ressources externes pour attirer l’attention vers votre site. Les sites de réseaux sociaux sont une excellente façon d’augmenter votre présence en ligne. Facebook, Twitter, LinkedIn et maintenant Google + sont les plus connus des sites de réseautage social, mais il y en a beaucoup plus. Ils ont tous des particularités différentes. C’est à vous de juger celui qui correspond le plus à vos besoins. Vous pouvez également participer à des forums, des discussions et à des commentaires de sites qui ciblent votre auditoire désiré.

Des outils Web de votre moteur de recherche préféré

Tous les principaux moteurs de recherche ont ce qu’on appelle “Webmaster Tools“. Les moteurs de recherche nous fournissent la possibilité de leur envoyer directement des données sur votre site Web: des données comme l’URL et un index de votre site. En échange, ils vous fournissent des informations de base sur votre site et le transmettent à leur base de données (webcrawler).

Rappelez-vous que faire en sorte que votre site Web apparaisse dans les résultats de recherche prend du temps et surtout du travail. Il n’y a pas des tours de magie pour que votre site soit dans les premiers résultats. Les conseils que je t’ai donné devrait vous donner une longueur d’avance en attirant davantage de personnes à votre site.

Comments closed

Creating a good domain nameCréer un bon nom de domaine

A domain name is the first step in starting your website. If you have a company name already or if you are an artist and you want to showcase your personal work, then having your name as a domain name is a very good option. If these apply to you, check their availability at godaddy.com; otherwise, put your thinking cap on and get creative.

  • Make it short and simple,
  • Brainstorm,
  • Hyphens or not, numbers or not,
  • Make it multilingual,
  • .com, .org, .net, .ca?
  • Purchasing your domain name,
  • Buying off an existing domain name.

Make it short and simple

The idea is to have a domain name that will be easy to remember, easy to say, but mostly easy to find. Something unique like a made up word or an acronym might be ideal, but will be harder for search engines like Google or Bing to find you unless these made up words or acronyms are well known.

Brainstorm

Here are three websites that can help you brainstorm while checking if your choices are available:

  • www.panabee.com: Simple and to the point. Write a couple of words and it comes up with a bunch of possible domain names, other suggestions and you can even buy the domain name from them.
  • www.domainhole.com: This site has a few more features like a domain generator depending on the length of characters, a name spinner that combines sets of words together with suggestions and even a system to search recently expired domains. Some services require you to create a login.
  • www.dotomator.com: You can brainstorm endlessly with a combination of two suggested and/or your own terms.

Hyphens or not, numbers or not

Generally hyphens and numbers are not recommended, but if used in moderation I see no harm in them as long as the domain name is easy to remember or easy to say. Try the domain name without either, see if they are available. See if your domain name passes the “radio test”–meaning, if someone says your domain name on the radio or over the phone, will the person listening be able to get to you website.

Make it multilingual

If your target audience is francophone and anglophone, for example, choose words that work in both languages. If this is impossible, consider purchasing two domain names, one in French and the other in English.

.com, .org, .net, .ca?

As a convention, .com is used for companies, .org for organizations, .net for networks and .ca for Canadian sites. The most common is .com, so even if you don’t have a company, .com is a sound choice for any website. I chose .ca, because my target audience is in Canada and .ca domains are managed by a Canadian agency, unlike the other domains which are run by American agencies. You can buy as many domain derivations as you like, but one is enough.

Purchasing your domain name

Use a well known domain provider like Godaddy. It is better to register your domain name with a different company than your web hosting provider.

Buying off an existing domain name

If you have your heart set on a specific domain name, you can always try to contact the owner of this domain name to buy it off. This can be an expensive option since domain names are sometimes considered as real estate.

Un nom de domaine est la première chose à faire pour votre site Web. Si vous avez déjà un nom de compagnie  ou si vous êtes un artiste et que vous voulez présenter vos travaux personnels, vous pouvez parfaitement utiliser votre propre nom comme nom de domaine. Si ces dernières options s’applique à vous, vérifiez leur disponibilité chez godaddy.com, sinon, il faut faire travailler ses méninges et faire preuve de créativité.

  • Court et simple,
  • Remue-méninges,
  • Des traits d’union ou pas, des numéros ou non,
  • Multilingue,
  • .com, .org, .net, .ca ?
  • L’achat de votre nom de domaine,
  • Acheter un nom de domaine existant.

Court et simple

Il faut réussir à avoir un nom de domaine qui sera facile à retenir, facile à dire, mais surtout faciles à trouver. Quelque chose d’unique comme un mot inventé ou d’un acronyme pourrait être idéal, mais il sera plus difficile pour les moteurs de recherche comme Google ou Bing pour vous trouver à moins qu’ils soient bien connus.

Remue-méninges

Voici trois sites en anglais qui peuvent vous aider à réfléchir tout en vérifiant si votre choix sont disponibles:

  • www.panabee.com : Simple et précis. Avec juste quelques mots, le système vous transmet un tas de noms de domaine possible, d’autres suggestions de mots. Vous pouvez même acheter le nom de domaine directement chez eux.
  • www.domainhole.com: Ce site a un peu plus de fonctionnalités comme un générateur de nom de domaine en fonction de la longueur de caractères, un système qui combine des mots suggérés et même un système de recherche de noms de domaine récemment expirés. Certains services exigent que vous créez un compte.
  • www.dotomator.com: Vous pouvez réfléchir infiniment avec la combinaison de deux mots suggérés et / ou vos mots.

Des tirets ou pas, des numéros ou non

Généralement les tirets et les numéros ne sont pas recommandés, mais s’ils sont utilisés avec modération, je ne vois pas de mal à les utiliser tant que le nom de domaine soit facile à retenir ou facile à dire. Vérifier si votre nom de domaine est disponible sans tirets et sans numéro. Assurer vous surtout que votre nom de domaine passe le “test de la radio” – ce qui signifie, si quelqu’un dit que votre nom de domaine à la radio ou au téléphone,est-ce que  la personne qui écoute va pouvoir facilement arriver à votre site.

Multilingue

Si votre public visé est francophone et anglophone, par exemple, vous pouvez choisir des mots qui fonctionnent dans les deux langues, comme “creations”. Si cela est impossible, envisager l’achat de deux noms de domaine, un en français et l’autre en anglais.

.com, .org, .net, .ca ?

Par convention, .com est utilisé pour les compagnies, .org pour les organismes , .net pour les réseaux et les .ca pour les sites canadiens. Le plus commun est .com, donc même si vous n’avez pas une compagnie, .com est un choix judicieux pour tout site web. J’ai choisi .ca, parce que mon public cible est au Canada et les noms de domaines .ca sont gérés par un organisme canadien, contrairement aux autres qui sont gérés par une agence américaine. Vous pouvez acheter autant de dérivations de nom de domaine que vous voulez, mais un seul suffit.

L’achat de votre nom de domaine

Utilisez un fournisseur de domaine bien connu comme GoDaddy. Il est préférable d’enregistrer votre nom de domaine avec une compagnie différente de celle de votre fournisseur d’hébergement Web.

Acheter un nom de domaine existant

Si vous voulez absolument un nom de domaine spécifique, vous pouvez toujours essayer de contacter le propriétaire de ce nom de domaine et l’acheter. Cela peut être une option coûteuse puisque les noms de domaine sont parfois considérés comme des biens.

Comments closed

Before starting your website Avant de commencer votre site Web

If you are planning to get a website for yourself or your small business in the near future, there are a few things that you need to know before engaging in this important extension of your business.

  • Be prepared to be actively involved,
  • Brand yourself: your domain name, logo, and slogan,
  • Find what you like,
  • Static or dynamic website,
  • Have your content ready,
  • Get a good Web Hosting provider,
  • Consider social networks,
  • Maintenance,
  • Ask questions.

Be prepared to be actively involved

You must consider the pre-production process as well as the eventual post-production life of your site. Having a successful website demands a consistency and a certain dedication from everyone involved, but especially from the owner of the website. This is particularly the case for any personal or small business website. You will be required to make decisions, sometimes quickly, be receptive to learn a few things along the way and communicate your desires efficiently.

Brand yourself

Branding is essential. Naming yourself or your small business is intertwined with a potential domain name. Do a brainstorming session of what your business represents and find keywords that you like. When you have a couple of potential names, go to www.godaddy.com to make sure that the domain name you like is not already taken. Once you bought your new domain name, invest in a good graphic designer that will create a logo that represents you or your services. Your graphical identity will potentially be a crucial part of your website. In addition, you should think of a slogan or motto for your website. This will be useful for search engine optimization (SEO), more information for Google, Bing and others to better reference your site on  searches people do online.

Find what you like

If you don’t have a crystal clear idea of what you want your website to look like, take the time to look at other websites that offer similar services as you. Think about the colours. If your logo has colours, look at web pages that have similar colours. Note what you like, what you don’t like. There are many design styles so take your time. For quick inspiration, take a look at sites that have an endless selection of web templates like iWeb Templates or Dream Template. A good web designer will be able to conjure something up that respects your budget.

Static or dynamic website

If your budget is tight, you might want to go with a static site. This means that the content of your site will rarely change. A dynamic site refers to a site that has interactive content like a blog with regular articles, a forum, or even a picture gallery. You have to know how much time you want to dedicate to your website. The more interactive your site, the more your potential client will get out of it and the more they’ll be inclined to contact you. Regardless of the frequency of the changes you plan to make, you should opt for a content management system (CMS) that allows you to change any content on your site, anytime, anywhere through the Internet. Initially it might cost a bit more, but in the end you won’t ever have to depend on another person to edit a line, paragraph or misplaced period.

Have your content ready

If you want the production process to take as little time as possible, have your content ready in both languages. Have some idea of what pages you want to include: About me, Contact me, etc.

Get a good Web hosting provider

There’s an abundance of Web hosting providers out there, some better than others. Ask around! Before purchasing your hosting plan consult with your web developer to make sure that the hosting provider has all features needed to run your website.

Consider social networks

Social networks like Facebook, Twitter and the like increase your web presence since more people have a chance to find you. They can be very time consuming because you have to keep adding content. Since there are so many social networking tools, you will probably find one that suits you best.

Maintenance

If you opt for a CMS, you must expect some kind of maintenance at least once a year.  Maintenance will ensure that the CMS of your choice stays secure from hackers and malware.

Ask questions

Please ask questions. No question is stupid. Really!

Si vous envisagez d’avoir un site pour vous-même ou votre petite entreprise dans un avenir proche, il y a des choses que vous devez savoir avant de vous engager dans cette importante démarche.

  • Soyez prêt à participer activement,
  • Votre marque,
  • Trouvez ce que vous aimez,
  • Site web statique ou dynamique,
  • Préparez votre contenu,
  • Obtenez le bon fournisseur d’hébergement Web,
  • Envisager les réseaux sociaux,
  • Entretien,
  • Posez des questions.

Soyez prêt à participer activement

Vous devez considérer le processus de pré-production ainsi que la vie de votre site après la production. Avoir un site Web réussi exige une consistance et un certain dévouement de tous les participants, mais surtout du propriétaire du site Web. Cela est particulièrement le cas pour un site Web personnelle ou d’une petite entreprise. Vous allez devoir prendre des décisions, parfois rapidement, être réceptif à apprendre en cours de route et de communiquer efficacement vos désirs.

Votre marque

Une marque est essentielle. Le nom de votre petite entreprise est liée à un éventuel nom de domaine. Faites un remue-méninges de ce que représente votre entreprise et trouver des mots-clés que vous aimez. Lorsque vous avez un couple de noms potentiels, aller à www.godaddy.com pour vous assurer que le nom de domaine que vous aimez n’est pas déjà pris. Une fois que vous avez acheté votre nouveau nom de domaine, il serait bien d’investir dans un bon graphiste qui vous fera un logo qui représente vous ou vos services. Votre identité graphique sera potentiellement un élément crucial de votre site web. De plus, vous devriez penser à un slogan ou une devise pour votre site web. Cela sera utile pour l’optimisation de moteur de recherche, pour que Google, Bing et d’autres obtiennent plus d’informations pour mieux référencer votre site.

Trouvez ce que vous aimez

Si vous n’avez pas une idée parfaitement claire de ce que vous voulez que votre site ressemble, prenez le temps de regarder d’autres sites Web qui offrent des services similaires à vous. Pensez aux couleurs. Si votre logo a des couleurs, consultez les pages Web qui ont des couleurs similaires. Notez ce que vous aimez, ce que vous n’aimez pas. Il y a de nombreux styles donc prennez votre temps. Pour de l’inspiration rapide, jetez un oeil sur les sites qui ont une vaste sélection de gabarit web comme Template Monster ou  Dream Template. Un bon concepteur Web sera en mesure de vous faire un gabarit qui respecte votre budget.

Site Web statique ou  dynamique

Si votre budget est serré, vous pouvez faire un site statique. Cela signifie que le contenu de votre site changent rarement. Un site dynamique est un site avec du contenu interactif comme un blogue avec des nouveaux articles régulièrement, un forum, ou même une galerie de photos. Vous devez savoir combien de temps vous voulez consacrer à votre site Web. Le plus interactif votre site, le plus votre client potentiel consultera votre site et le plus qu’il ou elle sera enclins à vous contacter.

Indépendamment de la fréquence des changements que vous prévoyez faire, vous devriez opter pour un système de gestion de contenu (SGC) qui vous permet de modifier n’importe quel contenu sur votre site, à tout moment, n’importe où via l’Internet. Initialement, il pourrait coûter un peu plus, mais à la fin vous n’aurez plus jamais à dépendre d’une autre personne  pour modifier une ligne, un paragraphe ou même une virgule mal placée.

Préparer votre contenu

Si vous voulez que le processus de production prenne le moins de temps possible, essayez d’avoir tout votre contenu prêt dans les deux langues. Prévoyez les pages que vous souhaitez inclure: à propos, me contacter, etc.

Obtenir un bon fournisseur d’hébergement Web

Il y a une abondance de fournisseurs d’hébergement Web, certains mieux que d’autres. Demandez autour de vous! Avant d’acheter votre d’hébergement consulter avec votre développeur web afin de s’assurer que le plan d’hébergement a toutes les fonctionnalités nécessaires pour gérer votre site web.

Envisager les réseaux sociaux

Les réseaux sociaux comme Facebook, Twitter et d’autre du genre augmente votre présence sur le Web puisque plus de gens ont une chance de vous trouver. Maintenir vos réseaux sociaux peuvent prendre beaucoup de temps parce que vous devez continuellement ajouter du contenu. Comme il y a beaucoup d’outils de réseautage, vous trouverez probablement celui qui vous convient le mieux.

Entretien

Si vous optez pour un SGC, vous devez vous attendre à une sorte d’entretien au moins une fois par an. Cet entretien de votre site veillera à ce qu’il reste à l’abri des pirates informatiques et les logiciels malveillants.

Posez des questions

S’il vous plaît poser des questions. Aucune question n’est stupide. Vraiment!

Comments closed

My revamped site, at last on WordPress!Mon nouveau site, enfin sur WordPress!

Welcome to my first blog post on the new website. The look is the same as before, but I added WordPress in the background. I intend to write here once a month. The topics will range from my favourite CMS‘s (Drupal and WordPress) to web related tutorials or general information.

Bienvenue sur mon premier article sur le nouveau site. Le look est le même qu’avant, mais j’ai ajouté WordPress en . J’ai l’intention d’écrire ici une fois par mois. J’écrirais sur mes systèmes de gestion de contenu préférés (Drupal et WordPress), je ferais des tutoriels et  je discuterais de thèmes générales du Web.

Comments closed

Designing a website: Top 15 things to consider for web accessibility

Here are the main things to think about when designing a website:

  1. Maintain a design and layout consistency throughout the site,
  2. Avoid clutter,
  3. Include written transcript for any audio and visual media,
  4. Avoid multiple level menus. Do not have more than two levels,
  5. Include a sitemap when your site has embed pages,
  6. Avoid making the width of content too large,
  7. Any one link should have the same title,
  8. Make the titles of the pages clear,
  9. Content must be simple and to the point (Especially if your target audience is broad.),
  10. Do not add default value in form fields,
  11. Make sure that the colours of the background and foreground are well contrasted,
  12. Have a decent font-size. (14px is good.),
  13. Avoid images with text on them,
  14. Don’t use “Read more” links, instead use “Read more about THE TITLE OF THE PAGE”,
  15. All links in the content should be underlined.

Maintain a design and layout consistency throughout the site

I have rarely seen an effective switch in design or layout within the same site. If it is absolutely required, make all changed subtle. Having differences in webpages of one site can be confusing and frustrating for a visually-impaired person and even for a new visitor. A visually-impaired person often uses a screen reader to read the content of the site to them. If within the same site the structure of the site changes from one page to the other, it can be disorienting. The norm is to maintain the same look and feel throughout a site, your new visitor might feel lost when jumping to another page with a completely different look.

Avoid clutter

Keep the layout as clear as possible. This makes it easier for the visitor to find the destination they are looking for.

Include written transcript for any audio and visual media

It’s fair to say that this demand is not obvious to produce. But it’s not fair to those who do not possess all senses. Food for thought!

Avoid multiple level menus. Do not have more than two levels

Not only do multiple level menus often not work properly in different browser, especially older ones, but they are very hard to navigate by keyboard only. Next time you see a multiple level menu try going through the menu by click on the tab key on your keyboard. You’ll see, it won’t be easy to get to the third level or even the second level.

Include a sitemap when your site has embed pages

If your site does have many sub-pages within a page, make it easier for your visitor to get to those pages through a complete sitemap.

Avoid making the width of content too large

When the width of a paragraph is too long, it is often harder on the eyes. The reader gets tired more quickly. Those affected may include people with learning disabilities, newbies, but even people with no known deficiencies.

Any one link should have the same title

You should avoid having the same link with different titles. For example, the link to the contact page with the title “Contact us” should not named “Reach us” elsewhere. We want to avoid any type of confusion that the visitor may encounter.

Make the titles of the pages clear

Be as accurate as possible when naming your pages. Think that you will be using these titles as your page’s main heading.

Content must be simple and to the point

Do not be verbose. Use lists whenever possible. Keep your sentences short. Use words effeciently. Read the W3C Writing Style section.

Do not add a default value in the text input field

The label of the text input field should be enough as to determine the desired input.

Make sure that the colours of the background and foreground are well contrasted

Colour contrast can be measured with applications like the Contrast Analyser by The Paciello Group. Download the application, install it and with the pipette determine if your chosen background and foreground colours satisfy the required contrast ratio.

Have a decent font-size

Make it as easy as possible to read your content. For a font like Arial, use a font-size of 14px.

Avoid images with text on them

If you must have text in your images, make sure to describe the image in the alt attribut.

Don’t use “Read more” links

Instead of linking to your full page with the very commun “Read more” link or the like add the title of what you are linking to. So if the title of the page the link is directing to is called “The Greatest Article Ever” have your link be “Read more about The Greatest Article Ever”. It might be redundant for sighted people, but when you consider that these links might be read out of context by screen reader, then it makes sense.

All links in the content should be underlined

In terms of usability, we want to inform the visitor when a textual information is linked to another page. Making the link a different colour may be indistinguishable to visitors with color blindness.

Many of these points have other implications when implemented in practice. We’ll leave those for another post.

178 Comments

Top Accessible WordPress themes

This assessment is very simplistic and constitutes a basic preliminary review. It is not comprehensive nor exhaustive.

I chose themes from the Free Theme Directory and searched for Web Accessible and Accessibility. I narrowed my selection by considering which theme would be easily customizable, have good contrast between foreground and background, have elements in a convenient location and be aesthetically pleasing as is.

I then used the plugin Demo Data Creator to generate more content for posts, pages, comments and categories.

The following themes made the cut:

Precious version 4.0.1
At first glance the layout is pretty simple and effective. Convenient breadcrumb on top of page. Upon disabling the style sheets, nothing is out of order. Validates for XHTML 1.0 Transitional and CSS2.

Stardust version 2.7
Very stylish out of the box with flexible width. Has “Skip to content” and “Skip to menu” without CSS. By disabling the images, the date for each post is too dark. Validates for XHTML 1.0 Strict, but not in CSS with 6 CSS2 errors.

Whitepress version 1.1.7
This theme includes a skip to content, navigation and search form when disabling CSS. Has a nice javascript for going through the sidebar items, but also works when javascript is disabled. Uses fixed width for 1024×768 resolution. Validates for XHTML 1.0 Strict, but not in CSS with 1 CSS2 error.

Dodo version 1.2.1
This theme is what this website is based on. The color of the posts date and other meta information is also too light. By disabling the images, the text of the main menu has not enough contrast with its background. With a little tweek here and there, it’s really nice. Fails to validate with XHTML 1.0 Strict with 1 error, but passes CSS2.

Precious and Stardust passed the Firefox Accessibility Extension 1.5.61.0 rule set with only warnings signaled .The themes Whitepress (2 Fails) and Dodo (1 Fail) did not pass.

For validation, I used Markup Validation Service and The W3C CSS Validation Service.

1,740 Comments