The TIME Sites Page Editor works a lot like other design software you may have used before. It provides you with a workspace and a set of tools to create web content (HTML) and style its appearance (CSS), using a visual UI and without writing any code.
Web design is very different than other kinds of design. Building a web page is not the same as creating a slide in presentation software, or creating a printed page layout in design program. If you’re new to web design, it’s extremely helpful to familiarize yourself with some of the basic concepts before attempting to design a website in TIME Sites.
Why Web Design Isn’t Like Print Design
Web pages are fluid. Print documents, or slides in presentation software, are of a fixed size. In contrast, web content can change dimensions when users resize the browser, or view them on different devices. When you build a web page, it’s best to think of your layouts as fluid, and create your design using grids and percentage-based layouts (rather than fixed dimensions) that will flex with the browser. You’ll also need to think about whether you want your layout to adjust itself on smaller screen sizes.
Elements in a layout affect one another. Unlike print design tools, you can’t simply drag elements and place them exactly where you want them. (Partly because, as noted above, the canvas is constantly changing size and shape!) By default, elements are positioned relative to one another, so the location and size of one element will affect others that come after it on the page.
Web layouts rely on hierarchy. Elements can be placed inside of each other (“parents” and “children”) to create the structure of a page, and children can inherit the properties of their parents. For example, if you put two text elements inside of a container, their width will be affected by the overall width of that container.
Web pages have interactive elements. Obviously, one of the reasons websites are engaging is because they aren’t static: your design can include interactive components. This might include links that allow your visitors to navigate around, hover states that respond to their mouse, and even animations that are triggered by clicking or scrolling.
You Aren’t Coding, But You Are Creating HTML and CSS!
TIME Sites is a code-free tool, which means that you’ll create the HTML and CSS for your website “behind the scenes” by interacting with a visual UI, instead of writing the code directly. But it’s still very helpful to understand what HTML and CSS are, and their relationship to each other:
HTML is used for content: it tells the browser what’s on the page. This includes everything you see — headings, paragraphs, links, images, and so on. You build a webpage by adding HTML elements to the page.
CSS styles the content — colors, borders, size, positioning, typography, and so on. You make a webpage look the way you want by applying these styles to the HTML elements that you've placed.
The Basics of Placing Page Elements
To create the HTML (the content of the page) in TIME Sites, you simply drag-and-drop elements onto the stage, then drag to rearrange and resize them.
Grab elements from the left toolbar. The left toolbar contains all the basic elements that you’ll use to design your page — grids, containers, text boxes, and so on. Drag them and drop them onto the stage to work with them.
Click and drag to rearrange and resize. Once they’re on the stage, you can use your mouse to move an element to a different location on the page, or option-drag to duplicate it. You can also drag the edges of an element's focus frame to resize it, or to adjust its margin and padding.
Create structure by dropping elements inside of other elements. Hierarchical structure is an important part of web layouts: you can put containers inside grids, text boxes inside containers, and so on. The way you organize the page will determine how it behaves as the browser window changes size. (You can easily keep track of the structure of your page by looking at the breadcrumbs at the bottom of the UI, or by opening the Page Structure Panel.)
Use the Media Library to add media. Every website you create has its own Media Library. This is where you add the videos and images that you want to use in your site. Drag and drop them onto elements to apply them as backgrounds, or as stand-alone media in your page design.
The Basics of Styling Your Page Elements
To create the CSS (to style your page content) in TIME Sites, you’ll interact with the editing panels available in the right toolbar. Each panel lets you customize a different aspect of an element's styling — its color, dimensions, border, and so on.
Use the keyboard to define values for each property. Enter a specific value — the height of an element, for example, or the width of its border. If you want to remove a property from an element, you can delete it from the panel using the delete key on your keyboard.
Styling can be inherited. Styling values that are dark grey have been set for that element. Styling values that are light grey are being inherited from somewhere else — from the website’s global styles, or from a parent element. (Inheritance is an important concept to learn; we'd recommend checking out this article if it's unfamiliar.)
You can define default styles for the whole website. The Global Styles Panel lets you specify how all the various page elements should appear by default. These defaults can always be overridden by applying different styles directly to an element (“inline”.)