Web Page Sizing Query

[brahma]

Is there an easy way to specify the size of your web page? Probably a daft question, but I have developed my web page for viewing on a 1280 x 1024 desktop. However, whenever it is viewed on a 1024 x 768 or an 800 x 600, it looks naff. What if the quickest way round this? Do you have to develop 3 pages for each size - and if so, how do you "test" the screen size in your code?

Many thanks,

[srochford]

It depends on what you're trying to achieve.

Good code will just resize; anything else is "bad" code :-)

Is there a reason for a fixed size? What are you doing that can't flow? Are you deliberately trying to alienate users who don't have a standard page size (eg those on mobile phones, netbooks, TVs etc)?

You can use script to get the size of the browser and then show the appropriate page but it makes lots more work for you (because you will have to maintain a range of page sizes) It's generally a lot easier to use CSS that can just resize cleanly.

[brahma]

Thanks Steve. You hit the nail on the head - what I want to do is resize automatically - so I want to produce good code!!!! I'm using Macromedia 8 although I haven't used CSS. Is there anywhere that does a quick guide - or can you help thru here?

Cheers

[srochford]

I've never really used Dreamweaver (because it produces horrible code which I could never make sense of!) but key things to look out for are lines which do width="640" rather than width="50%" etc - the latter will resize; the former won't

Can you link to/upload what you're trying to do and others might be able to offer more advice. to be honest, most of what I do is reports which are just pretty basic tables of numbers!

[polaris]

Hi,

A good general rule is that a webpage should look good on no more that 600 pixels wide.

One way that this can be achieved is by having three or two columns, one of the columns should be set a floating size, the other(s) fixed. Most Joomla sites are like this.

That way someone using standard VGA 640*480 still gets a good screen.

You can safely assume that if your site is a techy one or aimed at people likely to have a better computer system then you can go bigger. But for school websites I would try and keep at about the 600 pixels for the time being.

If you look at this site for instance the menus are set to 600px so that someone with a VGA monitor gets the menus without overlap.

Getting optimum scaleable html is an art, so for novices a fixed width is recommended.

There is a wealth of information on here.

World Wide Web Consortium - Web Standards

And if you want to do a sub page for mobiles then this site will help.

Mobile Web Best Practices 1.0

In dreamweaver you can set the aimed for page size in the page setup part.

If you are learning HTML/CSS/PHP/JAVASCRIPT I also recommend Firefox with the Firebug option. This enables you to look at other peoples sites and highlight areas that you think look neat and look at the code and dare I say copy? Or learn how its done......

You can change the CSS on the fly to see what affect it has.

If I can help some more please PM me.


Regards

Chris

[dhicks]

what I want to do is resize automatically

This is where the whole using-a-table-as-layout thing came from - the simplest way to lay out a web page is as a grid using an HTML table with widths set as percentages. Use actual text instead of images, it can be flowed and re-arranged better. Properly, you should use CSS to do table-less page layout, as the idea of HTML is that tables should only be used for, well, tables of data.

--
David Hicks

[brahma]

thanks for the tips guys. I understand the concept now of using tables and specifying them as a percentage - I'll try that in some tests. However, you say about using text rather than Images. This is where my lack of skills comes in but I seem to be able to get much better looking images for titles banners etc by using graphics packages. I cant get decent looking text thru Dreamweaver. So I guess my question is how can I automatically control the size of my images - or cant you do this?

Many thanks

[polaris]

Hi,

Not sure what you mean???

Cannot get good looking text? Can you explain.

Images are a fixed size always.

CB

[dhicks]

However, you say about using text rather than Images. This is where my lack of skills comes in but I seem to be able to get much better looking images for titles banners etc by using graphics packages.

That's were the "designer" part in "web designer" comes in - you're supposed to be able to design a page that looks nice because you've laid it out logically, with a decent colour scheme, and with minimal graphics usage so that the whole thing fits all screen sizes, not because you've managed to kludge the web browser into making like a piece of A4 paper so you can recycle your 2-year-old DTP skills. Web pages aren't a print medium, they're web pages, better get used to the idea.

I think you can actually set the width of an image as a percentage, and the browser should resize for you. You might get variable results with different browsers and different screen resolutions, so test. Don't go overboard with this technique - remember large images take longer to download, and something with a smaller screen probably also has a slower Internet connection and/or less storage space/working memory/processing power. Best to aim for just a few well-designed images that can be easily cached. Google (the homepage and rest of the site) is generally a reasonable kind of design to follow - their logo as a graphic, but most other things are text, and the page is nicly laid out and not too cluttered.

--
David Hicks

[brahma]

I guess what I mean is you can generate good looking graphics in another package and when you save that image it is saved at say 130 x 40 pixels. That graphic, when used in your web page, is always 130 x 40 pixels regardless of the screen resolution right? So on a smaller screen say 800x600 the page looks squashed with a big graphic. So should you always develop on a small screen, assuming it will be ok on a large screen? I would like my logo to have some depth - a bit 3Dish ...

[polaris]

Hi,

Yup, the image will always stay the same size....

One way to make your page a constant look at feel is to use imagemaps if that is what you want to do.

An image map is a "picture" of the screen, or part of the screen that has clickable areas which then take you to other pages.

Normally, or used to be, the way that film websites were done. A really cracking graphic can be drawn by an artist and a web designer can then use his magic to make parts of the image clickable.

The other way to see how this is done is to find a site that you like.

Use firefox and firebug (as I described above). Or roght click and view page source.

That way you can see how that designer crafted the page.

And the previous writer was absolutely correct about dreamweaver code, so best steer clear of sites built by that!

With the age of Joomla and the like the designers craft is getting lost a little. Our chaps are just as lazy nowadays...... or is that a cost thing driven by the marketing man (whoever he is?- oh yes its me!).

CB

[dhicks]

That graphic, when used in your web page, is always 130 x 40 pixels regardless of the screen resolution right?

No, you can set the width and height attributes in a img tag, and I'm pretty sure you can set those as a percentage. This might not get you very good resizing results, mind.

--
David Hicks