Web Foundations

1. Web Foundations Tuesday, October 8, 2013 LECTURE 8: Float, Intro to The Design of Everyday Things

2. Intermediate/Advanced CSS: Float • 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 CSS Tricks: All About Floats W3Schools: Floating

3. Intermediate/Advanced 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. W3Schools: CSS Float

4. Intermediate/Advanced CSS: Float 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. W3Schools: CSS Float

5. Intermediate/Advanced CSS: Float 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. W3Schools: CSS Float

6. Intermediate/Advanced CSS: Float Example Here is a simple example like the magazine reference above and the corresponding markup: img { float:right; margin:10px; } W3Schools: CSS Float

7. Intermediate/Advanced CSS: Float 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. Floatelements 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. W3Schools: CSS Float

8. Intermediate/Advanced CSS: Float 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. W3Schools: CSS Float

9. Intermediate/Advanced CSS: Float 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. W3Schools: CSS Float

10. Intermediate/Advanced CSS: Float Another 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.

11. Intermediate/Advanced CSS: Float In 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.

12. Intermediate/Advanced CSS: Float And 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: CSS .block { width:200px; height:200px; } .float {float: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"></div> <div class="block orange"></div>

13. Intermediate/Advanced CSS: Float And 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 underneathour pink block. So how do we make our green block show up again? Enter the clear property.

14. Intermediate/Advanced CSS: Float 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:leftproperty applied to it. The same concept applies for the right value—the element must sit beneath any element that has the float:rightproperty 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.

15. Intermediate/Advanced CSS: Float 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>

16. Intermediate/Advanced CSS: Float And Another Example using Clear By assigning a clear:leftproperty 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 belowthem (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.

17. Intro to The Design of Everyday Thingsby 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

18. Intro to The Design of Everyday Thingsby Donald A. Norman 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 http://www.baddesigns.com/examples.html Full Table of Contents and Chapter Headings (MSWord Doc)

19. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things 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 http://www.baddesigns.com/examples.html Full Table of Contents and Chapter Headings (MSWord Doc)

20. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things 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. http://www.baddesigns.com/examples.html Full Table of Contents and Chapter Headings (MSWord Doc)

21. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things Examples of poor design - Trapped between doors! - Handles affordpulling - Using a flat plate would constrain user to push http://www.baddesigns.com/examples.html Full Table of Contents and Chapter Headings (MSWord Doc)

22. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things Norman's Principles of Design Make things visible! Provide a good conceptualmodel: – Affordance – Mapping – Constraints – Feedback

23. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things 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”!

24. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things How fast are we going?

25. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things Please Push Slowly! Wonder why doors are made out of glass, or have a window insert? Evidently someone was smacked!

26. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things The Case of the Mistaken Urinal

27. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things Good Conceptual Model • A good conceptual model allows us to predictthe effects of our actions • Without a good model we operate blindly – Simply follow rules without understandinga reason – No understanding of cause or effect – No recourse when something breaks

28. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things 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

29. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things How do you open this drawer?

30. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things 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!

31. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things Mouse or Keyboard?

32. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things What Knob Goes Where?

33. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things Exploiting Natural Mapping

34. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things Constraints • Constraints limit the ways in which something can be used • Constraints can be: • - Physical • - Semantic • - Cultural • - Logical

35. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things On Which Side Does the Door Open?

36. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things 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

37. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things 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

38. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things 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

39. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things 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

40. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things Larson's Dog Effect

41. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things …Same with Software!

42. Intro to The Design of Everyday Thingsby Donald A. Norman Chapter 1: The Psychopathology of Everyday Things 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