Help in how to identify a website as fixed, fluid, or elastic in design
I am learning about fixed, fluid & elastic website layouts this week.
& I am to post in a discussion board about it, or writeup in my own words these definitions. I am also to provide examples with links to websites I find are fixed, fluid, & elastic. This is the part I am having a little trouble understanding, I asked on a discussion board in my MAT 125 Web design class about how to identify what type a website is, of whether there was something in the code or viewing the source page/code of a given website would tell me, & the instructor's response was; Quote:
I am a little lost, I understand the definitions & differences when it is written on the website. The thing is, is I am looking at different sites on my 20 in apple cinema display, & I cannot compare to say a smaller resolution 600 x 800 screen because I dont have one, all I am viewing these sites on is my bigger monitor. what am I missing here? I have started on my write up, & have to have this done by this Sunday Oct 9th 2011 at midnight. |
Quote:
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:
______ 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:
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? |
Yes, thank you, this all helps a little bit, so if a website has a bar across the top, or a wide strip/column down the middle with all the content in it, is it likely to be fixed?
with your example of Google, I notice there is no bar or header or column with everything in it, it is just in the middle of a white page, so sites like these will likely be fluid? |
Quote:
Quote:
|
Site design, images and content © 2002-2024 The Digital FAQ, www.digitalFAQ.com
Forum Software by vBulletin · Copyright © 2024 Jelsoft Enterprises Ltd.