From 9a3e52c33d9ff408edbdc6bb6d801a84f789769a Mon Sep 17 00:00:00 2001 From: Olivier Lacan Date: Thu, 16 Apr 2015 22:38:39 +0200 Subject: [PATCH 1/3] Add good and bad examples of badge implementations --- spec/SPECIFICATION.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/spec/SPECIFICATION.md b/spec/SPECIFICATION.md index c78db9e..db42775 100644 --- a/spec/SPECIFICATION.md +++ b/spec/SPECIFICATION.md @@ -9,6 +9,17 @@ This document specifies the visual design of Shields badges. - **concise**: one descriptive word on the left (the key), one piece of data on the right (the value) - **hyperlinked**: badges can link to a third-party website providing more information, either related to the metadata provided by the badge or about the project the badge was used for (e.g. an open source library) +### Example + +#### Bad +![bad example](https://img.shields.io/badge/MySuperSaaSisSoAwesome.com-1.1.1-orange.svg) + +The key is shamelessly promoting the service provider instead of giving context to the value. If service providers want to promote themselves, they can simply encourage people to link back to them and let folks who are curious click on the button for more information. + +#### Good +![bad example](https://img.shields.io/badge/version-1.1.1-green.svg) +The key clearly explains what the value stands for (the version of the software provided). The platform or service hosting the version of the software is only relevant to people who decide to click on an eventual link added to the badge itself but the value stands on its own with the metadata value it provides to viewers. + ## Aesthetics The design of our badges has been carefully considered to provide sufficient padding between the container badge and the text within. Badges should never have a fixed width. The letter spacing (or kerning) is deliberate and focused on clarity, so is the use of the Open Sans font face. Contrary to widely available web-safe alternative sans-serif fonts like Arial (a sloppy Helvetica ripoff) and Verdana (a sloppy Futura ripoff), OpenSans remains highly legible at very small sizes which is why it was chosen. From b371608955209eb5ca102ccccd71a68cddb76971 Mon Sep 17 00:00:00 2001 From: Olivier Lacan Date: Thu, 16 Apr 2015 22:43:15 +0200 Subject: [PATCH 2/3] Fix Markdown formatting error --- spec/SPECIFICATION.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/spec/SPECIFICATION.md b/spec/SPECIFICATION.md index db42775..4b89ee0 100644 --- a/spec/SPECIFICATION.md +++ b/spec/SPECIFICATION.md @@ -17,7 +17,8 @@ This document specifies the visual design of Shields badges. The key is shamelessly promoting the service provider instead of giving context to the value. If service providers want to promote themselves, they can simply encourage people to link back to them and let folks who are curious click on the button for more information. #### Good -![bad example](https://img.shields.io/badge/version-1.1.1-green.svg) +![good example](https://img.shields.io/badge/version-1.1.1-green.svg) + The key clearly explains what the value stands for (the version of the software provided). The platform or service hosting the version of the software is only relevant to people who decide to click on an eventual link added to the badge itself but the value stands on its own with the metadata value it provides to viewers. ## Aesthetics From ac4743fb43f59c811b756b9a01ee7dc71a803cf7 Mon Sep 17 00:00:00 2001 From: Olivier Lacan Date: Thu, 16 Apr 2015 22:46:11 +0200 Subject: [PATCH 3/3] Update outdated mention of upcoming SVG We've had SVG for a while now. :-) --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 7c0497a..342c25b 100644 --- a/README.md +++ b/README.md @@ -42,8 +42,7 @@ As you can see below, without increasing the footprint of these badges, I've tri ![Badge design](spec/proportions.png) -We have an effort to produce similar-looking SVGs through a web service at -. That ensures that we are retina-ready. +This badge design corresponds to an old and now deprecated version which has since been replaced by beautiful and scalable SVG versions that can be found on [shields.io](http://shields.io). ## Examples