User Experience for News Websites

Want more people to read your content? Simple formatting tips can help: 1. Use sentence case or lowercase. (ALL CAPS is harder to read.) 2. Use underlines and italics very sparingly. Underlined and italic text can be harder to read, especially for folks who are dyslexic. 3. Avoid overly decorative fonts. Those are harder to read. 4. Left Align - for paragraphs of content, left alignment is recommended. Centered alignment of a paragraph is harder to read because your eye has to find the start of the new line each time. 5. Avoid Justified alignment- It creates inconsistent gaps (sometimes called “rivers”). You may think it looks “nice” but it is difficult to read. 6. Line spacing: Single spacing is more difficult to read. Spacing of 1.5 can help make your content more accessible. Create breathing room :) 7. Contrast is needed - do not put light text on light background (like white on yellow) or a dark text on dark background. (Like black on dark purple). WebAIM's Contrast Checker is a free tool to tell you if you have enough color contrast in your documents, decks and graphics to meet accessibility guidelines. Simple things make a difference. 💬 Did you learn anything new? 💬 What would you add? This is your Minds of All Kinds tip of the week. 🧠✅ #Accessibility #CognitiveAccessibility #Neuroinclusion #MindsOfAllKinds [Image Description: An educational graphic showing the contrast between text in all caps and text in lowercase: Red X symbol. TEXT IN ALL CAPS IS HARDER TO READ. ESPECIALLY WHEN IT’S MORE THAN ONE WORD. Green checkmark: Sentence case is easier to read. At the bottom center is the Minds of All Kinds logo next to a speech bubble icon labeled TIPS.]

If your site is slow, you’re leaving traffic and revenue on the table. Core Web Vitals are no longer optional. Google has made them a ranking factor, meaning publishers that ignore them risk losing visibility, traffic, and user trust. For those of us working in SEO and digital publishing, the message is clear: speed, stability, and responsiveness directly affect performance. Core Web Vitals focus on three measurable aspects of user experience: → Largest Contentful Paint (LCP): How quickly the main content loads. Target: under 2.5 seconds. → First Input Delay (FID) / Interaction to Next Paint (INP): How quickly the page responds when a user interacts. Target: under 200 milliseconds. → Cumulative Layout Shift (CLS): How visually stable a page is. Target: less than 0.1. These metrics are designed to capture the “real” experience of a visitor, not just what a developer or SEO sees on their end. Why publishers can't ignore CWV in 2025 1. SEO & Trust: Only ~47% of sites pass CWV assessments, presenting a competitive edge for publishers who optimize now. 2. Page performance pays off: A 1-second improvement can boost conversions by ~7% and reduce bounce rates—benefits seen across industries 3. User expectations have tightened: In 2025, anything slower than 3 seconds feels “slow” to most users—under 1 s is becoming the new gold standard, especially on mobile devices. 4. Real-world wins: a. Economic Times cut LCP by 80%, CLS by 250%, and slashed bounce rates by 43%. b. Agrofy improved LCP by 70%, and load abandonment fell from 3.8% to 0.9%. c. Yahoo! JAPAN saw session durations rise 13% and bounce rates drop after CLS fixes. Practical steps for improvement • Measure regularly: Use lab and field data to monitor Core Web Vitals across templates and devices. • Prioritize technical quick wins: Image compression, proper caching, and removing render-blocking scripts can deliver immediate improvements. • Stabilize layouts: Define media dimensions and manage ad slots to reduce layout shifts. • Invest in long-term fixes: Optimizing server response times and modernizing templates can help sustain improvements. Here are the key takeaways ✅ Core Web Vitals are measurable, actionable, and tied directly to SEO performance. ✅ Faster, more stable sites not only rank better but also improve engagement, ad revenue, and subscriptions. ✅ Publishers that treat Core Web Vitals as ongoing maintenance, not one-time fixes will see compounding benefits over time. Have you optimized your site for Core Web Vitals? Share your results and tips in the comments, your insights may help other publishers make meaningful improvements. #SEO #DigitalPublishing #CoreWebVitals #PageSpeed #UserExperience #SearchRanking

I use my personal GitHub pages website as a testing ground for AltCSS. It's built purely using HTML, with AltCSS directly applying the native styles. So, it's super lightweight, embraces native HTML with zero overhead. The metrics reflect the same. Some trivia for frontend engineers. What do these metrics in the second screenshot actually mean? In short they are what we refer to as "Core Web Vitals". 1. First Contentful Paint (FCP): The time it takes for the first piece of content (like text, image, SVG, etc.) to appear on the screen after the page starts loading. The lower it is, the better UX and fast page loading. 2. Largest Contentful Paint (LCP): Time it takes for the largest visible element (like a big image, heading, or video) to render on the screen. Always make sure to check what's your largest element and what optimizations can be done. For example, if you are loading a big image, you can think of loading it in WebP format for supported browsers as it would load faster, decreasing the LCP value. 3. Total Blocking Time (TBT): The total time during which the main thread is blocked and the browser can't respond to user input (e.g., clicks, typing). Interestingly even the ChatGPT website suffers from a TBT issue where the input chat box is unresponsive on page load instance and can reload or empty out the instantaneous text you type. Shows how even a top traffic websites with the best engineers are not able to get it right. 4. Cumulative Layout Shift (CLS): Measures how much visible elements shift around as the page loads. This is not always a bad thing depending on your usecase. For example, I have added an artificial layout shift on the TechFlix landing page to a nice transition of loading and animation for better UX. Alternatively CLS is often very poor in most news websites due to "ads" and unnecessary popups that block content or shift the layout. 5. Speed Index: A score that represents how quickly visible content is populated during page load. This can be terrible for data intensive applications. A neat trick is to always statically serve the first batch of data that is to be shown on the screen. After the page loads and the user performs an action, you can update the data dynamically. For example if you have a table where you want to show the first 10 records on page load, don't make an API call. Instead, serve the first 10 records alone as direct static data. Only when the user goes to page 2, fetch from the API. If the user comes back to page 1, you can do a prefetch and cache that data (to ensure its fresh). Bottomline: Landing pages, Pricing pages, and Pages with key calls to actions and important data widgets must be optimized for the best web vitals to ensure better search indexing and UX for the end user. This often translates to a step percentage increase in CTA clicks, time spent on websites, etc.

Research-backed accessible text checklist (beyond color & fonts) 1️⃣ Avoid ALL CAPS for long text Reading all caps slows people down by up to 10–20% because we recognize word shapes, not just letters. Uppercase removes those shapes, forcing letter-by-letter reading: https://lnkd.in/e7tCHxUD 👉 Keep all caps for short labels or acronyms only. 2️⃣ Keep an optimal line length Long lines make it hard for the eye to jump to the next line, while very short lines break reading rhythm. Based on classic readability research by Emil Ruder and later UX studies: https://lnkd.in/eJsTZT3w 👉 Aim for ~45–75 characters per line for comfortable reading. 3️⃣ Use generous line height Dense text increases cognitive load and reduces comprehension, especially for users with dyslexia. Recommended in Web Content Accessibility Guidelines (1.4.12 Text Spacing): https://lnkd.in/eam2Uqs5 👉 Use at least 1.4–1.6 line height for body text. 4️⃣ Don’t squeeze letters together Tight letter spacing makes words harder to parse, especially for users with visual or cognitive impairments. Supported by research from British Dyslexia Association: https://lnkd.in/eKc_2HPr 👉 Slightly increasing spacing (e.g., ~0.02–0.05em) can improve readability. 5️⃣ Avoid justified text blocks Perfectly aligned edges may look clean, but they create irregular spacing (“rivers of white”) that disrupt reading flow. 👉 Prefer left-aligned text for most content. 6️⃣ Give paragraphs room to breathe Large text blocks discourage reading and increase cognitive effort. 👉 Use spacing between paragraphs and keep them short (3–5 lines max). 7️⃣ Design for zoom and scaling Users should be able to zoom up to 200% without losing content or readability. 👉 Fixed heights and cramped layouts often break here. 8️⃣ Support scanning, not just reading Most users don’t read - they scan. Structured text helps them find what they need faster. Eye-tracking studies by Jakob Nielsen show “F-shaped” reading patterns: https://lnkd.in/etWrYsM7 👉 Use headings, lists, and clear content chunks. 9️⃣ Be careful with width and layout Very wide text blocks reduce focus, while overly narrow ones feel fragmented. 👉 Balance layout to guide the eye naturally across content. Small changes in spacing and structure can significantly improve comprehension, speed, and user comfort. What’s one text rule you wish more designers followed? #Accessibility #WebAccessibility #UX #InclusiveDesign #Readability

I've been an editor for 7 years now. And here’s a truth bomb: 99% of editing advice online is generic. “Check grammar.” “Shorten sentences.” “Take a break.” Yes, but can we dig deeper? Today, I'm revealing the most underrated, unspoken editing hacks. No gatekeeping here: → Zoom Out to 50%: Sounds weird? Try it. Reducing text size makes formatting issues obvious. You’ll spot uneven line lengths and clunky layouts instantly. → Voice Note Test: Record yourself reading your draft aloud. Listen back without reading along. Awkward wording stands out painfully clear. → 'So What?' Technique: After every paragraph, ask “So what?” If there's no clear purpose—rephrase or remove. Keeps writing tight, engaging, purposeful. → One-Screen Rule: Keep each subheading's content fitting one screen. Scrolling mid-section causes reader fatigue. Break it down—short and crisp is key. → Color-Code Edits: Highlight different issues with different colors: 1) Pink for weak words (really, very, stuff). 2) Blue for unclear ideas. 3) Yellow for repetitive points. Visual cues speed up final revisions drastically. → Find-and-Replace for Punctuation: Search your commas, semicolons, dashes. Do you overuse them? Replace some with periods to punch up readability. → The Font Swap: Change your font temporarily. Your brain sees text as 'new' content. Mistakes and awkward phrasings jump right out. → Reverse Outline: Summarize each paragraph in 3-4 words. Is there logical flow? If not, rearrange or rework ruthlessly. Editing is surgery (don't question me). These hacks transform good content into remarkable content. But hey, I'm always learning. What's your top editing secret nobody talks about? Share it below 👇

You're in a frontend interview. They ask: "How would you make a web app load in under 1 second?" Here’s a solid breakdown 👇 1- Ship Less JavaScript -Minify, tree-shake, and eliminate unused code. -Use dynamic imports to lazy-load non-critical components. -React → React.lazy, next/dynamic, bundle analyzer -Angular → Lazy-loaded modules, --configuration production builds 2- Prioritize Critical Rendering -Inline critical CSS. - Defer or async non-essential scripts to reduce render-blocking. -React → Next.js SSR/SSG, React Server Components -Angular → Angular Universal (SSR), route pre-rendering 3-Use a CDN & Edge Caching -Serve static assets and HTML from a global CDN. -Cache APIs and pages at the edge to reduce latency. -React → Vercel Edge Functions, Incremental Static Regeneration -Angular → Azure/Cloudflare CDN, SSR caching with Angular Universal 4- Optimize Images -Use modern formats (WebP/AVIF). -Add responsive sizing (srcset). -Lazy-load offscreen images. -React → Next.js for automatic optimization -Angular → ngOptimizedImage directive (Angular 15+) 5- Preload Key Resources -Preload fonts, hero images, and above-the-fold scripts. -React → , Next.js automatic route prefetch -Angular → Router PreloadAllModules strategy 6- Measure First, Then Tune -Benchmark with Lighthouse, WebPageTest, Core Web Vitals. -React → React Profiler, @next/bundle-analyzer -Angular → Angular DevTools, Webpack Bundle Analyzer ⚡ Wrap-up: "I’d cut JS bloat, optimize critical rendering, cache globally with CDN, optimize images, preload essentials, and continuously measure. With Next.js (React) or Angular Universal, I’d ensure sub-second loads at scale."

Slashed a Webflow site's load time from 6.2s to 1.8s Client's reaction: "How did you do this without rebuilding?" The secret? 5 unconventional optimizations. Here's the full breakdown 👇 The site was beautiful but slow. Killing their Google rankings. And losing mobile visitors. The unexpected culprits: → Oversized background images → Unoptimized CMS queries → Multiple font families → Heavy custom code → Nested interactions Here's exactly what we did: 1. Images: → Converted to AVIF → Added lazy loading → Removed unused assets 2. Interactions: → Combined similar ones → Used CSS where possible → Removed scroll-based triggers 3. Code cleanup: → Removed jQuery dependencies → Merged custom scripts → Minified everything The results shocked everyone: → Mobile speed: 1.8s → Core Web Vitals: All green → Mobile conversions: +27% → Bounce rate: -41% Best part? No design changes are needed. Want the same speed gains? DM "Speed Check" for a FREE performance audit. I'll show you exactly what's slowing your site. #webflow #webperf #webdesign #ux ___ Sebastian Bimbi here, your go-to Web-dev. Daily tips & behind-the-scenes. Follow for Webflow mastery. Got questions? Ask below!

💡4 strategies for optimizing text content for better readability For most products, written language makes up about 95% of the content — which means making text readable is vital if you want to offer a great user experience. 1️⃣ Content layout & structure ✔ Use headings (H1, H2, and H3) to create individual sections and guide readers through them. ✔ Write short sentences: Aim for 15-20 words per sentence. ✔ Use bullet points & numbered lists: Bullet lists both help improve scannability and highlight key points. ✔ Add callouts/quotes: Use them to emphasize critical information. 2️⃣ Optimal character count per line Too long lines make it difficult to track lines, causing fatigue and reducing comprehension.  Too short lines force frequent line breaks, disrupting reading flow and causing frustration. ✔ 40-60 characters per line (CPL), including spaces, is generally ideal. ✔ Shorter lines (20-40 CPL) are preferable for mobile devices and narrow screens. ✔ Longer lines (75-100 CPL) can work for wide displays but may reduce readability. 3️⃣ Content flow  ✔ Use inverted pyramid style: Place the most important information at the top to maximize the chance users will see it.  ✔ Utilise common content scanning patterns (F-shape, Z-shape, Spotted): https://lnkd.in/dnAQ3aqF  ✔ First sentences of paragraphs should summarize the main point or create context. ✔ Ensure smooth transitions between sections and ideas. Individual sections should always feel like parts of a whole rather than a collection of individual pieces of information.  ✔ Write short paragraphs: Limit paragraphs to 3-4 sentences to prevent overwhelming readers. ✔ Break up text with relevant visuals. Paired with a good layout structure, it will help you avoid walls of text 4️⃣ Font & formatting ✔ Choose readable fonts: Choose sans-serif fonts for body text. Fonts like Open Sans or Roboto are easier to read on screens. ✔ Use 16px or larger for body text to improve legibility ✔ Align type to the baseline grid (i.e., 8px) ✔ Choose line height proportional to type size. Use 1.5x line spacing for web content to give text room to breathe. ✔ Keep paragraph spacing in the range between .75x and 1.25x of the type size. 🛠️ Tools to Improve Readability ✔ Hemingway Editor Check for complexity and highlight long sentences. https://hemingwayapp.com/ ✔ Readability Score Checkers Aim for a Flesch-Kincaid score that suits your audience (8th grade or lower for general audiences). https://lnkd.in/dzQijnYw 🖼️ Line length and text readability by Google (Material Design) #UI #uidesign #productdesign #design #uxdesign

Most reports aren’t unreadable because the data is bad. They’re unreadable because they were never designed to be read. A few years ago, I came across a concept from academia called the Better Poster which is a redesign of how researchers present their findings. It’s simple but brilliant: - One takeaway written in plain language and large font - Supporting details in the margins - Plenty of whitespace To show you how it works, I decided to test it out with a fictional nonprofit I invented called the Library of Forgotten Socks. Their “research” explored where socks go missing in shared laundry spaces. Fifty-five pages long. Charts for days. Absolutely no chance of holding anyone’s attention. So I stripped it down to one clear message: “Half of all lost socks disappear in shared laundry spaces.” Everything else (the context, the data, the emotion) moved to the edges. The result? A single Better Poster that anyone could grasp in seconds. And here’s the thing: you can apply the same idea to almost anything: MEL reports, donor summaries, even social posts. It’s not about making things “prettier.” It’s about making them easier to digest. Once you've got someone's attention they'll dive deeper if they want (that's what the link or QR code is for). See the poster below and if you want the more tips on how to do this you can find it in my newsletter: https://lnkd.in/d6FwfJzS

Bad typography kills good design. That’s my biggest lesson after 10+ years designing. Here are 10 principles and tips that will instantly improve your work: 1/ Font styles Fonts carry emotion. Make sure your typography aligns with your brand’s tone. Whether you’re going for modern or playful, the right font sets the mood for the entire design. Pick ones that align with the brand story you're telling. 2/ Size & hierarchy Use 3-4 font sizes per section, maximum, to avoid overcrowding your design. Use a type scale to maintain consistency. Use headings that are minimum 2-3x your body text size. A clear hierarchy will guide readers through your content effortlessly. 3/ Font weight Font weight differentiates importance without adding visual clutter. Stick to 3-4 font steps in weight. Remember: reducing opacity also reduces perceived weight. Good rule of thumb: - headings: 600-700 - body: 400-500 - supporting text: 300-400 4/ Text contrast Create high contrast between text and background. Minimum WCAG AA: 4.5:1 for body text, 3:1 for large text. Run A11y plugin before you ship. Low contrast looks "modern" but kills readability. Accessibility should be a requirement, not a trend. 5/ Text alignment Typography alignment is key to readability and design flow. For non-Arabic countries, left-aligned text is easiest on the eyes. Center or right align sparingly for emphasis; avoid justified text unless spacing is perfect. 6/ Spacing Proper spacing makes or breaks readability: Line height: 1.5-1.7 for body, 1.1-1.3 for headings Leading: -1 to -2% for headings, 0% for body Paragraph spacing: 1.5-2x your line height Tight spacing feels cramped. Too loose feels disconnected. Find the right balance. 7/ Line Length Keep your paragraph length between 40 and 90 characters per line. For 16px body text, that's roughly 450-700px width depending on font. This range keeps readers engaged and makes content easy to scan. 8/ Don’t overdo it with fonts. Stick to 2 complementary fonts. Too many fonts can make your design feel chaotic. Keep it simple and let the fonts breathe. Limiting the number of fonts also makes your designs feel more thought-out and cohesive. 9/ Prioritize readability over style. Decorative fonts work for logos and short headlines. Don't use them for body text. Fonts need to look good, but most importantly, they must be clear and legible across all devices. Good design is always functional, not only aesthetic. Bad typography makes great content unreadable. Great typography makes content feel effortless. Master these fundamentals and your designs will immediately level up. Save this for your next project. As always, I hope this was helpful. Have an awesome day! 👋