Designing Siwa: from first visit to newsletter

The Siwa demo introduces the site before it shows the stories. A large text section sits beside a portrait video. It has room for a few paragraphs and a direct invitation to subscribe. Selected stories lead into the latest posts below. Farther down, the newsletter has its own introduction and choices.

A personal site needs room to introduce its writer. Some visitors, though, arrive ready to read or subscribe. Siwa gives the introduction space and keeps those other routes in view. Its story layouts and newsletter section follow the same approach.

Siwa is a Ghost theme I make at Aspire Themes. These examples use its sample site, not a customer site.

The introduction

The homepage starts with text before it shows posts. The heading names the site. A short introduction explains its offer. The longer body gives the writer room to say more.

The media column is narrower than the text column. A portrait can sit beside the text without reducing it to a small caption. The columns stack on smaller screens. With no image or supported intro video, the text uses one column.

The content comes from a Ghost page. The publisher can add paragraphs, links, and buttons in the editor. The introduction can grow or shrink as the site changes. A fixed sentence in a theme setting does not limit it.

Video takes the same space as the portrait. A Play control opens it with sound in a lightbox: a viewer over the page. Visitors choose when to watch. The writer can introduce their voice through text or video while keeping the same layout.

Reader quotes

The introduction explains the site in the publisher’s words. Reader quotes add someone else’s view of the work. Siwa puts them before the stories, between the introduction and Featured.

The rounded cards have a small speech-bubble tail. That makes a quote look different from a story card. Each quote names its source and can include a role. The demo uses sample endorsements. Publishers would supply their own reader quotes.

Longer quotes can fit without a fixed-height text box. Publishers who have no quotes can skip this section and move straight to Featured.

Featured and Latest

The next step is to choose a story. Featured gives selected posts more space than the latest grid. A large image or video sits beside the title and excerpt. Text and media swap sides across the cards.

Large Featured cards mark the editor’s choices. Latest lists posts by date. Featured holds up to three posts marked Featured in Ghost. Latest stories follow and exclude those posts. The homepage avoids repeating them straight away.

A Featured story with no image or supported video uses a full-width text card. On smaller screens, the story keeps its place in the list.

Navigation previews

A short homepage selection cannot show all the work. Navigation leads to the rest. On desktop, previews give readers a glimpse of each destination before they open it.

The image sits beside the links in the same panel. As readers move through the titles, they can see each page’s media. For supported video stories, the preview can play without sound.

The links still work if an image or preview is missing. They also work for external pages. On mobile, a drawer shows the grouped links without the preview panel.

The Archive

A preview helps readers choose what looks interesting. Siwa’s Archive helps them find an older piece by name. Its compact list gives titles and dates more weight than photos.

Readers can scan for a title they know. An available feature image can appear beside a row on hover-capable devices. It can also appear when the row has keyboard focus. A story with no image still has its title and date. Pictures can help readers spot known stories. The list works without them too.

Latest offers a more visual view. Tag and author pages let readers follow a subject or person. Each route leads to the same stories through different clues.

Article openings

After choosing a story, what should the reader see first? A title, photo, or video can open the piece. Each needs its own arrangement.

Siwa has five openings:

• Default centers the article opening.
• Hero places the title over the image.
• Fullscreen gives the cover more space on the first screen.
• Split puts the photo beside the title and introduction.
• Post Video uses the opening media area for a player.

Siwa supports native Ghost video and videos from YouTube or Vimeo. They can appear in four places:

• Introduction
• Story cards
• Navigation previews
• Video articles

Choose Post Video to make the first supported video the main media. Video can stay inside a standard article if it belongs later in the piece.

A preview offers a glimpse; a player lets the reader watch. Supported card and menu previews stay muted. Main playback starts when the reader presses Play. Reduced-motion preferences keep previews still. A moving preview can help readers recognize the story. They can choose whether to watch the full video.

Reading tools

Siwa puts text size and Listen beside comments and sharing in the article’s action bar. Readers can adjust the text or listen. Both keep them on the story.

Readers can enlarge the text, and the browser saves their choice. The table of contents links to sections in a longer article. It appears only when the article has headings to link to.

Listen uses browser speech support to read the story aloud. The voice depends on the browser and device. If the browser lacks native speech, the control does not appear. The publisher does not need to record an audio version.

Images without links and galleries open in a fullscreen viewer. Linked images keep their destinations. Available comments open in a panel beside the article. Readers can look closer or respond while keeping their place in the story.

Page and story colors

The different openings still need to feel like one site. Siwa keeps the page palette separate from the colors of stories and sections.

The examples below use the same stories and layout. Only the page palette changes:

• Light Cloud Dancer
• Olive Kombu Green
• Burgundy Port Royale

This shows the two layers of color.

The page changes color while the story cards keep their own colors. A story or section can have its own background. The text can use a color that stands out against it. The introduction works the same way. So do reader quotes and the newsletter.

A mint introduction and a peach Featured card can share a dark site. They need not take on the same accent color.

Smaller panels follow the page palette too. A dark scheme does not leave them with a fixed light background. The Siwa color guide covers the palettes and custom settings.

The newsletter invitation

The newsletter section has room to explain what is on offer. Readers can learn what they will get before they subscribe.

A Ghost page supplies the title, description, and optional image. The choices come from the site’s Ghost newsletters. Each can have a description. Readers can compare a weekly collection with occasional notes. Then they choose what to receive. The sample site shows several choices. Publishers can set up their own offer. The multiple-newsletter guide explains how those lists stay separate.

The optional image sits beside the description. Without an image, the text and form use a centered column. Publishers can describe the newsletter without an image.

The homepage and archives share this section. So do the article layouts. Split and video articles can open in different ways. Both reach the same signup section. Signed-in members do not see it. For signed-out visitors, the section needs both of these:

• Ghost Members enabled.
• A published page configured for the newsletter section. The Siwa setup guide explains those requirements.

The theme shapes the website’s signup section. Ghost’s newsletter settings shape the email itself.

A link in the header lets ready visitors subscribe straight away. The larger section stays available farther down, with space to explain each newsletter.