banner image

From IndieWeb
Jump to navigation Jump to search


A banner image is a wide image (AKA header image or hero image), typically in an aspect ratio of 2:1 to 4:1, displayed as a backdrop at the top of a profile page or post permalink.

Why

Banner images help give a home page a distinctive, recognizable look, and can also provide a text overlay of the tagline of a site or page.

Topical banner images can be used to give a summary or an evocative context for a blog post on a specific topic.

How to

Embed a banner image near or at the top of a page, optionally stretching it using CSS to fill the full width of the page.

If your banner image has text, please make sure you mark it up alt text for that text at a minimum, and regardless, consider a brief textual description of the image as well.

How to markup

⚠️ There is currently no agreed upon way of marking up banner images in general, aside from a strong encouragement to provide alt text.

🤔 A banner image for a post could be marked up as a u-featured image, however, there are no known examples of doing so.

⛔️ DO NOT mark up as a u-photo, because a banner image is decorative content, NOT primary content, unless you are literally posting about the banner image itself (or multiple.

IndieWeb Examples

Add yourself!

Add yourself here… (see this for more details)

epoch

epoch banner image on homepage marked up as a u-featured

IndieWeb Banners

Thanks to Chris Aldrich for these banners!

General description: artistic looking banners using a beautiful photo background and a pithy IndieWeb-related statement or call to action in white serif text on top, with "indieweb.org" in an IndieWeb logo colored (yellow, orange, red) smaller text somewhere separate from the pithy statement.

Home Page

The IndieWeb is a people-focused alternative to the "corporate web".

IndieWeb-definition-card.png

Connect

Figure out how you want to fit into the network.

fit-into-the-network.png

Control

Control you don’t typically find in social media

control-you-dont-find.png




Your Home

Build the internet home you’ve always wanted.

build-your-home.png


The home you’ve always wanted on the internet.

the-home-youve-always-wanted.png




Creative Freedom

Your words. Your way.

your-words.png


The web is your canvas. Don’t let a corporation limit you.

the-web-is-your-canvas.png


The web is your canvas. Which brush will you choose?

which-brush.png




Principles

Principles and their metaphors.

All our amps go to eleven.

go-to-eleven.png


Own Your Data

Reap what you sow. Plant your content into the field of your own website.

reap-what-you-sow.png


Who needs a billion dollar typewriter? Type it for your website.

billion-dollar-typewriter.png


Eat What You Cook

Slow Social
Try eating what you cook on your own website
Rely less on the unhealthy fast food of corporate social media

slow-social.png




Independence

Do your own thing.

do-your-own-thing.png


Knit your own web identity.

knit-your-own.png


Escape Silos

Don’t let your content rot in the dilapidated corporate social media silos.

rotting-silos.png


Why are you still posting your content to social media instead of your own website?

IndieWeb-Sheep.png


Not all social media is the same.

apple-not-all-social-is-the-same.png


The bright idea that corporate social media missed.

bright-idea.png


Temporal or Seasonal

Once the haze of 2020 lifts, consider a healthier way to manage your online identity and social media.

haze-of-2020.png


Happy Newwww.Year!

happy-newww-year.png


See Also