It's generally agreed that 1024x768 browsers are the target, with 960 - 980px widths being acceptable. (I personally prefer 960 for the chrome, but no point in arguing.)
My question is - what window height can one generally assume of users? I know this varies depending on a number of things, so I'm curious if anyone's done any studies on what heights can be designed for in order to reach x % of users.
Cheers.
Google created a website that shows you what percentage of people will see your web page upon loading.
http://browsersize.googlelabs.com/
As of June 4, 2012, Google has moved the "graduated" browsersize.googlelabs.com tool inside of Google Analytics. Simply navigate to the Content section in Google Analytics, and click In-Page Analytics.
http://analytics.blogspot.com/2012/06/new-feature-conduct-browser-size.html
:)
Related
I'm working on a new web site that currently is configured as a full height (that is, 100% available browser window) application. In terms of layout, it is something like this - http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html.
Our web site does nothing with the actual browser window size, like switch browser into full screen mode. It only uses the available space.
Operationally, this is going to be a semi-internal data entry application. Almost all pages are data entry forms or summary pages
Personally, I think makes a very nice looking app. However, some of the other developers are comparing this design with content in scrollable tags to be the same as iFrames. And as such should be avoided.
Is there any background / best practices information about designing a web site this way?
I personally love sites that choose to do this; I think that it's a great way to use up the available real-estate that you have. My one piece of advice would be to add a min-width and a min-height to your page so that you don't have to worry about your site breaking if the browser gets too small. This will not only improve the overall user experience, but will also prevent future headaches when trying to get your design to work in obscure dimensions.
It looks fine, and at first looks more like a 'real' app. The only weirdness with this sort of thing is that on OSX you get a bit of a bouncy effect when you hit the top and bottom because of the rubberbanding on the scroll. If you aren't sure what I mean, grab an iPhone/iPad/Mac and scroll up and down past the top or bottom of the content.
In reality it shouldn't be too hard to enable or disable this feature, so why not start with it, then revaluate once you have gotten going.
There aren't any good practices or background information that I know of on this subject. Just follow the normal rules of thumb, if it looks good, is light and loads well, and it is usable, why not?
I am just building a new site for a client and want to make sure I serve him best. I am at the process of determining the page width.
First, for the last few years, my pages have been typically about 900 pixels wide and centered in the middle of the browser window. This works really well. That's not the approach I am taking now though. My old standard of 900-1000 pixels seems really small on today's monitors.
I am creating a three column page layout. The leftmost column needs to stick to the left side of the browser. If the browser is set really wide, there is a huge vertical dead zone on the right side of the browser. That's not really a problem since I doubt most people open their browser to 100% wide on a 1600px monitor.
My question is this: Is there a standard pixel width that you assume 90% of the people use to view a web site?
960 pixels!
It has plenty of denominations to allow you to split your page up into various columns. I suggest taking a look at http://960.gs
I know, as you said that it is small compared to your monitor, however there are a lot of users (the majority) who would benefit from keeping this resolution.
You can also consider using a so called "responsive" approach:
http://978.gs/
The idea is that using media queries (and substitute techniques) you adapt your layout to the viewport of your visitor, so ideally you can offer the best content to everyone.
If you made fluid-width pages, this wouldn't be an issue.
Monitors these days are all over the place. You will have to check your analytics to see what your particular audience is using.
If I make a fixed-width page, I usually still shoot for 980px. There are lots of netbooks popping up with resolutions of around 1024x800 and what not. Again though, there is no specific answer to this question, other than making pages without a fixed-width, or checking your own audience.
i'm wanting to create an html newsletter template to be emailed out, however, i'm unsure of standard dimensions for it. would a 800w be good? or should i go w/ something smaller?
for webpages my standard is usually 970w, but wasn't sure what would be best practice for html newsletter.
thanks
Bdizzle,
I would recommend that you read this link
You will see that Newsletters can have different widths, There seems to be no major standard, What is recommended is that the width will be about 95% of the page width, as different browsers use the extra margins differently. You will also find that email readers have problems when reading css so applying the guide lines in this tutorial might help you save some time and trouble-shooting down the road.
Be happy, Julian
Ideally the email content should be about 550px wide to fit within most email clients preview window.
If you know for sure your target market can view bigger then you can design bigger.
Loads of email examples over on http://www.beautiful-email-newsletters.com/
Short answer: 400-800 pixels.
What I have read is that HTML newsletter width should be as narrow as possible without being too narrow. For instance, 400-500 pixels for a one column layout is a lower limit. Any less may look too weird.
Today's widescreen monitors allow for more horizontal pixels and most web email clients will either be of the two-column variety (Gmail) or 3-pane layout where the content window bellow the inbox list (Hotmail and Yahoo). In either case, you can be okay with 800 pixels if you're targeting the 1280 wide audience. An older or less technical audience may have older, square monitors.
There is the problem of Outlook having a three-column layout. That limits the width of your email even more. With them, you may want to go even narrower.
I just recently created a template that required an ad banner that is 730 pixels wide. It was near in the wide range, but not so much that most people could not double-click the email an open a new window in Outlook (the web email users should be okay for the most part).
Hope this advice helps.
What is more popular these days - CSS fixed page width or flexible, how are the pages built in terms of CSS views layouts
what is most popular page resolution - 970 or 1024 px
Make it flexible and save yourself the headaches in the future. Pick a minimum size you're going to support, and make sure it scales.
If you make it fixed, it only looks good for a fraction of the people.
And, just because a person has a high resolution, doesn't mean the browser window will be maximized.
I think you'll find that if a site is fixed, it will most likely be designed for a screen width of 1024px, meaning the width of the contain will be around 960px.
This article does a good job summerizing some pros and cons of both approaches: Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
.
Definitely make it fixed. As a 1920x1200 user, 100% width pages hurt my eyes badly - I'm talking to you wikipedia.
Notable exceptions are igoogle, where you really need all the screen space you can have.
There is a reason most sites go for fixed layout. You should really do the same unless you have a very good reason not to.
Regarding popular resolutions, I would suggest examining your site with Google Browser Size.
Know our audience is better.
Global Web Stats
Browser Display Statistics
I choose 960 with fixed layout
I think this is a bit of a subjective question because I doubt most of us here will know what's trully more popular (or where those statistics might be).
Stack Overflow, for example, uses a fixed layout and most of the corporate sites I've worked on have been fixed width also.
My personal preference is for fixed layout. Partly because it keeps everything contained in a way I find preferable and partly because it means I can choose the page width myself based on my own preference in the moment (I tend to use CTRL +/- a lot daily).
As for what you should do, it depends on what you want to acheive, what you prefer, what your customers/users may find more usable etc.
I'm making my first website, and I'm trying to make variable-sized buttons so they'll render correctly on low resolution (read: mobile) browsers. Currently I just have the usual rollover image solution (185 pixels wide by 37 tall if anybody cares), but when I preview the site in low resolution it looks, predictably enough, like complete crap (more specifically they don't have room so they arrange vertically instead of horizontally and take up a huge amount of screen real estate).
Semi-related, is there a way to overlay text on a button without saving separate images, each with the correct text? Just using a single template for buttons and then deciding what text goes on it as it's needed?
tl;dr: I'm trying to get a horizontal lineup of buttons for navigating my website, but I'm a noob and I can't do it right without your generous assistance.
You're picking a tough problem for your first website. Some issues you'll encounter:
There are a vast number of different mobile browsers out there (makes dealing with just Firefox, IE, Safair, Chrome trivial)
All these browsers have varying level of support for HTML. Some have poor support, they'll do different things with Tables.
A variety of screen sizes (although you can assume it will be one of 128, 176, 240, 320 or 480 px wide)
A difficulty in testing how your app looks on different browsers.
Varying support for java script (good on iPhone/Android/PalmPre, partial (and inconsistent) on BlackBerry/Sybian60 devices and poor on pretty much everything else)
A usual approach to these problems is to analyse the User Agent to identify the mobile browser type, and its capabilities. Then render the screen appropriately (e.g. for 128/176px wide screens, use small buttons). Look into http://wurfl.sourceforge.net/ or http://deviceatlas.com/ for tools on how to do this. You may also find some useful info at http://mobiforge.com/forum/Developing. And http://ready.mobi/launch.jsp?locale=en_EN is a fine online analysis tool of your mobile website (but don't get sucked into trying to get a 100% score on it).
If you're just developing static HTML, then things are a lot more limited. You could use User Agent based URL rewrites on apache to redirect to different versions of your HTML.
Good luck!