Publication is the basic unit of communication between the author and the reader. Practice shows that almost any format can be placed on Habré: a small announcement and a longrid review, an interview, a photo report, an event broadcast, a lesson and much, much more. Often, the success of a publication depends on its design - it is pleasant to read a nicely designed material. In this article we will try to provide you with a lot of useful tips on good design material.

And the first life hack is a clickable image to Kata, which leads right inside the publication:



But you are already in the publication. We do not know how this life hack will affect article views, but it’s obvious that clicking on a picture is much easier (especially on a touch device) than targeting a headline. Therefore, it would be great if the authors apply this life hacking (which we do not do automatically, as there may be several pictures before the kata): just copy the address of the article immediately after publication and link it to the picture before the kata.
')

Instruments

We know firsthand people who write texts directly in the form of creating a publication on Habré. But despite the fact that we have an autosave function on our site (it works via localStorage), it is better to write materials somewhere else, and after all edits, transfer them to Habr. The most convenient (including for teamwork) option - GoogleDocs . Although, in general, any text editor will do - in the same Pages on the tablet very often warm tube texts are born.

These options are preferable for at least three reasons:

- They do not depend on LocalStorage and the text does not accidentally disappear anywhere, it is also available from any device;
- The text of the publication is written not in one breath, which means - it can turn out to be more thoughtful, complete and complete;
- The presence of various possibilities for registration allow you to see the article as it will be; Converters such as this can be used to transfer material later.

Text

On Habré (and on other content projects of TM) there are the same forms of writing publications - a regular editor with a preview. For writing using plain text that can be embellished with HTML tags. Often (especially in the Sandbox) it’s possible to see the text in which the authors try to cram CSS styles by hook or by crook; interpreted by the site. Just try a couple of times to play around with the form for creating a publication, without forgetting to use the preview button to evaluate the results. In the meantime, a few tips.

Paragraphs

The worst that can be with the text is if it is inserted with one continuous sheet. Random scroll wheel (or inaccurate touch to the tablet) and everything, you have already lost the place where you read. Break the text into small paragraphs, with several sentences in each.

Paragraphs of the text can be separated by pictures - this is especially good if they are also relevant.

Headlines

The site as well as HTML markup has 6 levels of headings, H1-H6. In fact, most authors use only a few - the largest (H1), smaller (H2) and medium (H3) - the rest are not very headline. Use them to structure the text - the largest ones should be divided into main sections, smaller headings - subsections, etc. It should be clear by headings that you start reading - an article section or part of a section. Do not make headlines for headlines.

By the way, headings (as well as plain text) can also be painted with a font color tag (a tag, not a css-style!) - this feature is especially loved by corporate clients by coloring headings in corporate color (for example, in this article the headings have color from the logo Habra). This option is good because it makes the headline even more distinct against the background of a black and white text sheet.

Example:

<h4><font color="#cc0000">Irony-</font></h4> 

Result:

Irony header

Links

Do not insert long links directly into the text of the publication - attach them to any word. Compare:

Google about UFOs - www.google.com/?gfe_rd=cr&ei=V_GiVc6KOLCr8wf5zoDgBQ&gws_rd=ssl#newwindow=1&q=%D0%BD%D0%BB%D0%BE

Google pro ufo

Do not be lazy to insert links to the materials used in the article - publications on Habré, Wikipedia articles, etc. - well, when the article is of maximum benefit, and the reader does not need to then search the search engines, since all the necessary information is carefully collected by the author in advance . For such a plus in karma is not a pity to put.

Special tags

Be sure to study the tags available on the site - among them there are many useful ones. For example, if you use some rare abbreviations in an article, why not decipher their meaning with the abbr tag? See how cool:

 <abbr title="   "></abbr> 

Result:

KDPV

Also, few feel the difference between the source and code tags. Source inserts a block element with syntax highlighting, while code inserts a lowercase element (in essence, just a monospaced font). Accordingly, it makes no sense to insert several lines of code in the code tag - it will look ugly, merging with the main text. Source is the opposite.

Not everyone knows that there is support for tables, including the possibility of combining rows and columns. Tables cannot be set to the frame thickness or background color, but inside them you can use images and text with all the same formatting - if you approach responsibly, you will get beautiful. Yes, someone will say that you can insert a table and a picture, but this way it will not be indexed and so it will be more difficult to change something in it.

Full of other tags: for mentioning other users (so that they notice it in their tracker), for inserting interactive twitter-cards, etc.

Spoilers

Another spetstag about which I want to mention separately. Spoiler is used to hide certain information in the article, but at the same time that it is available after the click.

Images

With regards to images you need to know two features:

• All images from Habrakhabr / Geektimes / Megamind are stored on the Habrastorage service - a special resource for storing pictures. Even if you insert images from an external site, they will still be uploaded to Habrastorage - to be available even after years. Pour the pictures immediately to the service - it is very convenient.
  
• All large images are automatically scaled by means of CSS - so that the layout of the site does not disperse. That is, you can insert a FullHD-screenshot, but most likely, nothing will be visible on it - do not be lazy to make the picture clickable by writing a link to the full version of the image.

Selection KDPV

The first image that is used in the publication is KDPV, it is a Picture For Attracting Attention or a picture before kata. As the name implies, a big mission is entrusted to this picture - to attract the attention of a potential reader when he watches a tape of publications. And that is why this picture should be used - if it is not there, then your publication is more likely to be “lost” during scrolling. Do you agree that you entered the publication more than once just because you were intrigued by the picture before the kata?

From the choice of the KDPV often depends the further fate of the publication, the mood in its comments. There is nothing more boring than a brand logo - use something brighter and more juicy that will attract attention. Humor and memes are welcome, but everything should be in moderation - if everyone is tired of some meme and you yourself understand that it is not very appropriate, look for another picture. Not once met comments like "I went just for the sake of the picture" or "Even the picture did not save this post."

Illustrative examples: with boobs , without boobs .

If you are writing a cycle of publications, it makes sense to use the same picture before kat - then those who liked the previous publication from the cycle will most likely enter a new part.

Screenshots

Mac users have everything simple - Steve Jobs himself ordered to use the combination “CMD + Shift + 4 + Space” in order to make a beautiful screenshot of a window with a shadow. For Windows and Linux users there are a huge number of various utilities and methods - at your discretion.


Screenshot from OS X after pressing the “CMD + Shift + 4 + Space” combination. Signature - italic + font color = "99999"

There are several nuances:

• If the screenshot turns out to be very large, then, most likely, it will not fit entirely into the publication - in this case, it is easier to make it clickable - so that by clicking on the thumbnail of the picture a full-fledged screenshot opens. This is done by the construction:
  
  

   <a href="original"><img src="preview"></a> 

  
  Do not forget to sign in the text or in the caption that the picture is clickable.
  
• If you insert a screenshot of a part of a window, then with high probability there will be text in the screenshot, perhaps even black and white, as in the article. In this case, the screenshot can merge with the text, so do not be lazy to make the image a frame that will clearly separate the picture from the text. In Photoshop, this is a couple of clicks: layer settings> stroke.

Picture without frame, with align = "center"

Do not insert JPEG-screenshots and PNG-photos - this will not leave unattended in the comments. As well as pictures of terrible quality (more than 2 points on the scale of jackals) should not be used.

Text wrap image

If you use a small image in the article (less than 300-400 pixels in width), then the sides of the image will have empty areas. To get rid of them, you can register the align attribute with the value left, center or right - as you prefer. In order not to do several line breaks later, use the clear attribute.

And still images can be given the width and height attributes - especially for perfectionists who want to align any icon to the pixel in the text of the publication.

Other tips

• Examine the tags available on the site. The same article can be issued in different ways. If the articles on Habré are for you as part of a portfolio, then do not be lazy to spend a little time on a beautiful result.
  
• Pay attention to how other users make publications. Almost every day many examples are published for this.
  
• Pay attention to indents. They are different for different objects - one indentation for headings, another one for image or tag with code. It is ugly when there are unnecessary line breaks in the publication, and the pictures “stick” to the text.
  
• Use a spelling / typographer. Hyphens, quotes, ellipsis, etc. - it's up to you. But few people will like the errors - correct at least what the browser emphasizes.
  
• And most importantly - use the preview. Repeatedly posted on the site unfinished publication, with system notes (to agree with IGOREM) or without pictures. At best, they managed to hide the publication in drafts for correction, while non-working links could go to social networks; and the article after publication does not appear at the very top - it appears where it was at the time of the first placement. In the worst case, it shifted the focus of the discussion in the comments - do you need it? That is why we recommend preparing the material somewhere outside, but even with this approach, you should measure it seven times before cutting it off once.
  

The end

We shared with you some tips (fairly obvious), but it is important to remember that the most important thing for publishing is that it is interesting. If it is uninteresting, no design will save. But at the same time, reading a beautifully designed publication is always a pleasure. And in this case it is important not to overdo it - everything is good in moderation.

Write your recommendations on the design of publications - the most valuable tips will add here.