Matthew Brown<p><strong>Everything I have learned about good typsetting on websites and blogs</strong></p><p>This post is an example of “blog your homework”, the idea that when you research something, you should write about it. I’ve been looking at making blogs and indie personal websites nice and readable.</p><p><strong>Why am I writing this?</strong></p><p>This all started a few days ago when I realised how hard this blog was to read. I<a href="https://lordmatt.co.uk/matts-stuff/site-log/updating-for-readability/" rel="nofollow noopener" target="_blank"> updated my CSS</a> for larger font sizing. According to one source, 20px font sits nicely in the overlap for good readability on desktop and mobile. Thus, I went with size 20px.</p><p><strong>Am I qualified to write this?</strong></p><p>No, not remotely. That’s why I am writing this as a homework notebook. Expect lots of links and cited sources. After all, you should not take what I say on faith. You should trust but verify. Or distrust and verify. Whichever works for you.</p><p><strong>Legibility vs Readability</strong></p><p>Alyssa Clarke has <a href="https://usabilitygeek.com/12-typography-guidelines-for-good-website-usability/" rel="nofollow noopener" target="_blank">12 Typography Guidelines For Good Website Usability</a> for Usability Geek. One of her points is that there is a distinct difference between legible and readable. My old website design was legible – you could perceive all the words, but, with its long word-to-line ratio, it was not so readable.</p><p>With websites, we should aim for readable, not just legible. </p><p><strong>Be aware of ideal line lengths</strong></p><p>There is an optimal line length. I tend to think of it as “roughly 12 words”, but there is some far more accurate guidance out there.</p><blockquote><p>The ideal line length for readable text is 50–75 characters per line (CPL), with 66 CPL being the sweet spot. This range helps reduce eye strain, improves comprehension, and ensures a smooth reading experience. Lines that are too long or too short disrupt reading flow, making content harder to follow.</p><p><a href="https://www.uxpin.com/studio/blog/optimal-line-length-for-readability/" rel="nofollow noopener" target="_blank">Optimal Line Length for Readability, Andrew Martin, uxpin.com</a></p></blockquote><p><a href="https://blog.designary.com/p/the-optimal-text-line-length-for-readability" rel="nofollow noopener" target="_blank">Filippos Protogeridis cites</a> research from the <a href="https://baymard.com/blog/line-length-readability" rel="nofollow noopener" target="_blank">Baymard Institute</a>, <a href="http://webtypography.net/toc/" rel="nofollow noopener" target="_blank">The Elements </a><em><a href="http://webtypography.net/toc/" rel="nofollow noopener" target="_blank">of</a></em><a href="http://webtypography.net/toc/" rel="nofollow noopener" target="_blank"> Typographic Style Applied </a><em><a href="http://webtypography.net/toc/" rel="nofollow noopener" target="_blank">to the</a></em><a href="http://webtypography.net/toc/" rel="nofollow noopener" target="_blank"> Web</a>, as well as the book Typographie by E. Ruder. for giving 50-75 characters per line on desktops, and 30-50 CPL on mobile. There is a single goodish-for-both value of 50 CPL. Although one might want to do mobile-first responsive design and optimise hard for each screen size.</p><blockquote><p>Yet when text is difficult to read due to the length of the lines, users are much less willing to engage with the text, or struggle to read efficiently.</p><p><a href="https://baymard.com/blog/line-length-readability" rel="nofollow noopener" target="_blank">Readability: The Optimal Line Length, Edward Scott (Research Lead), Baymard Institiute</a> </p></blockquote><p><strong>Do better writing</strong></p><p>Marieke van de Rakt, writing for Yoast in “<a href="https://yoast.com/5-tips-improve-readability-blog-post/" rel="nofollow noopener" target="_blank">5 tips for writing readable blog posts</a>“, suggests short sentences, clear paragraphs, and more transition words.</p><p>I can testify that some blogs and indie sites are easier to read because they were written by someone who has a lot of practice writing. I have a few hacky tips that can make your writing seem easier to read.</p><ul><li>After three sentences strongly consider a new paragraph</li><li>Use a few one-sentence paragraphs.</li><li>Throw in the odd one-word sentence.</li><li>Any time you write “and” or place a comma, ask yourself if you could replace it with a full stop.</li><li>Read it out loud before you publish.</li></ul><p>Anyone who feels they know what they are doing should ignore these rules. They are nothing more than training wheels.</p><p><strong>Use headings based on hierarchy, says Yale University</strong></p><p><a href="https://usability.yale.edu/web-accessibility/articles/readability" rel="nofollow noopener" target="_blank">Yale says</a>, not only should you use headings you should also avoid using bold and mark up as actual headings. This makes it easier for idiots like me to keep place in the post, scan for the bit that interests me, refer back to that one nice bit I want to cite but have to reread the whole thing for because now I can’t find it.</p><p>More than that, actual header tags are good SEO and most importantly, good for visitors that need special tools to help them read and enjoy your content.</p><p>Better writing tips from Yale include:</p><ul><li>Write at a high school grade level, </li><li>Limit paragraphs to around ~80 words if possible</li><li>Avoid jargon and difficult language where possible</li></ul><p><strong>My own advice for engaging idiots like me</strong></p><p>Pictures!</p><p>No, seriously, images relevant to the article (like diagrams and infographics) help people like me to stay engaged. Sometimes a funny meme that reinforces a point or a decorative image that looks nice with the content can help my easily distracted brain stay on task for reading your lovely and informative words.</p>Use <em>all</em> the tricks to keep those eyeballs where you want them.<p><strong>Font choice matters</strong></p><p>On the A11y Collective blog, Andrée Lange addresses the problems with poor font choice in “<a href="https://www.a11y-collective.com/blog/wcag-minimum-font-size/" rel="nofollow noopener" target="_blank">How to Pick the Perfect Font Size: A Guide to WCAG Accessibility”</a>. </p><blockquote><p>Choosing a font size that’s too small or too large can decrease readability, especially for users who may be experiencing conditions such as myopia, hyperopia, or astigmatism. This could make it harder for them to absorb your web content and navigate your site, leading to many unwanted consequences, such as poor user experience, increased bounce rates, bad Search Engine Optimization (SEO) performance, and reduced conversions.</p><p><a href="https://www.a11y-collective.com/blog/wcag-minimum-font-size/" rel="nofollow noopener" target="_blank">How to Pick the Perfect Font Size: A Guide to WCAG Accessibility</a>, Andrée Lange, A11y Collective</p></blockquote><p>The A11y Collective article has a lot of best practice technical and design details. For those wanting further reading and insights, <a href="https://www.a11y-collective.com/blog/wcag-minimum-font-size/" rel="nofollow noopener" target="_blank">this</a> might be the one for you.</p><p>Jordan DeVos explains in “<a href="https://www.toptal.com/designers/typography/web-typography-infographic" rel="nofollow noopener" target="_blank">Designing for Readability: A Guide to Web Typography (With Infographic)</a>” the importance of typography (font selection) on the web. Here’s the infographic (might not work on federated copies).</p> <a href="https://www.toptal.com/designers/typography/web-typography-infographic?utm_source=embed&utm_medium=blog" rel="nofollow noopener" target="_blank"></a> <p>Infographic by <a href="https://www.toptal.com/designers/typography/web-typography-infographic?utm_source=embed&utm_medium=blog" rel="nofollow noopener" target="_blank">Toptal</a></p><p><strong>Do some testing – find your goldilocks zone</strong></p><p>If you have the know-how or are willing to learn it, some testing may be of great value. Edward Scott’s article talks about testing (in an e-commerce setting) and verifying that there is a goldilocks zone for line length, not too long and not too short.</p><blockquote><p>It turns out that the subconscious mind is energized when jumping to the next line (as long as it doesn’t happen too frequently; see above bullet point). At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line (“Typographie”, E. Ruder).</p><p>During our e-commerce testing, we’ve verified these basic readability precepts for users who are navigating e-commerce sites.</p><p><a href="https://baymard.com/blog/line-length-readability" rel="nofollow noopener" target="_blank">Readability: The Optimal Line Length, Edward Scott, Baymard Institute</a></p></blockquote><p><strong>Accessibility of writing</strong></p><p>Nick Awad talks about website readability as an accessibility factor. He says that good formatting (which we have talked about a lot) is important but so too is accessible language.</p><blockquote><p>A key component of readability is the language chosen for written content. Opt for simple language that resonates with a wide array of readers. Clear communication often outweighs complex vocabulary. For example, use simpler words like “use” instead of “utilize.”</p><p><a href="https://www.accessibility.com/blog/website-readability" rel="nofollow noopener" target="_blank">Website Readability, Nick Awad, accessibility.com, 2024</a></p></blockquote><p>Nick Awad also lists some tools that can be used to check accessibility in terms of reading ease, contrast, and simplicity.</p><blockquote><ul><li><strong>Web FX Readability Tes</strong>t-<a href="https://www.webfx.com/tools/read-able/" rel="nofollow noopener" target="_blank"> This tool</a> evaluates readability based on a provided URL.</li><li><strong>Readability Formulas Scoring System</strong>– <a href="https://readabilityformulas.com/readability-scoring-system.php" rel="nofollow noopener" target="_blank">This tool</a><a href="https://readabilityformulas.com/readability-scoring-system.php" rel="nofollow noopener" target="_blank"> uses various formulas</a> to measure the readability of input text. These formulas account for sentence length and word complexity to estimate the text’s readability. </li><li><strong>Hemingway Editor</strong>– Beyond traditional readability scores,<a href="https://hemingwayapp.com/" rel="nofollow noopener" target="_blank"> the Hemingway Editor</a> identifies complex sentences, passive voice, and other potential content issues. It suggests ways to make the text more straightforward. </li><li><strong>WebAIM Color Contrast Checker</strong>– Readability extends beyond text complexity to presentation. <a href="https://webaim.org/resources/contrastchecker/" rel="nofollow noopener" target="_blank">This tool ensures the text has appropriate contrast</a> against its background, essential for users with visual impairments and overall readability. </li></ul><p><a href="https://www.accessibility.com/blog/website-readability" rel="nofollow noopener" target="_blank">Website Readability, Nick Awad, accessibility.com, 2024</a></p></blockquote><p>I’d maybe add <a href="https://readabilityformulas.com/the-gunnings-fog-index-or-fog-readability-formula/" rel="nofollow noopener" target="_blank">The Gunning Fog Index (or FOG) Readability Formula</a>. </p><p><strong>Harvard University stresses the importance of white space and resizing options</strong></p><p>Harvard University’s website has a presentation on accessibility titled “<a href="https://accessibility.huit.harvard.edu/design-readability" rel="nofollow noopener" target="_blank">Design for readability</a>“. The unnamed writer talks about the use of visual and semantic space. </p><p>In arty terms, you need to give the text room to breathe. In terms of me, please keep distractions away from my focus so I can give my attention to the text I am reading.</p><p>For good accessibility support, you should support resizing, says Harvard.</p><blockquote><p>Support text resizing. Check how your content responds to enlarged text. Avoid using narrow columns of content because they will not respond well to scaling.</p><p><a href="https://accessibility.huit.harvard.edu/design-readability" rel="nofollow noopener" target="_blank">Design for readability, https://accessibility.huit.harvard.edu/design-readability</a></p></blockquote><p><strong>Digital Accessibility, Willamette University</strong></p><p>I’ve included <a href="https://my.willamette.edu/site/digital-accessibility/guidelines/readability" rel="nofollow noopener" target="_blank">this link</a> mostly to provide a plurality of authoritative sources. Williamette covers a lot of ground mentioned already. They do provide a good summary of all the points, along with best practices for content organisation and visual display.</p><p>Like any good expert, they cite their courses. I’ve included those citations as further reading for anyone interested.</p><blockquote><ul><li><a href="https://webaim.org/techniques/fonts/#readability" rel="nofollow noopener" target="_blank">WebAIM: Typefaces and Fonts</a></li><li><a href="https://www.csun.edu/universal-design-center/readability" rel="nofollow noopener" target="_blank">CSUN, Readability</a></li><li><a href="https://webaim.org/articles/evaluatingcognitive/#readability" rel="nofollow noopener" target="_blank">WebAIM: Evaluating Cognitive Web Accessibility</a></li><li><a href="https://webaim.org/techniques/writing/#how" rel="nofollow noopener" target="_blank">WebAIM: Writing Clearly and Simply</a></li><li><a href="https://accessibility.huit.harvard.edu/design-readability" rel="nofollow noopener" target="_blank">Harvard University, Design for Readability</a></li><li><a href="https://usability.yale.edu/web-accessibility/articles/readability" rel="nofollow noopener" target="_blank">Yale University, Readability</a></li></ul><p>Digital Accessibility, Willamette University</p></blockquote><p><strong>Responsive design and font choices</strong></p><p>Erik D. Kennedy writes in “<a href="https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html" rel="nofollow noopener" target="_blank">The Responsive Website Font Size Guidelines</a>“, going into depth about ideal sizes for different screen types. To get his point across (very well IMHO), Erik uses all the tricks of good writing – bullet points, headings, graphics, tables…</p><p>Talking of tables, here’s the one Erik opens with.</p>ElementMobileDesktopPage title28-40px35-50pxDefault/body text16-20px for text-heavy pages<a href="https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html#text-vs-interaction" rel="nofollow noopener" target="_blank">*</a>,<br>16-18px for interaction-heavy pages<a href="https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html#text-vs-interaction" rel="nofollow noopener" target="_blank">*</a>18-24px for text-heavy pages<a href="https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html#text-vs-interaction" rel="nofollow noopener" target="_blank">*</a>,<br>14-20px for interaction-heavy pages<a href="https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html#text-vs-interaction" rel="nofollow noopener" target="_blank">*</a>Secondary text, captions2px smaller than default2px smaller than default<p>Read <a href="https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html" rel="nofollow noopener" target="_blank">The Responsive Website Font Size Guidelines</a> for the full deep dive.</p><p><strong>Conclusion(s)</strong></p><p>I felt that I learned a lot during this research session. I’m pretty sure that I have yet to implement all the recommendations I have found here. Feel free to criticise me for that. It is a fair comment after all.</p><p>There are a lot of factors, from accessibility to optimal reading ease, to consider. Some parts are design aspects, others are a skill issue. That is okay, I think. If on each revision of our sites and blogs we factor in one more accessibility or good design aspect, our content will be better and easier to engage with. </p><p>Good font choice, layout, design, colour, and language use all contribute to an accessible and engaging web page. The more of these factors you get at least somewhat right, the better your content will be and the easier to engage with the content therein. In other words, if we want more readers, we (especially I) must work to improve accessibility and design within many factors.</p><p>Any improvement is, I think, a good thing. If each of us walks away from these articles with one nugget of truth and uses it, the web will be that much better for it.</p><p>Please comment, reply, or mention anything I have missed, misunderstood, or got wrong. Are there any design and content issues that you would add? How well do you think your blog or website meets this advice and best practice? (Mine could use work, I can see that.)</p> <a class="" href="https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Flordmatt.co.uk%2Ftechnology%2Fthe-internet%2Feverything-i-have-learned-about-good-typsetting-on-websites-and-blogs%2F&linkname=Everything%20I%20have%20learned%20about%20good%20typsetting%20on%20websites%20and%20blogs" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/wordpress?linkurl=https%3A%2F%2Flordmatt.co.uk%2Ftechnology%2Fthe-internet%2Feverything-i-have-learned-about-good-typsetting-on-websites-and-blogs%2F&linkname=Everything%20I%20have%20learned%20about%20good%20typsetting%20on%20websites%20and%20blogs" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/reddit?linkurl=https%3A%2F%2Flordmatt.co.uk%2Ftechnology%2Fthe-internet%2Feverything-i-have-learned-about-good-typsetting-on-websites-and-blogs%2F&linkname=Everything%20I%20have%20learned%20about%20good%20typsetting%20on%20websites%20and%20blogs" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/tumblr?linkurl=https%3A%2F%2Flordmatt.co.uk%2Ftechnology%2Fthe-internet%2Feverything-i-have-learned-about-good-typsetting-on-websites-and-blogs%2F&linkname=Everything%20I%20have%20learned%20about%20good%20typsetting%20on%20websites%20and%20blogs" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/blogger?linkurl=https%3A%2F%2Flordmatt.co.uk%2Ftechnology%2Fthe-internet%2Feverything-i-have-learned-about-good-typsetting-on-websites-and-blogs%2F&linkname=Everything%20I%20have%20learned%20about%20good%20typsetting%20on%20websites%20and%20blogs" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/diaspora?linkurl=https%3A%2F%2Flordmatt.co.uk%2Ftechnology%2Fthe-internet%2Feverything-i-have-learned-about-good-typsetting-on-websites-and-blogs%2F&linkname=Everything%20I%20have%20learned%20about%20good%20typsetting%20on%20websites%20and%20blogs" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Flordmatt.co.uk%2Ftechnology%2Fthe-internet%2Feverything-i-have-learned-about-good-typsetting-on-websites-and-blogs%2F&linkname=Everything%20I%20have%20learned%20about%20good%20typsetting%20on%20websites%20and%20blogs" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/share" rel="nofollow noopener" target="_blank"></a> <p><a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/tag/accessibility/" target="_blank">#accessibility</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/tag/blog-your-homework/" target="_blank">#blogYourHomework</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/tag/blogging/" target="_blank">#blogging</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/tag/cited/" target="_blank">#cited</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/tag/design/" target="_blank">#design</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/tag/fonts/" target="_blank">#fonts</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/tag/layout/" target="_blank">#layout</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/tag/readability/" target="_blank">#readability</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/tag/typsetting/" target="_blank">#typsetting</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/tag/writing/" target="_blank">#writing</a> </p>
veganism.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
Veganism Social is a welcoming space on the internet for vegans to connect and engage with the broader decentralized social media community.
Administered by:
Server stats:
295active users
veganism.social: About · Status · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.4.0-alpha.5
#readability
3 posts · 2 participants · 0 posts today
Christine Sætre-esque<p>The very cool—rich, readable, accessible—Internet Encyclopedia of Philosophy is curated by the faculty at UT Martin. </p><p>By chance I happened to use both of the world’s two primary scholarly internet resources for the discipline of Philosophy today and could help comparing them: </p><p>(1) iep.utm.edu - UT Martin (TN) <br>(2) plato.stanford.edu - Stanford (CA)</p><p>Locke: Epistemology <br><a href="https://iep.utm.edu/locke-ep/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">iep.utm.edu/locke-ep/</span><span class="invisible"></span></a></p><p>Rationalism vs. Empiricism<br><a href="https://plato.stanford.edu/entries/rationalism-empiricism/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">plato.stanford.edu/entries/rat</span><span class="invisible">ionalism-empiricism/</span></a></p><p><a href="https://techhub.social/tags/philosophy" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>philosophy</span></a> <a href="https://techhub.social/tags/readability" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>readability</span></a></p>
Matthew Brown<p><strong>Updating for readability</strong></p><p>I was in the middle of previewing a post when I got annoyed at the line length and readability of my blog.</p><p>This is what it looked like before:</p><p>The change I made was this</p> <pre>article { line-height: calc(1ex / 0.32); font-size:20px;}</pre> <p>The result was this:</p><p>It is not exactly going to change the world, but it sits in the overlap between what best practice* says is good for mobile and what the same says for desktop. *(By best practice, I mean what a website that looked like it knew its stuff said)</p><p><strong>Your thoughts?</strong></p> <a class="" href="https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Flordmatt.co.uk%2Fmatts-stuff%2Fsite-log%2Fupdating-for-readability%2F&linkname=Updating%20for%20readability" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/wordpress?linkurl=https%3A%2F%2Flordmatt.co.uk%2Fmatts-stuff%2Fsite-log%2Fupdating-for-readability%2F&linkname=Updating%20for%20readability" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/reddit?linkurl=https%3A%2F%2Flordmatt.co.uk%2Fmatts-stuff%2Fsite-log%2Fupdating-for-readability%2F&linkname=Updating%20for%20readability" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/tumblr?linkurl=https%3A%2F%2Flordmatt.co.uk%2Fmatts-stuff%2Fsite-log%2Fupdating-for-readability%2F&linkname=Updating%20for%20readability" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/blogger?linkurl=https%3A%2F%2Flordmatt.co.uk%2Fmatts-stuff%2Fsite-log%2Fupdating-for-readability%2F&linkname=Updating%20for%20readability" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/diaspora?linkurl=https%3A%2F%2Flordmatt.co.uk%2Fmatts-stuff%2Fsite-log%2Fupdating-for-readability%2F&linkname=Updating%20for%20readability" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Flordmatt.co.uk%2Fmatts-stuff%2Fsite-log%2Fupdating-for-readability%2F&linkname=Updating%20for%20readability" rel="nofollow noopener" target="_blank"></a><a class="" href="https://www.addtoany.com/share" rel="nofollow noopener" target="_blank"></a> <p><a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/tag/css/" target="_blank">#CSS</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/tag/font-size/" target="_blank">#fontSize</a> <a rel="nofollow noopener" class="hashtag u-tag u-category" href="https://lordmatt.co.uk/tag/readability/" target="_blank">#readability</a> </p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Previews" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Previews</span></a><br>PHP’s pipe operator · How it improves code readability and composition <a href="https://ilo.im/165nk0" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/165nk0</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Programming" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Programming</span></a> <a href="https://mastodon.social/tags/Coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Coding</span></a> <a href="https://mastodon.social/tags/Readability" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Readability</span></a> <a href="https://mastodon.social/tags/PHP" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PHP</span></a> <a href="https://mastodon.social/tags/Operators" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Operators</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Backend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Backend</span></a></p>
C.<p>Venting.</p><p>If I have to open the browser's dev tools, dig through the DOM to find where you've set the background colour of the page, and then change it manually, just to be able to read what you've written, you have failed utterly at web design, user experience, and accessibility simultaneously.</p><p>Yes, I'm looking at you, <a href="https://www.meditationsinanemergency.com/please-shout-fire-this-tis-burning/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">meditationsinanemergency.com/p</span><span class="invisible">lease-shout-fire-this-tis-burning/</span></a> .</p><p><a href="https://mindly.social/tags/colour" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>colour</span></a> <a href="https://mindly.social/tags/color" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>color</span></a> <a href="https://mindly.social/tags/background" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>background</span></a> <a href="https://mindly.social/tags/readability" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>readability</span></a> <a href="https://mindly.social/tags/accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>accessibility</span></a> <a href="https://mindly.social/tags/design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>design</span></a> <a href="https://mindly.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://mindly.social/tags/DevTools" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DevTools</span></a> <a href="https://mindly.social/tags/DOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DOM</span></a> <a href="https://mindly.social/tags/hack" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>hack</span></a> <a href="https://mindly.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mindly.social/tags/venting" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>venting</span></a> <a href="https://mindly.social/tags/browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>browser</span></a></p>
Kevin Karhan :verified:<p><span class="h-card" translate="no"><a href="https://dragonscave.space/@TheQuinbox" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>TheQuinbox</span></a></span> <em>nodds in agreement</em> to me <em>"<a href="https://infosec.space/tags/AI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AI</span></a>"</em> coding ruins the <a href="https://infosec.space/tags/readability" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>readability</span></a>, <a href="https://infosec.space/tags/maintainability" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>maintainability</span></a> and <a href="https://infosec.space/tags/auditability" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>auditability</span></a> of the <a href="https://infosec.space/tags/sourcecode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>sourcecode</span></a>, and I do require this.</p><ul><li>Espechally for <span class="h-card" translate="no"><a href="https://infosec.space/@OS1337" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>OS1337</span></a></span>!</li></ul>
Mark Wyner Won’t Comply :vm:<p>Update: moved this to my new writing site so there’s a new URL.</p><p>Every hashtag on every post on every platform should ALWAYS be pascal case. I wrote this to illustrate how screenreaders read hashtags based on their case.</p><p>It’s a small thing that all of us can do to build a more inclusive, accessible internet for all. Please take the time to use pascal case.</p><p>Read more:<br><a href="https://markwrites.io/hashtag-accessibility-by-everyone-for-everyone" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">markwrites.io/hashtag-accessib</span><span class="invisible">ility-by-everyone-for-everyone</span></a></p><p><a href="https://mas.to/tags/Accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Accessibility</span></a> <a href="https://mas.to/tags/WebAccessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebAccessibility</span></a> <a href="https://mas.to/tags/Usability" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Usability</span></a> <a href="https://mas.to/tags/Readability" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Readability</span></a> <a href="https://mas.to/tags/Hashtags" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Hashtags</span></a> <a href="https://mas.to/tags/SocialNetworking" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SocialNetworking</span></a> <a href="https://mas.to/tags/Blogging" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Blogging</span></a> <a href="https://mas.to/tags/UX" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UX</span></a></p>
VegansExploreLive feeds
Mastodon is the best way to keep up with what's happening.
Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.
Create accountLoginDrag & drop to upload