I am trying to design the front end of an app that also hosts a website. I do not know the dimensions to follow before I give the design to the coders. Obviously computer monitors come in all different sizes, is there a universal dimension size to follow? Cheers - Troy
Hi, A good size is 960px width. Of course there's no limit in height but a 940-960px width will cover even small desktop screen sizes. Also, make sure your design is responsive so it fits all mobile and desktop screens. Bootstrap uses 940px and though width is not a hard rule, it's a standard for most designers. Hope this helps.
For desktops, suggested 940-960px content width is ok, but remember to prepare at least two mobile layouts(for example < 480px screen size, 480 < 940, and >940 - all really depend on your content). On mobile layouts, content should be full-screen wide, with just a little left-right padding (e.g. 10px).
As the above people said, 940-960px is what most designers generally use. I sometimes use the 960 grid, which makes it easier for me. Bootstrap is also very useful to use.
I normally use 975 width, but 960 sounds better, as being a standard qHD resolution. But if you do it responsive, as you normally should, would be no problem a bit bigger than 960. But as phones get higher and higher resolutions 1080p ....
ANYONE telling you to use one fixed size doesn't know enough about web development to be opening their mouths on the subject -- which is to say EVERY SINGLE PERSON WHO HAS RESPONDED IN THIS THREAD needs a quadruple helping of Sierra Tango Foxtrot Uniform. As you noted, the range of sizes visitors might be using is massive -- ranging from as little as 128x92 to 4096x2560... and that's why picking ANY fixed size, or even multiple fixed sizes for responsive layout is half-assed bull that will screw some visitor somewhere at some time! Your layouts should be semi-fluid, elastic AND responsive. Semi-fluid means it automatically shrinks to fit the available width, with a max-width so that long lines of text aren't so painfully long as to be hard to follow. Elastic means the fonts are dynamically sized, aka declared in either % or EM. That way they auto-size to the users browser and/or OS preference, so users aren't sent diving for the zoom all the time. Likewise your max-width and container sizes should ALSO be declared in EM to adjust as the size of the text adjusts. ... and THEN you make it responsive; using media queries to do things like strip off columns, add columns, or re-adjust container sizes and paddings so as to better make use of the available screen space. Single fixed width? Idiotic halfwit bull. Though, the bit about "handing it to the coders" probably means you're screwing around drawing pretty pictures in Photoshop or some other paint program, which probably means you aren't qualified to design jack **** for the web, nor are those coders if they can't handle design. This is because wasting time drawing goofy pictures in a paint program is putting the cart before the horse and has NOTHING to do with accessible design or sane site development practice -- NO MATTER that it's become an industry standard practice out of apathy, ignorance and wishful thinking. You start out with the content or a reasonable facsimile of future content in a flat text editor, creating a logical document structure and order. THEN you mark up that document with HTML tags saying what things ARE, NOT what they look like. THEN you bend that markup to your will with CSS to create your layoutS (yes, PLURAL) adding any semantically neutral containers (DIV and SPAN) as needed... THEN and ONLY THEN do you bring in the PSD jockey to create any graphics you hang on the ALREADY WORKING LAYOUT -- if any -- thanks CSS3! -- likewise with any JavaScript since again, the unwritten rule of JS is "If you can't make a working page without JavaScript FIRST, you likely have no business adding JavaScript to it." It's called progressive enhancement, which is how you get proper accessibility and "graceful degradation" -- which is to say as the fancy bits are blocked/unavailable or even irrelevant to the visitor's user-agent (browser), the page is still functional, useful, and does what a website is for: DELIVERING YOUR CONTENT TO THE USER. Because at the end of the day, that's what people visit websites for, the CONTENT -- NOT the goofy graphics and "Gee ain't it neat" scripttardery hung around the content, but the CONTENT ITSELF! Which is why most peopel with the giant set of brass to call themselves a "web designer" in their ignorance of HTML, CSS, emissive colourspace, accessibility or even the limitations of the medium, aren't qualified to be designing a blasted thing for anyone so far as the Internet is concerned! See the endless horde of inept re-re halfwit nube-predator bull found on scam artist template whorehouses like ThemeForest or TemplateMonster.