Resolution Differences

  • Is there any way to resolve how different the pages will look at 800×600 versus 1024×768 (hope I remembered those right, I always forget…) I build my site at home where we are at 1024, then I check it at work, where I am at 800 and it looks horrible. I am trying to use for photos and half of the image ends up under the menu. If I tell it to only show so wide to look right on 800, then it will be small on 1024… is there any way to make it work on both?

Viewing 12 replies - 1 through 12 (of 12 total)

  • thats why god made percentages.
    or margins i believe! ??

    Using Mozilla Firefox or the Mozilla suite, you can use the WebDev extension to test your site at different resolutions.
    Depending on how you use CSS and tables, your page should resize OK for your “target” resolutions. You can detect your visitor’s resolution with various tools and then decide if you’ll make a different design for each of them… These days I would say making a “mobile” version of your site is not a bad idea either, so keep those in mind. Check Alex King’s mobile hack for WP.

    oriecat,
    What you are basically talking about here is called a fluid design. It means that your pages will stretch in both directions to fit a window size, or, conversely, shrink to fit a smaller window size, and still look good. In order to do this, the best way to approach it is to design it to look best in a smaller window, and then worry about how it looks in the larger window.
    You might try looking at A List Apart for many articles and discussions on fluid designs. This is only one resource that is available.
    My suggestion is that you start with a design that fits nicely into an 800×600 window size, and leave it at that. Once you have “perfected” it, that is, get it going and working exactly as you wish it to, then start to experiment with more dynamic layouts. The one thing about fluid layouts for newer web designers, is that it brings a lot of extra issues to consider. Let’s not even get into the fact that someone viewing your page may think the text is too small, and will manually re-size it. Then what happens?
    I’d also visit Community MX for a whole slew of great articles all about web design, CSS, PHP and anything else you can think of. They have many free articles, and you can purchase individual articles for a small fee, or even subsribe to the site and have access to everything. They have an excellent support forum as well.
    A bit of reading and research will help you define your goal for your site, and you can have a better idea of the kind of work involved to get it to where you want.
    I hope this has helped you. Don’t forget to have fun! ??
    Craig.

    Apart from the design and build issues it may be useful for you to have a tool that lets you observe your work at different resolutions. Tanteks favelets are fab but I have temporarily misplaced the url. Google should do it. Incidentally I do not want to throw a spanner in the works but stop design and Eric Meyer have just made an unannounced and so far unexplained return to fixed width. Zeldman is holding out but he would!

    Thread Starter oriecat

    (@oriecat)

    Thank you! ?? I have so much to learn…

    I, for one, appreciate sites that use either fixed width or hybrid layouts (fluid to a point, to accomodate smaller screen sizes, but fixed at a max width). I find these sites infinitely easier to read. That being said, it all depends on your content. If you have a three column layout, as long as the content area is a respectible width, then I have no problem.
    Since I run at a high resolution (at the very least 1280×1024, but usually higher), even though I don’t have my browser full screen, it’s still pretty wide. Completely fluid sites force me to shrink my browser window or else the lines of text are so long they become hard to read (and look really stupid, also). There’s nothing worse than a *really* stretched out site with just a short bit of content. Looks ridiculous.
    My 2-cents.

    tcervo: no one can seriously argue. Min & Max though are different issues. Max Width is unsupported in certain commonly used browsers. There is a hack but it is very new. Like a few days. But heck are you in a cinema? there ??

    https://www.anybrowser.com/ScreenSizeTest.html
    I’m using this for a site I’m having to redo..

    https://www.favelets.com for Tantek’s.

    I always use Browse Master. ??

    If you use Firefox, there is the Web Developer’s toolbar which will re-size your browser window for you automagically. Just to clarify, resize does not mean that you change resolutions. The pixels are the same size, it’s just that the boundaries of the browser window shrink down to only show you 800 x 600 rather than 1024 x 768. Anyways, that’s just a little nit-pick.
    Tantek’s favelets are great, for using the Redmond “browser.” ??

    Try browsercam, I use it to test my site for different browsers. Not free though.
    https://www.browsercam.com
    a little off topic.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Resolution Differences’ is closed to new replies.