How to Design a Post

How to design a publication beautifully.

Article Structure

A publication usually consists of four parts: title, introduction, main part and conclusion.

Since the publication is not fully displayed in the reader's feed, the beginning (title, cover picture and lead text) needs to be well thought out. Our surveys say that the title (88%), text to kata (75%) and picture to attract attention (28%) have the most impact on viewing the publication.

Anatomy of the post

Heading

The header is an extremely important element. It should be catchy, answering the topic and preserving the riddle. Here are several time-tested options:

  • Directly or rephrased use a common expression or meme in conjunction with the name of the product or technology ("CRM: Free lunch included", "Too many cooks spoil the GoPro", etc.). The header should convey the basic idea of the entire post;

  • Use double header ("On the road with clouds: the reality of data centers and the role of SPLA in it"). In this case, the first or second part can be the name of the film, the famous phrase, etc.; 

  • To think up a common heading ("Pattern is a heterogeneous hierarchy of QML models"). In this case, everyone understands as much as possible about what will be discussed, but the desire to look under the cut will arise for the most part in the audience, which knows the topic and interested in it.

Cover picture

Directly under the heading is the cover picture or PTAA (picture to attract attention). It highlights your publication in the feed, does not letting it get lost during the scrolling, it is being broadcasted in social networks and sometimes serves as an excellent bait for reading all the material.

Where to get pictures from?

  • From Google.Images or Yandex.Images. Try to abstractly reflect on the topic of post and draw an analogy with the outside world (antivirus - immunity, network monitoring program - cat and mouse, business process - brewing). Based on this, you can choose a picture corresponding to the topic and/or title;

  • From memes (if the policy of the company allows) - you can create your PTAA based on known pictures with memes. However, it is better not to abuse them - this technique is used by many, but not all are competent. First, it is necessary to understand the memes and their applicability and relevance, and secondly, to understand that some memes can anger the audience and incur the opposite of the expected effect;

  • Take from comics and sketches on the topic. Typically, can be found on request in Google.Images by typing "theme + comics/joke/humor/sketch/art/gallery", for example, "C++ joke". Sometimes you can find nice drawing pictures in Pinterest;

  • Use a picture or diagram provided by the customer company;

  • Create it yourself. If you have at least a little knowledge of any graphics editor, you can process the photo and create your own picture. But it should be neat, with a well-chosen font;

  • A photo from a photostock is an acceptable but undesirable option. Use it only if this is the only way to find the right PTAA.

Picture should not be

  • Blurred, with noise, with large grain or shallow. A small picture may be, but in this case it is better to use left or right alignment with text wrapping.

  • Too large, taking up a lot of space on the page and overwhelming users attention.

  • Not related to the topic.

  • Unedited screenshot.

  • The image with the signatures of the photostock, the author, other notations (mesh, curves).

  • Rough, provocative, violent, criminal, religious, etc.

Intro

Intro is an introductory part, the main mission of which is to attract the attention of the audience and stimulate the readings to continue. Most often it is combined with PTAA and takes place exactly before cut. The introduction should indicate (but not reveal!) the topic and leave room for intrigue. Sometimes it can be implemented as a trigger-type statement of the type "But first things first", "How did we cope with this?" etc. It is better to avoid the hackneyed phrases "Welcome under the cut", "Read more under the cut". By the way, do not forget that you can change the text on the button before the cut and, instead of "Read more", it can be "Let's go", "Let's roll", "How did it happen?" etc.

Main part

Main part — is designed to reveal the essence of the problem in one or more blocks, separated by subheadings. Structured material is perceived easier, so you need to take care of the organization of the text, splitting it into sections and paragraphs. If the post is large and well-structured at the same time, you can make a table of contents at its beginning. In the main part, you can use charts and pictures, lists, numbered lists. All these elements provide a switching of attention and preservation of interest throughout the text. What will be written in the main part, depends heavily on the topic and the customer's task, but sometimes next things help a lot:

  • Turn to the history of the question (but not get carried away);

  • Tell about the curious or important case associated with the topic;

  • To tell about two sides of one question (for example, criticism of popular cloud technologies by Richard Stallman);

  • Bring industry statistics;

  • To draw an analogy with events from a world far from IT (for example, to tell how underestimated the potential of the telegraph in connection with the story about the perspectives of electric vehicles).

However, using the above tricks, we should not forget about the main thing - a topic that needs to be revealed in detail and fully. If the subject allows, you can insert a case associated with the use of this technology/service/software/hardware.

Conclusion

Conclusion

James Bond has always knew that the last phrase is remembered best. Therefore, the conclusion should carry in itself a few conclusions, a little advertising (if this path is chosen) and end with a bright proposal, but not a slogan. The main thing is that the publication should not be tattered or seem unfinished.

P. S. 

Optional element. It should have a small phrase, a reservation, a link with a mention of some technology or a person. If the text from the post-scriptum can be transferred to the conclusion, it is better not to produce excess essences.

UPD (update, addition)

Be sure to follow the comments to the publication - if they have an important addition, you can insert it into the publication, where to mention the author of the update will be a good tone .

Poll

In the hubraeditor interface, it is possible to create polls with a single or multiple answers. Voting will be visible to all who read the material.

Simple rules of a good post

Here everything is as simple as possible and does not differ from the rules of thousands of redactions around the world.

  • Check spelling and punctuation;

  • Specify the exact spelling of an unfamiliar term and its meaning;

  • Explain the abbreviations when they first enter the text - there is a separate ABBR tag for this. Well-known abbreviations (IP, HDD, GSM, 4G, SIM) can stay unexplained;

  • Use a long dash and a short hyphen

  • Avoid too short and infinitely long sentences. Use sentences of different lengths to distribute the attention of readers;

  • Avoid office style and bureaucracy (e.g. this tool, based on the above, according to the established recommendations) - this will not make the text more solid, it will make it unreadable.

How to speed up the markup

Rarely when a steep publication turns out to be written in one breath - usually it uses third-party services, the most convenient of which is Google Docs. In addition to working with colleagues, it gives one more secret advantage: you can shorten the markup time to several minutes. It is enough to copy the text together with the pictures and paste it to the habraconverter. It converts the text from the document into a non-ideal, but already adapted habramarkup.

What you need to remember to work with the converter was successful?

  • The main subheaders in the text should be made with "Heading 2" style, secondary subheaders with "Heading 3" style. After converting, they will turn into tags <h2> and <h3>.

  • Do not compress or crop images with Google Docs tools - the originals will be included in the final markup anyway. Crop and compress the original images that you insert into the document.

  • Sometimes the habraconverter does not correctly handle some tags, so do not forget to check the markup before publishing.Секреты вёрстки, которые делают ваш материал красивым

  • Habr does not accept CSS-styles. Don't even try.

  • If your post has a large table, you can try to make it, but it will be much faster and nicer to insert the table with a picture.

  • You can color the subheadings <h2> and <h3> in brand (or any you need) colors - to do this thisyou need to put the subheader in the tag <font color = "# 000000">Subheader</font>, replacing #000000 with the hex code of the desired color. But do not abuse the colors!

  • Lists often look untidy. To make it pleasant for readers, always separate the beginning of the <ul> or <ol> with an indent, and remove the indent after the closing tag of the list </ul> or </ol> . If the items are large and occupy more than one line, before the closing tag </li> of each element, place <br> or <br/>, it will visually discharge items.

  • If the company has a compact logo, you can mark a list of large paragraphs not with a standard tool, but simply inserting a company logo in the size of 16×16 at the beginning of the paragraph.

  • If you need to cut some part of the text with a line, then apply the <hr/> in those places that need to be separated. Before the <hr> you need to put an indent, after it - you don't.

  • After publishing the material, do not forget to check how it looks on the mobile device (especially the tables).