PDA

View Full Version : Problem with page width and HTML optimization.



Hazeroth
05-09-2013, 07:46 PM
Hello,

I have two big problems and I've tried numerous ways to solve them.
I have this web page HERE (http://www.simplissimmo.ca/) , 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
05-11-2013, 06:12 PM
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
05-12-2013, 12:25 AM
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
05-12-2013, 04:58 AM
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
05-12-2013, 10:16 AM
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/entry.php?243-(Beginners)-Easy-ways-to-speed-up-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
05-12-2013, 11:21 PM
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
05-13-2013, 02:24 AM
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
05-13-2013, 05:14 AM
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
05-13-2013, 05:17 AM
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
05-13-2013, 05:40 AM
no information about whether the visitors are actually using all of that space.

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

djr33
05-13-2013, 06:28 AM
Sure. And do they use all of it? They might have only 800x600 (or less) available if their windows aren't maximized. I agree with your intuition that lower resolution generally means maximizing the windows, but I don't know that it's true-- we don't have any statistics available for that.

letom
05-13-2013, 07:03 AM
The best idea i would like to recommend for this long discussion is use pixel and keep 3 version of website,

one is for 800 pixel and higher,
two is for 370 pixel - 799 pixel.
three is for Mobile devices below 370 pixel,

we can keep first two design same but should make 3rd as different... The topics written above will not understand on first read. It would be nice if we write the things in a manner, which gives more readability.

djr33
05-13-2013, 07:07 AM
Having three versions of your website is in most cases probably unnecessary. It's certainly a lot more work. Mobile devices are now able to zoom in easily, so they can view most normal websites. Sometimes a special mobile website is useful for special tasks, but often I don't see the purpose (as a visitor) and want information from the "real" (non-mobile) website.
Beyond that, it can be incredibly difficult to always be sure that you're displaying the right page for your visitors.

Realistically, I think very few visitors will have less than 800 pixels.

Personally I strongly prefer percentage layouts, at least as part of the design-- some things are better as pixel layouts, and that's fine, but they should be embedded in a design that can expand, even if that's just a well-designed background.

letom
05-13-2013, 07:17 AM
it can be incredibly difficult to always be sure that you're displaying the right page for your visitors.
Yes,.. but i think php code for checking screen width doesn't fails to a certain extend ?

Realistically, I think very few visitors will have less than 800 pixels
We cannot predict what devices will come to market in near future, but for a better presentation in IPAD or devices below netbooks in such way.

Personally I strongly prefer percentage layouts, at least as part of the design-- some things are better as pixel layouts, and that's fine, but they should be embedded in a design that can expand, even if that's just a well-designed background.
I never, i changed pixel to percentage and back percentage to pixel in last week for the big website i am developing. check now its the time for touch panel devices, if we use jquery touch panel friendly modules, percentage, degrades our website and stop functioning it, even if we use min and max width, height.

djr33
05-13-2013, 07:31 AM
Yes,.. but i think php code for checking screen width doesn't fails to a certain extend ? It is unreliable. It can be a good guess, but it's based on what the user chooses to send to the server, which might be inaccurate or might not be sent at all. It also won't say anything about the actual size of the window, so it won't be able to do anything about when the user makes the window larger or smaller on the screen.


We cannot predict what devices will come to market in near future, but for a better presentation in IPAD or devices below netbooks in such way.Netbooks are generally 800+, no? They have very limited vertical resolution, though. That's the biggest problem with mine, at least.

iPads are a great example of being able to zoom. Even iPhones. There's really no trouble accessing any website because you can zoom in.

Beverleyh
05-13-2013, 08:56 AM
Sure. And do they use all of it? They might have only 800x600 (or less) available if their windows aren't maximized. I agree with your intuition that lower resolution generally means maximizing the windows, but I don't know that it's true-- we don't have any statistics available for that.
It's a complete pain, isn't it - ha, ha.

I agree that beyond a certain width, it will be more commonplace to open multiple windows side-by-side, especially when viewing websites that look good at a narrower width - and by today's standards, 'narrow' is likely to include the 960 designs (relatively speaking, those do look narrow on a 1920 resolution screen and at that width, opening two 960 websites side-by-side will be easy)



Sure. And do they use all of it?.Hhmmm... It might be the optimist in me but if the screen width is there, I like to think that people will use it if they need/want to. I am reminded of the days when my mum insisted that I took a cardigan out with me (even during glorious sunshine), usually couple with the advice that "you can always take it off". How very true! That's now my opinion of the browser favourites bar ;)

djr33
05-13-2013, 09:22 AM
Hhmmm... It might be the optimist in me but if the screen width is there, I like to think that people will use it if they need/want to. I believe they'll figure it out if they need to (I surely hope so!), but the question is whether they want to. I guess it depends on the type of website-- I usually browse websites for information, not for the experience/fun. So if a website made me maximize my window just to get the information, I'd be annoyed. I do, of course, sometimes maximize my window for certain things, such as viewing large videos, or something else that's more about entertainment than information.

Tangent:
A really bad example of a website is the one my university uses for grading [for instructors] and viewing grades and materials [for students] (actually, it's one of two options-- the other is almost as bad, but without some of the technical difficulties). It attempts to force you to only open one window. Not of the same page. But of any page. It'll keep alerting you and refusing to do things until you close both, if it can't automatically close your other window! But then the real issue is the part where you actually enter the grades. It's an incredibly ineffectively JS-clone of Excel, where you can enter grades and have them save automatically (with Ajax I assume-- I haven't looked at the code). But it's awful. It crashes my browser ever time and takes about 5 minutes to load when you have something like 10-20 assignments listed for 30 students. And then scrolling takes forever, and you can't (even on my 1440x960 display) show the whole thing at one time. And that's because the grades are in a small frame (well, it feels like a frame, not sure about the code), so that is about 400px tall and about 90% wide. It's the main reason I'm glad I'm done grading this semester. They keep adding "features", yet it gets worse and worse. (And I still don't really understand how to make something scored as "extra credit", although I finally found a work around. But that's another story.)

letom
05-13-2013, 09:38 AM
Netbooks are generally 800+, no? They have very limited vertical resolution, though. That's the biggest problem with mine, at least.

Yes, but some people put their resolution to 800 pixel.


It is unreliable. It can be a good guess, but it's based on what the user chooses to send to the server, which might be inaccurate or might not be sent at all. It also won't say anything about the actual size of the window, so it won't be able to do anything about when the user makes the window larger or smaller on the screen.

Yes it is a major issue.. I am identified that from the tab of my brother-law, when he start surfing my company website, it is not redirecting to mobile version as coded.. I am paying more time in front of my computer, so i will not take any initiative to surf internet through my nokia mobile, but my Nokia phone do well and work according to code.

Is there any accurate solution for that ?

djr33
05-13-2013, 09:42 AM
There's no perfect solution. There are some ways to improve accuracy, but nothing that will be without exceptions. This has been discussed a few times here, I think, so try looking for some of the older threads. Or start a new thread about browser/resolution detection if you'd like. But here we shouldn't get too far off topic about how to detect screen resolutions, just what to do about that information once you know it.