Naming Elements & Styles

A best practice when building out your web content on Readz is to name your elements and styles. Here is why and how you would do that.

This video will cover Naming Elements and Styles in Readz. Naming each style and each element may seem tedious but it's really, really helpful in the long run and shouldn't be underestimated. We'll show how to name things, and we'll talk about some best practices for doing this. There are two main things in Readz that we'll really want to name.

First of all, we'll really want to name structural items like boxes and sections. It's important to name these because they'll make up the skeleton of our page and they'll also be holding other elements inside them. The second thing we're gonna want to name are the text styles and the element styles we're using within our page. Naming your styles well is perhaps the single best thing you can do to avoid confusion later on in the process.

Let's go to our sample page and see how this works in practice. So here we are on our sample page.

First, let's show how to see you how things are named and how to rename them. So, if I click on, for example, this box, I can see in this little panel down here that this box is already called the Headline Text Container and I can edit by clicking on the pen here.

The other way I can rename the element is by going into my Element Index, where I can see all of the elements currently on the page and hover over to see their different names. When I click on the Headline Text Container box in the index, it will expand and show me the various elements contained inside it. So, we decided to name our page container or page section, Section with the text on top and the image on the bottom. This is an example of a layout-specific name, not a content-specific name. A content-specific name would be me naming this page, Create Content Easily. The benefit of a layout-specific name is that if I copy and paste this page to use it for a different purpose, this naming will still make sense to me and I will not need to change it. So, naming elements only takes a few seconds but it's really useful.

- First of all, it will help us keep our layers panel organized and clear.

- Secondly, it's gonna give us the ability to understand our Analytics page down to the element level. These analytics can tell you which users saw or clicked on different elements. If you're using detailed and specific names for your elements, you can get detailed and specific analytics about those elements from Readz. Now let's talk about some best practices for naming elements. First of all, it's a lot easier to name your elements as you build them, not afterwards. Secondly, you wanna make your names specific to the layout, not to the content. This is because you might want to reuse this page layout again and the names will still have meaning to you even if the content will be different.

This has the added benefit that if you decide to change any of the content within your elements, you will not need to rename those boxes. Lastly, you're going to want to create naming conventions that can be easily reused and understood. As we'll show later with naming styles, it's a good idea to create some kind of style guide or cheat sheet so that no matter who is working on the project, the names can be clear and understood by everyone. So, back on our sample page, let's talk about text styles. So, this headline has been edited and no longer fits with the style of the page. To get it back to normal, I'm gonna apply a style to the text. To do this, I'll go to my Text Style panel. Here I can see it already has the general body text style applied to it, but I wanna make sure it fits in with this page. And I've already decided this page is called Modern, abbreviated, MOD, to keep all my styles together. So, to find my style in the created styles, I'll type in MOD. This gets all the styles that I'm using for this set of pages. Here I can see my different options. The title with the text blocked, title with the text block centered, body text centered, subtitle, text for buttons, large article headers, these names are descriptive of what's gonna happen to the text before I even apply it, which will save you time when creating your pages. So, I know I want the MOD_title_text_block_centered for this one. So, I'll click it, and it goes back to where it should be. Then I can click on my paragraph and see that it has MOD_text_body_centered applied to it, and the button has MOD_CTA_button_v2. Another useful naming convention is to say version one and version two after to keep clear when you're editing things. Some of the benefits of naming your styles. First off, if you have a set of very well-named and clearly-named styles, applying them to new elements will only take a few seconds. Well-named styles will allow anyone, not just the creator of the page or the graphic designer, to create in the text element that fits in with the style of the page. Well-named styles will also help with consistency and clarity in the building and editing process. Here are some best practices for naming your styles. Firstly, it's a really great idea to think about your naming conventions before you build, and not after. And think about creating a style guide so that everyone working on the page is clear on which styles will be called what. Secondly, you're gonna wanna give names that indicate what the style is used for and what is different about it.

So, think about the layout of your page, and then decide which types of elements will need what signifiers. And lastly, after you've created your styles and they're in use on your page, you can create a mini-guide that will show where the styles are being used in the content. If multiple people are going to be editing in Readz, it's a great idea to document the styles that you chose for the whole team with a tool like Skitch. Here is an example of what your style's cheat sheets could look like, a simple name of the style next to the element that it's supposed to be applied to. Naming your elements specifically and creating these style guides may seem time-consuming, but it's one of the best things you can do to ensure clarity and efficiency later on.