Problem with page width and HTML optimization.

[Hazeroth]

Hello,

I have two big problems and I've tried numerous ways to solve them.
I have this web page HERE , one of my problems is that in certain browsers (Chrome for example) , the page width is bigger than the screen resolution, making it look really out of the window.

My second problem would be the HTML optimization. Some pages are hard to load.

I'd like to know if someone has a solution mainly for the page width, it's driving me crazy!

Thanks in advance people.

[jscheuer1]

The main problem with that page in any browser is that its images are too big and the layout is too wide. I have a 1600 x 900 monitor, pretty generous for a laptop. My average window size is considerably less. At anything narrower than 1450 width (which blocks out almost everything else on my monitor) there's a horizontal scrollbar. Even at full screen, the images are so big that I can't see much information at any given time and must do a lot of vertical scrolling to piece it together in my mind. A lot of people with desktop machines still have only a 1024 x 768 monitor. In fact, I believe it's still the most common resolution today, certainly still close to it.

[ajfmrf]

Looks fine on my desktop monitor(24")

But I can tell you,John is right about the images.Take for example that header image is as wide as my screen is - thats a large image
Personally,I try and keep my pages to a maximum width of 1500px and always center it

As far as the optimization goes large images can be optimized(I forget the word here-help me some one-lol) to help make the smaller and load faster.

[letom]

I would like to suggest you that using percentage and pixel both,will make complicatipns, you can set specific pixel width to all ur header and body to avoid your first problem, you had better to choose 970 - 974px as width.

My second problem would be the HTML optimization. Some pages are hard to load.

some of the following works will to reduce the weight of the above problem.

1. You are using 9 style sheets in your webpage to reduce http requests you must make 3-4 style sheets into a single one as the same way total as 2 or 3 instead of 9 documents, also try to minify the size of style sheets.

2. Images you used are bigger in size it takes time to load in small internet connections. Nothing to do with that,,

3. Also try to minify the source code of your website.

FYI .. The meta content is not properly written on the web page.

[Beverleyh]

Lots of great tips. Some time ago, I thought I'd bring together some optimisation points in a DD blog post here - all help speed-up the loading of web pages: http://www.dynamicdrive.com/forums/e...your-web-pages
Hopefully you'll find some of it useful.

As for screen width and layout sizing, I'm with John, although I've recently started toying with hybrid designs. Today, most people use devices with a resolution of 1024 x 768 or higher - the most common range falling between 1024 and 1440 wide. So what you could do is set the overall max-width of your layout to 1440 and a then also set a min-width of 1024, but size your content using percentages to allow them to shrink and expand a little way to fit. It depends on the content of the website though - depending on layout, allowing expansion from 1024 to 1440 can throw off the balance/proportions of elements, specifically fixed sized images, font-size and text line length. This is where you can use media queries to resize elements at certain breakpoints so you can switch-in higher resolution images and larger fonts at 1280 and then increase things again at 1440 wide.

It really depends on what you want to achieve and how much work you can afford to put into the project. Much of the time its still easiest (and faster) to stick with a fixed design.

For fixed width designs, 960 is a very common max-width thanks to the much supported 960-grid system (960 is a number that divides easily to make 2, 3, 4, 5, 6, 8 columns, and its a number that allows for enough space on each side to balance a layout nicely on a 1024 screen), although 960 is now starting to lose favour due to the increasing popularity of responsive design.

[djr33]

Today, most people use devices with a resolution of 1024 x 768 or higher - the most common range falling between 1024 and 1440 wide. So what you could do is set the overall max-width of your layout to 1440 and a then also set a min-width of 1024, but size your content using percentages to allow them to shrink and expand a little way to fit.

I have no idea about statistics on browsing habits, but I very rarely have my browser window maximized. I usually have multiple windows open, with my browser filling a little more than half of my screen's width (and usually full height). I do have a widescreen display (1440), so that might sometimes be 1024, but often I think that's less, probably 800+. Personally I find websites that are supposed to be maximized a little annoying and awkward. It depends on the design, though.
As a serious question, are my browsing habits unusual? Do others always/usually have the window maximized?

[jscheuer1]

I do pretty much the same thing and feel pretty much the same way about 'maximized' sites.

As I said before I have 1600 x 900 to play with. It's under Win 7 Pro.

When all I had was 1024 x 768 though, I ran most sites full screen. I think most folks limited to that resolution do.

I do run Opera at max available width and height. But within it I have open a hefty sidebar for email/favorites/page info that's almost always open to one of those views, and the actual pages I'm looking at in Opera are no bigger than they have to be. The other browsers I run (latest of Chrome, IE and Firefox), I keep as narrow as possible as well. I have 2 vm's where I run legacy browsers, mostly IE 5.5 thru 8. They operate under XP Pro mostly (IE 7 won't run well along side IE 8 in it so I have a separate vm running XP home for it), both are with an effective resolution of 1024 x 768. In them I rarely run their browsers completely full screen, but usually close to it.

Most sites do well like this, both in my main OS and in the vm's. Any site that's too large for that, If I really want to view it, or am trying to help someone with it, I will run either as large as I can in a window, or full screen. But, as I observed earlier about the page in question in this thread, usually they require a lot of vertical scrolling in order to be fully viewed, making them appear at list a little disjointed.

[Beverleyh]

Here are some resolution stats for reference; http://gs.statcounter.com/

At work I use a 1280 x 1024 screen but at home, either a 1440 x 900 or 1600 x 900 depending on whether I'm on laptop or desktop.

I'm a maximiser by habit - didn't used to be but I downgraded my monitor resolution in work to match, or at least be closer to, the majority distribution in school (the school where I'm based and at feeder schools use either 1024 or 1280 wide), so that forced me to kill the side bars.

When all I had was 1024 x 768 though, I ran most sites full screen. I think most folks limited to that resolution do.

Agreed. This appears to be the norm that I've observed in our ICT suites.

At home I used to have my sidebar faves pinned but got out of the habit about 2 years ago - not sure why - maybe cos my laptop was widescreen and it was a novelty. The only time I don't full screen in while using a virtual machine also (its like I need to keep reminding myself that the vm is the application and not my 'main' setup, so I feel more comfortable seeing my desktop poking round the edges)

[djr33]

Here are some resolution stats for reference; http://gs.statcounter.com/

Websites like that are useful, but they give no information about whether the visitors are actually using all of that space.

[jscheuer1]

no information about whether the visitors are actually using all of that space.

All what space? Most are still at 1024 x 768.