Intro to web layout

Get introduced to some basic concepts & best practices to create responsive layouts for the web with Readz.
This video is going to be an introduction to the design studio in Readz. When you're creating content for the web with Readz, you can make changes to your content visually by pointing, clicking, and dragging. This is opposed to having to dive into HTML and CSS, code a theme for your website, and then having to find and edit the code to match the visuals that you're looking for. Instead of using HTML and CSS, with Reeds, we'll drag and drop our actual content within the editor very similarly to how you'd create a presentation. In this video, we'll cover five basics of the Readz Design Studio, and these are:
  • selecting your elements,
  • moving elements,
  • the hierarchy of your elements,
  • wysiwyg or what you see is what you get, and lastly,
  • the variants, meaning the layouts for desktop mobile and tablet.

As mentioned before, creating and editing in Readz happens in a visual way. You can see this when I mouse around the page. Small data gray outlines appear around each element as I hover over it. To select an element, I'll merely hover over it and click anywhere within that box. When we select an element, more specific information about that element pops up on the page. For example, little squares in the corner of the outlines of the box and these will allow me to resize the element as desired. On to moving elements. It's as simple as clicking on the desired element, holding down, and dragging it around to where you'd like to place it.

While we're dragging around the element, we can see that new information is popping up. First of all, we see that another element on the page, not the selected element, has a large black outline around it. This outline signifies that the element is the parent element of the element that we're moving.

The other thing that appears as we're moving around an element are guides. These orange lines and outlines let us know how the element that we're moving around is centered relating to the elements around it. Now let's go to hierarchy. When we talk about hierarchy in Readz, we're normally referring to elements that are holding other elements.

For example, this box here, is holding three smaller text items. We will call the larger box the parent element, and the parent element is holding three smaller child elements. Because these elements have a parent-child relationship, when I move the parent box around, all of the three children elements will move with it remaining the same.

On really complex pages, hierarchy can get confusing. You can always see a nice layout of the hierarchy in your element index. The element index will list every element on the page and its relation to one another. Here we can see that the large box called text is contained within the section of the page, and within the box of text is contained our three small children elements. Moving on. The visual editor in Readz tries to show you the content as it will displayed in the web browser. So it really is what you see is what you get. It's also a reason why we try to keep the controls in the UI to a minimal so that you can see an actual sized model of your website while you're editing. This way you can see exactly how it's going to act and react in the real browser. Lastly, an important component of the Readz Design Studio is the ability to change your layouts for both desktop, tablet, and mobile.

Therefore, there is a dedicated view for each one of these devices in the editor and we can toggle between them up here in this toolbar. Let's say for example I want to see how this page looks on the mobile format. By clicking to mobile here, I'll get more of an idea of how it will look on a phone. For example, if I want to move the Learn More button over to the right on mobile, this is a layout change so it won't affect how my page looks on desktop, and if we go back we can see that the layout was unchanged. And there we have it. Creating content with Readz is as easy as that. We learned how to select and move elements, how elements relate to one another in terms of hierarchy, and how content is displayed on the editor in desktop, tablet, and mobile formats.