Page 1 of 2 12 LastLast
Results 1 to 40 of 55
  1. #1
    Join Date
    Jul 2005
    Posts
    55

    What size screen size - PLEASE?!

    What browser size would people recommend designing Web sites in? E.g. is there an average size that people view their internet browsers at?

    I'm sure this must vary considerably. Is there a 'good'/'safe' size or a way of getting around this problem.

    I know when I am browsing it puts me off if I have to use scroll bars (particularly left-right scroll bars) and I want to avoid this on the Web sites that I design but not sure how wide to set the screen.

    Hope this makes sense? Any advice gladly appreciated.

  2. #2
    Join Date
    Sep 2004
    Location
    Flint, Michigan
    Posts
    5,765
    If you want to play it safe go 800x600. I generally design for that size.

    If you want to not worry so much just make a liquid design that can scroll down to 640px or so.
    Mike from Zoodia.com
    Professional web design and development services.
    In need of a fresh hosting design? See what premade designs we have in stock!
    Web design tips, tricks, and more at MichaelPruitt.com

  3. #3
    Join Date
    Oct 2003
    Location
    West Yorkshire, UK
    Posts
    2,813
    The best solution, Amy, is to not design for any specific size. You should use percentages for your widths, this way, your design will expand and contract to the correct size, depending upon the screen resolution of the visitor.
    - Jamie Harrop

  4. #4
    Join Date
    Jul 2005
    Posts
    55
    Oh I see. Thanks for this.

    Is percentage width dictated in the HTML?

  5. #5
    Join Date
    Sep 2004
    Location
    Flint, Michigan
    Posts
    5,765
    Yes it is.

    ie: <table width="100%" border="1"><tr><td>Hello world!</td></tr></table>

    This is called a "liquid" design. Fixed width is usually called a static design.
    Mike from Zoodia.com
    Professional web design and development services.
    In need of a fresh hosting design? See what premade designs we have in stock!
    Web design tips, tricks, and more at MichaelPruitt.com

  6. #6
    Join Date
    Jul 2005
    Posts
    55
    Fab! I've got this working on my site heading! And that's much better!

  7. #7
    Originally posted by justadollarhostin
    Yes it is.

    ie: <table width="100%" border="1"><tr><td>Hello world!</td></tr></table>

    This is called a "liquid" design. Fixed width is usually called a static design.
    demo plz !!!
    ╠══ Cool Wallpapers ══╡
    ║►►► Optimize your website

  8. #8
    Join Date
    Sep 2004
    Location
    Flint, Michigan
    Posts
    5,765
    Demo? you're looking at one. WHT is a liquid design.

    Grab the edge of the window and shrink it, then epand it. See how it changes.
    Mike from Zoodia.com
    Professional web design and development services.
    In need of a fresh hosting design? See what premade designs we have in stock!
    Web design tips, tricks, and more at MichaelPruitt.com

  9. #9
    Join Date
    Oct 2003
    Location
    West Yorkshire, UK
    Posts
    2,813
    WHT isn't much of an example Michael, in fact, the main forum area is fixed width.

    Take a look at http://www.now-design.co.uk/

    That expands and contracts, to almost any resolution.
    - Jamie Harrop

  10. #10
    Join Date
    Sep 2004
    Location
    Flint, Michigan
    Posts
    5,765
    WHT is a good enough example for the thread's intentions, but since when is it a fixed-width? The only thing that is keeping it from being able to go all the way down is the images (mainly the banners).
    Mike from Zoodia.com
    Professional web design and development services.
    In need of a fresh hosting design? See what premade designs we have in stock!
    Web design tips, tricks, and more at MichaelPruitt.com

  11. #11
    Join Date
    Oct 2003
    Location
    West Yorkshire, UK
    Posts
    2,813
    Hummm, now that's strange. WHT doesn't seem to contract in Opera, whereas in IE, it does. Sorry about that Michael, my mistake. Not sure why it stays fixed width in Opera.
    - Jamie Harrop

  12. #12
    Join Date
    Sep 2004
    Location
    Flint, Michigan
    Posts
    5,765
    Oh no harm done by any means. The site you listed is a much better example. There was a nice CSS article (Top 10 CSS tips) over at sitepoint that also mentioned including a minimum-width value in your liquid designs to keep them from contracting too much.
    Mike from Zoodia.com
    Professional web design and development services.
    In need of a fresh hosting design? See what premade designs we have in stock!
    Web design tips, tricks, and more at MichaelPruitt.com

  13. #13
    Join Date
    Jul 2005
    Posts
    55
    This is very helpful guys.
    Presumably CSS will allow me to do page layout more effectively than HTML. I have only learnt basic HTML and correct me if I am wrong, but using tables seems to be the only way to layout objects (eg. text, images) in blocks next to each other. Does CSS resolve this restriction?

  14. #14
    Join Date
    Sep 2004
    Location
    Flint, Michigan
    Posts
    5,765
    Be careful Amy, you'll open up a whole can of worms in this thread if you get people thinking you are starting a debate between table based designs and tableless designs.

    Here is what I consider the official ruling (what is said from w3c who develop all this webdesign stuff):

    CSS should be used to control the way a site looks
    Tables should be used to present tabular data.

    I.E. if you are showing a spreadsheet on your website, then go ahead and use a table, if you are setting up a menubar, then CSS is what should be used.

    I still do table based design for much of my stuff because it is what people are used to (generally speaking).

    http://www.w3.org is chock full of information about all this stuff (do not take that as me saying not to post your questions, just giving you more resources).
    Mike from Zoodia.com
    Professional web design and development services.
    In need of a fresh hosting design? See what premade designs we have in stock!
    Web design tips, tricks, and more at MichaelPruitt.com

  15. #15
    Join Date
    Oct 2003
    Location
    West Yorkshire, UK
    Posts
    2,813
    CSS is fast becoming the standard for laying Web pages out, Amy. Tables are often used, but if you abide by standards, you shouldn't be using them, unless you are displaying tablular data, such as a set of race results.

    Using CSS, however, is that bit more advanced than using tables, and therefore requires that bit more knowledge.

    If you want to give CSS a go, try looking at the following sites.

    http://glish.com/css/
    http://www.alistapart.com/stories/practicalcss/
    - Jamie Harrop

  16. #16
    Join Date
    Jul 2005
    Posts
    55
    My intention was certainly not to cause a debate.

    I'm very new to all of this and I am still trying to get my head around it all, so to get an idea of peoples thoughts and feelings on different topics is invaluable.

    I understand that using tables for layouts is not the recommended way and I am certainly not encouraging people to do so.

    The trouble is, as I have never even looked at CSS, I have no idea of what it does and why etc. I am merely using WHT as a (extremely) useful information and opinion portal and certainly do not want to cause offense.

    Sorry for any caused.

  17. #17
    Join Date
    Sep 2004
    Location
    Flint, Michigan
    Posts
    5,765
    Oh no offense caused, it's just one of those topics like "What's the best control panel?" that seems to come up with a never-ending-debate
    Mike from Zoodia.com
    Professional web design and development services.
    In need of a fresh hosting design? See what premade designs we have in stock!
    Web design tips, tricks, and more at MichaelPruitt.com

  18. #18
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Hi Amy,

    It seems the question of resolution has been adequately covered. To recap, you can't plan for one resolution, but you can plan for all

    As for the tables v. CSS debate, I'll present you with your own previous thread on the matter - http://www.webhostingtalk.com/showth...hreadid=444946 - otherwise, I'd just be copy/pasting myself into this thread
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  19. #19
    Join Date
    Jul 2005
    Posts
    55
    Like I said, I was merely asking the question:

    Does CSS deal with the layout where HTML cannot (except via Tables). I've got the answer and I'll make sure I never touch on this subject again!

    Sheesh!

  20. #20
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Ahh, there's nothing wrong with the subject. It's an important one in the day-to-day lives of developers

    I just figured this was an apropos place to bring back that discussion, since it links in well with your query here.

    One point should be made for clarification:
    Does CSS deal with the layout where HTML cannot (except via Tables).
    CSS cannot exist without (X)HTML. HTML must provide the structure for CSS to which CSS applies the style. So, (X)HTML is used for layouts, regardless of whether you're using tables or not. The issue you'll hear debated is about tables or no tables. CSS is generally used in both circumstance (only to a lesser degree when tables are used), and of course (X)HTML is used in both cases as well.

    I hope that clears things up
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  21. #21
    Join Date
    Oct 2005
    Location
    Philippines
    Posts
    11
    I've tried using CSS for tableless layout and it's quite clean and minimal but it has it's own drawback it cannot handle column height with different background color. When the height of your column grows the other column doesn't follow so you have an uneven height problem.

    It is ok if all your columns have the same background color though.
    ASP.NET Frontend Designer

  22. #22
    Join Date
    Jul 2005
    Posts
    55
    Is Mr CSS aware of this?! Mrs HTML will be furious.
    Is it a problem with no reason or solution, or is the problem logical?

  23. #23
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    It's logical

    The answer is pseudo-columns, and I've been trying to find a good tutorial on how you do this in CSS, but I haven't found the one I'm looking for yet. I might just have to write it myself

    But no, this isn't a problem in CSS if you understand how this mechanism works.
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  24. #24
    Join Date
    Oct 2005
    Location
    Philippines
    Posts
    11
    I'm interested in your solution please elaborate more, this will help me a lot. I'm trying to avoid css for layout because of this but i used it a lot for margins and presentation
    ASP.NET Frontend Designer

  25. #25
    I think almost use 1024x768
    ╠══ Cool Wallpapers ══╡
    ║►►► Optimize your website

  26. #26
    Join Date
    Oct 2005
    Posts
    71
    more people generally use 1024x768, however a large, but smaller percentage use 800x600. I'd design for 800x600

  27. #27
    Join Date
    Sep 2004
    Location
    Flint, Michigan
    Posts
    5,765
    From: http://www.w3schools.com/browsers/browsers_stats.asp

    About 55% use 1024 x 768 ( add another 14% for those that use higher) and 25% use 800x600.

    Depending on the site I would say most of the time to design for 800x600 if you are going to do fixed width.
    Mike from Zoodia.com
    Professional web design and development services.
    In need of a fresh hosting design? See what premade designs we have in stock!
    Web design tips, tricks, and more at MichaelPruitt.com

  28. #28
    the golden middle is 800x600... looks good on all resolutions

  29. #29
    Join Date
    Oct 2003
    Location
    West Yorkshire, UK
    Posts
    2,813
    the golden middle is 800x600... looks good on all resolutions
    To be honest, it usually doesn't look good on all resolutions. On 1280x1024, it looks tiny.
    - Jamie Harrop

  30. #30
    i was talking about most popular resolutions which are still 1024x768 and 800x600. 1280x1024 and higher go next. so if you'd like to cover all of them 800x600 is a good choice.

    Anyway, I'm on 1400x1050 myself and wouldn't say 800x600 is that tiny.

  31. #31
    Join Date
    Jul 2005
    Posts
    55
    Have we not established that liquid designs are the solution to this bickering?!

  32. #32
    Join Date
    Sep 2005
    Location
    DySyst.com
    Posts
    146
    While you are planning the dimensions of your website, take into account that the magority of web surfers now have 1024x768. The second place belongs to 800x600. The other resolutions are much less widely used than these two. So in ance case:

    - make sure that your site is properly visible under 800x600;
    - and make sure your site is BEST viewed under 1024x768.


    We at Dynamic Systems try to find this balance by making the sites with "extendable fringes " at both sides of the main part of the site...

    For example:
    www.iNavigators.com
    www.StandardLines.com
    See how they look at different resolutions...
    Dynamic Systems
    Professional Web Development Solutions!
    www.DySyst.com

  33. #33
    Join Date
    Sep 2004
    Posts
    1,904
    Basically the page size should fit the overall design you have in mind for your site. When I design I normally keep my pages between 760 and 780.

    I never stretch it to 800 because if your customers dont maximize their browser all the way - some content will be loss and I personally like having some of the background showing through on the sides.

    If you have alot of information to share - you might do the 100% method but remember - this is normally done on sites that are ecommerce type sites or news sites. Just make sure your customers will not get lost in alot of empty space.

    I hope this helps some.


  34. #34
    Most computers come out of the factory with a resolution of 1024x768. Being this resolution is the standard you should stick to designing these on those specs. Depending on what kind of website layout your designing will depend on height and width numbers, I generally go about 75% of the screen.

  35. #35
    Join Date
    Jun 2004
    Location
    Northwest Colorado
    Posts
    4,630
    Originally posted by fishball
    I'm interested in your solution please elaborate more, this will help me a lot. I'm trying to avoid css for layout because of this but i used it a lot for margins and presentation
    There's no reason to avoid using CSS for your layout. By using CSS, in an external file, your layout now exists in one file. With tables, that table code gets mixed in with your content, on each and every page. This causes your site to require more bandwidth and your pages to load slower.

    When you change your layout, would you rather go through all your HTML files removing your previous table code, then go back through and add different table code? Or edit your single CSS file which determines the layout for every page? It makes more sense to have your layout in a single, external, cacheable file from a standpoint of site maintenance as well as performance.
    Eric J. Bowman, principal
    Bison Systems Corporation coming soon: a new sig!
    I'm just a poor, unfrozen caveman Webmaster. Your new 'standards' frighten, and confuse me...

  36. #36
    Join Date
    Oct 2005
    Location
    Philippines
    Posts
    11
    Hi BigBison! I understand all your trying to say I'm a designer myself and css is a havent sent for me, however there were an instance where i bump into one of its limits.

    I have this webpage with 2 columns, the left column is for the left menu and the right column is for content.

    The left column has a dark gray background and right column has a gray background. The left column has fewer contents compared to the right column so naturally the right column is much longer than the left column. But you want both columns to be on equal length no matter who has fewer content because the web design dictates so. Since the left column and the right column are not the same height and since they have a different background color i obviously ruined my design.

    When you use a table cell both cell will grow dictated by the cell who has more content. If you dont want both cell to grow use table and they will become independent of each other.

    What i'm trying to say is that with this kind of scenario there is no clear cut solutions yet until CSS 3 comes.
    Last edited by fishball; 10-14-2005 at 03:53 PM.
    ASP.NET Frontend Designer

  37. #37
    Join Date
    Jun 2004
    Location
    Northwest Colorado
    Posts
    4,630
    You'll have to get that answer from someone who knows CSS better than I do, there are plenty around here.

    http://positioniseverything.net/piefecta-rigid.html
    http://wellstyled.com/css-2col-fluid-layout.html

    In the meantime, what you're describing sounds like a pretty familiar issue. I don't know if you've seen those web pages or not, but they contain workarounds for this.

  38. #38
    Join Date
    Feb 2005
    Location
    Rochester, MN
    Posts
    916
    Use a scripts on your clients site and see what resolutions the visitors use. It's even included with some statistics programs like awstats.
    Area51.mn VPS, Dedicated & Colocated Servers.
    Area51 Computers Custom Servers & Gaming Systems. (Since 1998)
    NetAffect Email & Web Hosting Services. (Since 1996)
    Quality Systems & Service Since 1996

  39. #39
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Originally posted by Kiamori
    Use a scripts on your clients site and see what resolutions the visitors use. It's even included with some statistics programs like awstats.
    First of all, these scripts have a high failure rate. You can knock off 10% of them due to JS being disabled or not supported. Then, you can lop off an indeterminate number due to browser type and configuration.

    But even if this was acceptable, you'd then need to keep multiple sets of graphics/markup available for those different resolutions.

    The kicker, however, is something I've said many, many times on WHT: screen resolution tells you nothing about how much of the screen is being used by the browser. It is a useless measurement except to give you a maximum indicator of what a screen is capable of displaying.
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  40. #40
    Join Date
    May 2004
    Location
    Lansing, MI, USA
    Posts
    1,548
    Originally posted by the_pm
    First of all, these scripts have a high failure rate. You can knock off 10% of them due to JS being disabled or not supported. Then, you can lop off an indeterminate number due to browser type and configuration.

    But even if this was acceptable, you'd then need to keep multiple sets of graphics/markup available for those different resolutions.

    The kicker, however, is something I've said many, many times on WHT: screen resolution tells you nothing about how much of the screen is being used by the browser. It is a useless measurement except to give you a maximum indicator of what a screen is capable of displaying.
    This is why one records window.availWidth and window.availHeight
    Jacob - WebOnce Technologies - 30 Day 100% Satisfaction Guarantee - Over 5 Years Going Strong!
    Website Hosting, PHP4&5, RoR, MySQL 5.0, Reseller Hosting, Development, and Designs
    Powered By JAM - Professional Website Development - PHP, MySQL, JavaScript, AJAX - Projects Small & Large

Page 1 of 2 12 LastLast

Posting Permissions

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