Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: Problem with page width and HTML optimization.

  1. #1
    Join Date
    Feb 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Problem with page width and HTML optimization.

    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.
    Last edited by Hazeroth; 05-09-2013 at 07:51 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    594
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    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.
    Thanks,

    Bud

  4. #4
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    55
    Thanked 3 Times in 3 Posts

    Default

    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.
    You will know the truth, and the truth will set you free (John 8:32)(The truth is about the only begotten son of GOD.....When you feel you are alone for facing your problems, God will never leave you by your own You are important for God

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,946
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    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?
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    djr33 (05-13-2013)

  9. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,946
    Thanks
    16
    Thanked 304 Times in 303 Posts
    Blog Entries
    11

    Default

    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)
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  10. #9
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  11. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,951
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by djr33 View Post
    no information about whether the visitors are actually using all of that space.
    All what space? Most are still at 1024 x 768.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Need help - design and optimization
    By Genson in forum Graphics
    Replies: 5
    Last Post: 02-22-2011, 09:34 AM
  2. HTML web page email problem
    By droppinplates84 in forum HTML
    Replies: 1
    Last Post: 12-05-2009, 02:15 AM
  3. Replies: 0
    Last Post: 03-16-2009, 05:11 PM
  4. Replies: 5
    Last Post: 04-02-2007, 12:37 PM
  5. Is there any one here who knows page optimization ???
    By ricky_flare in forum The lounge
    Replies: 6
    Last Post: 08-05-2005, 02:03 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •