Quote:
|
There is not anything in the code that will stand up and tell you that a design is fixed, fluid, or elastic.
|
Your teacher is either lazy or is an idiot, as that's simply not true. I get the feeling he/she just didn't want to answer the question.
The most revealing aspect of site width is the outermost table or div, and whether it's presented as an absolute figure in pixels, or as a percentage (a size that will vary with screen size). A table will have an HTML code that defines
width="xx" where
xx is either a pixel size number ("100") or a percentage ("100%"). There's a big size difference between 100 pixels and 100% of the viewing screen! In CSS, a div will present as a pixel measurement ("100px") or as a percentage ("100%"). This CSS is often found as the main
body div, or as an added
wrapper div.
This site is using a fixed width, at 970 pixels (970px) wide. If you look into the source code and dig around for a while, you'll see the main site uses a 970px div, while the forum uses a 970 defined table width. (The forum's tables are also inside a 970px div, but that's for the benefit of the add-on header/footer, which is based on CSS and needed a master div container. But let's not complicate this topic with my own design hacks!)
Quote:
|
Your observations are supposed to be based on your understanding of the reading and lectures.
|
What a condescending _____.
______
Fixed width is a set size.
The reason I use fixed width on everything is because it's easier to design, and because it guarantees a certain look and feel to the site. A user knows where something is on the page at all times, regardless of is he/she is using a huge monitor, a cell phone screen, or an iPad. The content doesn't move around -- there's no guessing game on the part of the reader.
A size like 970px is also comparable to a book or magazine. Your eyes can scroll across a page, taking in all the words and image -- without bobbing your head left and right! It's an ideal design for readability. This has been backed up by numerous studies into communication readability, though I can't recall the names/groups of any such studies off-hand (you'll have to research that on your own).
Youtube.com has a fixed width.
Fluid width has no structure.
Fluid width was a design preference back in the days when 800x600 was the standard resolution, and 1024x768 was the newfangled technology of the era -- back in the 1990s! As monitors grew wider and larger, with larger resolutions to match, fluid designs quickly fell out of favor.
Certain elements within a fluid design can be fixed, such as a sidebar or navigation menus, but something in-page has to be free of width specifications. In almost all cases, it's the content pane, where text and images reside.
Layout can break --easily! Unless the design is a simplistic one, the relationships between fixed-sized elements (photos, graphics, ads) can clash with the layout of the divs/tables or the textual content. A design is always created from a base size. Consider this example of downsize troubles:
- You design a fluid site on a 800x600 monitor, and find that your 468x60 banner ads and text fit snugly into a main content window. If the page is expanded to 1024x768 or larger, then space is added around your ads, and the text stretches to fit the space. That's all fine and dandy, but what if somebody views it on a phone with less than 800x600 resolution? Now the ad is overlapping or pushing content around, and that mess can vary in how it visually presents itself.
- The more obnoxious website designer is the novice with a big screen. He'll design a site optimized for something nobody really uses -- such as 1600x1200. Now a huge majority of people have to scroll left/right to read the page. However most users are like me! I'll consider the website stupid, the design a moron, and therefore question the reliability of anything that would have been on the site. Stupid once is usually stupid twice. I'm not staying on that site, I'm leaving.
Google.com has a fluid width.
Elastic width is a made-up term, as far as I'm concerned.
The concept behind elastic ads is that size of elements is controlled by an "em" instead of fixed numeric width, be it fixed size or a percentage. The top concern of an elastic designer was to create fonts that could be read at all times, while keeping content relative to the design.
The "em" measurement is a hard-to-understand concept about relational font sizes. The div elements are then often laid out with additional CSS measures, such as min-height and max-height, max-width and min-width, in order to avoid chaos in the design. The em derives its relationship from a defined font size on the user end viewing application, and is therefore an unmeasureable measurement.
Note that "em" does not mean anything. It's not shorthand for "elastic measurement" or "equivalent measurement" or anything of that nature. The em is the pronounced/written word form of the letter "M" by which such measures are based on. The capital M is the letter where an em derives its size. It's similar to the em-dash (and n-dash).
I'd never really heard of "elastic" width, outside of a very small crowd of self-proclaimed design experts. Quite a few standard resources ignore such a concept. The "HTML Dog" is one of these self-proclaimed experts, and it would makes sense that your instructor considers this a widely-accepted term.
The origins of a so-called "elastic" design seem to pre-date the ability for browsers to simply zoom in on content. On a Mac, as you have already mentioned, it's the Apple command key and +/- on the keyboard. In Windows, you press the CTRL key and then scroll with the mouse. However, this is a somewhat new addition to web browsers, starting with IE7 and the Mozilla (Netscape/Firefox) browser of the same era. This concept of "elastic" design was limited to an early era of CSS popularity during the days of IE6. So about 1999-2002.
At this point in time, such designs are honestly foolish and a waste of time. You can just as easily create multiple stylesheets for expected devices: mobile themes vs tablet themes vs desktop/laptop themes vs disabilities (ADA compliant). There's also something to be said for the content expectations that differ between those audiences. A cell phone user is less likely to click a banner ad, for example, so a theme that's generally full of ads won't do much for you. Or be able to see your Flash objects if using an non-jailbraked iOS device.
In some cases, using a large monitor would result in a website with ridiculously huge fonts, when an elastic design was in use.
The W3C "best practices" suggest we use em for fonts, but makes no mention or reference to em values for design. (Therefore it would be safe to assume the opposite -- it's NOT suggested.) Of course, W3C "best practices" are sometimes not based on communication, marketing and branding, but ITisms, so quite a few well-known designers totally ignore it. Many of the dev wireframes I use come with pixel sizes.
Play.com had an elastic design at one point in time, but it looks like it might be fixed now.
I'm not readily aware of any fluid-width sites, simply because it's not a good design practice for many developers.
Apple.com might have an elastic internal design (inside a fixed width div), but I don't have an easy way to verify it.
______
The biggest issue in front of you is that your textbook is ancient by current web standards. A book written 2006 is simply too far out of touch with the content and concepts of 2011. While many of the broader concepts of the web will always apply when discussing web design/content, having origins in print and broadcast media, the details and standards of the era are vastly different. While 2-3 years is stale, 5-6 years is outdated and obsolete. What I would have (or could have) done in 2006 are wholly different in 2011/2012.
Your teacher needs to get a better/newer book.
Then again, this is supposed to just be an intro to HTML and CSS basics. So maybe it suffices?
Does anything I've written here get you set on the right track?
