Craft Content Nashville 2017

I’m presenting a session at Craft Content Nashville 2017 called Let’s Talk Multimedia this Saturday (April 8) at 3:15 in Design Room 2. The session will  provide an over-view of what designing for multimedia means and what goes into digital content creation. The Twitter hashtag is #CCN17Multimedia. Craft Content Nashville is located at Nossi College of Art.

Whether you are a podcaster, blogger, iBook creator, citizen journalist, or small business owner needing media for your FaceBook or LinkedIN account, the goal is to accomplish a goal. The goal may be to sell, inform, educate, entertain, or get our visitor to sign up for our email list. The best way to engage our audience is to tell a story. How can we work a story into our multimedia? It requires that we have a plan. Come to the session and let’s discuss it.

The Presentation

Here is the presentation I used for the session. It’s a Prezi presentation so it won’t work on mobile. Here is the pdf for download.

Did you like my session. Let’s connect. What are you working on?

Normal Flow

The normal flow of a page is how HTML elements are normally rendered to a page. The browser starts reading (and displaying) content from the top of the page to the bottom. When it encounters  visible HTML elements, there are two primary ways that elements are displayed on a page: block and in-line.

Block Elements

Block elements take up the entire entire width of their container and are stacked vertically on the page; i.e. block elements is start on their own line. Examples of elements that a normally displayed as a block element are: <p>, <div>, <h1-7>, <header>, <footer>, <section>, <table>, etc.

In-line Elements

In-line elements are laid out horizontally on the page. Their width only takes up the horizontal space necessary for the element. Examples of inline elements are: <span>, <em>, <strong>, <a>, <img>, etc.

Modifying the Defaults

CSS allows us to set (modify) the default properties of HTML elements. The position and display properties affect that normal (default) flow of elements on a page; flow meaning how the elements interact with the elements around them. When two div tags are put next to each other, by default they appear vertically on the page. That’s because they are block elements.

When two images are put next to each other, by default they appear side by side on the page. That’s because they are in-line elements.

When we assign a value of absolute or fixed to an element’s position property, the element is taken out of the normal flow. The spacial relationship that  element has with the other elements on the page are changed. It’s almost as if the other elements don’t see it any more. From the other elements point of view, since it isn’t there, they move in to take up that space. It’s like a big rock in a river. The water flows around the rock. Pull the rock out of the river, the water fills in to fill the void left by the absence of the rock. Make an element absolutely positioned, the elements that follow it rush in to fill the void.