Homepage-fr

🏠

Your homepage represents you on the web, typically at the top of your domain, with your name and an iconic representation, often marked up with h-card, and fairly commonly one or more streams of recent, topical, or most relevant posts marked up with h-entry.

For work on the IndieWeb.org homepage itself, see:

• site-homepage

Why

All the reasons why and more.

Use your own personal domain to own your identity on the web.

By making your homepage more useful, you will feel more motivated to share your URL instead of just your Twitter handle or other social media profile.

How

What should be on your indie web site home page?

About You

Your homepage should have some basic information about you:

• name
• icon / profile photo
• tagline / bio
• communication links (aim: mailto: tel: etc. see [1] for some UI brainstorming on this)
• other about / contact information, e.g.
  • Links to silo profile URLs, approximate location, short bio, categories/tags
• marked up with h-card (see Indiewebify.me to verify, validate)
• web-sign-in support
  • rel-me links to your other identities on the web

Your home page is the URL you share with people, therefore it's useful to set it up with:

• role - brief summary of what it is you do
• discovery of what else you have on your site
• Your local time
• Last seen (last checkin/location post)
• upcoming events
• projects
• disclosure - disclosures of various types, e.g. cookies or analytics tracking

Stream

Main article: personal feed

Next, it's quite popular to have:

• stream of your most recent posts and other activities.

See the Stream of Updates examples below for some inspiration.

Archive Navigation

If you show a stream of recent posts on your home page, it may also be useful to show a small navigation interface for your archives.

More: archive navigation.

Previously

Among early 2000s bloggers it was popular to also have on your home page:

• blogroll

IndieWeb Examples

Contact Homepages

Some interesting homepage examples of simple contact/about information, maps for location, live IM status etc.

• bear: https://bear.im/ has an h-card and links to his h-feed and a more substantive About page in the sidebar
• http://scottbullard.com/ - hCard phone/email links with more: http://scottbullard.com/more.html
• http://www.jaredhanson.net/ - live IM status on Jared's hCard
• http://npdoty.name/ - hCard with map as background centered on his current location
• http://ebdesign.se/ about, elsewhere, and most recent blog post
• old adactio.com (pre-2012)

Stream of Updates

Main article: personal_feed#IndieWeb_Examples

All that and most of the content they post online as a stream:

Mixed/composite feed examples with complete posts:

• https://tantek.com/ (2010 onward, previously redirected at times to month permalinks 2002-2008)
• https://adactio.com/ (late 2012+)
• https://aaronparecki.com/ (2016+)

See personal_feed#IndieWeb_Examples for more examples.

Other Examples

Some interesting personal create home page examples that are not in clear categories:

• http://jasonpark.me/ - Requires JS, then shows a presentation made to look like graphically browsing a computer filesystem
• https://www.gwern.net/

Homepage Brainstorming

Things which could go on homepages which aren’t currently implemented, or are underimplemented. Sometimes there is an intent to implement.

• payment links/buttons
• local weather/daylight (extra context)
• people I’ve mentioned recently
• tags I’ve used recently
• actions like subscribe, contact, add to address book
• latest comments
• “live” banner image/gallery made from recent posts tagged with #banner or similar, to show off recent photo highlights without requiring a separate UI to manage it

I might be adding links to /me (my profile page) and /about (about the site, license info, powered by, hosted at, etc.) to my homepage. --Sandeep Shetty

Signed-in Features

When signed-in to your own site, it might be useful to have:

• reader - integrated reader showing posts from others you follow
  • silo examples of such a logged in home page: Facebook, Twitter, Tumblr - logged in dashboard

It may also be interesting to change your homepage for visitors who have signed in (/and are in your contact list etc)

• Showing replies, likes and other posts not usually shown on a homepage feed for signed-in viewers

Sketches

I did some homepage sketches/brainstorming here --Waterpigs.co.uk 14:32, 18 June 2013 (PDT)

Webmention to homepage

Webmentions sent directly to home pages could serve a number of use-cases:

• notification of a person-mention (like an indieweb @-mention) on a post somewhere else
• invitation to an indie event
• notification of a new private message received
• allowing other people to tag you in photos or posts

Silo Examples

Silos don't technically give you access to their home page, but they do typically provide you with something resembling a home page, albeit typically at a path (not at the root), and they call it a profile. Though they really should be providing subdomains instead of profile paths.

Twitter

As an example, Twitter let's you customize your profile page with:

• icon - upload (min/max resolution/bytes?)
• header image - upload (min/max resolution/bytes?)
• bio - 160 character text field, @ and # auto-linked.
• website - auto-linked URL
• location - ??? character text field.

Articles

Articles and posts about homepage design and features:

• 2013-12-04 Tantek Çelik: Toward A People Focused Mobile Communication Experience
• ...

Related Sessions

• 2012/UK/Demos - specifically, General discussion / UX thoughts.

See Also

• about
• icon
• payment
• webmention
• add to home screen
• now
• Interesting personal homepage example: https://awarm.space/ providing two "primary" streams, "fast" and "slow" series of posts, with only the "fast" stream showing date posted.
• 2023-02-10 Jeremy Keith: Home stream

  Here on my site, my home page is kind of a stream. I’ve got notes, links, and blog posts one after another in chronological order.

• 2024-05-01 The Revenge of the Home Page / As social networks become less reliable distributors of the news, consumers of digital journalism are seeking out an older form of online real estate.

Cet article est une débauche. Vous pouvez m’aider à l'améliorer.

Cette page a démarré sur iwc:homepage et migrera sur iwc:homepage-fr après traduction.

🏠

Votre page d'accueil vous représente sur le web, généralement tout en haut de votre domaine, avec votre nom et une représentation iconique, souvent balisée avec h-card, et assez souvent avec un ou plusieurs flux des sujets récents ou les publications les plus pertinentes marquées avec h-entry.

Pour les travaux sur la page d'accueil du site IndieWeb.org regardez :

• iwc:site-homepage

Pourquoi

Toutes les raisons sur pourquoi et plus encore.

Utilise votre domaine personnel pour posséder votre identité sur le web.

En rendant votre page d'accueil plus utile, vous vou sentirez plus motivé pour partager votre URL au lieu de vou contenter de votre pseudo Twitter ou tout autre profil sur un silo.

Comment faire

What should be on your indie web site home page?

À Propos de vous

Votre page d'accueil devrait avoir quelque information basique vous concernant :

• nom
• icône / photo de profil
• liens de communication (aim: mailto: tel: etc. see [1] pour quelque brainstorming UI là-dessus)
• autre information à propos / contact, par ex.
  • Liens vers les URLs de profil sur les silos, lieu approximatif, bio rapide catégories/tags
• balisés avec h-card (voir indiewebify pour vérifier et valider)
• prise en charge de la connexion-web
  • Liens rel-me vers vos autres identités sur le web.

Your home page is the URL you share with people, therefore it's useful to set it up with:

• role - brief summary of what it is you do
• discovery of what else you have on your site
• Your local time
• Last seen (last checkin/location post)
• upcoming events
• projects
• disclosure - disclosures of various types, e.g. cookies or analytics tracking

Stream

Next, it's quite popular to have:

• stream of your most recent posts and other activities.

See the Stream of Updates below for some inspiration.

Archive Navigation

If you show a stream of recent posts on your home page, it may also be useful to show a small navigation interface for your archives.

More: archive navigation.

Previously

Among early 2000s bloggers it was popular to also have on your home page:

• blogroll

IndieWeb Examples

Simple Homepages

Some interesting indieweb home page examples of simple contact/about information (e.g. hCard), maps for location, live IM status etc. - probably worth expanding and document each of these:

• http://scottbullard.com/ - phone/email links with more: http://scottbullard.com/more.html
• http://www.jaredhanson.net/ - live IM status on Jared's hCard
• http://npdoty.name/ - map as background centered on his current location
• old adactio.com (pre-2012)

That and most recent blog post:

• http://ebdesign.se/

That and occasional blog posts:

• http://aralbalkan.com/

The https://bear.im homepage for Modèle:Bear has a super simple hCard and then links to the hFeed and a more substantive About page

Stream of Updates

All that and most of the content they post online as a stream:

Mixed/composite feed examples with complete posts:

• http://tantek.com/
• http://adactio.com/ (late 2012+)
• https://aaronparecki.com/ (2016+)

Streams of partial posts / summaries:

• Modèle:Voxpelli http://voxpelli.com/ – stream of latest blog post titles

Streams of only names/titles of posts:

• Modèle:Bear https://bear.im/bearlog

Separate feeds:

• Modèle:Voxpelli http://voxpelli.com/ – links to separate feeds for bookmarks and social interactions
• http://2015.aaronparecki.com/ (2012-2015)

Homepage Brainstorming

Things which could go on homepages which aren’t currently implemented, or are underimplemented. Sometimes there is an intent to implement.

• payment links/buttons
• local weather/daylight (extra context)
• people I’ve mentioned recently
• tags I’ve used recently
• actions like subscribe, contact, add to address book
• latest comments

I might be adding links to /me (my profile page) and /about (about the site, license info, powered by, hosted at, etc.) to my homepage. --Sandeep Shetty

Signed-in Features

When signed-in to your own site, it might be useful to have:

• reader - integrated reader showing posts from others you follow
  • silo examples of such a logged in home page: Facebook, Twitter, Tumblr - logged in dashboard

Sketches

I did some homepage sketches/brainstorming here --Waterpigs.co.uk 14:32, 18 June 2013 (PDT)

Webmention to homepage

Webmentions sent directly to home pages could serve a number of use-cases:

• notification of a person-mention (like an indieweb @-mention) on a post somewhere else
• invitation to an indie event
• notification of a new private message received
• allowing other people to tag you in photos or posts

Silo Examples

Silos don't technically give you access to their home page, but they do typically provide you with something resembling a home page, albeit typically at a path (not at the root), and they call it a profile. Though they really should be providing subdomains instead of profile paths.

Twitter

As an example, Twitter let's you customize your profile page with:

• icon - upload (min/max resolution/bytes?)
• header image - upload (min/max resolution/bytes?)
• bio - 160 character text field, @ and # auto-linked.
• website - auto-linked URL
• location - ??? character text field.

Articles

Articles et posts concernant le design de page d'accueil et ses fonctionnalités :

• 2013-12-04 Tantek Çelik: Toward A People Focused Mobile Communication Experience
• ...

Related Sessions

• 2012/UK/Demos - specifically, General discussion / UX thoughts.

Voir aussi

• about
• icon
• payment
• webmention