You press Enter and instead of a new line you get a new paragraph. You want to create a nested list and it just doesn’t look how you want it to. You pasted text from your word processor and its format is all wrong.
Formatting an article in WordPress can be boring and frustrating, but it’s a crucial step in writing for the web.
People read on screen differently than on paper and formatting the text will help them get to the end of it.
Nothing much has changed since 1997, when Jakob Nielsen published his “”How Users Read on the Web”” article: despite the principles being 20 years old, lots of pages look like a wall of text that might discourage well intentioned readers.
This talk will show you how to leverage the options available in WordPress and it will teach you how to fix some common problems with a few HTML tags.
This is a workshop: please bring your laptop and prepare a post in draft so you’ll be able to work on your formatting.
Video
Transcription
SAM: This session is going to be a workshop, so it will be best if people can be front and sentedder so everybody ising to the, then we can help people as we are going through if you want to move in?
FRANCESCA MARANO: It would be better if you want to work on your formatting.
SAM: That is if you are planning to do the workshop. Because if you are not, then, go sit at the back. Go get a coffee.
FRANCESCA MARANO: There is an intro and then there is work to do.
SAM: It is a two part session.
FRANCESCA MARANO: If you want to work on your formatting and you want feedback, you need your laptop.
If you have WordPress on your iPad, you can do it. So if you are one of the lucky that can work!
Convertively in the WordPress admin area, with an iPad. More power to you. Yes if you want to work on your formatting and you want feedback, we have here people to help. So instead of me running around the room there are 4 wonderful people that really volunteered to do this. That were wrote into this actually.
So they can come to you and we don’t have to wait a lot of time to have questions answered. So it is up to you, if you want to work with us, come in front.
SAM: Do we have somebody on the door, let people know if they come in. I think we are about ready to start, it is half past, so before Francesca starts we will do just a few announcements. My name is Sam. If you have got any questions, feel free to shout me. If you haven’t picked up your T. shirt yet, do that before the end of the day, you can do that at the graduate centre at the reception which is the building that you came in, in.
It looks like this. It is very nice.
Sponsors. Big thank you to all the sponsors without them with we couldn’t put on event like this, Jetpack, …, stall sponsors, … Go daddy …
Please if you haven’t yet make sure you go check out the stalls, giving away swag and check them out. Also thank you to the balcony and patron sponsors you can find all the people sponsored on the website.
The closing remarks at 20 past 4 then out of the building by 5:00 o’clock. The closing remarks are in the track A room where the opening remarks were.
If you tweet about the sessions, if you are tweeting about this session, the #WCLDN.
We have Francesca doing a talk and workshop. Thank you. (APPLAUSE).
FRANCESCA MARANO: Hi thank you for being here today, we will help our readers, that is the goal of the workshop.
Yes. I should turn this on apparently. My name is Francesca, I come from Italy, probably you guessed that from the R’s. The rr’s.
I build websites but, today I am here to talk to you about formatting your text. We will start with a bit of theory, we will go through the formatting bar if you already know it and familiar with it, you can start messing around and try stuff. Otherwise in the end we will have 10 solid minutes to work on the formatting and as I said, you have people here that can help you if you get stuck with something or you want to know more.
All right.
So for the past 25 years we have been telling graphic designers that they shouldn’t design for the web as they did for print. Right?
Who is a front end developer here?
Do you still get mock ups on photo shop? Yes, 25 years! We have been trying to do this but still people design on photoshop. Same things happens with text. I don’t know your age? We used to do this things calls press releases. Anyone hear heard of a press release? One page of full justified text with maybe some bold thrown in just you know, to highlight the name of the furniture you were trying to sell or stuff like that.
The people who started writing in that way too those keys and moved them into the web but that is not right. That is now how you write for the web. So content was deemed King by Bill Gates of all people. I think we try and dress him as one.
A bit of history, I love the history of the internet. The web is getting old. It is almost 30 years old. The first proposal for a distributed information system was posted by Sir Tim Berners-Lee on 12 March 1989 almost 30 years ago, deemed vague and it is exciting, it is the base of the worldwide web. You might have heard of … the W 3 C, but believe me when I tell you that the releases of html and css have more characters and power struggle that any season of game of thrones! Like, it is crazy, but somehow we got to html5. Html was published the first pack was first published in 1993. In 1995 we have the first version of html2.0 which is the standard on which future version are based. We now at HTML 5. Its release was like 15 years old I think it took to get it of the standard and it has more or less 100 tags.
They are all quite self-explanatory if you can speak English. The most important date for our workshop is October first, 1997. Twenty years ago. Jakob Neilsen I don’t know if you are familiar with his work on usability, all this wonderful things, published this post named “how users read on the web..”
It was based upon a study that was conducted over the summer of 1997 over a group of 80 people I guess.
The summary is, they don’t. People don’t read. 2017 it is still this, people don’t read. They scan. They scan the text. So, whether you are writing to share your recipes on-line or you have a heavy optimised blog to convert leads or whatever, you have all you need to write good copy and format it properly in this very concise, this is like half of the article okay. It says everything you need to know. It is concise, clear, 20 years old and we still see a lot of wall of text in the internet and it shouldn’t be like that.
Text should be scannable and you can achieve that by using headings, paragraphs, headings, all the elements were already in the first specs in 1992 of HTML, we don’t have an excuse not to use them.
So unless you are publishing the next releases on the web, week by week, I don’t know, you have no excuse not to format properly your text to help your reader get to the bottom of the page.
Before we go back to our WordPress install, let’s get acquainted with a few HTML tags that will help you better understand to structure corner content. HTML is a mark up language, used elements to define the structure of the content in a page. Semantically, it is a big word, what it means it is basically the element itself tells what is doing, what it is needed for. So, and it is says so in English or with some form of abbreviation. So if I am saying to the browser, this is a paragraph, this is a paragraph, it is not something else and if I want to make a list, I will use the HTML element for the list so the paragraph, sorry, the browser will know what it is reading. Also the humans will because it is English. So HTML, I don’t want to hear this, “oh I am not a developer so no this is still a language” English too is a language and I think you all have a pretty good understanding of how it works and maybe none of you is developers. HTML works the same. It is English and the words are enclosed in to angular brackets they have opening tag, they have closing tags, not all of them. Knowing how this will look, the opening tag, the closing tag, the angular brackets will help you if something gets wonky into your post, you will know how to fix it because you are now familiar with the structure.
All this tags, these are like the most used common basic HTML tags you can use when you write a post. All of the tags are actually the buttons you have in the formatting bar in your WordPress installation and as you can see, they are all abbreviation of English words. What indicates as blockquote is the full word, so you can not get confused if it is a blockquote, it is a blockquote and not a list. You are not confused the browser is not confused, the readers won’t be confused.
Is this clear?
As someone never seen this in the life? Never saw an HTML tag in their life?
Raise your hand? I mean I, I basically just know HTML I don’t know anything. I know of some css so raise your hand if you haven’t seen HTML it is okay. All right good.
So English, angular brackets, self-explanatory abbreviation and functionality.
I would like to spend a few moments on the headings element and introduce you the the general idea of accessibility. In HTML you have 6 headings, it is the titles all right? From 1 to 6 and they are hierarchical. This is a word I can really say, it is hear-archy in break, bear with me, if I say hear-archical rather than hierarchical.
Don’t use heading one, if you have additional question about this, Rhian is here to help you with this.
FROM THE FLOOR: Thank you!
FRANCESCA MARANO: Don’t use heading one. It is reserved for other things, important accessibility things.
One of the common mistakes I see, is people using one of the lower headlines because it looks pretty. I love things that look pretty. I am all about the pretty but, if there is a 5, there should be a 4, a 3 and a 2 before that. It is hierarchical. I said it!
So, don’t skip that all right and another common mistake that I see is using actually styling to make titles but then it defies the purpose of having a semantic element because that is just pretty and again, all about the pretty, but it doesn’t say anything to the browser.
All right?
I am telling you this because using this structure will help all the readers. We want to help all the readers and when I mean all, I mean everyone. Doesn’t matter how they look or hear or do other things with websites.
If you are not familiar with the concept of accessibility start learning about it today. It is not difficult. Well, it is but, you can get an intro and get the idea of what this is about today as soon as the videos from WordCamp London will be on-line, don’t miss the 3 talks given on the topic that were really really great. I added some references at the end of the slide to get you started. I am no accessibility expert I just started learning about that. One thing is clear, don’t assume everyone uses the web like you do and not everyone uses a computer like you do. So these are things you should keep in mind when you design or format your text.
So for one extent to many by focusing on what is universal important to all humans. We love all humans not just the one we see like that or that can type on the keyboard right. I really like how Microsoft summarised this. Designing, benefiting, … they did this with a PDF that is not accessible. You have to go down to page 35 or something to see that. It was a document published a few months ago, but it is eye opening about how people use the web and devices.
So I really suggest you go and read it.
So again we are not here, we are really here to help our readers all the readers go through our text all right?
So we will do something about accessibility, we will do the bear minimum but we will do it. Now the first thing we will choose a theme, I will, I suggest you choose a theme that it is accessibility ready. So all the technical stuff. The difficult stuff about accessibility will be taken care for you, the theme will be coded in a way that it is going to be accessible.
Second rule, don’t mess with the theme. I mean, even if you can write CSS doesn’t mean you have to. Because if you go and mess with the CSS, or the accessibility ready theme you defie the purpose of having accessibility ready thing, maybe you go and change the contrast or the size of the font so all the wonderful benefits that we had from choosing an accessibility ready theme might be gone and the third one is formatting. Formatting for maximum readability and the rules were on that 20 years old post, list, paragraphs, headings, don’t use italic if it is not necessary. Be concise don’t be verbose just because you want to hit your target words for the day.
All right. Now we are going to our beloved WordPress. How many of you have no idea how a formatting bar looked like in WordPress? Like you have never used WordPress to? Yeah, thank you!
I am so happy you are here with us today. Otherwise I would have had to skip the next 20 slides! That we are made for you. I am happy you are here, thank you.
So you already know the formatting bar we will go through it because you might be surprised by some stuff. But, feel free to get out your laptops and start working on stuff. There, you have a draft ready that was part of the assignment for the workshop. Nobody did it?
Oh, you are worst than Italians! So if you don’t have a post ready start working on one now. So you will have time to format it and ask people far more experienced than me to help you with that.
All right. Let’s go through it.
When you open a post or — oh no don’t go like that!
Do you have WordPress? Do you have a WordPress website?
No! Oh. Mm bummer!
Okay. We will go, oh, I will see what we can do about that later.
Okay. So this is the formatting bar, when you open a post or a page and probably other custom post types I don’t know exist you will see this. Okay.
You will see one line, if you only see one line, go click on that last button that is called toolbar toggle and “tadda” another line will appear! Have you, do you all have 2 lines? Great.
It took some very experienced WordPress Developer some time to find the second line, so if you don’t have a second line, don’t feel bad about it. Now you have it because you pushed the toolbar toggle button.
If you are running a version of WordPress prior to 4.7.3 are you running a version of WordPress prior to? Is anyone running … there is no shame! All right. Go on and raise your hand.
Rhian, we are trying to be inclusive here!
I do think it is a shame too so in my notes it was written, why? So first of all why you run version prior to version 4.7.3. If you do, you might see more buttons in your bar and they shouldn’t be there and if they are there don’t use them. Doesn’t matter how pretty you think they will make things look, don’t use them. Please. All right?
I am looking at you lovers of justified and underlined text. Stop doing that! Really, believe me!
You have 2 available views, visual and text. Visual, visual. Bar, buttons, flashy nice things; the text view will add the HTML tags to the things that you wrote so, this up here is the version of that sentence in the visual view and that one is on the test and sends now here you have your HTML baptism I think is the word in English? Although I am not sure you do that?
You have your opening tag, you have the attribute – we didn’t talk about that. You have the string, you open it and close it then you close the link. Really it’s not rocket science.
The first thing you see on top is the paragraph heading selector. You have the full paragraph, you have all your headings. Don’t use heading 1. Are we clear on this one? Are you swearing today that you won’t be using again the heading 1?
FROM THE FLOOR: Yes.
FRANCESCA MARANO: Thank you. I will go and look at the work you did because I’m asking you at the end to post stuff and I’m going to look at that. Yes?
FROM THE FLOOR: Why not?
FRANCESCA MARANO: For so many reasons that I don’t have time to say right now! But I did add the references at the end because I knew this question would come up. But yes you need to have only headed 1 per page and since that element is used for the page title or the post title, if you have another one it will confuse things and people and devices.
FROM THE FLOOR: {Inaudible}.
FRANCESCA MARANO: Yes, yes, fight, I love fights, can I watch this? Later. Let’s go at this later. I don’t have a super clear vision but if Rhian says don’t use heading 1, for me that’s don’t use heading 1.
FROM THE FLOOR: There was an accessibility talk yesterday where it came up and you know common wisdom says that you can use H 1 within a separate article or separate section. No, you can’t. That’s not valid.
FRANCESCA MARANO: Yes, yes, yes.
FROM THE FLOOR: The reason for this is people who use screen reader can call list of headings and if there are several H 1 headings they don’t know what the pages about because heading page 1 is this is what the pages about it’s post title page title. If they are more than H 1 they don’t know what the pages about so it’s to make clear for screen reader users what the pages about so only use 1. It saves them a lot of time.
FRANCESCA MARANO: If Rhian says use it once just use it once. Don’t second guess Rhian. No, I am joking, but yeah there is a lot of discussion about that 1. But I chose you know accessibility over SEO, SEO over pretty. That is my principles list.
And also you have the pre-war matted text that can be use to add block of code into your page.
You can also use the short cuts if you are one of these people who can remember them. I’m not. But you can also use the hash symbol. So, if you start a paragraph, if you start a sentence with 2 hashes and then hit enter, it will transform it into a heading too, and if you use 3 hashes it will be a heading 3 and so on.
Bold of course is used to draw attention. Italic is used to emphasise a portion of the text. Beware that there are grammar and syntax rules about that and they’re different in the different languages. So ask your third grade teacher before going crazy with the italic.
Also another thing that I discovered thanks to some articles about accessibility, italic is very hard to read for people with dyslexia. So don’t use it unless it’s vital for the context of your post, don’t over use it. I was a huge over user of italic. I love italic but I stopped doing that.
List. List should be formatted as list. I run a blog with 60 contributors and prior to WordPress 4.3 one of the things I had to do manually for every post was to turn stuff that started with dashes or with numbers into lists. It’s very easy to make one. Just press the relevant button and start adding items. Like I’m super lazy so if I have to also add the dash symbol, why? That safes me one character in every sentence. That’s great. Use that.
But yes that used to be the case so you could do sentences that started with dash and call that a list. That’s not a list. A list is defined by an HTML tag. Luckily after WordPress 4.3 was released this is taken care automatically for you so if you are lazier than I am which I find impossible to believe you don’t even have to – you don’t have to do anything. You just start a sentence with a dash, hit enter and it will go on and create list items for you. Okay.
So it will be recognised as a list and formatted properly as one.
Blockquote is to add quote into the text. You get a visual output that’s different in every theme. I find it’s very nice. So it made the text a bit bolder and italicised now that I know about dyslexia I find less appealing but that’s how it turns out.
It’s important you use the blockquote element and not just go and make the text in italic because then the browser will know that that’s a quote. Right? so that is what semantically means. We are also describing. We’re not just saying it looks different. The information inside it’s different from a regular paragraph.
Alignment. This super controversial. I told you Game of Thrones like if you go and read the track tickets about this stuff it’s vicious. It gets vicious. But it’s full of useful information so you should go and do that.
So the conversation about alignment is still going on a little bit. Again there are reasons why on screen this kind of text aligned not from right to left if you’re right to left – from left to right sorry, I’m thinking about this the opposite way – shouldn’t be used. Of all of them justified text is the enemy. Right, again promise not to use justified text, please. One of the reasons is because on print it looks amazing but on screen it doesn’t because it creates uneven spaces between words. So, again it could be very hard to read and it’s hard to realise when the next line starts so don’t use it.
And this is why there is no justify button any more. On that one, everyone could agree that justifying, no. Okay?
These are the buttons that you use to add links. How many of you are big, big fans of the new way of adding links just by pasting the link on top of the word? Yes! If you didn’t raise your hand it’s because you don’t know about the feature! Please add to it.
FROM THE FLOOR: Who doesn’t know what feature Francesca means there? okay so there is this great feature in WordPress. It’s not very visible. So a lot of people don’t know about it. If you’ve got a plain piece of text, and you’ve got a URL in your clip board, instead of using the link buttons what you can do is just highlight the text and hit paste and instead of dropping the URL in there it will actually turn that piece of text into a real link. Once you discover this, you’ll be really frustrated with every other piece of software that doesn’t do that because it’s really kind of intuitive and it’s really useful so you just copy a URL into your clip board, highlight a piece of text in the WordPress editor and paste it and it will automatically turn that piece of text into a link. It’s really handy.
FRANCESCA MARANO: I think we have 12 minutes, right? 10 minutes. All right. So I still have a few slides about the formatting bar, but if you are already familiar with it I suggest you start working on formatting your text and if you encounter something that looks a bit wonky or you don’t know how to get out of a situation, usually you don’t know how to get out of a block element in HTML most of the time, raise your hand and somebody from the first row will come and help you out. All right?
Okay so if you don’t know yet this feature, please try it. It’s addictive. You’ll hate all other software for not doing this.
The read more tag. I don’t know if we should talk about this one because it depends on so many things including what written in the functions, PHP, what’s written in the theme, but basically if you don’t want in your blog archive to have the whole post showing up and you didn’t choose the show summary or excerpt or I don’t know what they’re called in British English, you can always add this tag right where you want the archive to show just the paragraph you want to show in the archive.
You can try that one and maybe that one is really interesting to see how your different themes react to these kind of things.
Second line. Second line is where the things that are not really so important – I buried now. And what’s really weird is some of the things we now saw on the first line until one version ago of WordPress were in the second line. It made no sense because those are like the top level important stuff you should use when you format your text.
So, on the second line you have a strike through. Again it might look nice but what you’re actually saying to the browser is this piece of text has been deleted from this document. So, use it if you really want to tell that to the browser and not just because it looks pretty. If you want it to look pretty use a class in CSS.
The horizontal line will a horizontal line. Use it because if you have a long text this will give a breathing moment to your readers that will also be able to visually immediately scan the content and see not only through the text but also through the horizontal line that a new thing is starting there.
We’ll skip this one because there is no reason – no reason for it to be there. People – this colours your text okay, but people that make theme they work hard on their stuff. We think about the colours, we think about the font, we think about the font size and we think we’ll have colours, people who design work title have colours, we’ve created this beautiful palate for you and you go and red – why? Don’t do that if red was not part of your palate and if it was it was already taken care of by the CSS. Don’t do that please, underline justify colour text, no, heading 1, no, hardly hard limits, don’t do them.
Paste as text. This is another one that confuses me, why would you right your text outside of WordPress. I never understand this. You do it in mark down it doesn’t count. It renders perfectly on WordPress if you go and write your post on Google documents, have you ever done that? You do that, yes, okay – helpers, help! Depends if you want to add or want to help.
FROM THE FLOOR: Maybe because I get content from my contributors who work with Word or Google docs and all I need to do is copy that and paste it into WordPress and publish it.
FRANCESCA MARANO: Have you already tried the JETPACK feature?
FROM THE FLOOR: I don’t like JETPACK.
FRANCESCA MARANO: All right, you are still welcome here {laughter} and thank you for saying that out loud because sometimes we’re not feeling comfortable expressing our feelings about this stuff so thank you. No, I’m joking because I run a web-site with 60 contributors and this is like the worse because they get me pieces and I have to add comments and it’s a mess and I didn’t find a good solution for that and so I was excited about the JETPACK feature that I didn’t try yet.
FROM THE FLOOR: {Inaudible}.
FRANCESCA MARANO: Added flow doesn’t do that, unfortunately. Other plugins.
FROM THE FLOOR: What I do if I get text from other people, I use the text option just plain text option copy it in there and add the mark up and stuff in the special editor.
FRANCESCA MARANO: So there are a lot of ways to go about this one. I personally prefer to tell people to write into WordPress because that works for me and we have editorial comments and stuff like that but you can either paste it as a text but then it will strip it out of the formatting, or you can either with the second button paste it however you want then highlight all the text, use that thing – I think it’s a rubber – is it called a rubber? – And clear formatting. This will clear everything except for headings and lists. But it’s a really – this one is really a tough one for collaborative blogs because I don’t think there is a perfect seamless fast way to go about this one.
Special characters. Italian we have a lot accented letters. In English I don’t think so. But you might want to add fractions or you might want to add those special character. I have a terrible memory so instead of going tap, tap, tap on my keyboard and look for the right character I’ll just use the special character button that was so gently provided and lovingly provided for me.
Indentation another controversial topic. I usually like it to do indented list. So if you want to do a list inside a list instead of going messing around with HTML that may be you just heard of it today, just do that. Write the whole list, highlight the 2, 3 whatever items you want to have as sub items, and use the indent character indent button. This one no idea. Never used it. I know what it does – I have used WordPress since 2008 and I don’t think I ever used that.
Does anyone here who’s working on their formatting and they have questions? So you are just letting me go on and on and be excited about formatting but you’re not doing any work? I thought you would be more disciplined than Italians, but yes.
So, all right that brings us to the last one. Lovers of short cuts here. Anyone loves short cuts? How do you remember those? I don’t know. There is a list for you.
FROM THE FLOOR: Common {inaudible} was something like in real life –
FRANCESCA MARANO: Yeah, yeah, no – I think that’s basically the only one I remember. Okay sometimes things go crazy, but now you know HTML – or at least you saw HTML. So things get nested. That’s the most common thing that will happen to you. Things get nested. So instead of taking your computer and throwing it away which would be normally my first instinct, go to the text view and put the relevant opening and closing tags in the right place because now they know what they mean. Well, I hope you know, or at least you have an idea. So nested elements move the closing tag to the right place.
Paragraph versus new line, how many times did that happen to you? You just went on a new line and get a paragraph. Bummer. No. Do shift enter and you’ll have a list. Get me out of this list, like the list nightmare. You press enter and it gives you new item but you don’t want a new item. So press enter twice and you are out of there. Now it is your turn. Go, format. We won’t have time to do this together, so I really hope you had question for these guys because I didn’t know the answer but they did and this is why they’re here, these wonderful people, not guys, sorry Rhian. But if you do want to ask questions, if you do – and I hope you do want to show me what you have been doing with your text, improved, I hope your formatting, work flow, tweet your newly formatted post and questions if you have by using formatted and my Twitter handle is there.
Thank you very much. {Applause}.
SAM: Yes, we don’t have time for questions but we did do a few as we went along so I think we’re all right. If you have any more please get in touch.
Okay so we’ve got a room change now. Feel free to grab a drink, go and see some sponsors in this time as well.
We’ll be back in here at half-past 2 in 20 minutes with Ross Wintle who will be talking about training users to use screen casts. See you then.