More Notes Layout

Floats

the CSS float property is used to allow elements to “float”

this lets us do things like make multiple-column layouts where the columns appear side-by-side

or text wraps around images

for example, consider this HTML:

<img src="images/spud.gif" width="10%" height="10%" alt="a potato">

<p>The CSS <code>float</code> property can be used to make text wrap around an image. For instance, this text is in a <code>p</code> element. The potato image is in an <code>img</code> element that is above this paragraph. </p>

this CSS makes the image appear on the left with the text the follows wrapping around on the right side of it:

img {
    float: left;  /* use right to make the image appear on the right side */
}

floats are a common way to make multi-column layouts

there are a number of details and subtleties about floats that you can learn more about here

Positioning

the position property of an element can be used to set its position

by default, an element’s position has the value static

a static element does not have any special positioning properties, and is placed according to the ordinary default layout flow rules

a relative element can have its position set relative to its normal position, e.g.:

<p>Relative positioning is a technique that lets you change the position of
an element relative to its normal position. For instance, if you need to
make small adjusts to the location of an image or box on a page, then
changing its relative position might be a way to do it.</p>

<p class="postit">This is a <code>p</code> element that is relatively
positioned, and meant to look like a Post-It note.</p>

here is some CSS that uses relative positioning to move the postit paragraph:

p.postit {
    position: relative;
    width: 10em;
    top: -1em;
    left: 4em;
    background-color: yellow;
    border: 1px orange solid;
    padding: 0.2em;
}

Flexbox

flexbox layouts are an alternative to float layouts that is useful in some situations

we won’t go into details here, but the general idea is that a flexbox layout allows boxes within it to expand to whatever size is available

there are many examples and resources of flexbox on the web, e.g. https://css- tricks.com/snippets/css/a-guide-to-flexbox/

Design Advice: C.R.A.P Rules of Thumb

the C.R.A.P. rules are generally good rules of thumb to follow for designing nice-looking pages

a good designer considers all of these things, and more, when making a web page

it takes experience and knowledge to judge what principle ought to take priority when there is a choice

  • Contrast: make distinct elements stand out by choosing visuals that are different
    • e.g. contrasting colors, such as black/white, yellow/black, red/white, etc.
    • e.g. contrasting shapes, such as circles/rectangles, or curved lines vs. straight lines
    • e.g. big/small, serif/sans-serif
  • Repetition: repeat design element to give a consistent look
    • e.g. use the same font family for all headers
    • e.g. use the same kinds of bullet points for all lists
    • e.g. use the same colors and spacing
  • Alignment: all items should be positioned in a thoughtful way, ideally connected somehow to the position of other elements
    • e.g. often good to align along the left/right edge of a group elements
    • e.g. items can also be aligned by their, but often at the cost of unaligned “ragged” left/right edges
  • Proximity: related elements should be close together; unrelated elements should not be so close

this article has some good discussion and nice examples of each of these principles

Other Website Design Rules of Thumb

  • avoid automatic animation, sounds, pop-ups
    • animation and video can be fun, but many users find it a annoying distraction
    • pops-ups, i.e. boxes that suddenly pop up on a page asking the user to do something like login or subscribe, are considered extremely annoying, even deceptinve, by most users — to the point that some might never return to your site!
  • be careful with color
    • too many unrelated colors can be a distraction and look awful
    • try to choose a small selection of colors that complement each other
    • some users are color-blind, so be careful using just color as a visual cue
  • be careful with fonts
    • always have a clear, simple reason for why you are using any font
    • too many fonts can make a page look cluttered and confused
  • make your web page easy to find through search engines
    • use clear, direct text in your page to say what it is about: think about what keywords users of your site would likely use to try to search for it
    • search engines generally can’t understand pictures (although they are getting better!)
  • web pages are viewed on many different kinds of devices
    • many users use cell phones with small screens (that are often high pixel density)
    • some users use a mouse to navigate pages
    • some users use touch interfaces, which generally need more whitespace and bigger “touch targets” as compared to a mouse
    • vision-impaired users often use “screen readers” to read a page, and screen readers read text
  • avoid scrolling, especially horizontally
    • scrolling is often an unpleasant and annoying interaction
  • minimize the number of “clicks” the user needs to do to get the info they want
    • make the most frequently sought after information the easiest to get
    • always keep your audience in mind: design your website to be useful for the people you think will most likely be using it
  • make important things bigger, less important things smaller
    • of course, this not always true, but this simple rule can be a surprisingly effective heuristic