SitePoint Sponsor

User Tag List

Page 2 of 5 FirstFirst 12345 LastLast
Results 26 to 50 of 115
  1. #26
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Hi Gorgoyle, and welcome to Sitepoint!

    Quote Originally Posted by Gorgoyle9 View Post
    I think it's good to see how many users-visitors got for example 17" monitors or 19" monitors. I guess today most users can afford 19" monitors and have 1280x1024 ofc you wanna get and 17" monitor users with 1024x768! Why this? Cause then is easy to see what width and height your webiste pages need to be!
    According to W3Counter, over 20% of people are browsing with a screen width of 1024px or less. Remember that unless you are targeting a very specific market segment, you're going to have a whole range of people using your site. People on older computers with smaller screens. People on top-end machines with massive screens and very high resolution. People on corporate networks, which are often locked to 1024768 irrespective of anything else. People on netbooks and notebooks with small screens. People on mobiles phones. People with poor eyesight who have to have a much lower screen resolution than you might expect from the monitor size in order to be able to read it.

    And then you have the issue of how much of that screen is taken up by the browser window. You can't rely on people having their browser windows maximised. I don't, on my 12801024 home PC, but I do on my 1024768 laptop and work PC. The larger the screen, the more likely it is that people won't maximise their windows. So screen resolution is an increasingly poor indicator for window size.

    in both cases some web browsers will ask for width in pixels! in your code
    Sorry, but I'm not quite sure what you mean by that. You can specify dimensions in absolute terms (usually px *), relative terms (such as % of parent element) or scalable terms (like em, so that it remains in proportion to the text size). Those will all work in all browsers, although you won't necessarily get an exact facsimile rendering, because different browsers sometimes perform the calculations in slightly different ways.

    * OK, I know that technically pixels are relative measurements rather than absolute, but in terms of web design that's generally an unhelpful distinction. It makes more sense, in terms of the rendered page, to think of them as absolute measurements.

    Also for expandable-resizeable 100% page you need minimum width defined in pixels and/or maximum page width in pixels.
    It's equally sensible to set the max-width in ems rather than pixels readability is affected both by the physical length of the line but also the number of characters per line, so setting the maximum width of the content area to be equivalent to, let's say, about 150 characters, will give a sensible constraint whatever text size is used.

    Also web design code is guided by coordinates of monitor screen from top in pixels and from left in pixels. So using any percentable size need to be related on that screen's coordinates! Pixels again!
    But because you don't know either the size of the window or the size of the text as it appears on the reader's computer, it can often be better to allow their browser to calculate the dimension and position in pixels, from your rules in % or ems.

    Ye! Wrapping your 100% width page looks cool when you watching what you did with your coding skillz, moving your mouse wildly-resizing your browser window and wondering how you awesome are but in praxis you just risk for you site to get wrapped on some widescreen monitor and becoming completely useless for visitor to read content.
    That's where a combination of using max-width constraints and extensive testing comes in. If you work your design out carefully and test it in a wide range of setups, you should ensure that in pretty much any plausible arrangement, the site will display fine and without excessively short or long lines, without wrapping or overlapping problems, etc.

    No, you probably won't get your readers resizing their windows just to see the funky effects as the page rejigs itself to fit into the window, but each of them will see it at a different stage of the process. Your job as a designer is to ensure that your site works for the people who want to read it, not the other way round.

    All design is abt "Storytelling". You need "to tell the story" to user... and if you guide by that you wont make mistakes. This sentence is maybe too abstract here but it works when you design and think of it. It can help a lot. Ppl like stories!
    This little pixel went to market, this little pixel stayed at home, this little pixel had rgb(181,88,72) and this little pixel had #000.

    1 thing more is webpage height! That may vary form page to page on same website but for most friendly user experience of visiting some site is to height of page be abt height of user screen + one half of it. To user not have to scroll a lot..again that depends of your site content but also to many short pages "stored" in "pages numbers" buttons or in "next, next page" buttons wont be good for user friendly design. Solution is in finding right measure of both methods and good organizing of website content.
    It's good to remember the 'height' aspect of the page and to ensure that the key content is near the top so that people can see it straight away and don't have to scroll to find it. You need to give them enough juicy stuff at the top to hook them in so that they do then bother to scroll down if the first screenful doesn't convince them that the page is worth reading then they won't read on. That said, people are now perfectly used to scrolling down a page, and now that scroll-wheel mouses and scrolling trackpads are common, this is less of an issue than it was when the web first appeared.

    The balance between scrolling and pagination (having to click 'next' to go to the next page to continue the article/list of products, etc) is a difficult one. In general, I prefer to have everything all in one page, because once it's loaded it's then done, and I don't have to wait for any more page loads. I can search the entire page for text. I can easily save or print the page if I want to. On the other hand, if I was on a slow connection, I wouldn't particularly want to have to wait while the entire page loaded if I was only interested in the first little bit. That's a particular issue for any kind of search facility (including shopping carts) where you would expect most people to find what they were looking for in the first few results it isn't necessarily helpful then to serve up a page listing a hundred results if you know that most people aren't going to look beyond #10. Part of that comes down to the context and design of each individual site. If you can allow users to choose the number of results displayed, that can give the most flexibility and the best of both worlds.

  2. #27
    SitePoint Enthusiast
    Join Date
    Sep 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In general, I prefer to have everything all in one page, because once it's loaded it's then done, and I don't have to wait for any more page loads. I can search the entire page for text. I can easily save or print the page if I want to.
    Agree! I think that Navigation of menus and website buttons and options if it's on "Level 1" that is a ideal for some navigation system. All on "1 page" as you said and on "1 click far" from user to read or look.

    Abt 100% site width:

    Ye ofc that website will fit in most screen or browser window sizes but that is possible only if website page content is "generic" in some level! Where you got plain picture and plain part of some text. Where resizing not much affects on visual impression of designs on page. If you got more graphical design dependable graphic with strong bounded visual impression then if you implement resize of web page content you will got different visual impression results of that design on webpage. For example in design: Element A - Circle and Element B - Quad not giving same visual impression if Element A is UP and Element B is DOWN or vice-versa!

    So if Original Poster ask what dimension for website width? I'll go for fixed width in most cases.

  3. #28
    Non-Member Rauny's Avatar
    Join Date
    Sep 2011
    Location
    Chandigarh
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In my point of viewthe best Width should be set based on Percentages. All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content.

  4. #29
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by WorldNews View Post
    Hello,

    What do you suggest as being the best Width for a Web site?
    That is do you think that the best Width should be set based on Percentages or Pixels?

    And if Pixels, then what is the optimum Width so that the Web site looks OK across most display devices, which means requires NO scrolling to see the whole of the Web site content.

    To me it seems Width set based on Percentages would be best, since then one can be sure that always the page does not scroll require, but then one looses control over the exact display of things that require set size such as images, etc.

    Looking forward to your thoughts.

    Regards,
    960px.

  5. #30
    SitePoint Member RonnanR's Avatar
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use for text sites 100% and for sites with very specific graphics - 920px

  6. #31
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by gauvion View Post
    960px.
    Is too wide to fit in the web browser when you have it filling exactly half of a HD monitor (using window/arrow key). Also doesn't fit on mobile devices or on paper if you try to print it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #32
    SitePoint Member
    Join Date
    Sep 2011
    Location
    Wisconsin
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    .

    I think really good solution is "Responsive Web Design".
    It means the website will respond according to the medium that is being used to view it.
    So there are few design of the site, and it changes depend on browser width.
    Here are few examples (Try to change browser width):

    http://www.glitch.com/
    http://dustinsenos.com/

  8. #33
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by IdGraphicWorld View Post
    I think really good solution is "Responsive Web Design".
    It means the website will respond according to the medium that is being used to view it.
    So there are few design of the site, and it changes depend on browser width.
    Here are few examples (Try to change browser width):

    http://www.glitch.com/
    http://dustinsenos.com/
    Yes and no. For a start, there's a big, um, glitch in the Glitch website, which is that it doesn't responsively adapt until way, way too late. As I narrow my window looking at that site, I start to get a horizontal scrollbar, still getting a horizontal scrollbar, and it isn't until the window gets down to about 50% of the width of the page that it snaps down to the next size. That isn't great – responsive design should ensure that the page fits within the window at any size (OK, when you get down to the width of a pencil, that might start to get tricky, but not at 500px).

    In theory, responsive design is great, although if you aren't careful, it can be confusing for readers if the designs don't flow well from one to the next. There are some other technical issues with it – we've already got a big discussion on it going on here: Arguments against responsive adaptive web design.

  9. #34
    SitePoint Guru dojo's Avatar
    Join Date
    Feb 2005
    Location
    Romania
    Posts
    899
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    100% on my 1600 wide monitors is HORRIBLE. No matter how smart you code it, it's too wide for me to be able to read the text and not get a headache. So I design on 980 pixels so far. It can accommodate most resolutions and it doesn't look that bad.

  10. #35
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dojo View Post
    So I design on 980 pixels so far. It can accommodate most resolutions and it doesn't look that bad.
    That width DOES NOT accomodate most resolutions. On a standard 1920 wide screen with window-arrowkey pressed so as to display the browser in half the width the viewport is only 958 pixels wide. On your 1600px screen it would only be 798 pixels wide.

    The whole point in having a higher screen resolution is to be able to view more than one thing at a time - which is why Windows 7 introduced a way to make windows fill half the screen.

    Anyone who thinks 100% is too wide simply has their browser set to be wider than they should have it. The fix is to reduce your browser width until the page is no longer too wide.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #36
    SitePoint Member
    Join Date
    Sep 2006
    Location
    Thessaloniki, Greece
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand you need to start somewhere....

    Actually there are some tecnhics and methodologies regarding the decision of the "width" of your web site.

    For example 960px refers to a "fixed width layout" that is accessible through a sceen resolution or browser width that is (at least) 1024x768 pixels

    You can go for a "liquid or elastic" layout which means you can do the whole 100% some members talk about in this thread.

    Html5 and Css3 brought "CSS3 media queries" that mean you can even target ipad resolutions or even mobile.

    You can go for the "Responsive Web Design" which is big this time of the year.

    Here are some resources I think you'll find useful when you're starting your design (and planning for the future):

    -Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? (http://coding.smashingmagazine.com/2...t-one-for-you/) - Extra resources on the end of the article.
    -Responsive Web Design - Introduction at A List Apart (http://www.alistapart.com/articles/r...ve-web-design/)
    -The 960 grid system (http://960.gs/)
    -The 1140 grid system - Fluid down to mobile (http://cssgrid.net/)

    Hope this helps!

  12. #37
    SitePoint Enthusiast Bhjorth's Avatar
    Join Date
    Mar 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I find it easier to design my websites in different formats. First I make a design in the width I fell the contents of the website needs to give a satisfactory result.(Meaning how much information I want on a page decides how wide it is).

    But ofc as mentioned there are people with smaller resolution and some split there screens in half and they also want to have a good browser experience.

    So I have started lately to create different CSS files for different widths , I know that this is maybe not the best way, but I just don't like to give my site the dynamic design of being able to fly everywere.

    a example of what I am talking about can be found here

  13. #38
    SitePoint Member
    Join Date
    Sep 2006
    Location
    Thessaloniki, Greece
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bhjorth View Post
    I find it easier to design my websites in different formats. First I make a design in the width I fell the contents of the website needs to give a satisfactory result.(Meaning how much information I want on a page decides how wide it is).

    But ofc as mentioned there are people with smaller resolution and some split there screens in half and they also want to have a good browser experience.

    So I have started lately to create different CSS files for different widths , I know that this is maybe not the best way, but I just don't like to give my site the dynamic design of being able to fly everywere.

    a example of what I am talking about can be found here
    hmmm interesting. what's the pros and cons of using this technique versus let's say the technique that is described in the The 1140 grid system - Fluid down to mobile (http://cssgrid.net/)?

  14. #39
    SitePoint Member
    Join Date
    Sep 2011
    Location
    India
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Keeping it under 800 will ensure that it displays properly on older monitors and particularly, projectors. Unlike CRT monitors, LC projectors remain expensive, so a lot of people have been reluctant to upgrade to XGA or higher resolutions. You can use the Javascript Screen properties Screen.height and Screen.width to figure out what resolution your client's system is running.

  15. #40
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use 980px fixed. Used to do 750px, but since 600x800 monitors are almost extinct, 980px looks good on most resolutions as far as I have seen.
    To all the guys advocating 100%, which kind of sites do you mean? I'm not saying its bad, I just haven't seen many 100% width websites these days except for maybe web forums. I'd just be interested to see how designers are making such a layout work with today's screen resolutions.

  16. #41
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by BuddyH View Post
    I use 980px fixed.
    Which is way too wide for a browser set to fill half the width of an HD screen - which will probably end up being the most popular size in the future since an HD screen is wide enough to display two windows side by side and Windows 7 provide the Window-arrow key commands to easily resize windows to fill exactly half the screen.

    Also with so many people using screens of around 400 pixels in their larger direction your page will be even less usable for that other popular size range.

    Also from your anser you are getting screen size and browser viewport size mixed up. As screen sizes get bigger the likelihood of the browser being set to only fill part of the screen gets higher and higher. An HD screen is way too wide to display a web page without wasting lots of space or making the page unreadable so setting the browser to exactly half the width is the obvious option for people with an HD screen and Windows 7.

    The correct answer for ideal page width was given right at the start of the thread as 100% - you ought to think about making your site friendlier to the 99% of your visitors who currently would have a horizontal scrollbar by switching to that width instead.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  17. #42
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess there will always be something I haven't thought of. When I switched from 750 to 980, I just assumed the majority will be viewing from a laptop or a desktop.
    I guess now with ipads & mobile devices the rules change again, but thus far I've had no problems or complaints. I just don't honestly think I am good enough a designer to make a site work with a 100% width without having text elements in particular look ridiculous on the wider screens.

  18. #43
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by BuddyH View Post
    I guess now with ipads & mobile devices the rules change again, but thus far I've had no problems or complaints.
    Most people won't complain, they'll just go elsewhere.

    I just don't honestly think I am good enough a designer to make a site work with a 100% width without having text elements in particular look ridiculous on the wider screens.
    The key is to set a max-width on the outer container. You don't want a site that expands to infinity and beyond, and it's perfectly reasonable to constrain it to, let's say, 1200px or 100em.

  19. #44
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    The key is to set a max-width on the outer container. You don't want a site that expands to infinity and beyond, and it's perfectly reasonable to constrain it to, let's say, 1200px or 100em.
    Thank you, best thing I've read all week.

  20. #45
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    let's say, 1200px or 100em.
    You know at default font size at 96dpi 100em is 1600px, and at 120dpi that's 2000px, right?

    I generally use 85%/0.85em as the default font size for arial -- even then 100em is 1360px.

    Usually I declare this in most of my screen layouts these days:

    Code:
    body {
    	font:normal 85%/150% arial,helvetica,sans-serif;
    }
    
    #pageWrapper {
    	width:95%;
    	min-width:752px;
    	max-width:68em;
    	margin:0 auto;
    }
    Perfect mix of semi fluid with dynamic scaling. Of course, my smallscreen.css media="only screen and (max-width:751px)" goes thus:

    Code:
    #pageWrapper {
    	width:100%;
    	min-width:128px;
    }
    and is usually moronically simple -- simply stripping out columns and turning all leading/trailing plates into normal plates.

    But yeah, fixed width? Miserable /FAIL/ at web design and as mentioned already, a cop-out by people trying to cover up either their lack of skill or inability to kick the PSD jockey square in the junk with their non-viable for web deployment "But I can do it in photoshop" idiocy.

    Though I hate the TERM "responsive design" -- since I've been doing it for ten years without needing any goofy blasted name on it. But people LOVE slapping new names on old concepts.

  21. #46
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is some more tips for you:
    for 1024x768 resolution, use a width less than 980 pixels
    for 800x600 resolution, use a width less than 760 pixels
    for printing, use a width less than 560 pixels

    enjoy buddy.

  22. #47
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,770
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    There are an infinite amount of possibilities, especially as more people are using handheld mobile devices. What are you going to do, media queries for every single type of mobile device out there and each window size and a bunch of different CSS tweaks to accommodate what someone may use?

    A designer has to draw a line somewhere. But where is the best place for that line? Hmmm... I guess the best place is where the client or the web designer wants it to be. You can't be all things to all people. Don't even bother trying.

    Quote Originally Posted by Stevie D View Post
    Most people won't complain, they'll just go elsewhere.
    I highly doubt most people will leave a valuable resource because a webpage is too wide (or narrow) for them. And those using less than full-sized windows because of big monitors will just stretch the window to fit the page. Expecting the entire internet to restyle their sites because you use two windows side-by-side and only have a maximum of 958px per window is absurd.

  23. #48
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cheesedude View Post
    especially as more people are using handheld mobile devices.
    you can always go to appgeyser.com as that turns the website into an app and supplies the QR code aswell.

  24. #49
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cheesedude View Post
    I highly doubt most people will leave a valuable resource because a webpage is too wide (or narrow) for them.
    I do it all the time -- this is REALLY true when people declare fonts in PX; there are usually plenty of other "valuable resources" to get the exact same information from.

    Part of why I'm in the habit on search pages of middle clicking on the first six results, and 90% of the time the first three are more of a pain in the ass to use from the effects of piss poor layout, "but I can do it in photoshop" asshattery, page loads that take longer than it takes for me to give up on the page, and miracle of miracles if it does load in a reasonable amount of time it's either a crappy little stripe on my desktop, too wide on my netbook, with idiotically undersized fonts declared in PX... Close the tab, check the next one.

  25. #50
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    There is only one thing that it makes sense to define using px. That is the width of borders where you want them to be as thin as possible and so define them as 1px. For your page to work properly for as many visitors as possible you shouldn't use px for anything else at all.

    If you want to set your page width based on the size of the text (an elastic layout) then define the width in em. If you want to define it based on the browser viewport size (a fluid layout) then define it in %. For the best of both define the width as a % and max-width in em.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •