Shop Mobile More Submit  Join Login

CSS/HTML Tricks: Article Layout

Mon Jun 10, 2013, 8:41 AM
Hello!
Another tutorial for news articles and journals on dA!This one is meant to help you add structure to your news articles (and personal journals) and thus enhance the reading experience for your audience.

I have already written a tutorial on the topic of HTML Literature, but only showcased what is possible there. It is almost the same as FAQ #104: What HTML formatting can we use on DeviantArt? And what is the format for these codes?

This tutorial will try to explain why you should use additional HTML in your articles and how it helps improve their quality.

Also it turned out to be quite long, so skip to your liking.

For further reading please refer to CSS Tricks: Limiting .text width, which explains the necessity of limiting your text width.

Why is structure important?


Nobody likes reading a wall of text. If you look at an article and all you see is a grey blur, you might even be put off from reading the article. By breaking up the text, even with simple line breaks, you serve your content in smaller bits which are easier to digest. Or would you eat a whole turkey all at once? It is much better to have it in parts :XD: (Knowing my eating habits, this is a really bad metaphor >_>)

Think about how you want to serve the content to your readers.


Make it possible to easily scan the overall matter of what you wrote before starting to read. Viewers are more likely to start reading, when they can tell how long it will take them to read the article. A set of paragraphs is easier to calculate than a wall of text.


Here is the same amount of words body copy in two different versions.
Left: no structure except for manual line-breaks, right: headlines added to break up text.


Of course, using headlines inside your copy will make the space the text takes up appear longer. But since it comes in nice little chunks, it is far more inviting for the reader. More white space increases legibility and gives an overall more friendly appearance to your text. The thing is, your reader may not be interested in everything of your journal/news/tutorial. Adding intermissions and content related headlines will make it easier for a user to find the parts of your text he is interested in and not waste time reading things he already knows.

The way your text looks will influence the way people react to it!


A hard to read font or a huge wall of text may lead to the reader being left with a bad feeling after reading.
We all know that colors can influence how something is perceived. How composition can change the way a subject is seen in an artwork. But the same goes for fonts and for layout. Bad design choices can lead to people not "getting" you.

Let's jump from theory to praxis! This may get a bit dry, but I just want to cover all the ground in enabling you to write visually attractive journal entries.


The HTML that will help you structure your texts


The three main components of structuring texts are headlines, blockquotes and paragraphs. They all serve a different purpose and are meant to contain different lengths of text. You do not have to cling to their traditional purpose or layout, as you are free to apply any CSS of your liking to them.

All these three are available in any journal/news/literature/tutorial you can write in sta.sh and submit to deviantART without having access to Skins via a Premium Membership. Sooo … not being able to apply CSS to a journal is no excuse for a bad layout.

There is also an easy way that requires almost no HTML knowledge, thanks to sta.sh writer's Rich Editing Mode or the new journal entry page.

:lightbulb: When writing your text in sta.sh or the journal writer, PLEASE do switch to HTML Mode when you add HTML! Staying in Rich Editing Mode may cause issues later on.

Headlines


You can use headlines in your journal entries by simply surrounding the headline with <h1>the h1 tag</h1>.
By default, there are 6 headlines sizes in HTML, ranging from <h1> to <h6>,  <h1> being the tallest and <h6> being even smaller than a default body copy size. The are always coming in a strong weight of the font you choose.

This is how you would enter the headlines into your HTML.

<h1>This is going to be the biggest headline, 24px.</h1>
<h2>The second one is a bit smaller, 18px.</h2>
<h3>A medium headline size, 14px.</h3>
<h4>A smaller medium headline size, 12px.</h4>
<h5>You can see the difference now, 10px</h5>
<h6>And this finally is the smallest one, 8px.</h6>


And this is how they would look applied to the text.

This is going to be the biggest headline, 24px.


The second one is a bit smaller, 18px.


A medium headline size, 14px.


A smaller medium headline size, 12px.


You can see the difference now, 10px

And this finally is the smallest one, 8px.

You can control padding and margin of each headline via CSS. By default it can easily look wonky, but usually headlines would not follow upon each other like in the example but be used to break up blocks of copy.

Dolor sit amet.


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Olim erat dolor.


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et vivi.


Blockquotes


The purpose of blockquotes is to highlight a part of the body copy by doubling it, and by that quoting the text it is contained in. Opposed to headlines, blockquotes are supposed to highlight the content of your text, not to introduce a change of subject.

But since you are your own editor, you can put whatever text you want into a blockquote, it does not have to follow its traditional usage. ;)

Common stylings for blockquotes are quotation marks, bigger font size than the body copy, indentation, opposed alignment, float or other means of highlighting.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <blockquote>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.</blockquote> Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


Paragraphs


Paragraphs are something most people who write a journal entry do naturally by manually entering two line breaks. In regular coding line breaks are not read and so would result in no break at all.

There are two ways to avoid this: using breaks [<br />] or paragraphs [<p>…</p>].
Breaks are simply coded line breaks, while paragraphs may appear more complex, but are way more powerful.

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.



Other options – Custom elements


You can create custom classes to further improve structure of your journals. Boxes of different background or font colors can break up a long text nicely. You can create custom boxes to be used as dividers between parts of text.

This requires a better knowledge of HTML and CSS, but you don't have to write complex code to improve the look of your texts. Nobody expects you to turn into a coding wizard, when all you really want is to make your texts easier approachable and better to digest.

The easy way


Too much HTML for you? Don't worry, you don't have to write your own HTML content. Simply use the Rich Editing options of sta.sh writer and manual line breaks to add structure to your journal text.
Headlines and Blockquotes are part of the standard formatting options, easily accesible by just clicking a button!


Easy, right?

Conclusion


  • The easier your text is to read, the better the reader will react to it.
  • Nobody enjoys reading a wall of text.
  • Give your text and your reader space to breathe!
  • Headlines, Blockquotes and Paragraphs are your friends.
  • Sta.sh and Journal Writer are easy to use and help you in adding structure.


If you are interested in a content focused approach on how to enhance your articles, please read Enhancing the quality of your journals by hq :)


If you have any questions, do not hesitate to ask :)

Happy writing :heart: :peace:

Have a suggestion?


Let me know in a comment or a note. I'd love to hear what you want to know and learn. With your input and suggestions this series can continue and grow.

Another tutorial for news articles and journals on dA!This one is meant to help you add structure to your news articles (and personal journals) and thus enhance the reading experience for your audience.

More CSS Tricks
:bulletgreen: Limiting .text width
:bulletgreen: Background Images
:bulletgreen: Responsive dA?

Hope you like it :peace: :heart: Questions? Just ask :la:
Add a Comment:
 
:iconallaze-eroler:
Allaze-eroler Featured By Owner Aug 24, 2017  Hobbyist Digital Artist
sorry to bother you but i see a problem: i found 2 broken pictures... ^^;
Reply
:iconmechulkedi:
mechulkedi Featured By Owner Feb 13, 2015  Hobbyist Interface Designer
so helpful
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 13, 2015  Professional Interface Designer
Thank you :) I am glad it does help :hug: 
Reply
:iconamberwillow:
amberwillow Featured By Owner Sep 6, 2013  Hobbyist General Artist
very helpful. i dislike reading huge blocks of text where there's no paragraphing at least. enter/return isn't that hard of a key to hit!
Reply
:iconpica-ae:
pica-ae Featured By Owner Sep 11, 2013  Professional Interface Designer
Thank you :) 

Yeah, if you layout your text, people will be so much more likely to read it :la: 
Reply
:iconcality:
cality Featured By Owner Jul 28, 2013  Hobbyist Writer
This is very helpful indeed! :la:
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 29, 2013  Professional Interface Designer
Thank you :hug:
Reply
:iconcality:
cality Featured By Owner Jul 29, 2013  Hobbyist Writer
You're welcome! :glomp:
Reply
:icongillianivy:
GillianIvy Featured By Owner Jun 10, 2013  Hobbyist General Artist
Adding to my freq referenced folder. great article.
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 11, 2013  Professional Interface Designer
Thank you :aww: :huggle:
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jun 10, 2013  Hobbyist Interface Designer
Lovely article! :heart: :+fav:
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 10, 2013  Professional Interface Designer
Thank you :hug:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Jun 10, 2013
Well done! :clap: :la:
Should be helpful and useful for a lot of people!
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 10, 2013  Professional Interface Designer
Thank you :aww: :huggle:

I hope so :)
Reply
:iconvanmall:
vanmall Featured By Owner Jun 10, 2013  Hobbyist Digital Artist
Seems like a awesome article. Have to add it to my favorites and read it when I can. :lol:
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 10, 2013  Professional Interface Designer
:giggle: It did get long ^^
Reply
:iconvanmall:
vanmall Featured By Owner Jun 10, 2013  Hobbyist Digital Artist
A lot of information for sure. :lmao:
Reply
:iconpica-ae:
pica-ae Featured By Owner Jun 12, 2013  Professional Interface Designer
:XD:
Reply
Add a Comment:
 
×

:iconpica-ae: More from pica-ae



Featured in Collections

:dA_customization by el-L-eN

... css tutorials by artbymba

CSSness by Elandria


More from DeviantArt



Details

Submitted on
June 10, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
15,413
Favourites
66 (who?)
Comments
18
×