Quantcast Help in how to identify a website as fixed, fluid, or elastic in design - digitalFAQ Forum
Go Back    Forum > Digital Publishing / Web Sites > Website and Server Troubleshooting

Reply
 
LinkBack Thread Tools
  #1  
10-07-2011, 05:36 AM
Sossity Sossity is offline
Premium Member
 
Join Date: Nov 2007
Posts: 434
Thanked 5 Times in 5 Posts
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:
There is not anything in the code that will stand up and tell you that a design is fixed, fluid, or elastic. You need to look at how the site interacts with you as you expand and contract the browser window. Your observations are supposed to be based on your understanding of the reading and lectures. Be sure to read this article (below), as it will help you understand the differences better; http://coding.smashingmagazine.com/2...t-one-for-you/
Does she mean that I will see when I hit command & either the + or - sign on my keyboard to make the font bigger or smaller?

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.
Reply With Quote
Someday, 12:01 PM
admin's Avatar
Ads / Sponsors
 
Join Date: ∞
Posts: 42
Thanks: ∞
Thanked 42 Times in 42 Posts
  #2  
10-07-2011, 09:38 AM
kpmedia's Avatar
kpmedia kpmedia is offline
Site Staff | Web Hosting, Photo
 
Join Date: Feb 2004
Posts: 4,295
Thanked 357 Times in 333 Posts
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?

- Did my advice help you? Then become a Premium Member and support this site.
- Please Like Us on Facebook | Follow Us on Twitter

- Need a good web host? Ask me for help! Get the shared, VPS, semi-dedicated, cloud, or reseller you need.
Reply With Quote
  #3  
10-08-2011, 02:53 AM
Sossity Sossity is offline
Premium Member
 
Join Date: Nov 2007
Posts: 434
Thanked 5 Times in 5 Posts
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?
Reply With Quote
  #4  
10-09-2011, 05:40 PM
lordsmurf's Avatar
lordsmurf lordsmurf is offline
Site Staff | Video
 
Join Date: Dec 2002
Posts: 9,640
Thanked 1,635 Times in 1,419 Posts
Quote:
Originally Posted by Sossity View Post
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?
You're thinking too linear. Forget about whether a site has a bar (like Google now does), or if it has x amount of columns. View your browser non-fullscreen, and then drag it around thinner and wider. If the content does not move, it's fixed, if it moves with your expansion/contraction of the window, then it's either fluid or elastic. Fluid is simply moving with the size of the window. Elastic is something you really can't see without viewing it from multiple devices (iPad, phones, another resolution monitor, etc). You may be able to fake it with the browser zoom. I can see Apple.com's internal pages zoom unevenly, which is why it's been suggested as being an elastic design instead of a fixed one. It's elastic within a fixed area, with only fonts changing by the default em.

Quote:
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?
Forget about headers and columns -- it's not about that. Look past the layout's sub-content, and focus on the entire layout as it looks in a window. (For elastic, you'll need to examine fonts closely.)

- Did my advice help you? Then become a Premium Member and support this site.
- Find television shows, cartoons, DVDs and Blu-ray releases at the TVPast forums.
Reply With Quote
Reply




Similar Threads
Thread Thread Starter Forum Replies Last Post
Any advice on which class to take first? Web design or Flash CS5? Sossity Website and Server Troubleshooting 6 09-06-2011 03:39 AM
Invalid Application error - Facebook Like/Recommend button stops showing [FIXED] kpmedia Website and Server Troubleshooting 0 03-15-2011 10:44 PM
cPanel 'switch accounts' menu disappears, refreshes to client panel [FIXED] kpmedia cPanel 0 02-13-2011 07:52 PM
VBulletin 3.8.4 emails not sending on SiteGround [FIXED] admin Website and Server Troubleshooting 0 01-28-2010 03:02 AM

Thread Tools



 
All times are GMT -5. The time now is 02:41 AM