Build a digital signage app: a looping screen with content you edit in the dashboard

Design for distance, not for a desk

A screen on a wall is read from several metres away, often in passing, often at an angle. That changes the rules compared with a website:

• Big type. Headlines readable from across the room, and body text no smaller than you can read from where people actually stand. Test from that spot.
• One message per slide. A slide with three ideas gets none of them read.
• Strong contrast. Screens in sunny windows wash out; dark text on light, or the reverse, with no low-contrast greys.
• Slow, calm transitions. Fades rather than spins. Flashing content is uncomfortable and, for some people, unsafe.
• Safe margins. Many TVs crop the edges. Keep text away from the borders.

Timing a loop

Give each slide long enough to be read twice by a slow reader: a short headline might need six to eight seconds, a menu section fifteen or more. Put the most important slide first and repeat it if the loop is long. For a menu board, consider not looping at all: a fixed layout that shows the whole menu is easier to order from than slides that disappear.

Keeping content editable

The reason to build signage this way is that you can change it without touching the design. When an app shows something the owner keeps up to date, Anticode puts it in the project's CMS collections, edited in the dashboard, and the app reads them as read-only data. Typical collections for signage:

menu

Dish, price, section, dietary notes, and a field to hide an item that's sold out.

notices

Headline, short text, and a start and end date so a notice only shows in its window.

events

Title, date, time and room, sorted so the next one is first and past ones drop off.

welcome

Visitor or group name and date, for a reception screen that greets today's guests.

Date-based rules (show this notice from Monday to Friday, hide events that have passed) run in the app using the screen device's clock. See CMS collections for how editing works.

Getting updates onto the screen

The collection content is placed into the page when it's loaded. A screen that has been running since morning shows what was there when it last loaded, so after an edit, reload the page on the screen device. If you want the screen to pick up changes on its own, use a scheduled reload in the screen device's kiosk or browser settings, if it has one, and test it before relying on it.

Putting it on a screen

Any device with a modern browser can run it: a smart TV's browser, a small stick computer, an old laptop or a tablet on a stand. Every published Anticode site can be installed as an app, with its own icon and an offline fallback, which makes it easier to open full screen on a tablet or computer. For unattended screens, use the device's own kiosk or auto-start settings so the page comes back after a power cut.

Describe it like this: "A digital signage app for our café's counter TV, landscape 1920 by 1080. Left two thirds: the menu from a collection, grouped by section, with prices and vegan marks; sold-out items hidden. Right third: a slow loop of notices from a second collection, eight seconds each, only those within their dates. Very large type, cream on dark green, fades only."

Limits

• No live feeds. The app has no network, so it can't show weather, news, social posts, train times or a till's stock. Anything shown is typed into a collection.
• No central screen management. There's no fleet dashboard for many screens, scheduling by location or proof of play. Each screen just opens the published page.
• No streaming video. Videos from other sites can't play. A short video you upload with the build can be placed in it; test it plays smoothly on the screen device.
• Public address. The published page is open to anyone with the link. Don't put internal information on a lobby screen you wouldn't put on a website.

For a counter display people interact with, see the tablet kiosk app. A café's main website is covered under cafes.

Questions people ask

Can I run different content on two screens?

Build two apps, or one with a setting in the address after the # that picks which layout a screen shows. Each screen opens its own link.

Does it need an internet connection?

It needs one to load and to pick up your edits. Whether it keeps showing during an outage depends on the device; test it.

Can it show the time and date?

Yes, from the screen device's own clock.