Here is the list of features we use to improve the users’ or visitors’ blog reading experience. Blog plays an important role in content marketing and SEO; putting up content online is just half the work done; one needs to make it beautiful, accessible, digestible, and engaging.
If readers spend more time consuming your content, web crawlers pick it up as a positive SEO signal and subsequently rank your post higher. In short, a better user experience on your blog keeps readers engaged and spend more time. As a result, they are more likely to take actions on CTAs and convert to leads.
Vikreed is committed to improving the blog reading experience; here is the list of 75 things we do.
1. Reading Time and Progress Bar
A progress bar is generally placed at the top of the header or below the header, and some prefer it at the bottom of the screen. It shows readers’ reading progress. The progress bar helps the reader to keep track of the length of the content. This additional clue entices a reader to consume the complete content on the page.
Reading is calculated based on an average number of words read in a minute and displayed as blog post meta.
2. Table of Content (TOC)
The table of content gives the reader a high-level view of the content and represent content structure. TOC leaves a professional impression that makes it apt for technical documentation, guides, how-to procedures, etc. TOC is generally a good option for long-form content.
3. Click to Copy Headings
Each heading element (H1, H2,…, H6) in content gets a unique ID, and the user can hover over the heading and click on the icon to copy the URL to the clipboard. Copied URL is then can be shared, stored by the user.
4. Image Captions
Image caption explains what is in the image. It is an explanatory text that is generally displayed at the bottom of the image. In addition, captions are used to share the credits for the image, which includes the source web URL.
5. Floating Notification Bar
A floating or sticky notification bar that sticks to the top of the screen is mainly used for welcome messages, announcements, promotions, discounts s, etc. User clicks the close button if they don’t want to see the bar.
6. Reference Links / Footnotes
It is hard to write a completely new content piece every time; bloggers, content creators get information, facts, stats from other’s work, inspire by their ideas. So an ideal and minimal way of showing gratitude is to provide a due credit with a reference link.
You will have an auto-generated “Reference” section at the bottom of the post, where you will find a list of reference links used in the content. It is more like footnotes but in the online world.
7. Default Featured Image
In content marketing, content and featured images compliments each other. When you run a high-volume publishing workflow or schedule it with some automation tool, you might forget to add a featured image. When such a page or blog post is shared over social media, it does not show the featured image with link text and get lost in the feed jungle.
To counter this scenario, we can add default featured for posts and/or pages. This image will be used wherever a featured image is not added explicitly.
This generally happens with long-form content or bigger guides; readers may want to continue after some time or for other reasons. We give a bookmark option with custom categories; it helps them bookmark and organize the blog post links and refer them later.
9. Text Color Contrast
We will cover this point in detail in web accessibility, but text color contrast is a good starting point. According to WCAG (Web Content Accessibility Guidelines), content should be accessible to everyone, including people with disabilities. Unfortunately, in the USA alone, approximately 4.5% of the population (mainly adults) have some kindly of color insensitivity.
The color contrast of at least 4.5:1 needs to meet to make it accessible to everyone.
Here are some examples (but not limited to) which meet the required standards for color contrast.
Colors on a white background
#112e51 on #ffffff
#205493 on #ffffff
#0071bc on #ffffff
#205493 on #ffffff
#046b99 on #ffffff
#2e8540 on #ffffff
Colors on a colored background
#ffffff on #323a45
#ffffff on #5b616b
#ffffff on #112e51
#ffffff on #205493
#ffffff on #0071bc
#ffffff on #4773aa
#ffffff on #046b99
#212121 on #00a6d2
#212121 on #02bfe7
#ffffff on #2e8540
#212121 on #4aa564
#212121 on #fdb81e
10. Highlight Text
You may want to emphasize certain phrases or lines in content. There are simple ways to achieve this by making it bold, strong, Italics, etc. We give one more option to add a highlight color which pops it out even better and grabs attention. You can choose the background highlight color from presets or add custom colors.
11. Gated Content
Content marketers know that gated content is the best method to capture leads. You can give guides, documents, reports, etc., to your visitor for free; they give you their contact information in return. So gated Content is a win-win for both parties; service provider and visitor.
After submitting the form, visitors get the following screen to download the given report (gated content) by clicking the green “Download Report” button.
12. Code Snippets
If you share technical content, you will definitely encounter a scenario where you need to share the Code with readers. Code is text and can be added to the blog, but it looks like text, not code. If you add it with Gutenberg code block, it gives better formatting than plain text. This is better than default text, But we improve its styling and add an option to copy the complete code snippet.
13. Subscription Box
We create custom subscription box styles for popular subscription plugins. Unfortunately, many popular plugins come with limited CSS control and thus do not fit with clients’ brands.
14. Infinite Scroll
Clients with bigger blog publishing workflow or media/education websites need different logic to display blog posts on archive pages. Loading too many blog posts on a single page can make it slower. With AJAX-based infinite scroll, you get dynamic control over how many posts you would like to display. AJAX-based calls do not refresh the page; it appends the next set of blog posts on the same archive page.
15. Infinite Scroll for Single Blog Post
Famous social media platforms like Facebook, Linked In, Instagram use feeds to engage users for more time. The same is done with blog posts. At the end of the current blog post, the next blog post is displayed without user input or page load. URL on the next blog post is changed accordingly.
16. Sticky Sidebar
A sticky sidebar sets the sidebar floating when the content area is scrolled. It is useful in Desktop view only; for mobile views, a sticky sidebar acts as a widget. As it floats, while the content area is being scrolled, you can place your CTA advertisements in this section.
If you are running Adsense or similar ads on your blog, place a big verticle ad in the sticky sidebar. Adsense records it and sends ads with better CPC for this placement. As it floats, it received more screentime.
17. Advertisement or CTA Placements in Blogs
If you have an old blog and hundreds of blog posts, it is impractical to add CTA manually. Instead, you can use ad manager type functionality to add CTAs, Signups, Banners, etc., to all blog posts dynamically. If you are a blogging website and run online ads, add Adsense-like ads to these placements.
Possible placement options –
- Before Title
- After Title
- Before Content
- After Content
- Before / After nth paragraph
18. Full width CTAs
Users can find CTA’s inside a blog post content intrusive sometimes. However, a full-width CTA of contrast color at the end of content attracts users better and don’t break their reading flow.
19. Slide-in CTA
If you think full-screen modals, popups are intrusive; then you can use a slide-in CTA option. It can slide in from any of the 4 sides of the screen based on automated events or triggers.
20. CTA Inside Blog Post Content
Long-form content is a good place to advertise your own product and services. Custom CTA gives you an option to add an advertisement like CTA inside the blog content. This CTA section is created as a Gutenberg block which can be easily added to the blog posts.
21. Comment Policy
The default WordPress comment box does not come up with a section to add a comment policy.
With our comment template, you can add content before and after the default comment box.
22. Advanced Comment System
- Multiple layouts
- Inline commenting
- Live notifications
- Social commenting
- Post ratings
- Rich editor and media support
- Comment statistics
23. Exit Intent
Exit intent tracks users’ behavior on a webpage and detects when they leave or abandon a page. On this even it prompts the user with a popup. This is used to reduce page/cart abandonment by offering discounts etc. Exit-intent is also used for collecting leads; a newsletter signup form is placed in the exit-intent popup for the same. We integrate optinmonster with WordPress; they are one of the pioneers in exit intent technology.
If used excessively, popup hampers user experience, especially one which pops up automatically at the wrong interaction point. In addition, enterprise-level clients demand more control over popups; they prefer a selective and reactive approach to popups.
Our popup functionality mainly works on manual actions like click on Link, Image, and Button. You can add newsletter signups, a login box, CTA, advertisement, videos contact form, etc., in popups.
25. Advanced Search Functionality
WordPress default search has bare-bone functionality. However, in a bigger and complicated website setup where custom post types, custom taxonomies, etc., are used, an advanced search is needed.
Our search provides advanced options like
- Multiple search bars
- Include/exclude images, attachments, pages, posts, categories completely and individual level
- AJAX-based search
- Tracking in Analytics
- Grouping based on categories, taxonomies
- Advance filters and sorting option within the search result
- Search result page styled as modals
- Search text controls – minimum words, ignore specific symbols