6.3 How to Format Content for the Web

Thanks for stopping by and checking us out! If you like what you see, make sure to create a free account so that you can:

  • Track all of your progress and easily pick up exactly where you left off
  • Get support from me and other members whenever you get stuck using our members-only Facebook group
  • Secure your spot in a followup accountability course designed to assure you’re making progress

Or simply log in if you already have one.

=====

In this video I discuss:

  • How to format content for the web
  • The BIG formatting differences between web content and more traditional content
  • How to strike a balance between on-page SEO and user experience within your content

Please direct all questions and requests for support to the FIMP Facebook group (free for registered members).

 

6.3 Transcript Below

Hey there, everyone!

First of all, you have to forgive me if this feels a little bit disconnected. You’ll probably notice in Lesson 6.2, I’m wearing like a different outfit and then in Lesson 6.5, again I’m wearing that outfit; but in 6.3 and 6.4, things are a little bit different. And that is because the first time when I recorded 6.3 and 6.4, for some reason, they had no audio. So I recorded them a few weeks ago and now realized that they have no audio and I’m re-recording them. So please forgive me if it feels a little bit disconnected. But I promise the information is all going to stay the same. Alright.

So I want to talk to you a little bit about how to format content for the web. That’s what we’re talking about in this lesson because it’s very different than other forms of media and we’ll talk about that as we dig into today’s lesson. Alright.

So before we begin writing, I want to make sure (as I just said) to really call attention to the differences between print media and traditional media (traditional writing) and web content because there are some stark differences. And if you try and put the type of formatting and style that you would put in print media on the web, it’s going to make for a really, really, really bad user experience and overall hinder the success of your website.

So one of the biggest things that we do with web content – at least experienced writers – we settle into it over time. Everyone figures this out at one point or another as you’re building an internet business. You want to break your paragraphs into smaller chunks. I say “chunks”, so, you know, whereas in a book you may have that much text on a page… if you put that much text on the web; in someone’s web browser, especially on a mobile device – it looks really, really, really bad. So you want to break your paragraphs up into smaller chunks. That doesn’t mean you write a sentence or only two sentences for every paragraph, but you’ll see what this looks like as this section continues.

The other thing that I want to call attention to is, of course, when you’re reading a magazine or a newspaper, you have justified text. And in case you don’t know what justified text is, it’s where basically you have these perfect lines on either side and the spacing in the paragraph is a little bit larger and shorter on some lines than others because it gives that really nice clean line, and next to it another line for another column, and the next to it another line for another column and it makes for these really clean lines.

We don’t do that with web content because it’s a nightmare. It’s just a coding nightmare, a formatting nightmare, and it just wouldn’t make for a very good user experience because we would have all this kind of mixed spacing and it just wouldn’t make any sense. It looks really, really, really bad. And again, especially once you take it from a computer screen and try to make it mobile responsive so it displays the same way on someone’s phone – nightmare. Nightmare and a half, for sure. So we just don’t do that. We don’t worry about justifying text with web content.

The other thing we want to make sure to do as we go through our article – and again we’ll see this later – is as you’re writing, you want to insert images regularly to help break up that wall of text feeling. I don’t know if you’ve ever been to a website, you may not have noticed it consciously, you probably just left without realizing why you were leaving; but if you go to a web site and they don’t have their paragraphs broken up into smaller chunks and on top of that, they don’t have images inserted kind of periodically throughout the text, it feels really overwhelming because your screen is just covered in text.

And I don’t care who you are, I don’t care how much you enjoy reading, that is not a good feeling. It’s overwhelming. And typically what it results in is subconsciously, without even realizing it, navigating away from the website and just going and finding one of their competitors that gives the information but they formatted it a little bit better. So don’t let that happen to your website, right? Format the content correctly from the very beginning. And I’ll talk to you in the next lesson – 6.4 – we’ll talk about where to get these images.

And you’ll also want to make sure to strike a balance between search engine optimization and user experience, alright? So of course, we’ve got all these acronyms: that’s SEO and UX. We want to make sure to strike a good balance between these two things, because yes, you want to insert your keywords where they’re helpful and they boost your on-page SEO and they lay a solid foundation for you to get rankings down the road for the keyword you’re optimizing for.

But at the same time, we don’t want to overdo it so much that it’s hurting the user experience. We don’t want a keyword stuff, we don’t want to cram these keywords in every single headline because Google has gotten good enough over the past few years that when you sacrifice user experience specifically to try and game Google and get rankings, it’s going to hurt you. It’s going to not only hurt your user experience, but it could significantly hurt your ability to rank for the keywords you’re trying to rank for. So don’t overdo it. You want to find a nice balance. And of course, we’ll look at that as we continue through this section and I’ll take you in a few lessons over the shoulder so we can see the type of content that I’m describing with all of these different kind of elements that we’re going through lesson by lesson. Okay?

So as I mentioned, you’ll see all of these in the coming lessons. I think it’s going to be crystal clear by the time you finish this section. How all of these things add up to really high-quality content that’s going to get ranked, that’s going to create a wonderful user experience and is going to really, really set you up for success down the road.

Okay, I just realized one thing I forgot to discuss was when I mentioned justified text: excessive fonts. What I mean by excessive fonts is you don’t want these really fancy… you don’t want to pick a theme with this really fancy font. You want really clean, easy-to-read simple font. You don’t want something… you know, a lot of the time journalists will use Serif fonts which is a classification of fonts that have a different style on kind of the ends of the letters. Maybe they have these lines on the end.

You’ll notice that most web content is Sans Serif which means it’s just… the best way I can think to describe this – smoother looking. But you could if you’re really curious, you can Google Serif versus Sans Serif. S-E-R-I-F versus S-A-N-S S-E-R-I-F. So that way you can kind of get an idea, but you know, you could also just take my word for it.

Most good themes are just going to have a Sans Serif font, meaning it doesn’t have those little edges and lines and stuff like that. You’ll even see in the text that I’m using on this slideshow, this is a Sans Serif font. You’ll notice that it doesn’t have any… like Times New Roman and Georgia – they have these kind of fancy on the edges of the letters, they have these extra lines and decoration and they overall just make text a little bit harder to read. And we want to lower the barrier to enjoyment as much as possible to ease of use (usability), user experience. We want to make it as user-friendly as possible and typically a Sans Serif is what does that.

So you don’t need to get that technical. You don’t need to be looking at your themes and be like, “Oh my God, I have a Serif font.” Don’t freak out about it, alright? In most cases, it’s going to be taken care of for you and you don’t need to worry about going into the code and editing that stuff. If you want to address those things down the road, once you’re getting traffic, you can hire a programmer and they can fix it really, really quickly and easily, alright? So I just realized that I overlooked that in that bullet point and I wanted to backtrack before I finish the video and address that.

So as I mentioned, you’ll see all of this in the coming lessons as we work on the content for Rue Tattoo and I think it’s going to be really, really clear before we’re done.

But as always, if you have any questions, feel free to post them to the Facebook group, we’d be more than happy to help; and if nobody else comes along to help, I’ll be there, I promise. And in any other circumstance, I guess, I’ll just see you in the next video. Talk to you then.


5 thoughts on “6.3 How to Format Content for the Web

  1. Hey Ian, as usual, Great Content! Thank you. I have a background in Design and thought I might contribute with -moderately- interesting fact about fonts.

    Serif is a French word that basically means “graceful” in the typography industry. (may be the wrong translation: anyone who knows the real translation, please correct me!) And represents, like you said, those fonts that have letters “graceful” extremities, ie small ornaments (Times new roman or Garamond).
    Sans Serif means “without Serif”.

    As you said in your video, the best fonts for the Web are Sans Serif. This is due to the fact that, in the pre-HD era, serifs were very badly rendered on screen because the “ornament” dimensions were smaller than the screen pixels.
    Therefore, a font without Serif would be more readable.

    In print design, on the other hand, Serif fonts are used because the ornaments make for a more fluid reading, better connecting letters to one another and helping the eye to move faster (I can’t recall the correct physiology of this, but you can easily search for it).

    Recently, someone has started using Serif fonts for web content, due to wide distribution of HD screens, and apparently the readability has leveled out with the Sans Serif.

    All this rambling to say that, while I do encourage everybody to use a Sans Serif font, there are now far less reasons to exclude a Serif font from your website.
    If your brand better coordinates with a Serif font, I believe that the negative impact of not using a Sans Serif font would be minimal.

    What are your thoughts about it?

    • Still a big UX experience on the user side. Humans read sans serif font more smoothly and easily — studies have shown it to reduce cognitive burden (albeit slightly). So I still think it’s best to err towards sans serif.

    • Hey Dave! I’m actually aware of this issue, but I’m traveling and won’t be able to investigate and fix it until around October 1st when I’m home (the source video is on a hard drive at home; not on my actual laptop). But thank you for letting me know!

Leave a Comment