Website Resolution

Discussion in 'HTML & Website Design' started by crigurfingur, Feb 9, 2009.

  1. #1
    Hello:

    Today at school, I went to my website on a Mac OS and used (safari browser). I noticed that my site only took up half the page. It was all the way into the left corner of the web browser and other side blank (except for my background color) . On Windows XP (IE & FF) it looks fine but on MACs with bigger screens it only takes up half the page.

    How do I "WORK" it out, so it's look right on most screens?

    This is the site: animespot.co.cc if you want to examine the code just click view>>page source in Firefox.
     
    crigurfingur, Feb 9, 2009 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    As a rule you don't 'fix it' per se, as with the dozens of different potential screen sizes and resolutions you will drive yourself nuts, especially if you are just starting out.

    It does raise some questions though - WHAT browser under XP? WHAT browser under OSX? WHAT website? Without seeing your layout or code anything we say probably isn't going to help a whole lot.

    There are multiple approaches to dealing with the different screen sizes:

    First and foremost is the sleazeball approach of fixing the width... I consider it a sleazeball shortcut since on narrow screens (below whatever width you chooose) the user will be forced to scroll sideways, while on really large screens you end up with half the display OR MORE as unused. Still, this remains (much to my disgust) standard practice, joyous since on my workstation with the 1920x1200 widescreen displays those types of sites end up a crappy little stripe, while on my first gen netbook any site targeting 1024 or wider ends up too wide.

    The second approach is to make a fully fluid layout. This is my preferred approach as you design your layout to always make use of the full screen width. This method does have issues though as on extremely narrow displays unless you put in some precautions the layout can break down badly, and on really wide screens you will get end users complaining about the lines being too long - These problems can be mitigated by re-arranging your layout or number of columns to make better use of the screen, though that can tie you to javascript - meaning you also have to plan for a 'what if' they have no .js. Auto-adjusting layouts that change the number of columns or content placement based on width using javascript are called "McSwitchy" by most people - most McSwitchy layouts are a bit too complicated for their own good in how their javascript works... I've got my own technique I call "quickswitchy" which all the javascript does is change one class on the outermost container and/or body as appropriate - I can then use that class to target elements in the page as needed for re-arranging. (instead of directly targeting each element as per mcSwitchy or how Yahoo's main page works)

    The final approach is a hybrid of the two - the semi-fluid layout. You design the page in such a manner that it can go between a minimum (640 friendly, some people now target 800 as the bottom) and a maximum width (usually about 1280). This method isn't too hard to implement for modern browsers (IE7, FF, Opera, Safari) and can be supplemented to work using 'expressions' in your CSS to support IE6. (just have a fallback plan for if an IE6 user has .js disabled). The advantages of the hybrid is you don't have to worry about lines being too long for uber-wide display users, you end up with less wasted screen space (though there will still be some on larger displays) you don't have to worry about complaints from smallscreen users (like the people going out and buying netbooks) - the disadvantages are that it takes as much if not more planning than a fully fluid layout, relies on javascript for legacy IE support, etc, etc.

    Basically, there's no easy answer... That's why it's called WORK. Though again, without seeing the page in question and it's code, nobody here is going to be all that helpful.
     
    deathshadow, Feb 9, 2009 IP
    gemini181 likes this.
  3. gemini181

    gemini181 Well-Known Member

    Messages:
    2,883
    Likes Received:
    134
    Best Answers:
    0
    Trophy Points:
    155
    #3
    ^^^
    Great info, thanks for the big effort.

    I don't like flash (ie. flashy)
    Do Flash based layouts scale to the exact screen size?
     
    gemini181, Feb 9, 2009 IP
  4. Website Design Perth

    Website Design Perth Peon

    Messages:
    66
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Yes they can - to exact window and fullscreen. Of course if you use images with will become jaggy when enlarged while vectors will stay clean.
     
    Website Design Perth, Feb 11, 2009 IP
  5. higreg7

    higreg7 Peon

    Messages:
    469
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    This is not correct. A full screen flash site will scale to fit the browser while it's content is not scaled, so no worries about pictures being jaggy.

    Look at one of my fullscreen apllication here

    A full screen flash site is pixel perfect, no matter what screen resolution or OS.
     
    higreg7, Feb 12, 2009 IP
  6. mortgageloan

    mortgageloan Peon

    Messages:
    339
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    yup u r right ..no probs at all..no jagginess..
     
    mortgageloan, Feb 12, 2009 IP
  7. 2004mark

    2004mark Member

    Messages:
    21
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    38
    #7
    90% of the time I will design to a width of 1024px.

    I think that you will find that people with big monitors i.e. 1920px plus wide will never run their web browsers in full screen mode (I know that me and everyone else in my office doesn't), otherwise it'd be virtually impossible to read text when viewing a fluid website.
     
    2004mark, Feb 12, 2009 IP
  8. karthimx

    karthimx Prominent Member

    Messages:
    4,959
    Likes Received:
    127
    Best Answers:
    2
    Trophy Points:
    340
    #8
    try to give 1000px by 768 by default....
     
    karthimx, Feb 12, 2009 IP
  9. higreg7

    higreg7 Peon

    Messages:
    469
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Guys, there is no need to set any dimensions for the stage when doing a full screen flash site. The stage size is defined at run time depending on the browser dimensions, this is the point of a fluid site, so you could set your stage to 10X10px, it would'nt make any difference.
     
    higreg7, Feb 12, 2009 IP
  10. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I wonder what are the resolutions of the iPhone, and other phones ?
    I agree with a minimum of either 800 or 600, because remember somebody may have a huge monitor but often people minimize their windows.
    I've never really known what maximum to use, but i'll go with 1280 !

    You want to avoid horizontal scrolling which is a big no no, and of course the little stripe but i guess at least this can be avoided by zooming in.
     
    wd_2k6, Feb 12, 2009 IP
  11. higreg7

    higreg7 Peon

    Messages:
    469
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #11
    iPhone does not support flash, so the problem is quickly solved.

    As for dimensions, I thought we were talking of a full screen flash site. You guys are talking about a fixed flash site, with a set dimension, embeded in a normal html page. In this case, you need to watch your flash movie's size. But these days are gone.

    To make a full screen flash site, you need to use swfobject and set the <param name="allowFullScreen" value="true" /> in the html as well as some body style, and a bit of code in the flash movie to not allow the content to scale.

    Then using an onResize function in flash, you can control the positioning of your objects when the browser window is resized.

    There are plenty of tuts on the web, this should set you off:

    http://www.tutorio.com/tutorial/liquid-flash-layout
     
    higreg7, Feb 12, 2009 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #12
    There is NO GOOD REASON TO EVER do a site in flash, unless you want to drive away customers, be an accessability /FAIL/, have ZERO content for search engines to even work with, and in general piss off visitors like myself.

    ***ing flashtards and their garbage sites are a section of the gene pool that could definately use a little thinning - using flash for anything other than a game or media playback on a website ends up being such a miserable ****ing /FAIL/ that I cannot fathom how the hell the companies that have sites like that even HAVE traffic - excepting the cases where the company is so large and so well established (McDonalds) they could have a five year old wipe their ass and use it as a website for all it matters.

    See all these trash video game websites that nobody goes to for anything, preferring the fan done forums and sites that pick up the slack and might actually let you get at the content you are after.
     
    deathshadow, Feb 12, 2009 IP
  13. higreg7

    higreg7 Peon

    Messages:
    469
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I see you have spent a lot of time on your education. Don't be so frustrated, one you'll be good at something ;)
     
    higreg7, Feb 13, 2009 IP
  14. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #14
    I agree with this, I have no desire to learn flash to create full-flash websites, they annoy the crap out of me.
     
    wd_2k6, Feb 13, 2009 IP
  15. higreg7

    higreg7 Peon

    Messages:
    469
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Right, just to clarify, I was trying to answer that question. And if you read carefully, you will see that I neither used rude language nor said anything bad about HTML sites.
    You want to live in your SEO world that is fine. Yet, your opinion is subjective, and I know your kind, taking every opportunity to slash Flash, most of the time using swearing language, due to lack of arguments.

    Everybody does what he wants, I was trying to help, and being extremely busy making a lot of money with a technology that annoys you for some reason, and that apparently has no future, I don't have time, nor I want to preach Flash to anyone.

    Good luck with your approach of community and communication in general.
     
    higreg7, Feb 13, 2009 IP
  16. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #16
    I hope this wasn't directed at me in any way, because I was just stating that I dislike flash sites, I wasn't cursing at you in any way. In fact I thought you were rather helpful in the topic.

    Sites that use just flash, usually have unwanted sounds, poor content, and their usage differs greatly from site to site (how to access the sites features) This results in poor ease of use, people might argue this but a lot of users computer experience isn't that great hence why a easy to use common interface is desired amongst sites.
    Also it has accessibility issues, which I guess can be covered by a non-flash version.

    However whilst I dislike flash sites. I agree they can be useful to young children, and allow for enhanced presentations.

    I agree Flash has a huge market + certainly has a future.
     
    wd_2k6, Feb 13, 2009 IP
  17. higreg7

    higreg7 Peon

    Messages:
    469
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #17
    No, it wasn't directed at you. I usually ignore people ranting at flash, why would I care, I make a nice living from it, at my desk in my house, not having to stress about where I will get the next job.

    However I dislike people using curse language, and so my last message was more directed at the previous post.

    I just find it weird that these days, people still talk about flash as a tool for kids or games. Of course, if you visit sites like templatemonster, you will find perfect examples of what not to do in flash, and I would more than agree with you on the annoying part. Trust me, as a developer, it is even worse inside!

    Saying that flash site can only be considered by big companies, because they are going to need to spend some $$$ on the marketing that SEO would have done for them is less and less true. I won't get into this, but we are all aware of Flash and SEO issues, but we also are all aware this won't be for much longer, as google already indexes SWF files, and it won't be long before Adobe and Google take it to the next level.

    As for the content, I assume you guys may not take much time keeping up to date with what is being done, providing your love for flash, you may even have flash player disabled.
    It is quite funny, I even read people saying openly that they have flash player disabled, but yet know everything about the latest trends.

    wd_2k6, thanks for at least explaining your opinion, without having a swear word in every sentence. I respect everybody's opinion, and very strangely, you will rarely find a flash developer ranting at html, although forums are full of posts detailing broken layouts, page display different in browsers etc...
    Yet, for some reason, there is an army out there always ready to bite on flash when they have the opportunity.

    That said, if you want to see what flash is capable of, don't go to templatemonster and stop hanging around on the flash games site, built for the sole purpose of putting some adsense in the corner.

    A good source would be http://www.thefwa.com/ for example.

    The world is made out of very different people and so is the web design industry, let's just stop spitting at each other. if you don't like it, move along...
     
    higreg7, Feb 13, 2009 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #18
    Correct, you meant me. ;)

    Whereas I'm a bit like your average police captain, I don't trust a developer that doesn't use expletives - though at least I self censor mine. Goes with the whole New England business attitude, where your average soft skinned west coaster goes storming out of the office in tears screaming "You can't talk to people that way"... what way?!?

    That's because it's still all it's good for.

    You visit ANY site that uses flash for presentational elements or worse, navigational ones, you will find perfect examples of what not to do in flash.

    Alienating users from places like New Zealand or the american west where you are lucky to get a 33.6k connect on a good day - and alienating people like myself who have better things to do than sit there for two minutes on a 22mbps connect waiting for some stupid splash screen to give me the link to proceed to the actual website, only to have to wait again for the main page of the site itself to load.

    I use opera, I browse with plugins disabled and enable it on a case by case basis - since Opera lets me do that. As such I land on a site with a blank white page or an 'install flash' method I just turn it on... and wait and wait and wait.

    That's because you can usually also enable it case by case, and when we do, we're disgusted by the total rubbish we see.

    Same thing, trash is trash, GOD FORBID WE ACTUALLY TAKE OFF THE ROSE COLOURED GLASSES BURST A FEW BUBBLES AND CALL A TURD A TURD! I categorize the use of flash for web design right alongside broken layouts, browser differences and the half billion other online issues caused by either using "Gee ain't it neat" technologies, decade out of date methodologies, and sleazeball shortcuts.

    If by that you mean an example of miserable ******* /FAIL/ then certainly. Fixed metric fonts that are useless to large font/120 dpi users, and for me are even useless on my small fonts laptop... Seriously, who can actually read 6 pixel tall text? Contrast of many text elements to the background doesn't meet accessability minimums, it hides it's actual total filesizes (over 2 megs at 1920x1200) since all the images are loaded via flash, which comes to 160k WITHOUT counting the thumbs. Mix in the 29 validation errors stemming from the use of HTML 3.2 case and deprecated elements in a XHTML doctype, the waste of javascript on a simple object, putting the 'alternative' content in as normal html outside the actual object... Oh yeah, great example of a good website - NOT.

    Complete and miserable accessability /FAIL/, complete and miserable bandwidth use /FAIL/, and to be frank, an excellent example of how NOT to build a website.

    How about instead of the soft kumbaya camp chippewa approach, we call a turd a turd, and actually start FIXING this **** so we don't fill up the internet with websites that are badly coded, a disaster to maintain, filled with accessability problems and chews bandwidth to the point that visiting certain websites damned near shuts down the DSL connections of your neighbors worse than hosting torrents at full bandwidth?

    As George Bernard Shaw said, "The reasonable man adapts himself to the world; the unreasonable one persists in trying to adapt the world to himself. Therefore all progress depends on the unreasonable man."

    There's been too much of this status quo nonsense for too long. Developers have gotten a free ride on churning out complete rubbish code for too damned long. Crapping out a flash website is HARDLY an answer to that.
     
    deathshadow, Feb 13, 2009 IP