SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 63
  1. #26
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stevie D View Post
    A good liquid design will be constrained by a max-width, so that it doesn't continue to expand ad infinitum, but is capped at a suitable maximum size, usually about 1200px, to ensure readable line lengths. That way people with the widest screens don't suffer by having exceptionally long lines, people with wider screens benefit from making full use of them, and people with narrower screens benefit from the website fitting onto them.

    In other words, everybody wins. All it takes is a modicum of effort from the designer, and it is usually straightforward to achieve.
    OK, I will do my next project like this. So far I have been using fixed widths with a parent div holding an expanding background. I thought max width was not fully supported. I remember using it in the past, I think it's IE that has a problem with it.

  2. #27
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Internet Explorer 6 does not support max-width, however for those users the design will simply span the entire width of the page rather than being constrained by circumstance. I still recommend the use of it even with the lack of IE6 support because at least the site will still degrade gracefully for sites with no support.

  3. #28
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,893
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Sega View Post
    OK, I will do my next project like this. So far I have been using fixed widths with a parent div holding an expanding background. I thought max width was not fully supported. I remember using it in the past, I think it's IE that has a problem with it.
    IE6 didn't support max-width, but IE7+ does.

    You can bludgeon IE6 into behaving properly with CSS expressions, but unless you know you have a high proportion of IE6 users, it probably isn't worth the effort, easier just set a width value for IE6 and max- and min- widths for Real Browsers.

  4. #29
    SitePoint Member interactivewebs's Avatar
    Join Date
    Jul 2009
    Location
    Sydney Australia
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One of the best ways to work out what is best for you clients is to use Google Analytics on your existing site, then look at the details about resolutions. It will be clear then as to what will work best for you.

  5. #30
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by interactivewebs View Post
    One of the best ways to work out what is best for you clients is to use Google Analytics on your existing site, then look at the details about resolutions. It will be clear then as to what will work best for you.
    1. Only if all those users surf with their browser window maximised. That's increasingly unlikely the larger the monitor size.
    2. Use a liquid or liquid/elastic design and you don't have to do that.
    Birnam wood is come to Dunsinane

  6. #31
    SitePoint Member interactivewebs's Avatar
    Join Date
    Jul 2009
    Location
    Sydney Australia
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. That's not accurate, it will tell you the screen size and you can be informed about their abilities.
    2. Elastic design... sort of... depending on what you use, the high quality effects of 2.0 style sites may well be lost.

  7. #32
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pro Canvas is a Photoshop plugin designed to enhance and replace the existing Canvas command. While providing you with all of the standard Canvas options, Pro Canvas also adds a powerful new Relative mode that allows you to add or subtract from each side independently and simultaneously.

  8. #33
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    1. That's not accurate, it will tell you the screen size and you can be informed about their abilities.
    There's no way you can ever tell what I have my browser set to. I imagine you could figure it out with javascript, but those of us who don't trust you enough to let you execute funky fancy scripts on OUR machines are not only missed by Analytics (unless they have a default image and hope you call the image with a GET), but you cannot measure our browser sizes. I block JS like many others.

    Now I browse full-screen, and my other applications just sit over the browser (like Gimp, my text editor, and my server folders, all sit over the 100% wide browser. After all, any one of them can be accessed by clicking on a tab at the bottom, so never a problem there). But plenty of people don't, and there are those like my colleague who has not one, but TWO 22" monitors and they act like one. I remember deathshadow had three monitors all strung together... imagine what your site would look like in that!

    For the most part I set my pages in container who are min-width'd in px (mostly so the page can double for printing without necessarily a print.css) at 768 or 750px. It's not 100% safe, who knows what funky margins or extra browser chrome someone might have, but then their effective screen size or usable paper is pretty small. Scrollbars for the win. I don't mind scrollbars if I can sit and read all the important content without using it (if a sidebar is offscreen, no biggie). I was recently at a Javascript tuts page (wish I could find it again : ( where I swear they must have made the container width like 4000px because I had to scroll on 17" for each and every sentence! That's the sin, making people scroll to read sentences.
    My max-widths are usually somewhere around 990px-1200px, and sometimes I set this in em and sometimes not. On ginormous screens this will still look too small, but I haven't done a four-column page yet, so whatever.

    IE6 used to get CSS exrpressions but that screwed up a few of my testing softwares (the expression would stop them in their tracks and I was always commenting them out), so now IE6 users get stuck with blog-width (768 or 750 depending on gutters). Tough for them. Though I should consider doing em's for what is approx 768px so text-resizing is more doable.

    Quote Originally Posted by StevieD
    It should certainly accommodate a viewport of 750px wide without horizontal scrolling.
    I still agree with this, for now. While anyone can tell me "but you also have mobile users and they gots 100px screens so where do you stop?", well I've been ignoring them for a while and go with computer users with the smallest popular screens/screen resolutions (I still remember how Mike Cherim's daughter, with 20/20 vision, preferred 600*800 resolution on their large monitor because it "makes the text bigger and easier to read"). I probably will start caring about mobiles when they're all or mostly in agreements about whether they follow the screen css or the handheld css. Too many of them explicitly ignore the handheld.css... I'm not fighting that kind of stubborness.

    For a site I'm doing right now, I'd like the page to be able to collapse into something mobile-friendly by itself. Dunno if that's possibly with my current setup but that would be nice. It would be liquid in layout on the minimum side (no minimums) but only elastic/flexi on the upper ranges (has a max-width).

    The one nice thing about static widths is, doing things like image-based rounded corners and the such let you use fewer images and fewer sandbags. Drop shadows on the main page section go from one container to two just by letting that main page section grow in width. I can imagine sites where a fixed layout makes more sense for them. They're likely targeting a specific demographic anyway.

  9. #34
    SitePoint Member
    Join Date
    Apr 2009
    Location
    Vietnam
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is really useful topic, now I just understand why use EM and %. Thanks.

  10. #35
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Ideally, a design should be adaptable to a range of screen sizes. It should certainly accommodate a viewport of 750px wide without horizontal scrolling. It is unlikely that you would want it to stretch wider than about 1200px, because it gets harder to read lines that long at a 'normal' font size.

    A significant proportion of people do still use 800600 screen resolutions. A significant proportion of people have sidebars on the browser. A significant proportion of people don't want to maximise their windows. And nobody wants a horizontal scrollbar!

    Unfortunately, there are far too many people peddling the myth that a fixed or minimum width of 960px (or greater) is acceptable. That's fine - if it is genuinely impossible to design the website in such a way that it resizes to a smaller viewport, and if you truly believe that the aesthetic design of your site is more important than the comfort and convenience of your users, then go for a wide fixed width.

    On the other hand, if you give the slightest consideration to the people using your website, you will design it so that it will fit on a 750px wide screen.
    If your website carries ads (or has to carry ads), and you set it up for a 750px wide screen, nobody benefits.

  11. #36
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    If your website carries ads (or has to carry ads), and you set it up for a 750px wide screen, nobody benefits.
    If it's one of those standard ad sidebars, yeah. If you are specifically writing to accomodate lowest-denominator viewers (as StevieD suggests we should), then a different ad scheme is necessary. Sidebars on blog-widthed pages suck either way. Ever see Zeldman's page? Or anything on Blogger? Now do a text-enlarge or 3. You get like three words per line, and after you've scrolled down enough to be further down than the sidebar reaches, that little strip gets really annoying... it could have been much wider if there hadn't been a sidebar.

  12. #37
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,893
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by XLCowBoy View Post
    If your website carries ads (or has to carry ads), and you set it up for a 750px wide screen, nobody benefits.
    I'm not saying that you should set it up for a 750px wide screen. I'm saying you should set it up for a screen that might be down to 750px or might be 1280px or higher. I'm not sure what you mean by "nobody benefits" ... I have ads on my website, and it works fine at smaller screen sizes - I have a vertical bar down the right-hand side. Yes, at narrower widths, it does take up a bigger chunk of the page, but that's an acceptable compromise, and much better than having content disappearing off the right.

    OK, I've just thought of something, wide ad blocks are often designed around a width of 768px - if that was what you meant, that's fine, set your min-width to accommodate that if that's the size of ad block you use. But it has to be less than 800px, to accommodate people with 800px screens, minus the browser chrome. I would say it's reasonable to assume that people with screens that size are going to maximise their windows, but you don't get quite the full 800px width because of scrollbars etc.

  13. #38
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,893
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    There's no way you can ever tell what I have my browser set to.
    Exactly. You can know my screen size, but that won't tell you my browser window size. You can know my browser window size but that won't tell you my viewport size. Hint: in Opera, tabs don't have to be maximised within the browser window.

    I still agree with this, for now. While anyone can tell me "but you also have mobile users and they gots 100px screens so where do you stop?", well I've been ignoring them for a while and go with computer users with the smallest popular screens/screen resolutions (I still remember how Mike Cherim's daughter, with 20/20 vision, preferred 600*800 resolution on their large monitor because it "makes the text bigger and easier to read"). I probably will start caring about mobiles when they're all or mostly in agreements about whether they follow the screen css or the handheld css. Too many of them explicitly ignore the handheld.css... I'm not fighting that kind of stubborness.
    I agree that any handheld or small-screen device that ignores handheld.css is not worth concerning yourself about. If the makers are that confident that the device can handle full size pages properly then good for them, and I'll assume that it can. Gadgets like the iPhone generally do a pretty good job of this, and can accommodate sites designed for 800px without too much trouble, but I don't know how widespread that practice is. Where phones don't have that capability, they should accept that with good grace and implement minimal design features to make best use of the small screen.

  14. #39
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    OperaMini seems to do pretty well with it too. But nowadays my sites mostly have a min-width that's just much too wide for most mobiles... and I just haven't tried making handheld.css. I'd much rather that the site can deal with a 100px-wide screen if need be (sidebars dropping under and lining up) but with long Dutch words and things like boxes with large-em widths, I can't usually do this.

    They're a very different medium and it's just hard to accommodate them without separate sheets... kinda like I can't watch TV on my radio.

  15. #40
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    OK, I've just thought of something, wide ad blocks are often designed around a width of 768px - if that was what you meant, that's fine, set your min-width to accommodate that if that's the size of ad block you use. But it has to be less than 800px, to accommodate people with 800px screens, minus the browser chrome. I would say it's reasonable to assume that people with screens that size are going to maximise their windows, but you don't get quite the full 800px width because of scrollbars etc.
    To be honest... I'm not even sure why I'm debating. However, I don't really feel that sites should be "designed to be small", but more of a "designed for most people, but you 800px people can use it too."

  16. #41
    SitePoint Guru risoknop's Avatar
    Join Date
    Feb 2008
    Location
    end($world)
    Posts
    834
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Imho it doesn't make sense to define the canvas width in % or ems, it isn't effective and will cost you many headaches with cross-browser compatibility.

    On the other hand, what I recommend is to have 2 versions of the website: one fixed width (760-960px is recommended range) and one smaller mobile version (about 300-400px wide). This will save you lots of time.

    Look for example at Opera website, there are two versions: big and mobile.

  17. #42
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by risoknop View Post
    Imho it doesn't make sense to define the canvas width in % or ems, it isn't effective and will cost you many headaches with cross-browser compatibility.
    You must be doing something wrong then, I have been defining the canvas in EM's and percentages for years and I have never encountered any cross browser issues which couldn't be resolved (and no I didn't use hacks, filters or conditional comments). Having two versions of the same website is counter-intuitive, its basically sending us back to the days of IE VS Netscape where we have to make two websites just to get things looking right, personally I prefer making designs gracefully degrade so that smaller screens and larger screens can work around the issues, you just need to know how to approach it.

  18. #43
    SitePoint Addict agentforte's Avatar
    Join Date
    May 2007
    Location
    Toronto, ON, Canada
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might want to consider designing for hand held devices, once MIMO technology is main stream, your smart phone will have a faster internet connection than your home.

    - Consider the content (text or images or a combination?)

    - You can use a fluid width and set a max-width on paragraphs.

    - If you design fluid (all widths in %) then it is easy to make the entire site fixed for IE6 by using a fixed width ONLY on the outer most "container" div, i.e. use a pixel width (760px). This can be added with a conditional stylesheet (this is not a hack).


    Fluid designs work well if have images, or "boxes" of text that have a fixed/elastic width (pixels or em). If you set the images or "boxes" to float left, then you can shrink the screen to see them vertically, or stretch the screen to see them side by side.

  19. #44
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by interactivewebs View Post
    1. That's not accurate, it will tell you the screen size and you can be informed about their abilities.
    That's what I said. You will get the screen size, which is totally irrelevant. What you'd need to know would be the dimensions of the browser window's content area. I can have a 4000x3000 px monitor with a 600x400 px browser window on it. Thus, what I said was quite accurate.

    Quote Originally Posted by risoknop View Post
    Imho it doesn't make sense to define the canvas width in % or ems, it isn't effective and will cost you many headaches with cross-browser compatibility.
    Isn't effective? Why?

    And cross-browser compatibility might be an issue if you design web pages as if they were printed brochures and expect pixel perfection. But if you understand the web as a separate medium, it doesn't pose a problem.

    Specifying the width of a design in pixels may make it easier for you, but much more problematic for your visitors. Especially those who need to crank up the font size in order to see properly – and I'm not necessarily talking about users who are almost blind here; being middle-aged can be quite enough reason. All of a sudden your pixel-perfect design falls apart like a house of cards when text starts overflowing columns.

    As a web designer you need to understand that the user is in control; you can merely supply hints as how you'd like things to be rendered. It's better to leave print design thinking to print designers, and learn how to create and implement web designs that adapt to the user's preferences. There may be a learning curve for you, but your users will thank you for it.
    Birnam wood is come to Dunsinane

  20. #45
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    True Tommy though I would say which design you/the designer picked influences this. Single-column and column+sidebar setups seem to be pretty easy to make fluid. When you start using more columns, it gets trickier (I've seen a pretty cool enhanced-with-JS version called McSwitchy from deathshadow where you get I think 3 or 4 cols if your browser is wide enough, otherwise you get two and the third/fourth columns drop down and expand fully... was really nice to see). But I do think the basic setup one chooses affects what's easy. Also someone's got to think about what they want to do about rounded corners and extra borders etc. (they should be anyway of course)

    agentforte hey thanks for mentioning MIMO, I hadn't run across it since my electronics days (and that was only for real radio lawlz). There's some interesting stuff going on there!

    I also was reminded of a technique of Paul's, as it was repeated on a site I just saw on Smashing Mag (CSS tips) with resizable HTML <img>s (the drawback being, you're making the user load larger images than maybe what you'd otherwise use) and setting img to
    max-width: 100%;
    which, depending on your OS and browser, can scale nicely. I've seen some of our sites on mobiles and it looks nice to clean-looking "thumbs" of our images. One of these "mobiles" was a hand-held playstation thingie (no clue what the browser is, it's made by "Oregen" I think and it had the same inline-block bug as older Gecko but didn't react to -moz commands).

    MM, that's another reason I don't worry myself too much about mobiles. I should be able to expect things like display: inline-block work, and without doing the trick James told us about (going into mobile stores and asking the sales folks there to demonstrate the internet capabilities of all the phones there, clever), testing in all possible mobiles and then finding any possible hacks is I think more work than many of us feel like bothering.

  21. #46
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    True Tommy though I would say which design you/the designer picked influences this. Single-column and column+sidebar setups seem to be pretty easy to make fluid. When you start using more columns, it gets trickier (I've seen a pretty cool enhanced-with-JS version called McSwitchy from deathshadow where you get I think 3 or 4 cols if your browser is wide enough, otherwise you get two and the third/fourth columns drop down and expand fully... was really nice to see).
    It depends on the desired behaviour, but multiple columns doesn't have to be a problem (other than that they require a large minimum width). The home page of our office intranet is a four-column constrained liquid/elastic hybrid and doesn't require any JavaScript to work even in IE7. It uses elastic images to prevent overflow, too. That technique isn't new; I used it on my blog 5 years ago.
    Birnam wood is come to Dunsinane

  22. #47
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I'm wrestling with a side-bar/main setup right now actually... the original design had basically just one column and I didn't have to worry about anything, mobile or not... but the sidebar is a better idea. Just now have to wrangle the layout. Maybe it's not a good idea to have everything in some differing type of elasticity lawlz...

    I'd like to see the site, Tommy, or one with that same layout/CSS, even a dummy. It might do what I'm after.

  23. #48
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's an intranet, so it's not publicly accessible, I'm afraid.
    Birnam wood is come to Dunsinane

  24. #49
    SitePoint Zealot Bannaz's Avatar
    Join Date
    Apr 2002
    Location
    United Kingdom
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We used to stick to a set size, but now have finally updated our website to become 100% screen width.
    Bannaz - Flash Banner Design
    █ Leading designers in online advertising.
    www.bannaz.com

  25. #50
    SitePoint Enthusiast eneza's Avatar
    Join Date
    Feb 2009
    Location
    Philippines
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't imagine a simple question will be just so informative like this, thanks guys for the replies. If you still want to add please do so.

    Thanks Sitepoint


Tags for this Thread

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
  •