Forward-to-article + readable mobile
Two questions answered together: how does a user get from a card to the actual article, and how do we make mobile actually readable.
Loop vs click — both, in sequence
They're not in tension. The loop is the funnel; the click is the conversion. Design both deliberately.
1. Auto-advanceHeadlines scroll past the eye, 6s each. Low effort, high reach.
→
2. Card grabs attentionTap = pause + reveal CTA. User commits to one card.
→
3. Read articlePersistent CTA pill: "Read →". Click = pageview. Goal achieved.
Font readability — same Greek title at different sizes
Same 91-char real title. Showing where each size lands on the readability spectrum so we pick consciously, not by accident.
10px
Παναγιώτης Αγγελόπουλος: «Ψυχραιμία και ωριμότητα – Περιμένουμε τον αντίπαλο στον ημιτελικό»
Squint zone
11px
Παναγιώτης Αγγελόπουλος: «Ψυχραιμία και ωριμότητα – Περιμένουμε τον αντίπαλο στον ημιτελικό»
Below WCAG floor
12px (today)
Παναγιώτης Αγγελόπουλος: «Ψυχραιμία και ωριμότητα – Περιμένουμε τον αντίπαλο στον ημιτελικό»
Acceptable, hard for 50+ readers
14px (recommend mobile)
Παναγιώτης Αγγελόπουλος: «Ψυχραιμία και ωριμότητα – Περιμένουμε τον αντίπαλο στον ημιτελικό»
Material/HIG aligned
15px (recommend desktop)
Παναγιώτης Αγγελόπουλος: «Ψυχραιμία και ωριμότητα – Περιμένουμε τον αντίπαλο στον ημιτελικό»
Comfortable
16px
Παναγιώτης Αγγελόπουλος: «Ψυχραιμία και ωριμότητα – Περιμένουμε τον αντίπαλο στον ημιτελικό»
Generous, eats vertical space
Decision: 15px desktop / 14px mobile for titles. Source/time line 12px. CTA pill 13px. Tabs 13px. All tap targets ≥32px tall (Material spec).
How does the user get from card → article? Pick mechanisms (multi-select)
More than one can co-exist. My recommendation tagged green.
RECOMMENDED
1. Persistent "Read →" CTA pill
Bottom-right of every story card
Always visible during auto-play and on pause. White pill on dark gradient = unmissable. Single biggest pageview lever.
RECOMMENDED
2. Title is also clickable
Tap title text → open article
Mobile-friendly redundancy. Title hover/active state = visual feedback. CTA pill + title = two click targets, both lead to article.
RECOMMENDED
3. End-of-loop "Continue reading" card
After all stories cycled
Full-frame card: "You've seen it all — continue with [trending article title]". Big single CTA. Catches users who watched the whole loop without clicking.
4. Tap-to-pause reveals expanded CTA
First tap pauses, expands click target
Subtler. First tap = pause loop + slide up bigger Read button. Second tap = navigate. Adds a step but feels intentional.
5. Prefetch top story on hover/idle
Background optimization, invisible to user
When user hovers over the CTA or pauses on a card, prefetch the article HTML. Click → instant load. Improves perceived performance, indirectly increases click commitment.
6. Resume loop on next pageview
Continuity across pages
If the user clicks a story and lands on the new article, storyteller resumes from where they left off. They don't lose their place in the loop. Heavy infra (cookie + state sync) but ties pageview to engagement.
Mobile redesign — full-viewport-width breakout
Widget breaks out of article side padding on mobile (a known pattern — most ad units do this). 360px wide instead of 296px. Title 14px, reactions 13px. CTA pill is the hero.
Election 2027: What the polls show
Όλα
Πολιτική
Sports
Tech
342
🔥 TRENDING
iefimerida.gr • 2h
Άρσεναλ – Ατλέτικο Μαδρίτης 1-0: Ο Σάκα την έστειλε στον τελικό
Read →
Mobile dimensions
Widget width:
360px (full viewport, breaks article padding)
Frame: 360 × 202 (16:9)
Tabs strip: 38px
Actions strip: 44px
Total:
~284px tall
Title 14px • Source 12px • CTA 13px
All tap targets ≥32px
Click areas:
CTA pill + title text + image = 3 paths to article
The end-of-loop card — the secret pageview weapon
After the user has watched all 6-12 cards (without clicking), this is the last card before looping back. Big single CTA. Different visual treatment so it stands out.
Desktop end-card
↻ Continue reading
Most read today: Ψηφιακό ευρώ — Οι φιλοδοξίες της Λαγκάρντ προσκρούουν στην ηγεμονία του δολαρίου
in.gr • 4h ago • 8.2K reads
Διάβασέ το →
Mobile end-card
↻ Continue reading
Ψηφιακό ευρώ: Οι φιλοδοξίες της Λαγκάρντ προσκρούουν…
in.gr • 4h • 8.2K reads
Διάβασέ το →
Quick decisions
- Title size: 15px desktop / 14px mobile — yes/no?
- Mobile full-width breakout: widget ignores article side padding on mobile — yes/no?
- Click mechanisms: recommended set is 1 + 2 + 3 (CTA pill + title-tap + end-card). Defer 4/5/6. Keep that set?
- End-card style: dark gradient with most-read article + big white CTA — works?