Divs, Floats & HTML5

tomatogilamonsterInternet and Web Development

Jun 24, 2012 (5 years and 1 month ago)

345 views

Divs, Floats & HTML5

Dr. William James Buchholz

Professor and Chairman Emeritus

Information Design and Corporate Communication

Bentley University

175 Forest Street

Waltham, MA 02452
-
4705

wbuchholz@bentley.edu

781
-
891
-
2216


The complete PowerPoint presentation is available as a Web slideshow at

https:/
/skydrive.live.com/view.aspx/Divs%5EJ%20Floats%5EJ%20and%20HTML5/Divs%5EJ%20Floats%5
EJ%20and%20HTML5.pptx?cid=b8e90540bd070874&sc=documents



Slide 1

Divs
, Floats & HTML5:
Key to Design Control
Dr.
William Buchholz
Professor and Chair Emeritus
Information Design and Corporate Communication
Bentley University
Waltham, MA 02452
-
4705

Divs, Floats & HTML5

Copyright
©

2011 William Buchholz

All rights reserved


Contact: Dr. William Buchholz,

Professor and Chair Emeritus

Information Design and Corporate
Communication

Bentley University

Waltham, MA 02452
-
4705

wbuchholz@bentley.edu




Slide 2

Web Design
2
Design with HTML and CSS

Design symmetry

symmetrical

bisymmetrical

asymmetrical

Design and eye movement


HTML divs, CSS floats, and the new
HTML5 tags such as header, nav, article, section,
aside, and footer in conjunction with CSS styling
and position rules, allow Web designers to
control the presentation of a site. This
presentation focuses on a few fundamental
principles of design symmetry
and eye
movement, to help inform the Web designer in
making the best choices in designing a page and
a site.



Divs, Floats, and HTML5


Page
2

of
6

Divs, Floats, and HTML5

William J. Buchholz

August 23, 2011

Slide 3

Web Design
3
Symmetrical Design

Inverted Pyramid

Pyramid


Symmetrical design can be conveniently
divided into two structures: the pyramid and the
inverted
pyramid (see next slid
es).

Slide 4

Web Design
4
Inverted Pyramid
Weight at top


Text and images (all design elements) are
placed uppermost on the page. As the viewer’s
eye moves toward page
-
bottom, or as the viewer
scrolls to the next screen, information is placed
on

the page in a manner that forces it toward the
middle, equidistant from the left and right
margins.


This pattern is used somewhat generally
in designing a page; that is, you probably will find
only a few web pages structured in a

perfectly
pyramidal stru
cture.


Slide 5

Web Design
5
Pyramid
Weight at bottom


In the pyramid structure, the visual
weight tends downward and outward from the
top. Verbal and graphic elements are placed low
on the page; in some instances, the viewer may
have to scroll to the next scre
en to see the entire
pyramid structure.


Like the inverted pyramid, this pattern is
used somewhat generally in designing a page;
that is, you probably will find only a few web
pages structured in a perfectly pyramidal
structure. More likely you will find r
ough
approximations of the pyramid.

Divs, Floats, and HTML5


Page
3

of
6

Divs, Floats, and HTML5

William J. Buchholz

August 23, 2011

Slide 6

Web Design
6
Bisymmetrical Design


Ideally, in bisymmetrical design you
achieve balance between major entities on the
page. As in this slide, the best example of
bisymmetrical balance splits a page in two
(vertically or horizontally), distributing weight
evenly among the elements on both sides of the
gutter (split).


Again, in using bisymmetry, designers
rarely strive to achieve a perfect balance, except
in technical pieces where information design
directly

affects meaning (especially in setting up
hierarchies of information).

Slide 7

Web Design
7
Asymmetrical Design

Balance of

space and color

graphics and text

light text and heavy text

Flexible

Logical

Less predictable than symmetrical
design


Contrary to what you might think,
asymmetrical design does not mean that a page
is chaotic. Page elements are ordered according
to an intrin
sic design pattern that flows naturally
from the elements and their visual relationships
on the page. Even in asymmetry, you try to
achieve balance through effective use of space,
color, graphics, and text.


One of the hallmarks of asymmetrical
design is i
ts superior flexibility and
unpredictability. Asymmetrical designs generally
tend to be a little more interesting, if not exciting,
because viewers cannot be exactly sure what
they will encounter as they move from page to
page. It is important to understan
d, however,
that asymmetrical design does follow a logic that
arises organically
from the materials on the page.

Slide 8

Web Design
8

Can you see
how space and
color achieve
balance?

What roles do
graphics, light
text, and heavy
text play?
Asymmetry


Divs, Floats, and HTML5


Page
4

of
6

Divs, Floats, and HTML5

William J. Buchholz

August 23, 2011

Slide 9

Web Design
9
Design & Eye Movement

Optical center

Initial fixation

Clockwise direction

Horizontal preference

Left preferred to right

Top preferred to bottom

Communication quadrants


The remainder of this presentation looks
at design and eye movement, focusing on



Optical center



Initial fixation



Clockwise direction



Horizontal preference



Left preferred to right



Top preferred to bottom



Communication quadrants




Slide 10

Web Design
10
Optical Center
40%
60%


In most western cultures, the optical
center is slightly higher than the screen’s physical
center



higher by about 10%. Thus, as you view
the screen, all elements of the page being about
equal, your eye naturally floats sl
ightly above the
midpoint and comfortably rests about where the
dot is in the screen above. Your eye, however,
may well be attracted to a dominant image,
graphic, or text box, thus, page design will affect
the degree of magnetism of the optical center.



Slide 11

Web Design
11
Initial Fixation:
Left & Upward
1
2


Starting at the optical center (position 1),
your eye quite naturally moves to the upper left
(position 2). This movement takes place in a
millisecond


so quickly that you are not even
conscious of the movement. Again, this
movement is common in most western cultures
but does not necessarily pertain to all. Also
affecting the initial fixation and consequent
movement is the content of the page. A graphic
element, animations, and the like may initially
attract and guide the eye despite location.



Divs, Floats, and HTML5


Page
5

of
6

Divs, Floats, and HTML5

William J. Buchholz

August 23, 2011

Slide 12

Web Design
12
Clockwise Direction
1
2
3


From position 2, one may quite naturally
move to position 3. You now probably note that
this rightward eye movement has

been trained
through reading. In cultures that read from right
to left, this “natural” left to right movement
would not pertain. In short, our reading habits
and processes determine ou
r “natural” eye
movement paths.

Slide 13

Web Design
13
Horizontal Preference
1
2
3


Because of our reading habits, the eye
tends to prefer the horizontal movement from
position 2 to position 3. Thus, in reading text,
when the eye hits the right margin (line’s end), it
will quickly move to the left and drop one line
(not necessarily in

that order).


Theoretically the process then repeats
line by line until all the material is covered. I say
“theoretically” because the reader may not be so
mechanically disciplined as to move rigidly line by
line. Many readers skip over material in their

reading. We all have different reading habits,
determined by usage, attention level, focus,
fatigue, motivation, and the like.



Slide 14

Web Design
14
Left Preferred to Right
1
2
3
4


People who have been conditioned to
read left to right, top to bottom, have a natural
tendency to regard the left side of the page as
the “home” or starting point. In scanning a page,
such readers will inevitably favor the right side, as
they have learned

from experience that key
information is often provided there. Witness your
own experience with the web, including these
slides, where the menu (means of control) is on
your left. Interestingly enough, in a right
-
handed
world, the left hand offers con
trol
over selection
on the web.

Divs, Floats, and HTML5


Page
6

of
6

Divs, Floats, and HTML5

William J. Buchholz

August 23, 2011

Slide 15

Web Design
15
Top Preferred to Bottom
1
2
3
4
5


You probably have also noticed on the
web that navigational devices, while they often
appear on the bottom of the screen, usually exist
at the top, especially on entry or start pages. It

is
safe to say that top and left are the strongest
positions for visually important information such
as menus or navigational bars. You put such
important information at the right and bottom
only if you can justify their need in these
positions.



Slide
16

Web Design
16
Eye Movement Tendencies
1
2
3
4
5


Here is the overview sketch of the
theoretical 5
-
point eye movement. This
movement often takes place within a second,
particularly within the first second or two of a
viewers’ initial contact with a page.


The exit poin
t (5) offers another location
for you to park important navigational
information (such as “next,” a right
-
pointing
arrow, or a series of numbers indicating a path
through a sequence). You often see designers
place the site or company logo in the lower righ
t
corner as well. Because the lower right portion of
the page is the last visited (the last seen),
information contained therein conforms to the
law of recency. Simply put: what is last
encountered (most recently viewed) has a very
strong likeliho
od of bei
ng remembered longest.


Slide 17

Web Design
17
Communication Quadrants
1
2
3
4
Greatest
Least


The computer screen can be split into
quadrants of influence
. The upper left quadrant
(1) generally has the greatest potential for
influence; the lower right (4), generally the least.
Of
course, the information you put in these
quadrants will affect the strength or weakness of
the quadrant’s allure. A sharp graphic or a submit
button on a form, if occupying the 4
th

quadrant,
may have a strong pull. The strength comes from
the content or operational value, however, rather
than th
e design position on the screen.