How we create content


1. Usability and analysis of demand

During creating of content we always follow the idea of usability. Texts should be useful or not exist at all.

The first thing to do is verification of demand. In the absolutely majority of cases we create texts which have the right search volume on Google.

Using the tools listed above, we research the number of keyword searches that are a reflection of the article we want to create.

Texts that have sufficiently high number of search volume, are so-called interchange. It means that they link in different way to content, which are not searched on Google, but still have significant value for the user.

Thanks to it, incoming traffic to the positioned sub-pages spreads later to other sub-pages.


A simplified part of the traffic flow scheme by mdbootstrap.com. You can see on it as from sub-pages from jQuery category (they generate the most traffic from search engines) traffic spreads to all other categories and sub-pages.


2. Planning

Already at the planning stage of content we thoroughly examine texts of the competition. The scheme is always similar:

  1. collect the best ideas from the competition
  2. Improved the ideas of the competition
  3. Add you own ideas
  4. Mix everything and create better product than the competition

3. Composition

To paraphrase Master Hitchcock - the article has to start with an earthquake. Than its usability should gradually grow.

Key elements, in terms of screen visibility, have to appear immediately after loading of the website. If at the top of article you post advertisements, graphic or popping-up in the middle of the screen - than you significantly reduce the value of your content.

We never use long introductions. From the very beginning the reader has to get a solid piece of information. And what's more it has to be immediately useful.

For example - when we describe the use of some Bootstrap plug-in, it has to work immediately - without any additional installations nor configurations.

Of course such an approach causes a problem - if something should work immediately, always and for everyone, it has to be very general. Whereas users often want to adapt specific solutions to their needs.

Therefore, along with the development of the article, its concretization increase. It works according to the scheme:

Step 1.

The user visits our website and at the beginning of the article finds solution for its problem that works immediately.


Step 2.

After some time the user comes to the conclusion that need to modify a little bit our solution. So he back to the article and in the consecutive sections finds additional information about various kinds of possible modifications of our solution.


Step 3.

The user is glad and decides to switch to our solutions completely. But to do this, he needs much more technical support, than one useful page of documentation. So, he returns to the article and finds links to dozen and hundred related articles and solutions. What's more, the more time a user spends on our website, the better our learning algorithm adapts system of related content and dynamically generated content, to the user's needs.


Step 4.

At this moment an anonymous user is becoming our loyal client.


4. Navigation

Our goal never has been creating single articles. When we plan texts, we always think about large system of related content.

The user visiting a specific text, enters into our knowledge labyrinth. However, in order to come to this labyrinth, he needs right signposts. That's why we find that Navigation is essential.

In case of our documentation Navigation has the following structure:

Key (according to marked colors):

  • Red - Navbar
  • Yellow - Breadcrumbs
  • Blue - Switch
  • Orange - SideNav
  • Brown - SideBar with Scrolls
  • Pink - Related content bar
  • Green - Dynamically generated content

Navbar - the upper bar of navigation is an element intended to functional elements (such as login, contact, technical support) and to Breadcrumbs defining current path of links.

Navbar is always sticked to the top of the screen, even during scrolling down the page.

A highlighted element in Navbar is always a link generated by dynamic content mechanism. It researches at what stage of involvement is currently the user and displays suitable link: “Download” , “Subscribe”, “Feedback” etc.

On the small screens Breadcrumbs disappear and links turn into icons.


To the right edge of screen is sticked Switch (switcher of technology - jQuery / Angular / React / Vue. In our case, they can be treat as four, main, superior categories.

Switch also has a “sticky” position, it means that stays in place regardless of the page scrolling. It disappears only on the screens smaller than 768 pixels, so as not to interfere with browser content.


On the left side is SideNav - a navigation element intended to detailed categorization of content within specific technology.

SideNav is also sticked and disappears only on the screens smaller than 1441 pixels. Then you can kick-start using "hamburger” icon in Navbar.


On the right side is SideBar - a narrow bar intended to the element with a graceful name Scrolls.

Scrolls is a navigation within a specific sub-page. It keeps track of what section the user is currently in and allows him to jump comfortably between particular sections. It becomes very important in the extremely long, technical texts of out documentation.


Below the Navbar is placed Bar with related content links. It has a key importance when the user starts further exploration of our website.


Below the related content bar we find a dedicated dynamic content Panel. Similar to Navbar, here also our algorithm prompts, key for a specific stage, Call To Action.

The whole mentioned navigation is supported by non-invasive, pop-up windows on the right, run on the basis of scoring system - an algorithm gives marks for the individuals actions on the website and after crossing some set thresholds by the user, it activates a suitable windows.


5. Analytics

Even the most sophisticated system does not work if it is not reflected in the user,s needs. Therefore, it is necessary to constantly improve content and interface. However, we can not make these chances based on our belief. We need a reliable verification system.

In mdbootstrap.com it is realised in two dimension:

I. Active - by asking the user to provide feedback. Our learning algorithm, after crossing by the user a certain number of scores, displays a short form with a request for feedback.

II. Passive - behavior analysis carried out on the basic of an automatic study of user behavior. Put simply - we watch at what navigation elements users click on, how deep they scroll pages, on which sections they stop the longest etc.

In addition, users have opportunity to comment on our forum forum, and they do it (often to the despair of our technical support).


Previous post Next post

Spreed the word: Add comment
About author
Author avatar
Michal Szymanski

Co-founder of MDBootstrap and BrandFlow. Entrepreneur, web developer, UI / UX designer, marketer. Dancer and nerd at the same time.

Leave a reply

Sign up to follow your progress and get additional benefits