A trend toward consolidation in WordPress has been going on for at least a decade now, but it's not only limited to WordPress. All aspects of the web industry have been affected by it. In this post, we'll introduce you to five mergers and acquisitions from recent history.
Designing a beautiful “article” is wrought with tons of considerations. Unlike, say, a homepage, a long-form article is less about designing an interface than it is designing text in a way that creates a relaxed and comfortable reading experience.
That’s because articles deal with long-form content which, in turn, tends to be valued by a ”time on page” interaction with users. We want someone to read a complete narrative. There’s a natural space between the time someone lands on an article and reads all the words. And hopefully, that space is immersive enough to not only hold a user’s, but provoke thoughts, ideas, and, possibly, actions. At least that’s what I’m hoping as I have your attention and you make your way through the very article you’re reading.
There’s a balance. On one hand, we hear that “no one reads the Internet.” On the other, a long-form article demands careful attention. Considering the current value of content marketing and the growing impatience in users, captivating readers for as long as possible should be a key concern. Let’s take a look at some best practices and examples of incredible article pages to get a better idea of what makes a visually appealing reading experience for long-form articles (without sacrificing user experience), and how we can replicate the effects.
Quick wins
Let me quickly list out what I think might already be obvious to many of you, but are effective things for content legibility:
Increase the font size: We know that 16px is the default and is perfectly fine in many designs, but a larger font size is inviting in that it implies the user is free to lean back and settle in without having to angle forward with the screen in their face to read.
Aim for characters per line: Very few people I know like to work harder than they need to, and that goes for reading too. Rather than using the full viewport width, try to narrow things down and balance that with your larger font size to get fewer characters on each line of text. Your sweet spot may vary, though many folks suggest somewhere between 45-75 characters per line to help limit how far the reader’s eye has to work to go from left to right. Chris has a bookmarklet to help count characters, but we also have the ch unit in CSS to get predictable results.
Bump up the line height: A default line height is going to feel smashed. It’s funny, but more space between lines (up to a point, of course) is less work for eyes, which seems antithetical to the characters-per-line advice where we generally want eyes to travel a shorter distance. A line height between 1.2 and 1.5 seems to be a pretty typical range for long-form content.
You may be accustomed to designing “above the fold” where real estate is a prime commodity. That’s sort of like beach-front property in the web world because it’s where we’re used to packing in high-value things, like hero banners, calls to action, and anything else to help sell a thing. Above the fold can be a lot like a dense urban downtown with high traffic and high-rise buildings.
Articles are different. They allow you to stretch out a bit. If we want to take the city development analogy a little further, articles have the acreage to lean into a “less is more” sort of design approach. That’s what makes seemingly small design choices — like type — so important to the overall experience.
Check out the example below. The link underlines have a little more room to breathe (specifically, they appear below the descenders). This is actually something that you can enable sitewide but looks especially nice on article pages since it increases readability. That’s the sort of subtle design choice that contributes to extra breathing room.
text-underline-position: under; is the line of CSS that makes this work. Naturally, text-decoration must be set to something other than none (underline in this case), too.
The example above also features text-decoration-thickness, which alters the thickness of underlines (and other line types). You can use this CSS property to match a line’s thickness to a font’s size and/or weight.
Here’s a full example:
a {
text-decoration: underline;
text-decoration-thickness: 2px;
/* or */
text-decoration: underline 2px;
text-underline-position: under;
}
But before you reach for the text-decoration shorthand, Šime Vidas has a few “gotchas” when it comes to using it that are worth reviewing.
Leading into the content
Drop caps are stylized letters that can be placed at the beginning of a document or document section. They were once used in Latin texts, but today they’re mostly used for decorative reasons.
Personally, I think that drop caps hinder readability. However, they can be a nice way to “lead” a reader into the main content, and they shouldn’t introduce any serious accessibility issues as long as you’re using the ::first-letter pseudo-element. There are other (older)methods that involve more HTML and CSS as well as the use of ARIA attributes in order for the content to remain accessible.
Using ::first-letter, the CSS would look something like this:
/* select the first letter of the first paragraph */
article > p:first-child::first-letter {
color: #903;
float: left;
font-family: Georgia;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}
It sure would be nice if we could use the initial-letter property, but there’s pretty much no support for it at the time I’m writing this. If we had it, all that math for font size and line height would be calculated for us!
CodePen challenged folks to show off their drop-cap-styling skills several years ago and you can see a whole bunch of neat examples from it in this collection.
Skip to main content
Screen readers allow users to skip to the main content as long as it wraps it within a <main> element. However, those who navigate websites by tabbing don’t benefit from this. Instead, we must create a “skip to main content” anchor link. This link is customarily hidden but revealed once the user makes their first tab (i.e. show on focus).
It would look something like this:
<!-- anchor -->
<a id="skip-link" href="#main">Skip to main content</a>
<!-- target -->
<main class="main">
<!-- main content -->
</main>
#skip-link {
position: absolute; /* remove it from the flow */
transform: translateX(-100%); /* move it off-screen so that it appears hidden but remains focusable */
}
#skip-link:focus {
position: unset; /* insert it back into the flow */
transform: unset; /* move it back onto the screen */
}
.main {
scroll-margin: 1rem; /* adds breathing room above the scroll target */
}
There are other ways to go about it, of course. Here are a couple of deeper dives on creating skip links.
I love the illustrations in this article. Despite how incredible they look, they don’t demand too much cognitive attention. They introduce brief moments of delight but also suggest that the article itself has something more important to say. Partly, this comes down to the use of transparency, whereas rectangular images capture more negative space and therefore demand more attention (which is fine if that’s the desired effect and images are crucial to the story).
However, it’s important to know that the images aren’t actually transparent at all, but instead are non-transparent JPEGs with the same background color as the content. I’m presuming that’s to keep the size of the images smaller compared to PNGs that support transparency.
The downside to “faking” a transparent background like this is that it would require additional trickery (and maintenance) to support a dark mode UI if your site happens to offer one. If the illustrations are pretty flat and simple, then SVG might be the way to go instead since it’s small, scalable, and capable of blending into whatever background it’s on.
But if you’re bound to using raster images and would rather work with PNG files for transparency, you’ll want to look into using responsive images and the loading="lazy" attribute for faster loading times.
Put the focus on the type and semantics
You may have very little say over how or where someone reads content on the web these days. Whether the user receives it in an RSS feed, gets it delivered by email, sees it copy-and-pasted from a colleague, finds it on a scraped site, or whatnot, your content might look different than you prefer. You could design what you think is the most gorgeous article in all the land and the user still might smash that Reader Mode button to your dismay.
That’s ok! The discoverability of content is very much as important as the design of it, and many users have their own ways of discovering content and preferences for what makes a good reading experience.
But there are reasons why someone would want a Reader Mode. For one, it’s like “not seeing any CSS” at all. By that, I mean Safari’s Reader Mode or Brave SpeedReader, which use machine learning to detect articles. There’s no fetching or executing of CSS, JavaScript, or non-article images, which boosts performance and also blocks ads and tracking.
This sort of “brute minimalism” puts the focus on the content rather than the styles. So, you might actually want to embrace a browser’s opinionated reading styles specifically for that purpose.
The way to do that is not by using CSS, but by paying closer attention to your HTML. Reader modes work best with markup that uses simple, semantic, article-related HTML. You’ve got to do more than simply slapping <article> tags around the article to get the most from it.
You might just find that a minimal design that emphasizes legibility over slickness is actually a good strategy to use in your site’s design. I’d strongly suggest reading Robin’s post on the “smallest CSS” for a solid reading experience.
Roundup of long-form articles!
I’ve shared a lot of what I think makes for a great reading experience for long-form articles on the web. But seeing is believing and I’ve rounded up a bunch of examples that showcase what we’ve covered.
Polygon uses a strong, provacative visual to hook readers into the ain content. Notice how the drop cap, larger font size, and increased line height make this feel like a page you can sit back with and relax.
The TASTE website uses transparent images that blend into the background color of the content. There’s plenty of space between elements and bold accents — like thick borders and a heavy drop cap — pull the reader’s eye down the page.
The Outline is a prime example of minimalism. Notice how something as subtle as a squiggly horizontal rule can be an eye-catching embellishment when there are fewer things competing for attention.
The brutalist style of the Dropbox blog is probably a controversial one. The colors, fonts, and use of space are all over the place, and the content being floated to the right just feels unfamiliar. But does it break any design ‘rules’? Nope. I could grow to like it in time, especially in a milder form.
Urban Beardsman’s design is extremely linear. As somebody that has difficulty concentrating and is easily distracted by sidebars, in-article CTA boxes, and even blockquotes, I very much enjoy how easy it is to read this blog like a book. The perfect example of “less is more.”
There’s nothing unique about the GoSquared blog, but it managed to include pretty much all of the things we discussed in the article — a better underline design, seamless images, and some very readable typography. Quite impressive.
The Smart Passive Income blog proves how far you can get just by choosing a legible font and using readable font sizes, line heights, letter spacings, and paragraph spacings.
Recipe pages are consistently sucky, but not Little Fat Boy. The lack of sameness throughout the page makes it easy jump to different parts of the recipe without getting lost. Plus, the ingredients are pinned to the top-right for your convenience.
Do you want to add document collaboration and editing to the WordPress block editor, similar to Google Docs?
Google Doc-style inline commenting can make collaboration and editing a lot easier in WordPress for multi-author blogs.
In this article, we’ll show you how to easily add Google-Doc style document collaboration and editing in WordPress block editor.
Why Use a Collaborative Editing Plugin for WordPress?
If you run a multi-author WordPress website, then you may often come across situations where you may want to leave a suggestion or feedback for an author.
Similarly, you may need to work with multiple authors on the same article in WordPress. However, you’ll have to rely on external tools like email, Google Docs, or text to communicate with other authors.
This way your team can more efficiently collaborate to create better content for your users.
That being said, let’s take a look at how to easily make collaborative editing possible in WordPress.
Adding Document Collaboration in WordPress Editor
By default, WordPress doesn’t come with a built-in solution for teams to communicate inside the WordPress admin area, so in this tutorial we’ll be using a collaborative editing plugin.
Upon activation, you need to edit an existing WordPress post or page, or create a new one.
On the post edit screen, select any text that you want to highlight for your team members and click on the Comment button in the toolbar.
This will bring up a popup where you can leave a comment for other team members to view.
Simply type in the field and click the Comment button when you’re done.
If you want to add a particular user to the conversation, that’s easy.
Just type the @ sign and select their username from the dropdown.
You can also choose to assign a particular comment to the tagged user.
This will allow them to track any tasks and feedback assigned to them and mark them complete.
You’ll notice the comment assigned to the specific user you have tagged.
You can add comment on almost any text anywhere in the post or page.
The comment button will appear on most blocks including headings, tables, columns, blockquotes, and more.
You can also add comment to the caption fields for images, audio, and video embeds.
Note: Adding the comment does not save them. Your comments will only be saved when you save the post or page you are editing.
Now, you may want to see how it would appear for other users. To do that, you can simply log in to your WordPress website with another account.
Make sure this other account has the user role or permission to edit the post or page where you left comments.
Upon login, simply edit the post, and you’ll see that the text areas where you left comments earlier are highlighted. Clicking on them will bring up the comment popup.
Go ahead and feel free to add a reply to one of the comments. Your reply will then appear below the original comment.
Once an issue is fixed, you can close that comment thread by clicking on the Resolved checkbox.
Managing Document Activity and Comments
Want to view all of a post’s comments in one place?
You can view and manage all document activity and comments by clicking on the Multicollab button at the top right corner of the screen.
It will show you recent comments under the Activities tab. From here, you can directly reply to a comment or mark it as resolved.
If you don’t want to see comments while working on an article, then simply switch to the Settings tab and turn on the Hide Comments option.
The plugin also lets you see the overall summary of activities on the current document under the Summary tab.
Here you can see last edited by information and overall comment stats for the current article.
Send Email Notifications for Editorial Comments in WordPress
The premium version of the plugin allows you to send email notifications for each comment.
We recommend using WP Mail SMTP plugin to make sure that email notifications are delivered. There’s also a free version available that’s more than sufficient.
By default, WordPress uses PHP mail() function to send emails. However, this function can be easily abused, and most WordPress hosting companies don’t have it properly configured.
WP Mail SMTP fixes this problem by allowing you to easily send WordPress emails using a proper SMTP server.
Would you like to get email notifications when authors submit posts for review on your WordPress site?
Managing multiple writers in a WordPress blog can be hectic. If you have a multi-author blog, then you might find it helpful to know when a writer submits a post for review.
In this article, we will show you how to get email notifications for posts pending review in WordPress.
Why Get Email Notifications for Posts Pending Review in WordPress?
When you first start your WordPress blog you’ll probably do everything yourself. You’ll come up with all the ideas for your content, write and proofread the posts, and publish them when they’re finished.
As your blog grows, you may get other writers involved in contributing to your blog. That can be a lot more work!
You’ll need to collaborate with them and keep them on track. You’ll have to become more deliberate when planning and scheduling your content. And you’ll have to review each article before you publish it.
There are plenty of ways you can improve the editorial process. One thing that really helps is to receive a notification when a post is pending review.
Without these notifications, you’ll have to constantly visit your blog’s dashboard to check up on the progress of each post.
Note: There is a paid version of PublishPress with more advanced features, but we will be using the free version in this tutorial.
Upon activation, a PublishPress section is added to your WordPress dashboard. To create a new notification you need to visit the PublishPress » Notifications page.
On this page, you will see the default notifications. These send emails to the site administrator when content is published and editorial comments are added to a post.
To create a new custom notification, you need to click on the ‘Add New’ button. Go ahead and type ‘Posts Pending Review’ in the title section.
Now we’ll turn our attention to the Workflow Settings. Here, you can select when to send a notification, the users who will get notified, and for which types of content.
We want a notification to be sent when the status of a post is changed to ‘Pending review’. So you need to click the ‘When the content is moved to a new status’ checkbox.
Once you’ve done that, select ‘Pending review’ from the New status dropdown menu.
Next, you need to let PublishPress know the types of content you want to send notifications for. So click the Post type checkbox and select ‘Posts’ from the dropdown menu.
If you also want notifications to be sent for other types of content, then you need to check ‘Pages’ as well.
The next thing you need to do is let the plugin know who to notify. If you’re the only person who should be notified, then you can just check the Site Administrator box.
If you have several editors, then it’s a little more complicated.
While you could individually select each user who needs to be notified, it’s simpler to notify everyone with the Editor user role instead. You can learn about assigning roles in our beginner’s guide on user roles and permissions.
To notify all your editors, click the Roles checkbox and select ‘Editor’ from the dropdown menu.
You might also like to check ‘Users who selected Notify me for the content’ since they’ll be expecting to receive notifications.
Note: By default, the author of the content and everyone who edited it will also receive notifications. You can change this in PublishPress’s settings.
Now it’s time to compose the contents of the email that will be sent. While the basic content will be the same each time, specific information like the post title and author will change with each email.
PublishPress offers a number of shortcodes that will automatically fill in the correct information for each post. You’ll see the list of available shortcodes in the Help box on the right of the screen.
Here are the shortcodes we’ll use in our email:
[psppno_post title] fills in the title of the post [psppno_post display_name] fills in the author of the post [psppno_post permalink] fills in the permalink to the post
First, you need to copy the line below and paste it into the Subject text box.
“[psppno_post title]” is ready for review
Then you need to copy the two paragraphs below and paste them into the Body text box.
This notification is to let you know the content “[psppno_post title]” is ready for review. The post was written by [psppno_post display_name].
The URL of the content is [psppno_post permalink]
The final step is to click the Publish button. This will save and activate the notification workflow.
Now you and your editors will be notified promptly whenever a post is ready for review.
How to Make Sure Your Emails Get Delivered
Unfortunately, many users who start out with a WordPress blog become frustrated with emails not arriving.
That might be because your WordPress hosting server isn’t properly configured to use the PHPmail() function. Or it could be because emails sent by WordPress are often identified as spam by email providers like Gmail.
Either way, it’s not good news if you rely on email for notifications.
That’s where WP Mail SMTP can help. It’s a WordPress plugin that makes sure your emails are delivered reliably.
In the world of IT and software development, it seems that new technologies are emerging faster than ever. Driven by the incredible demands of digital transformation, big data, and the Internet of Things, it seems that there is a "must-have" tech coming to the market just about every week. However, one of the common misconceptions about these new technologies is the way in which they are converging — or whether they are really converging at all. Many IT professionals believe that these technologies are converging in such a way that new technology cannot stand alone. Let's explore why that's not technically the case and how technology is becoming more specialized than ever.
While it is certainly true that there are common threads connecting new and emerging technologies, the reality is that new tech is focused on specific solutions and challenges. As a result, tools are becoming increasingly specialized.
A trend toward consolidation in WordPress has been going on for at least a decade now, but it's not only limited to WordPress. All aspects of the web industry have been affected by it. In this post, we'll introduce you to five mergers and acquisitions from recent history. 
