I'm working on a little flash game that has a couple of GUI components. I'm having a bit of trouble coming up with a good design that can support a min spec of 768x1024 and a max spec of 1200 x 1920.
An example of my design:
I have a List component that hugs the top right corner. When the browser is resized I slide the component over, keeping it always 5 pixels from the edge of the browser. Once the stage has hit a minimum size (1024 for width) I stop sliding the GUI over otherwise it will start overlapping with other GUI's that are on the left side. This seems to be a similar fashion to how Farmville and other popular flash games handle their GUI's (they keep them the same scale for all resolutions and only translate them to keep them centered and what not)
If I knew the min spec would always have 768x1024 then I could deal with that, but the problem is that is rarely the case. It seems like the url bar, and other browser menus cut into your height space. Also when I'm running Ubuntu (my version has that menu bar on the side) I lose some width to my stage. I'm guessing the windows menu bar on the bottom also cuts into a browsers height space. This ends up cutting parts of my GUI out and can make the game unplayable.
I believe I can only truly expect 768x1024 when in full size mode.
My question is:
What is a safe min spec of resolution, including what windows/ubuntu menu bars and browser menu bars will take up?
The safe area varies a lot depending on the browser/OS:
http://designerstoolbox.com/designresources/safearea/
Back in the day (when full flash sites were popular) the usual way to deal with this was, as bokan says, to make your SWF to always fill up the browser's viewport, unless the viewport was smaller than a certain limit, then show scrollbars. swffit was a quite popular script to help with this. The typical minimum safe area used to be around 990x600 (to support 1024x768).
Being a game though, I'd recommend defining the minimum area where the game is playable, and if you detect a smaller viewport, require the user to go fullscreen (I wouldn't rely on scrollbars for any game, unless it's a super-cool-parallax-html5 game, of course :P).
There is no safe minimum size. Some users have 6 bars (favorites, yahoo, google, stumble, +2 spyware).
What You can do is resize your flash animation to 100% of a div and set a min-with min-height for this div. This way, users will see that they need to make the windows bigger.
The resolution depends on your target audiance. Do you want user to play on netbooks ? Just check your game with a typical netbook resolution.
You should take a look at http://www.greensock.com/liquidstage/ it's what you need. Greensock api are awsome.
I think 1000x600 is a good choice.
We use width x height, so your 768x1024 would be tall.
Related
So I am making this horizontal scroll site which has a ton of images. I planned on using svgs for the entire site, but with only 20-30 svg images of medium to high complexity used in the page, and chrome already seems to be showing som jank and high paint times for scroll (and firefox is even worse, though safari seems to do a lot better).
Scroll timeline
View the site (scroll works on mac only, windows users can use arrow keys)
My question is, if I were to use pngs instead of svgs, would it reduce the paint times and hence the jank? Why is the browser struggling with only around 20 odd svg images?
As was my doubt, the problem turned out to be something completely different. Browsers are more than capable of handling multiple vector images. But what they aren't good at (and understandably so) is at redrawing those images very often.
Problem
My long horizontal scroll site was quite wide (30,000px). I had a background-color property applied to one of lower z-index'ed div's to represent the sky throughout the scroll site. I didn't want the sky to stretch the entire 30,000px since it essentially didn't change much, and hence gave it viewport width and height, with:
position:fixed;
Not a very smart move. Turns out that this property was causing my document layer to be repainted on every frame. Initially I though it was normal for browsers to do so on scroll, since Robby Leonardi's site, which I used as reference also repainted every frame.
Solution
Thanks to this article by one of the chrome dev tools developers, I set aside conventional wisdom, and make the sky layer
position:absolute;
and stretched it the entire site width, and boom! The paint rectangles were gone. And the scroll performance was smoother than butter.
Other solutions I tried
Hiding elements not near the viewport to make painting lighter, as suggested by #philipp, but didn't yeild any appreciable difference. Also, it felt super-hacky, and it wasn't targeting the root cause of the problem.
I tried modularizing my site into scenes and using translateZ(0) hack on each scene so that only the smaller scenes get repainted instead of the document. This actually helped quite a bit, and scroll was decent. Then,
I gave all the svg images their own layer by using translateZ(0). I started getting FPS of around 60 now, but again, this wasn't the right way of doing things.
I once had a similar thing. The SVG was 10 or more times as wide as the one shown above, it contained ~20k elements and was about 3MB in size. The only Thing what brought back performance (since it was a jump and run game) was an algorithm which was able to find all elements whose bounding box overlapped the viewport. With this I could use display: none; to hide everything what is invisible.
That reduced the amout of visible elements to ~150 per frame and the game ran again fluently.
I used a balanced binary tree (avl tree) and a one dimensional range query, since the height of the viewport was always the same as the image.
Good luck!
[EDIT]
Forgot to leave something like an anwer. From my Experience are large/huge SVG Graphics a bottleneck in rendering, especially if there is a lot of scripting happening. If you do not need any Interactivity with the elements from the Graphic, so nothing than a large Background Image, I would recommend to use a Tile map, based on PNG images, that is the standard way in Jump'n'Run games with huges »worlds«, so you can gain perfomance in two Points:
Rendering is faster,
You can »lazy ajax load« tiles, depending on visibility, to prevent users to download the »whole world« at startup.
Additinally you could use something like PIXI.js to render with WebGL, what will push the performance drastically and with it comes support for Tilemaps and Spritesheets.
If you insist on the advantages of Vector Grafics (Scaling, Interactivity) than you need to find a way to hide as much elements as possible to keep the frame rate high.
I am sure you have all come across this before but I just wondered if there were any new techniques out there.
I have been making a design for a client and they want everything 'above the fold' basically so that the pages fill the screen without scroll bars. I have explained that people look at web pages in browsers at different sizes and resolutions of different sizes etc etc, but this is what they want.
So I made a design that fit the viewport of Firefox at 1280 by 1024 which is the most common size.
Inevitable the client is now moaning that when they view this on their laptop screen 'the bottom gets cut off' so I change the design to fit 16x9, but then 'theres too much space at the bottom on the desktop now'...
I then stupidly showed them the ctrl+ zoom on Firefox, and they said, 'Thats exactly what I want, I dont want the layout or proportions on the site or text to change, I just want the whole thing to scale as it is to fill up the space'
I told them that I didn't think that was gonna happen, but I just thought I'd ask the community if they had any new answers to this unfortunately common request?
I think you're looking for a liquid layout
I know you can fake full screen by expanding a window and eliminating the title bar , status bar , and other stuff, I'm not interested in this, I want to know about "real" full screen mode (I don't know how to call it else) , like in games.
what exactly is full screen mode?
what win-api should I use to achieve this?
can this be used to play movies in full screen ? I know windows media player uses a fake full screen because I can "cut" thru it and see the desktop (using regions win-api).
can I "cut" thru "real" full screen like I thru a window (using regions win-api) ore is this directly writing to video memory and there is nothing "under" it?
Thanks!
If you want to make games on Windows in full-screen, the best option is XNA. This uses DirectX underneath, but hides a lot of the implementation details and plumbing to make it easy for the developer to start working on his game.
XNA is freely downloadable, and has good documentation.
XNA Game Studio 4.0 can be downloaded here.
...and you might want to support the "fake" fullscreen mode in addition to "real" fullscreen - it's very nice for those of us that run multi-monitor systems.
If you don't want to use DirectX, create window and call ChangeDisplaySettings with CDS_FULLSCREEN flag. OpenGL applications use this way to go fullscreen.
As far as a user is concerned, full screen is just when a window takes up the entire screen such that they no longer see any window borders or other desktop stuff.
As you know, not all full screens are created equal.
'proper' full screen is where the program takes control of the screen. When a game uses this mode, it can change the resolution of you screen. If you have ever played an old game and existed to see your icons all messed up, this is; for the duration of playing the game, your desktop was at a lower resolution.
with 'borderless full screen' the program window is striped of any borders, the title bar and frame etc., and is just a rectangle of pure rendering. If you then set this rendering context to be the same size as your desktop, you get the effect of full screen.
Doing border-less is usually the more user friendly way these days, as it is easier to 'tab out' as the other programs are still graphically around. 'proper' full screen gives you full control of the hardware, so in theory you have more power for your program, but it means you have to wait for things to reinitialise when you tab out.
what you do with your rendering context is up to you, so yes, you can use it play videos. It would not matter if you are in 'proper' full screen or not, the rendering code would be the same.
As for cutting through proper full screen windows, I am not sure, but I think there would be nothing else to see, there is only your program.
as for what win-api, there is only one windows api, but I think you mean, what windowing library; as this is getting to be a long answer already, I shall just say it depends a lot on what you want from it.
Please feel free to leave comments if you need me to clarify or expand on any points.
I'm asking this question purely from a usability standpoint!
Should a website expand/stretch to fill the viewing area when you resize a browser window?
I know for sure there are the obvious cons:
Wide columns of text are hard to read.
Writing html/css using percents can be a pain.
It makes you vulnerable to having your design stretched past it's limits if an image is too wide, or a block of text is added that is too long. (see it's a pain to code the html/css).
The only Pro I can think of is that users who use the font-resizing that is built into their browser won't have to deal with columns that are only a few words long, with a body of white-space on either side.
However, I think that may be a browser problem more than anything else (Firefox 3 allows you to zoom everything instead of just the text, which comes in handy all the time)
edit: I noticed stack overflow is fixed width, but coding horror resizes. It seems Jeff doesn't have a strong preference either way.
Raw HTML does just that. Are you changing your data so that it doesn't render so good in random sized windows?
In the olden days, everyone had VGA screens. Now, that resolution is most uncommon. Who knows what resolutions are going to be common in the future? And why expect a certain minimum width or height?
From a usability viewpoint, demanding a certain resolution from your users is just going to create a degraded experience for anyone not using that resolution. Another thing that comes from this is what is fixed width? I've seen plenty of fixed size windows (popups) that just don't render right because my fonts are different from the designer's.
In terms of web site scaling I like fixed sized web sites that scales nicely using the browsers "zoom" function. I don't want a really wide page with tiny fonts on my 1920 res monitor. I don't know if the web designer has to do anything to make it scale nicely when zoomed, but the zoom in FF3 is awesome, the one in IE7 is useless...
The design should be fluid within sensible bounds.
Use CSS has min-width and max-width properties (which work in every browser, including IE7+) to prevent design from stretching too much.
The important thing is never to have a block of text stretch too wide. If a window is expanded, no block of text should indefinitely stretch to match because reading becomes a difficulty.
Like people have said, it really depends on what information the site is displaying. Two good examples are StackOverflow, and Google Images..
If stackoverflow stretched to fit the screen, longer answers would be annoying to read, because the eye finds it difficult to scan over long lines - this is exactly why newspapers use columns for everything, and why books are the all the same sort of width.
With Google Images, where the content is basically a bunch of 200px wide images, it stretches to fit the browser width and is still perfectly readable.
Basically, bear in mind the eye hates reading long lines of text, and base your design on that. You can design your site so when you increase the font size, all the layout scales nicely with it (The only site I can think of that does this is www.geektechnique.org - press Ctrl+-/= or Ctrl+scrollwheel, and the layout changes width with the font size)
I guess like a lot of things: it depends. I usually do both. Some content stays fixed width to look good or if it can't benefit form more space. other stuff is set to 100% if it seems like it'd be usefull.
This should be decided on how complicated the design of your website is. The more complicated, graphically or component wise (amount of content divs), will determine how well your website will scale. Generally you will find most graphic designers website will not scale because they are graphically intensive. However informational website will scale to make the best use of readable space on the screen and are not complicated for ease of use. Its a matter of preference really.
I think it depends on the content of the site. Sites like SOFlow, Forums, and other sites have an emphasis on reading lots of details, so having more real estate to do so is a big benefit in my mind. The less vertical scroll, the better.
However, for sites a little less demanding on the reading level, even blogs or retail sites where you're simply displaying an individual product, having a fixed width allows you to keep things more concise.
I'm a big fan of fully-fluid designs. As to the usability complaints about lines of text that are too long... if they're too long because of the size of my browser window, then I can just as easily make the window narrower as I can make it wider.
This is a matter of styling preference. Both can be equally usable depending on implementation. Columns can also be used, if the screen gets wide enough. Personally, I find it annoying when there is a single, narrow column of text going down the screen.
Edit for 2012: Yes, your website should respond to the size of the window it is being displayed in.
There are many places to read more about this, including:
http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
http://www.abookapart.com/products/responsive-web-design
http://en.wikipedia.org/wiki/Responsive_Web_Design
Note: if you use the zoom functionality in your browser, a fixed layout squashes the text, whereas a fluid layout allows it to take up the whole screen.
Maybe this is just a browser problem, but it's definately an argument in favor of fluid
Paragraph widths larger than your display make a web site completely unusable. You have to jiggle the horizontal scrollbar back and forth for every single line you read. I'm doing a web design subject at university and the textbook calls the designs which adapt to your screen width fluid layout.
I'm designing my big class project using fluid layout, it's a bit more trouble than fixed width. I suspect none of the other students will use it, the markers won't notice and none of the professional sites we're imitating are fluid either.
I'd say fluid all the way. The user can always go back to a smaller size window if he doesn't like the result of enlarging it, but he can't do anything about a fixed layout.
If you really, really hate the idea of your site looking ugly because of something a user with a large screen does, then for the sake of all that is true and beautiful, at least never use pixel-based fixed layouts! CSS has these neat text-relative size units like "em" that allow parts of your page to scale with the font size while others (like images) stay in their "natural" size.
Why not use them and make your page scale well without relying on the less flexible "scale everything" of FF3 that's really just a workaround for sites that use a dumb pixel-based fixed layout?
A lot of people are saying things like "this is a matter of taste" or "I don't like big fonts on my high-pixel display." Number of pixels has nothing to do with it, and it's not a matter of taste. It's a matter of DPI, which is directly related to display resolution and font size. If your layout scales along with the DPI of the fonts (by being specified in ems for instance, and using SVG), then you end up with very beautiful, very crisp websites that work optimally with any display.
http://www.boutell.com/newfaq/creating/anyresolution.html
There's probably a compromise design between fixed and fluid designs. You can design a site fluid-like but set the css property max-width to 1024 (or whatever). This means you get a fluid layout when the window width is less then 1024 and fixed width when it is greater.
Then narrow screen users (like my 800 pixel eee 701) don't have to twiddle the horizontal scrollbar to read every single line and wide screen users (who don't know how to resize their browser window) don't get 500 character wide, 1 character high paragraphs.
Now that most of the major browsers support full page zoom (at present, the only notable exception being Google Chrome), are liquid or elastic layouts no longer needed? Is the relative pain of building liquid/elastic layouts worth the effort? Are there any situations where a liquid layout would still be of benefit? Is full page zoom the real solution it at first appears to be?
Yes, because there are a vast variety of screens out there commonly ranging from 15" to 32".
There is also some variation in what people consider a "comfortable" font size.
All of which adds up to quite a range of sizes that your content will need to fit into.
If anything, liquid layout is becoming even more necessary as we scale up to huge monitors, and down to cellphone devices.
Doing full page zoom in CSS isn't really worth it, especially as most browsers now do this kind of zooming natively (and do it much better - ref [img] tags).
As to using fixed width, there is a secondary feature with this... if you increase the font size, less words will be shown per line, which can help some people with reading.
As in, have you ever read a block of text which is extremely wide, and found that you have read the same line twice? If the line height was increased (same effect though font-size), with less words per line, this becomes less of an issue.
Yes, yes yes! Having to scroll horizontally on a site because some designer assumed the users always maximize their browsers is a huge pet peeve for me and I'm sure I'm not alone. On top of that, as someone with really crappy vision, let me say that full page zooming works best when the layout is liquid. Otherwise you end up with your nav bar off the (visible) screen.
I had a real world problem with this. The design called for a fixed width page within a nice border. Fitted within 800 pixels wide minus a few pixels for the browser window. Subtract 200 pixels for the left menu and the content area was about 600 pixels wide.
The problem was, part of the site content was dynamic, resulting in users editing and browsing data in tables, on their nice 1280x1024 screens, with tables restricted to 600 pixels wide.
You should allow for the width of the browser window in dynamic content, unless that dynamic content is going to be predominantly text.
Stretchy layouts are not so much about zooming as they are about wrapping - allowing a user to fit more information on screen if the screen is higher resolution while still making the content acessible for those with lower resolution screens. Page zooming does not achieve this.
i think liquid layouts are still needed, even though browsers have this full page zoom feature i bet a lot of people dont know about it or know how to use it.
Page zoom is horrible from an accessibility perspective. It's the equivalent of saying "we couldn't be bothered to design our pages properly [designers], so have a larger font and scroll the page horizontally [browser developers]". I cannot believe Firefox jumped off the cliff after Microsoft and made this the default.
Yes - you don't know what resolution the reader is using, or what size screen - or even if accessibility is required/used. As mentioned above, not everybody knows about full page zoom - I know about it, but hardly use it...
Only your own site's visitors can tell you if liquid layouts are still relevant for your site.
Using a framework such as the YUI-CSS and Google Website Optimizer it's pretty easy to see what your visitors prefer and lay aside opinion and instead rely on cold hard results.
Liquid layouts can cause usability problems, though.
Content containers that become too wide become exceptionally difficult to read.
Many blogs have fixed width content containers specifically for this reason.
Alternatively, you can create multi-column content containers so that you get an effect like a newspaper, with its multiple columns of thin containers of text. This can be difficult to do, though.