web foundations tuesday, october 8, 2013 lecture 8: float, intro to the design of everyday things

Web FoundationsTUESDAY, OCTOBER 8, 2013

LECTURE 8: FLOAT, INTRO TO THE DESIGN OF EVERYDAY THINGS

Intermediate/Advanced CSS: Float

CSS Tricks: All About Floats W3Schools: Floating

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts.

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected.

There are two float properties:

• float• clear

http://css-tricks.com/all-about-floats/

http://www.w3schools.com/css/css_float.asp


W3Schools: CSS Float

The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don’t fully understand how it works.

In the past, it’s been linked to some pretty nasty browser bugs so it’s normal to get nervous about using the float property in your CSS rule sets. Let’s calm those nerves and ease that frustration. I’ll show you exactly what the float property does to your elements and how incredibly useful it can be once you master it.

http://www.w3schools.com/cssref/pr_class_float.asp



We see floats in the print world every time we pick up a magazine article with an image on the left or right with text flowing nicely around it. In the world of HTML/CSS, text will wrap around an image with the float property applied to it, much like in a magazine layout. Images are just one of the many use cases for the float property: we can also achieve the popular two-column layout using floats. In fact, you can float just about any element in your HTML. By learning and understanding float property basics, along with position property basics, you will be able to achieve any layout with confidence.




The Definition

Let’s start with the definition of a float. According to the W3C:

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the “clear” property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

The float property has four values that we can apply to it: left, right, inherit, and none. Each value is pretty self explanatory.

For example, if you assign float: left to an element, it will move to the left-most boundary of its parent element. The same idea applies if you were to assign float: right; to an element. That element would be sent off to the right-most boundary of its parent element. The inherit value tells an element to inherit the float value of its parent element. The value none is the default value and tells an element not to float at all.


http://www.w3.org/TR/CSS2/visuren.html#floats



Example

Here is a simple example like the magazine reference above and the corresponding markup:

img { float:right;margin:10px;

}




How Floats Behave

Nothing too complex, but still pretty cool right? Child’s play you say. Ok, well before we get into the part where floats usher in a world of bacon-loving unicorns, let’s back up for a second to talk about what’s actually happening here. In the web world, our HTML is bound by some rules, in particular, the normal flow.

In the normal flow, each block element (div, p, h1, etc.) stacks on top of each other vertically, from the top of the viewport down. Float elements are first laid out according to the normal flow, then taken out of the normal flow and sent as far to the right or left (depending on which value is applied) of the parent element. In other words, they go from stacking on top of each other to sitting next to each other, given that there is enough room in the parent element for each floated element to sit. This behavior is crucial to remember as you build your websites.


http://www.w3.org/TR/CSS21/visuren.html#normal-flow



Another Example

In this example there are three blocks without the float property applied

.block {

width:200px;

height:200px;}

Notice how they stack on top of each other? This is the basic concept of normal flow.




Another Example

Here is the same example again, but this time the blocks are all floated in Example C:

.block { float:left; width:200px; height:200px;}

Now the blocks are sitting side by side. Great, we’ve got that figured out. But what about that part where I said “given there is enough room in the parent element for each floated element to sit?” I thought you’d never ask.


Intermediate/Advanced CSS: FloatAnother Example

Let’s take our last example and increase the box count five fold. The parent element in this example is the body of our document. Notice that depending on the size of your browser window (and subsequently the parent element body), the blocks drop to a second row, because there is not enough room for all of them to sit side by side. As you resize your browser window to allow more room, you’ll see the blocks rearrange themselves.

Intermediate/Advanced CSS: FloatIn the Clear

The float property has a partner property called clear.

The two complement each other in a way that should make you a happy coder.

As you may recall, a floated element is first laid out according to the normal flow, then removed from the normal flow. This means that every element that follows a floated element will behave contrary to what you expect.

This is where I suspect we might start to get into trouble. Let’s look at a quick example with our blocks again.

Intermediate/Advanced CSS: FloatAnd Another Example

Let’s look at a quick example with our blocks again. In this example I am going to float two blocks (pink and blue) and directly after those, not float two more blocks (green and orange). Here is the CSS and HTML for this example:

HTML<div class="block pink float"></div><div class="block blue float"></div><div class="block green"></div><div class="block orange"></div>

CSS.block {

width:200px;height:200px;

}.float {float:left; }.pink {background:#ee3e64; }.blue {background:#44accf; }.green {background:#b7d84b; }.orange {background:#E2A741; }

Intermediate/Advanced CSS: FloatAnd Another Example

How do you like that green block? Oh wait, where is it?

It’s there, right underneath the pink block.

The pink and blue blocks are both floated and behaving as we would expect, sitting side by side. Since they’re removed from the normal flow however, the green and orange blocks act as if they’re not even there.

That is why our green block is hidden underneath our pink block. So how do we make our green block show up again? Enter the clear property.


The Clear Property

The clear property has five values available: left, right, both, inherit, and none.

Assigning a value of left says the top edge of this element must sit below any element that has the float:left property applied to it. The same concept applies for the right value—the element must sit beneath any element that has the float:right property applied to it.

Using the both value tells our element that its top edge must sit below any element floated either left or right. The inherit value takes on the clear property from its parent element, while the default value none behaves as you would expect.

Arming ourselves with this knowledge, let’s look at another example. This time we’ll clear our two floats by applying the clear property to our green block.


An Example Using Clear

The slightly modified code of the previous example now looks like this:

CSS.block {

width:200px;height:200px;

}.float {float:left; }.clear {clear:left;}.pink {background:#ee3e64; }.blue {background:#44accf; }.green {background:#b7d84b; }.orange {background:#E2A741; }

HTML<div class="block pink float"></div><div class="block blue float"></div><div class="block green clear"></div><div class="block orange"></div>

Intermediate/Advanced CSS: FloatAnd Another Example using Clear

By assigning a clear:left property value to our green block, we’ve told it to act as if the pink/blue blocks are in the normal flow of our document, even though being floats they've been removed, and to sit below them (specifically, the first green block).

This is an immensely powerful property; as you can see, it helps bring our non-floated elements back into the normal flow, a behavior that we tend to expect by default.

That said, knowing and understanding both the float and clear property really starts to open some creative doors when you write your HTML and CSS.

WE WILL CONTINUE TO LOOK AT USING FLOATS AND HOW THEY MIGHT BE APPLIED TO HTML5 LAYOUTS IN TOMORROW'S LECTURE.

Intro to The Design of Everyday Things by Donald A. Norman

Don Norman is an academic in the field of cognitive science, design and usability engineering and a co-founder and consultant with the Nielsen Norman Group. He was a professor at UCSD, and has worked for Apple and Hewlett-Packard. He is currently a co-Director of the Segal Design Institute.

Full Table of Contents and Chapter Headings (MSWord Doc) Don Norman's Website: www.jnd.org

http://www.jnd.org/


Full Table of Contents and Chapter Headings (MSWord Doc)

http://www.baddesigns.com/examples.html

Chapter 1: The Psychopathology of Everyday Things

We are surrounded by many everyday things that have poor usability:

- Doors- Light switches- Telephones- Microwaves- DVRs- Photocopiers and Fax Machines- Wrist Watches

Many of these things can be difficult to interpret and frustrating to use if they provide no clues or false clues as to how they operate






Why is usability important?

poor usability results in:

– anger and frustration

– decreased productivity in the workplace

– higher error rates

– physical and emotional injury

– equipment damage

– loss of customer loyalty

– costs money






What is usability?

Usability is a measure of the effectiveness, efficiency and satisfaction with which specified users can achieve specified goals in a particular environment.



Full Table of Contents and Chapter Headings (MSWord Doc)http://www.baddesigns.com/examples.html


Examples of poor design

- Trapped between doors!

- Handles afford pulling

- Using a flat plate would constrain user to push




Norman's Principles of Design

Make things visible!

Provide a good conceptual model:

– Affordance

– Mapping

– Constraints

– Feedback



Visibility

• The correct parts must be visible and they must convey the correct message

• Natural signals are naturally interpreted

• Visibility problems occur when clues are lacking or exist in excess

• Just by looking the user should know

– State of the system

– Possible actions

• Don’t violate these principles to make something “look good”!



How fast are we going?



Please Push Slowly!

Wonder why doors are made out of glass, or have a window insert?

Evidently someone was smacked!



The Case of the Mistaken Urinal



Good Conceptual Model

• A good conceptual model allows us to predict the effects of our actions

• Without a good model we operate blindly

– Simply follow rules without understanding a reason

– No understanding of cause or effect

– No recourse when something breaks



Affordances

“…the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used”

The affordances of an object determine, naturally, how it can be used

– Button affords pushing

– Handle affords grasping

– Chair affords sitting

– Knob affords turning

Just by looking at the object, a user should know how to use it

– Example: The doors with handles to push, mop sink



How do you open this drawer?



Mapping

Controls and displays should exploit natural mapping

• Natural mapping takes advantage of physical analogies and cultural standards

– Physical: Steering wheel

– Cultural: red means stop, green means go, yellow means go real fast!



Mouse or Keyboard?



What Knob Goes Where?



Exploiting Natural Mapping



Constraints

Constraints limit the ways in which something can be used

Constraints can be:

- Physical

- Semantic

- Cultural

- Logical



On Which Side Does the Door Open?



Feedback

Feedback is sending back to the user information about what action has actually been done

Visibility of the effects of the operation tell you if something worked correctly

Systems should be designed to provide adequate feedback to the users to ensure they know what to do next in their tasks



Feedback Examples

Telephone button press tones, or telephone clicks

Rice cooker goes "ding!"

Clicker on your car's turn signal

Automated icon waiting for a web page to load, or fingertip icon over a clickable area



Norman's Principles in Software or Web Design

Visibility

– Visibility of the tasks the interface supports

– Communication of system state / mode

Affordance

– If it looks like a button it can be pressed, if it is a underlined it can be clicked (web)

Mapping

– Clicking on a particular interface element produces expected effect



Norman's Principles in Software or Web Design

Constraints

– Constraining search criteria, graying out menu items that don’t apply in a particular context

Feedback

– Providing clear and immediate feedback for each user action



Larson's Dog Effect



…Same with Software!



Summary

Usability problems are common

If there are usability problems in everyday "simple" things, the challenge is a hundred-fold for complex software or web applications

Usability problems can be overcome through attention to design and addressing studies from HCI (Human Computer Interaction) wiki

http://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction

web foundations tuesday, october 8, 2013 lecture 8: float, intro to the design of everyday things

Documents

float value

floatingwith css float

css floatthe float property

floated element

float property basics

float properties

parent element

floating element