Web Development

Ask something
Discussion Locked

Web Design Format Suggestions

0 helpful
47 replies

by khunter 1 view

Closed to new repliesThis discussion is closed. It stays readable, but it takes no new replies.

Hi all,
I'm back with some new (for me) questions.

Design Description:
On paper, my design is 2 rows, 3 columns with the center column on the bottom row as the 'main' viewing page (largest of the six areas). The top row (banner) will be three photos that will link to different pages (on the 'main').
The left and right column on the bottom row are for navigation buttons and will be static (also displaying on the 'main' area).
I've been working on a template using frames so that the only dynamic area is at the bottom center ('main') frame. So far that is the only page until I figure out the best procedure.

The Question(s):
What would be the best and/or easiest design fomat? I've heard tables (from non-professionals) and read that frames would work best (for what I want).
Any other suggestions (other than hiring a professional designer)?

The Design Environment:
Currently using Dreamweaver Studio 2004 on a Wintel PC. The site will reside on a hosted Linux server.
I attempted to use Fusion 8, but it seemed restrictive when it came to tweaking the HTML and laying out the basic design structure.

TIA for any and all help.
Keith

47 replies

by faradhi

I don't like frames at all. The reason is that if you are loading a page with three frame, then you are actually loading four pages. One for each frame and the page that defines the frame layout.

I prefer to use tables. I find that tables load quicker than frames, are easier to code, and have better cross compatibility between browsers.

Also, Please Please please code your web page to work on multiple browsers.

by khunter

Is that the case even when only frame 5 is the dynamic (after the main site is loaded)?
frame areas: 1 2 3
4 5 6
I've been doing a little searching around and it looks like CSS may be a posibility, but I'm open to input from one and all.

PS, site will be tested on every browser I can get my hands on before I upload it.

by master3bs

There has been a move away from frames in recent years. Now whatever method you use, it has to be well designed. But I find a well thought out webpage with a table of contents frame to be one of the most effecient designs.

You only load up the index once.

by deadly ernest

I am in a rural area with dial up as the only economical option (sat is too expensive) and can get 37.2 kbps on a very good day (usually around 28.8 kbps), and trying to access web pages with several megabytes of fancy java and images is a bastard. I especially hate it when the site I HAVE to go to has a set of java scripts that load a fancy banner and a fancy menu on every bloody page because the posterior puncture that wrote the code was either too lazy or too stupid to set it up in frames to only download those few MBs only once. I particularly hate it when you look at the code and see a script that then calls several other scripts - seems they have trouble writting big sections of code properly - and it is the same code on every bloody page. Very inefficient.

by tony hopkinson

you can have a go at organising/modularising your code instead of wodging it all one file and then giving it good stir, which seems to be a standard when I look at some efforts out there.

by khunter

Is CSS visible across various browsers?
(It's been 6 yrs since I did any basic web design)

by noyoki

Insofar as Firefox and IE is concerned. Safari/Opera users may want to correct me here, I am pretty sure CSS works just as well for them too.

I also think CSS is probably by far the easiest to code. Plant the tables in a

and you've got the layout for the page and every page following (provided you include that specific
), change 1 color in the
and you've changed the colour for every page it is used on... instead of changing it manually for each page.

by osumiller

CSS will not work in older versions of browsers, and will not render the same on all browsers. I have a page that I have written in CSS and it will not display correctly after the whole thing loads in IE, but works wonderfully in Firefox. Remember, no two browsers will every look exactly the same, with the same exact code, unless it is "Hello World!" on a white background....;)

by smorty71

It is really a matter of understanding browsers and how each of them handle certain things.

If you don't know how to write cross-browser CSS, then it is easy to label CSS as the problem.

To be clear, I'm not trying to trash talk anyone on this thread. CSS is just like anything else. Your own level of expertise is the biggest factor in how well it can be implemented.

by khunter

sMoRTy71 (or anyone else);
Learning suggestions for a CSS newbie?

(ps-LKY is a great town. I'll be there later in Feb)

by osumiller

I won't dispute that, but this requires a larger amount of experience, than say, writing the nasty code involved in making a huge nested table mess, which most of us would agree is not a very clean, good, insert other efficiency measure here, way of doing things.

by tony hopkinson

And over use of tables can give you a page that's a total nightmare to maintain, if like me you are a big fan of notepad as a coding environment.
LOL
CSS is what I'll be looking at soon now as it's been designed to take a lot of the pain out of the older table/frame solutions.
Compatibility tends to be pretty good across browsers, just stay away from the vendor specfic tags certain b'stards are fond of using to add 'features'

by jaqui

in the links I have in my profile here on tr. :)

One thing with using css, if you use the xhtml that it works best with, to get proper functionality out of ie, the first lines of the page are:
[pre]

some page

[/pre]

The

by connectvb

Dont we agree that design and creativity is something that depeends on individuals perspective. Being into web development and design for more than Seven years, I am still not able to satisfy my clients with my first design and most of the time I end up doing a design which I personally feel is not good, but the client would love it.

Any thoughts welcome.

Rgds, Venky
www.coder247.com

by tony hopkinson

in terms of the final deliverable wouldn't care one way or the other about frames tables or css.

The next developer who has to do a job with that source however might.

So are you talking design from a graphical point of view or the techniques used to implement it.

by khunter

are also my friends and founding members of this organization. There is only one other person who has some design skill. She will be my backup admin.

Eventually it will be our children and grandchildren that have to deal with this.

Right now, it's more of a personal challenge to learn a new skill in designing the site. I have a very basic template posted right now. But it's very static and boring (allinnpioneer.com).

by smorty71

the decision of whether to go with CSS or tables or frames is one that is outside of the scope of design/creativity.

CSS is the "proper" way to control the layout of web pages. Tables are a hack.

by khunter

fairly simple. As I've mentioned, 3 pics for the banner area on top and a left and right navi-area (both static). The bottom center area will be the dynamic page.

I want it so simple my mother could navigate it (and she doesn't use a computer), but I also want the design process to be simple for me (as web-mastering is not my profession). Various resolutions and page loading speed are the other factors I've considered.

The BITS site (www.bywater.net.au) is very close to want I would like, except I also want a navi-bar on the right.

by jaqui

was that you "stretched" the top image to fit the page, this actually detracts from the overall look of the image.
[ or you compressed it to make it fit height wise ]

a better method would be to use an image editor and alter the actual dimensions for use, to keep the original look of the image.

by khunter

The basic template did that automatically. It is a automated page builder available from our site host. I had very limited control over it other than to pick between template styles and put in any text or personal pics. The app did the rest.

That does bring up the question about relative image size. The new page I'm working on uses relative sizing (to the browser window). How do I get my pics to grow/shrink relative to the size of the area they are enclosed in (such as the banner area)?

by jaqui

doesn't work well with relative sizes..
The scaling will make an image appear squashed / stretched more often than not.

here:

http://www.geocities.com/jaqui_greenlees/images/wsb-example.jpg

My estimate of original look of the image. :)

a banner image is most often no more than 68 pixels high, by usually 600 pixels long.
[ the top ads here are 90 by 768 on my display ]

one that contains something like faces needs to be an absolute size, or the people look really odd.
the av I have for today has been both stretched [ height ] and squished [ width ] by TR's dimension settings for av's.

This is why Banners for sites are usually very thin height wise, to keep more page space for content. an image of the People in the company would more often be found in an About Us section than as a banner.

Here:

http://www.geocities.com/jaqui_greenlees/images/allin-pioneer.jpg

a 5 minute banner that would fit better, and avoids the issues around people's faces I mentioned. I know, Allinn isn't the name, it's All Inn Pioneer Cabins this was just to show how the banner can reflect name and company better than the image of the people in the comany.

by khunter

that I'm more of a hardware guru than a coder. For the site design I want, I really need WYSIWYG design features. I can go in and tweak code after I get close, but I haven't coded from scratch (assembly & COBOL) in 20 years. The last real code I wrote was VB a couple of years ago to modify an Access database I designed. (had to teach myself VB, also.)

This whole project is a labor of love and sweat-equity for our association (and I want to learn new stuff).

by jaqui

try Coffee cup HTML editor.
both code and wysiwyg functionality, with css and xml support in the newest version.

http://www.coffeecup.com/html-editor/

This would give you the easy design functionality, and then the code features you want to actually learn how it's working. :)

by khunter

tonight when I get home. Thanks. Dreamweaver's design page isn't WYSIWYG (or at least I haven't figured out how to turn it on) so I have to jump back and forth to the 'View Page'.

by tony hopkinson

free editors. I do most of my work in straight text myself, but when I feel the need to thrash out a layout I use HotMetal Pro. I've an old copy of v4 which does the job handily.
Whatever you do stay away from frontpage it's total garbage.

by khunter

I think I have a copy on a '96 era ThinkPad down in the basement. It's what I did my last web design on.

Pure text design is beyond my experience level (and the time frame I have to learn it). I'm a lazy sort, so I want, what I want, when I want it and I want it now! (hmmm, sounds like my users.)

by deadly ernest

My background is very much hardware, starting with the early microcomputers and everything since, even some older mainframe. However, a few years back I saw the need to learn how to code web pages and bought a couple of HTML books and a copy of Dreamweaver 4. I found that I could do the basic design in Dreamweaver, with the options set to HTML, and then clean the code up once I was finished.

I am a great fan of sticking to the named 256 coloursas against using the code numbers - I can always remember what 'light blue' and 'steel grey' look light but have a devil of a time remembering what 'FF0600' looks like. Also the name coded colours come out the same in nearly every browser in existence whilst some of the hes codes can vary in shade between browsers.

I really believe in the KISS principle and HTML is a great KISS level web code.

by khunter

The eventual banner image will be a 'wide-angle' of the lake. That pic you've seen was all I had at the time.

I'd like to have the title (lake pic) banner in the middle with a pic on either side of each cabin. All three pics would link to their respective detail page. Of course, the left vertical navi-bar would also have links there.

The design concept is to have the 3 pics along the top (areas 1,2,3 static), a vertical navi-bar area on the left and right (areas 4,6 static) and area (5 dynamic) as the main body which updates depending on the link selected.

Hopefully, I can get the design to adjust to the relative display size. I have a variety of hardware and browsers to test against.

This is why I started this thread, to find out which would be the best method to achieve that goal. Originally, frames seemed the best method, but I'm not stuck with it. The end result is the important part (and not taking forever to design it!).

by jaqui

I figured the wood grain would suit the business. :)

CSS would defiantely give you the layout you want.
but you don't actually need that many blocks...

top, banners
one side, navigation
center dynamic content [ maybe an iframe, but even those are problematical ]
across the bottom legal links & contact webmaster.
[ legal links: privacy policy, terms of service, comany link {contact us } copyright notice ]

You get a better layout if you just use percentages rather than absolute values in the block sizes, then they resize, unless they shrink beyond use.

Stu Nicholl's CSS Play website has some great examples of how to use css, and you may alter the basic layout after looking at the options he presents.

http://www.cssplay.co.uk/

He also points out that IE has the worst support for css of all the browsers. and how to get IE to even support most of css.
[ use an xml declaration as first line of page ]

by deadly ernest

There are many ways to do this and which is best is more a matter of personal choice than technical process. The other answers you already have detail the ways to do it, the only further comment I will make is :

REMEMBER THAT NOT EVERYONE HAS BROADBAND ACCESS

Too often I see web sites where the pages look nice and work quick for broadband but take many minutes for people with dial-up or heavily shared connections. A few years ago I sawa presentation by one of the world's top web page designers and they said that any page should download in under 30 seconds on a 33.6 kbps connection, anything over a minute and the people will go elsewhere, surveys have shown this to be true. She was right as this is the era of the instant response, instant news. instant cofee, instant meals, etc.

Personally I go for HTML coded pages as I know that every browser can read that, some older ones (yes they are still out there and used by poorer people) can not handle Java etc too well. For the situation that you describe I would use frames and first work out which sections I may or may not want to change between pages, as this could affect the number of pages used in creating the frames. You can create any number of frames if you wish, just be sure to give each one a different designation and make sure that you are pointing at the right one when you tell a page to open - kind of like using hot links.

A frames example is my web page www.bywater.net.au I first created a page with two frames - the banner that was to be the same on all pages and the area below that, I then created another page splitting this into two and have most pages opening up in the right hand frame (as you look at the page).

by jaqui

I most definately agree, design a site to load in as short a time as possible.

I would add also, design it so that one page is exactly one screen of data, scrolling is not something to be used if it is at all possible to avoid it.

And sizing of every aspect should be in percentages, to allow for different resolutions and window sizes. test it on a low resolution for look and use that as the base for the site layout.
ie 800 by 600 resolution with a browser only using 1/4 of the display. If your page can be used at that level it will work on any display, even with screen magnifyers for some people.

by deadly ernest

however there are some cases for scrolling screens. They are the best way to handle large sets of information, if you visit my web site www.bywater.net.au you will notice that the pages describing my services are, for the most part, one short page each - yet the info sheets are one large scrolling page each. That is because the info sheets are large documents and there is nothing worse than having to download several pages to get the one document - it is a real bugger linking back and forth whilst scrolling up and down on the one page is much more convenient. In each case I do only have one subject matter per page.

by jaqui

A good example of times to avoid it, these discussions.

With a long post it is not really practicle to break it to avoid scrolling.

but the long discussions that have a lot of scrolling to get to the new posts instead of downloading the entire discussion itself post by post would be easier if the post listing was only one screen of data and a new page with the rest / next screen full.

I know that it's not always possible to avoid having pages with scrolling, and on your site I wouldn't even think twice about those pages that are scrolled. it's the tabled layouts that create a page that requires scrolling, when there is only a small bit of text, that really show why I stress page length.
An example, the reply to post page in front of me right now, your short post, with a text entry box, no submit button visible, and from the look of the scroll bar, only 1/3 of the page visible. For a reply to a post there needs to be 3 screens of data sent? [ sorry, just measured, 2.25 screens of page for it. ]

by khunter

There will probably be some scrolling on my 'main' page (previously mentioned area 5), but the header/banner and the left and right navi-areas will be fixed. The plan has always been to have one topic per page.

by khunter

to all who have contributed. I've learned a lot of good information the past few days. I'm not dropping out of the thread (yet), but I did want to say thanks for all the input.

Keith

by tony hopkinson

after I got saddled with front page 97. Most of the GUI based tools I've seen can make somethings very hard, particularly when messing about with tables of tables, which is something I've learnt to minimize. If you have to view the source and manually type all over it because the GUI won't let you make the change you want what's the point of having it in the first place.

If you go can go down the XHTML route you can get an xml paerser to validate the document as text. Save and view in your browser, it's a more accurate check anyway.

by twoclones

Frames make your page very difficult to 'read' or even understand the over all message for the visually impaired visitor using screen reader software. Unless your content/messagae is for sighted people only, I'd avoid frames all together.

Butch

by khunter

With all the great input I've received on this topic, I'm in the process of learning CSS and designing some test pages to get the design I want. Stay tuned...

by pennatomcat

The combination of CSS and php includes allows your code to be compact and robust. This way, your repetitive code loads only once. There are a lot of good free CSS templates on the web. Pick one, plug in your code, and salt to taste--then you're good to go very quickly. Do yourself a favor--go to w3schools.com and learn the basics. Stay away from wysiwyg editors--they tend to produce a lot of garbage code. Take a look at HTML Kit. It's free and there are a lot of open source plugins to make your job easier.

by pennatomcat

Test your CSS in several browsers for compatability.
Micro$oft Infernal Exploiter is the worst offender!

by pennatomcat

making a web page cellular accessible. While cellular access may not be important in your current project, you should consider that frames will not work in a cellular page. Frames also cause problems with printing and handicap access.

The argument that frames will eliminate repetitive code is flimsy. Repetitive code, such as menus, can be easily handled with php includes.

While I risk being flamed for saying so, I feel obligated to say that I view using frames as a "quick and dirty" programming method. In addition, future browsers will probably drop support for frames. Program for the future now so that you won't have to start from scratch somewhere down the road.

by noyoki

I don't see how a browser can just drop support for something altogether.

That's like saying that OS's will drop drivers for legacy hardware or software. Generally, they just leave that bit alone and add to the newer stuff. It's there in case the odd person has a video card from ancient history, but mostly not used.

by pennatomcat

frames are listed as deprecated, aren't they.

While you can still access dos in Windows, are all of the old, powerful commands still available? Nothing lasts forever.

Windows XP is a prime example of legacy hardware and software being left behind. I own at least one piece of hardware and a large box of software that were rendered useless when I upgraded to XP. Will dos and Win98 ever make a comeback? ;)

This discussion is closed to new replies.