Spread the Word
Link to Do by Five.
Banners for your website, cards for posts, and headers for your profiles. No scripts, no tracking, nothing to install.
Website Banner
The one to start with. Narrow the window to watch it switch to the compact version.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;width:100%;max-width:600px;border:0">
<picture>
<source media="(max-width: 599px)" srcset="https://dobyfive.org/images/dobyfive-banner-mobile.png" width="900" height="300">
<img src="https://dobyfive.org/images/dobyfive-banner.png" width="600" height="150" alt="Do by Five at dobyfive.org. Five headings: Blockers, Critical, Normal, Backlog, Notes." style="display:block;width:100%;height:auto">
</picture>
</a>
It shows at 600 × 150 and shrinks to fit narrower columns. Below 600 pixels it swaps to a compact version: the clock and the name, big enough to read on a phone. The styling is inline, so it works in most site builders and CMSs without touching your stylesheet.
More Sizes
The standard ad sizes, each in two styles: the clock on white, or the five headings on the notebook page. Every banner links to dobyfive.org and stays sharp on high-resolution screens. The white ones also come with no margin, to line up with your text.
Leaderboard 728 × 90
Across the top or bottom of a page. The clock.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-728w-90h-a.png" width="728" height="90" alt="Do by Five at dobyfive.org: a method for doing." style="display:block;max-width:100%;height:auto"> </a>
Copy HTML, no margin
Transparent and cropped to the artwork, so it lines up with your text. 707 × 66. For light backgrounds.
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-728w-90h-a-tight.png" width="707" height="66" alt="Do by Five at dobyfive.org: a method for doing." style="display:block;max-width:100%;height:auto"> </a>
Leaderboard 728 × 90
Across the top or bottom of a page. The five headings.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-728w-90h-c.png" width="728" height="90" alt="Do by Five at dobyfive.org. Five headings: Blockers, Critical, Normal, Backlog, Notes." style="display:block;max-width:100%;height:auto"> </a>
Billboard 970 × 250
Full width, above or below an article. The clock.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-970w-250h-a.png" width="970" height="250" alt="Do by Five at dobyfive.org: a method for doing." style="display:block;max-width:100%;height:auto"> </a>
Copy HTML, no margin
Transparent and cropped to the artwork, so it lines up with your text. 910 × 186. For light backgrounds.
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-970w-250h-a-tight.png" width="910" height="186" alt="Do by Five at dobyfive.org: a method for doing." style="display:block;max-width:100%;height:auto"> </a>
Billboard 970 × 250
Full width, above or below an article. The five headings.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-970w-250h-c.png" width="970" height="250" alt="Do by Five at dobyfive.org. Five headings: Blockers, Critical, Normal, Backlog, Notes." style="display:block;max-width:100%;height:auto"> </a>
Medium Rectangle 300 × 250
A sidebar or between paragraphs. The clock.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-300w-250h-a.png" width="300" height="250" alt="Do by Five at dobyfive.org: a method for doing." style="display:block;max-width:100%;height:auto"> </a>
Copy HTML, no margin
Transparent and cropped to the artwork, so it lines up with your text. 153 × 190. For light backgrounds.
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-300w-250h-a-tight.png" width="153" height="190" alt="Do by Five at dobyfive.org: a method for doing." style="display:block;max-width:100%;height:auto"> </a>
Medium Rectangle 300 × 250
A sidebar or between paragraphs. The five headings.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-300w-250h-c.png" width="300" height="250" alt="Do by Five at dobyfive.org. Five headings: Blockers, Critical, Normal, Backlog, Notes." style="display:block;max-width:100%;height:auto"> </a>
Large Rectangle 336 × 280
A wider sidebar. The clock.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-336w-280h-a.png" width="336" height="280" alt="Do by Five at dobyfive.org: a method for doing." style="display:block;max-width:100%;height:auto"> </a>
Copy HTML, no margin
Transparent and cropped to the artwork, so it lines up with your text. 167 × 212. For light backgrounds.
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-336w-280h-a-tight.png" width="167" height="212" alt="Do by Five at dobyfive.org: a method for doing." style="display:block;max-width:100%;height:auto"> </a>
Large Rectangle 336 × 280
A wider sidebar. The five headings.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-336w-280h-c.png" width="336" height="280" alt="Do by Five at dobyfive.org. Five headings: Blockers, Critical, Normal, Backlog, Notes." style="display:block;max-width:100%;height:auto"> </a>
Wide Skyscraper 160 × 600
A narrow, tall sidebar. The clock.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-160w-600h-a.png" width="160" height="600" alt="Do by Five at dobyfive.org: a method for doing." style="display:block;max-width:100%;height:auto"> </a>
Copy HTML, no margin
Transparent and cropped to the artwork, so it lines up with your text. 122 × 465. For light backgrounds.
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-160w-600h-a-tight.png" width="122" height="465" alt="Do by Five at dobyfive.org: a method for doing." style="display:block;max-width:100%;height:auto"> </a>
Wide Skyscraper 160 × 600
A narrow, tall sidebar. The five headings.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-160w-600h-c.png" width="160" height="600" alt="Do by Five at dobyfive.org. Five headings: Blockers, Critical, Normal, Backlog, Notes." style="display:block;max-width:100%;height:auto"> </a>
Half Page 300 × 600
A tall sidebar. The clock.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-300w-600h-a.png" width="300" height="600" alt="Do by Five at dobyfive.org: a method for doing." style="display:block;max-width:100%;height:auto"> </a>
Copy HTML, no margin
Transparent and cropped to the artwork, so it lines up with your text. 228 × 502. For light backgrounds.
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-300w-600h-a-tight.png" width="228" height="502" alt="Do by Five at dobyfive.org: a method for doing." style="display:block;max-width:100%;height:auto"> </a>
Half Page 300 × 600
A tall sidebar. The five headings.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-300w-600h-c.png" width="300" height="600" alt="Do by Five at dobyfive.org. Five headings: Blockers, Critical, Normal, Backlog, Notes." style="display:block;max-width:100%;height:auto"> </a>
Mobile Strip 320 × 50
A thin strip for phones or footers. The clock.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-320w-50h-a.png" width="320" height="50" alt="Do by Five at dobyfive.org: a method for doing." style="display:block;max-width:100%;height:auto"> </a>
Copy HTML, no margin
Transparent and cropped to the artwork, so it lines up with your text. 308 × 37. For light backgrounds.
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-320w-50h-a-tight.png" width="308" height="37" alt="Do by Five at dobyfive.org: a method for doing." style="display:block;max-width:100%;height:auto"> </a>
Mobile Strip 320 × 50
A thin strip for phones or footers. The five colors.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-320w-50h-c.png" width="320" height="50" alt="Do by Five at dobyfive.org." style="display:block;max-width:100%;height:auto"> </a>
Feature Cards
Bigger pieces for a blog post, a newsletter, or a slide.
Feature Card 600 × 315
The clock. For a post, a slide, or a blog header.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-1200w-630h-a.png" width="600" height="315" alt="Do by Five at dobyfive.org: a method for doing." style="display:block;max-width:100%;height:auto"> </a>
Copy HTML, no margin
Transparent and cropped to the artwork, so it lines up with your text. 524 × 233. For light backgrounds.
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-1200w-630h-a-tight.png" width="524" height="233" alt="Do by Five at dobyfive.org: a method for doing." style="display:block;max-width:100%;height:auto"> </a>
Feature Card 600 × 315
The five headings.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-1200w-630h-c.png" width="600" height="315" alt="Do by Five at dobyfive.org. Five headings: Blockers, Critical, Normal, Backlog, Notes." style="display:block;max-width:100%;height:auto"> </a>
Feature Card 600 × 315
The name, the stamp and what it is.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-1200w-630h-d.png" width="600" height="315" alt="Do by Five. Due by five? Do by Five. A method for knowing what’s next." style="display:block;max-width:100%;height:auto"> </a>
Compact 450 × 150
Just the clock and the name.
Copy HTML
<a href="https://dobyfive.org" title="Do by Five: a method for knowing what's next" style="display:inline-block;max-width:100%;border:0"> <img src="https://dobyfive.org/images/share/dobyfive-900w-300h-c.png" width="450" height="150" alt="Do by Five at dobyfive.org." style="display:block;max-width:100%;height:auto"> </a>
Image Files
Prefer to host the images yourself? Save any banner above, or use these, and keep the link to dobyfive.org.
- dobyfive-banner.png — 1200 × 300, shown at 600 × 150
- dobyfive-banner-mobile.png — 900 × 300, for screens under 600 pixels wide
- logo.svg — the clock on its own (dark version)
Every banner image is twice its display size, so it stays sharp on high-resolution screens.
A Few Requests
- Link to
https://dobyfive.org. - Keep the colors, the clock and the proportions as they are.
- Keep the alt text, or write your own that says what the banner is.
Not a website person? Pass it on with a message instead.
© Aaron Klump 2026 · v1.0.3
Social Headers
Profile headers, at exactly the size each site asks for. Download and upload; there is nothing to paste.
X header 1500 × 500
Upload as your header image. Your profile photo covers the lower left; the design leaves it clear.
Download dobyfive-1500x500-a.png
X header 1500 × 500
The five headings.
Download dobyfive-1500x500-c.png
LinkedIn banner 1584 × 396
Upload as your background photo. The lower left stays clear for your profile photo.
Download dobyfive-1584x396-a.png
LinkedIn banner 1584 × 396
The five headings.
Download dobyfive-1584x396-c.png