SitePoint Sponsor

User Tag List

Results 1 to 19 of 19

Thread: Browser Size

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Location
    Scotland
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Browser Size

    Never had to worry about this before because usually I use a fixed size set for 800x600 and everyone else with much bigger resolutions can lump it

    So as I am preparing to convert all my tables sites to css I am going to use the holy grail type 3 column layout and use %'s so that all my visitors get the best use of their screen size.

    Of course I want to ensure that it looks acceptable at any size, minimum being 800x600.

    My question then is how can I see the site as I build it at different resolutions? I dont want to keep changing my own screen resolution every time I want a quick look to ceheck it at 800x600 or 1024x768.

    Any ideas?

  2. #2
    Non-Member
    Join Date
    Jan 2009
    Location
    United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use different computers? it doesnt take long to change your resolution.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,808
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Just resize the browser. As long as your screen resolution is bigger than the size you want the browser to display at it is easy to just resize the browser.

    The most common screen size for accessing the web now is 320x240 so most people will need to do a lot of scrolling to be able to see your page. Of course you could always set up a separate media="handheld' stylesheet for them..
    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="^$">

  4. #4
    Non-Member
    Join Date
    Jan 2009
    Location
    United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I do is completely code in high resolution. Make it look perfect with percents then look in lower resolutions. You could use javascript to determine the screen size then output a different stylesheet.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Location
    Scotland
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Just resize the browser. As long as your screen resolution is bigger than the size you want the browser to display at it is easy to just resize the browser.

    The most common screen size for accessing the web now is 320x240 so most people will need to do a lot of scrolling to be able to see your page. Of course you could always set up a separate media="handheld' stylesheet for them..
    I did think that simply resizing my own browser window was the answer but it sounded a bit thick to be that easy!

    What do you mean by 320x240 being the common size? That seems very small to be common or I am missing something in thinking 800x600 or 1024x768 is still the most common?

  6. #6
    Non-Member
    Join Date
    Jan 2009
    Location
    United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe those are phone resolutions.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,808
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Mobile phones are overtaking computers as the most common device for accessing the internet and that is the most common screen size that they use.

    When viewing pages at higher resolutions fewer people have their browser open full screen as the screen resolution gets higher. Screen resolution is therefore not a true reflection of how the page will look since the browser viewport will often be smaller.

    The best way to get the page to look good at all resolutions is to specify widths in either em or &#37; and then perhaps specify a min-width and max-width to stop things getting too wide or too narow. Only the min-width should ever be specified in pixels.
    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="^$">

  8. #8
    Non-Member
    Join Date
    Jan 2009
    Location
    United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1024x768 is most likely the most used screen resolution...for computers anyway.

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,808
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by adzzman View Post
    1024x768 is most likely the most used screen resolution...for computers anyway.
    Possibly but that has no relevance to the actual size of the browser viewport since with the screen that big there is plenty of room to reduce the browser window and display other things on the screen at the same time - particularly since many web pages use the same stylesheet for both screen and print which limits the content width to 750.

    Also mobile phones are rapidly catching up with computers in terms of what device is used to access the internet so the most common mobile phone screen size is actually the most common browser viewport size (since the viewport on a computer screen is always smaller than the screen resolution even if the browser is displayed full screen due to the browser chrome and any fixed toolbars on the desktop).
    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="^$">

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Location
    Scotland
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So if I understand you correctly Stephen what your effectively saying is that a design needs to be fluid, ideally (I would say) &#37; based in terms of the width/columns so that where a user does have say a 1024x768 and they reduce the size of the open browser window by 50% to have another application displayed by its side the fluidity (if that’s a word) of my site design is such that the site will display and act in the same manner just obviously in a smaller area?

    And for mobile content, either I need to factor that into my design or create a separate style that is activated when a mobile device comes along.

    What would you say is best in terms of mobile content, making the main design fit all or creating a separate style?

    If your looking at 320x240 as you minimum browsing size and are not going to create a separate style then I am thinking your biggest constraints here are using things such as graphics for example. If your using a logo that’s 500x100 then it would have to go or be changed in such a way that it wont wrap or cause scrolling. The method used for the font is obviously important too in order that it scales correctly.

    Your point is well made about mobile content though, I browse sites myself, but admittedly never my own because they don’t look so good, I just assumed few people really bothered with mobile browsing at the moment but it’s a great encouragement for members and visitors if they can.

  11. #11
    SitePoint Addict Belfast75's Avatar
    Join Date
    Oct 2005
    Location
    London, England
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally I use the Web developer add on for FF. It has a browser resize function that changes the size of your browser to a variety of predefined sizes.

    That said, still doesn't account for folk not maximising their screens or using a mobile device.

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Frankly I'm surprised nobody's suggested reading this thread yet... http://www.sitepoint.com/forums/showthread.php?t=463591

  13. #13
    Non-Member
    Join Date
    Jan 2009
    Location
    United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What browser do mobile phones use?

  14. #14
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Depends on the manufacturer. The iPhone uses a mobile version of Safari, Windows Mobile uses a mobile version of Internet Explorer, others use mobile versions of Firefox and Opera (for the record, Opera dominates this market).

  15. #15
    Non-Member
    Join Date
    Jan 2009
    Location
    United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, so is Opera best for phones? Or is it just that phone opera version is the best? I use Firefox. Would you recommend opera? I have never tried it

    ~

  16. #16
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,808
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Opera is fairly similar in the way it works to Firefox except that it has less support for proprietary HTML (it follows the standards more closely) and it doesn't have the ability to install a lot of the extensions that Firefox has (but most of the worthwhile ones are built into the browser in the first place).
    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. #17
    Non-Member
    Join Date
    Jan 2009
    Location
    United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just downloaded Opera and what crappy features are you speaking of? It looks the same as Firefox

  18. #18
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Location
    Scotland
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Who said "crappy" ?

  19. #19
    Non-Member
    Join Date
    Jan 2009
    Location
    United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (but most of the worthwhile ones are built into the browser in the first place).
    Oops. Thought he said worthless. But they are still plenty of good download ones you can get..


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
  •