buttons: Difference between revisions

Revision as of 19:41, 26 July 2024

This article is a stub. You can help the IndieWeb wiki by expanding it.

Buttons are badges, logos, and banners that you can use to link to indieweb.org and related sites & technologies, and similar images for a handful of sites similarly aligned in principles or development approaches.

Logos

Main article: logo

For other versions (size, color, file formats), see the indieweb/branding repo on GitHub.

Buttons

80x15

as an SVG

88x31

Main article: 88x31

88x31 pixels was a very popular button image size in the 1990s, especially among freewheeling and independent sites, so here's a few IndieWeb related 88x31 buttons:

See 88x31 for more 88x31px buttons.

Community Contributions

... more ...

Feel free to upload your own IndieWeb or IndieWebCamp related logos and embed them here!

Related efforts

Some 88x31 and 80x15 buttons related to IndieWeb efforts:

and more on https://maya.land/ — some great examples of buttons/banners, including some for the indiewebring and Webmention
for http://vanilla-js.com/
for https://notbyai.fyi/ for badges/buttons for proclaiming that none of your website was generated by AI (perhaps suitable for a generative AI or LLM page).

Tools and resources

Examples of different "standard" size buttons for the same logo/brand/design: https://wiki.ubuntu.com/WebsiteButtons

Make your own 80x15 buttons:

Brainstorming

Webmentions Accepted

Idea: an I ❤️ Webmentions or Webmentions accepted ✅ button to indicate your site accepts webmentions.

Link the button to your webmention endpoint with a query param of the page its on as the default target.

Have your webmention endpoint present a form UI to submit a webmention with the target auto-filled in with the default target from abovementioned link.

Use-case: Webmention-faq#How_do_you_know_if_a_website_uses_webmentions.3F

Indiewebified

For some old school web fun, if your site passes the tests at Indiewebify.me, one could add a button to their site with a link to Indiewebify.me and/or to the link indicating that their site passed. (Contextual note: many of these old buttons were originally used to indicate that a site used certain specifications or passed certain validation tests.)

Rendering on high resolution displays

Suggestion: add style="image-rendering:pixelated;" to the img tag for small badges when viewed on high-resolution displays. They will retain their pixelated look instead of made blurry when scaled up.

Previously

Need to be updated

These need to be updated to the new logo.

@@ Line 59: / Line 59: @@
 * http://vanilla-js.com/assets/button.png for http://vanilla-js.com/
 * <img src="https://notbyai.fyi/img/written-by-human-not-by-ai-white.svg" width="88" /> for https://notbyai.fyi/ for badges/buttons for proclaiming that none of your website was generated by AI (perhaps suitable for a [[generative AI]] or [[LLM]] page).
+See also:
+* [https://web.badges.world/ Web Badges World] archive of 80x15 web buttons
 == Tools and resources ==
 * Examples of different "standard" size buttons for the same logo/brand/design: https://wiki.ubuntu.com/WebsiteButtons
-* Make your own 15x80 buttons:
+* Make your own 80x15 buttons:
 ** http://freeliner.atwebpages.com/buttons.htm
 ** http://www.acasystems.com/en/button-maker/
@@ Line 107: / Line 110: @@
 * [[Independents Day]]
 * [[badge]]
-* [https://web.badges.world/ Web Badges World] archive of 80x15 web buttons
+* to-do: consider creating a separate [[80x15]] page similar to [[88x31]] once there are sufficient other 80x15 buttons and related resources (archives of such buttons) linked from this page