I am currently trying to build a personal profile page. It's a work in progress, and I know little HTML, but I'm getting there.
I'm having an issue with my webpage with regards to how it scales with changes of the browser window size. On my (quite wide) screen at university, it looks fine. However, reducing the browser window size manually - or simply viewing it in a full size browser window on a smaller screen - appears to mess everything up - it doesn't look very nice. Text goes close to my pictures, and it all looks a bit tatty.
I think this is probably because my design is quite poor.
1. Is it because my design is bad or is there something else I'm doing blatantly wrong?
My current idea for a solution is to resize things so that they would look more reasonable on a smaller screen (i.e. on a normal sized laptop). I'm worried that this might end up making things look a bit odd on a bigger screen, though.
2. Is it possible/within reason for a beginner to have two different designs, one for smaller screens and one for big screens, which could be detected and then utilised depending on what screen size viewer is using? Should my page be designed to simply work with whatever screen size?
3. If I do reorganize the page such that it works better with smaller
screens, is there a way to "lock" this design in place, so that it
doesn't get messed up if someone views my page in a wider window?
Perhaps a way to ensure that only the boundaries of the page increase
in width?
What I'm essentially asking is how I should go about designing my page in order to resolve the evident issue - where the issue is that it looks rubbish when the browser window is any smaller than the max size of my screen at university.
You've created your page using tables. It is not a good practise nowadays exactly due to the problems your are facing. In practise, tables should not be used for layout purposes.
To make your layout fluid it'd be better to develop using div with float and relative positioning.
You can see another discussion related to this topic here
https://webmasters.stackexchange.com/questions/6036/why-arent-we-supposed-to-use-table-in-a-design/6037
You could use css property #media, to handle different styles for different screen width: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I recently took up web programming, and this issue plagues my site. I set all the font sizes using px values in css and aligned everything using divs, absolute positioning, and more px values. It looks fine until I try zooming in and out, at which point the text size and page size decrease at different rates, resulting in comparitively huge text when zoomed all the way out. This also renders viewing the site on a mobile device completely impossible. I've read that font sizes should be specified with ems not pxs, but that didn't fix it.
What is going on?
It's an easy problem to get into, particularly for a beginner. Consider moving divs to percentage values etc. In terms of mobile viewing and standard desktop browsing, I would suggest you try using a grid system.
One popular example which is very easy to use & I think is great for beginners is 960.gs
I'm afraid without code snippets and your question being very generalised, its unlikely we can help.
There are also ready to go grid systems that shift the page around depending on screen size but I wouldn't recommend them until you are comfortable using 960.gs
I would also try http://twitter.github.io/bootstrap/, it makes it very easy to create a nice looking site. As redditor mentions, using pixels can result in weird behaviors when zooming especially for positioning elements. I would try to use something like bootstrap or 960, or one of the other grid systems.
What are the most commonly used pixel sizes (primarily widths) and what are there advantages and disadvantages?
How can I best find a happy medium to give a good experience to people with a wide variety of monitor sizes?
An answer with an explanation rather than just the size would be greatly appreciated.
the most grids use a width of 960px. (When the design has a fixed width).
When you take a look at global statistics 1024 range resolutions are still the most common: http://gs.statcounter.com/#resolution-ww-monthly-201006-201106
Do not use 1000 width. (You have to count in the border width of the browser and the scrollbar, in certain browsers / OS they are larger then in others)
I don't think there is a ultimate resolution that's why you should check the statistics on the concerned webpage (if the page already exists), to decide what resolution is most appropriate. If you can't do this you can check stats for you target market on http://gs.statcounter.com/
Or even better use responsive webdesign: http://www.alistapart.com/articles/responsive-web-design/
Since max- and min-width attributes in CSS, you can target whatever resolution you want, if you have the time / budget for it of course.
960px width is a good standard, as others have already elaborated on.
However, one should keep in mind that websites are viewed on a lot more than just desktops these days, so the answer could vary based on what the site is being styled for. For example, 960px would be a poor width for a mobile stylesheet.
One resource that could help you is www.resizemybrowser.com. (There is a similar tool built into Firebug.)
At the end of the day, I think 960px is a good standard, but really, "it depends". :)
960 is a standard for fixed-width websites. It is to ensure that 1024x768 resolution will pick it up easily. As for height - it does not really matter.
In general, for a fixed-width website, that is meant to be read on a computer screen, nowadays, I'd say around 1000px (because there's no 800*600 resolution anymore and the least you can find is 1024*768).
You should really aim for an extensible design (generally harder to do though).
Out of experience, for the web i would say a width greater than 850 and less than 1000 px preferably in the 900's and a height of around 750 px, but bear in mind that the height would be variable in case of dynamic content. so the height could be set to 100% or auto.
and best to align the website in the center, via the css property margin: 0 auto;
The most common size is between 900-1000 pixels there are some good sources for screen size useage which most people tend to desgin for the largest group. mostly its assumed anyone with a 800 by 600 screen wont want to be doing much business. ie strapped for cash (big generalisation)
I won't consider only the desktop monitor resolutions. Nowadays you can browse websites on almost any device, and is fairly common for people to browse also with their mobile phones and tablet PC, so you really should consider them both.
This could result in a different site version for different devices, or a site layout that is ableto accomodate based on different sizes. This is something you have to consider when first thinking about the website you are planning to do, since not every website is suited to have a layout of this type.
An adaptable layout has the added benefits that it will be good even if new devices with custom (non standard) resolutions came out, you won't have to worry about checking it in those new devices because it will fit ok (if the layout was done right).
Anyway my standard minimun width is still 960px for desktop monitors, and for an adaptable layout I usually choose a max-width for really huge monitors (think about viewing a site which extends for the entire monitor width on a 2500x1600 monitor... gosh) of about 1200px, and a 100% width if the browser size is less than that, to allow the website to fit good everywhere.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm making a website now and I am trying to decide if I should make it fluid or not. Fixed width websites are much easier to make and also much easier to make them appear consistent.
To be honest though, I personally prefer looking at fluid websites that stretch to the full width of my monitor. My question comes from the fact that in most modern browsers you can hold control and scroll your mouse wheel to basically resize any website.
So is creating a fluid website worth the trouble?
It depends on your audience and your content.
The following are sites I respect and I think are example to imitate.
Fluid Examples:
Amazon
Wikipedia
Static Examples:
Apple
eBay
MSN
StackOverflow
MSDN
Some Mix it Up!
CNN
I think I prefer static most of the time. It is easier to make it look good in more browsers. It is also easier to read.
Making a website fluid, but adding a min/max-width attribute seems to be the best of both worlds, for me. You support fluidity, but you limit it at a certain width (say, 800px and 1200px).
It is up to you - here are some things to consider:
Text is hard(er) to read when lines are very long.
Your audience may have larger or smaller resolutions than normal, and picking an 'incorrect' static width will annoy them.
Maintaining a fluid site can be, but doesn't have to be much more difficult than its static counterpart.
Absolutely. It is a big inconvenience to people with huge monitors to have to resize the page. It can also be a bit dodgy with some layouts. Little inconveniences, no matter how trivial, can actually affect people's opinions of your site.
Also, netbooks have odd resolutions which make it hard to design sites for. For example, I'm writing this at 1024x600.
It's not particularly hard nowadays either (in modern browsers), especially with min- and max-height in CSS, and the new gradients, etc in CSS3, so image scaling won't be as big a problem in the near future.
In response to the comment below, I think that the pros outweigh the cons in this particular case - IE6 is a problem everywhere. We just have to deal with it.
You have to realize most computer users don't even KNOW HOW to zoom in the browser! Most users are so far from the understanding of computers that we have. We always have to remember that fact.
Text based apps: No. Table based apps: Yes.
Pros of fluid layouts
People with big monitors gets to use their screen real estate.
Easier for users with big monitors when you have a lot of information on your page.
Cons of fluid layouts:
A fluid width text column is hard to read if it's too wide. There's a good reason behind the use of columns in newspapers: it makes skipping to the next line much, much easier.
(Somewhat) hard to implement, because of the limitations in CSS.
If you're showing tabular data (iTunes, db manager, ...), fluid width is good. If you're showing text (articles, wiki pages, ...) fluid width is bad.
From my iPhone's perspective, fixed width layout is problematical when using code blocks. The scrollbar for wide code blocks doesn't show up, so I can't read the far right of the block.
Otherwise, I think it's a simple matter of what kind of site you're designing and how it looks on different size screens and windows. As previously mentioned, there's an option to set a maximum width, but the same caveat applies to code blocks and iPhones. I've designed both, and I don't prefer one over the other.
Although, it's fun to watch the boxes move around as I play with the browser size with a fluid layout, but I can be easily amused.
The most important thing is to consider dominant use cases of your web site or application. Do you expect people to use it exclusively on mobile devices? Mobile phones, netbooks, desktops?
Take a look at "Responsive Web Design" by Ethan Marcotte: http://www.alistapart.com/articles/responsive-web-design/
Great article that demonstrates the use of truly fluid layouts using media-queries. Sometimes you need to built out a separate front end for different user-agents, but sometimes media-queries are the perfect tool to service multiple resolutions across different user-agents.
It depends on what you're trying to do. Take a look at SO. It's fixed width and it's great. In fact, if it were fluid, it would be a bit of a PITA. Some sites look better with fluid layouts, but personally, I'd go with fixed unless you have a good reason to go fluid.
Many good points in the comments but from your question it seems you really like fluid designs and want to create one so go for it, it's your site, it doesn't have to be like every other site on the web.
Just be aware of pros ond cons of every solution.
Up to a point - yes.
There's a certain width, where text begins to become annoying to read if it's too wide. Easy to test if you have a large monitor, just grab notepad and paste some text into it without line breaks.
However, when going down to smaller sizes, being fluid might be a good idea. Mobile phone browsers are more and more capable of displaying "normal" websites just fine, but they are sometimes width-constrained, and as such, benefit if your site can fit in a bit smaller space.
Personally I also like to keep browser on my monitor but only at half of the monitor's width (24"). Sites which scale nicely into that are very good.
I think it's mostly a user convenience case. Not all sites will benefit from being fluid, but I think sites which have lots of text content are the ones that will most benefit from it, at least if they are fluid up to a max width (say 800px or whatever)
Yes. Page zooming is great but it is primarily used to make text bigger, not to make text fill the viewport. Certainly if the body text is already too wide, zooming down to make it fit will usually make it unreadable.
You need liquid layout if you're going to make the text fit the viewport whether or not it's zoomed.
The point about ‘long lines being hard to read’ is often overstated by designers trying to justify fixed width designs(*), but in reality it doesn't seem to hold quite as strongly on-screen as it did on paper. Of course setting a good leading/line-height is important, and max-width can be used to inhibit the worst excesses of long lines. (Set it in font-relative em units.) You don't get max-width in IE6, but that's not the disaster it once was. (You can fix it with a little bit of JavaScript if you really care about those guys. I don't.)
(* which are indeed less work for highly graphical layouts. But for a simpler layout like, er, StackOverflow's, there isn't really any reason not to go liquid. Tsk #SO, eh!)
Preface: Not a professional web artist.
I've found that there's way too many fiddly bits to get things to flow just so at cell-phone and uber-widescreen sizes, especially in anything of reasonably interesting complexity.
Typically, I design around having a fixed-width site in some fashion; usually bounded at [600,1200].
I also find super-wide columns of content to be a hassle to read. I seem to remember that there's some research which suggests an optimal number of words per column line.
You can make it like this.
# Make the main layout fluid and apply 'max-width: 1140px' to it and center it.
By this there won't be 'long lines' of text on bigger screens and proper settlement of web page on smaller ones (excluding 800x*** and lowers).
I have implemented this method in my new projects and it's working like a charm.
a.t.b .. :)
I think the decision fluid/fixed should be based also on content of the website:
For sites with big amounts of plain
information (like news portals),
better to use fluid layout.
Web-services better look and work in
fixed dimensions, so you always know
where interface elements are located
in their places and they are not moving
around constantly.
Yes, fluid websites are worth creating
As you said, it looks good and reasonable when you plan properly at design phase.
Your doubt about the impact of Ctrl + Scrollbar is not a big deal.
This feature is primarily for accessibility, to make text more readable by increasing the size.
However, if you mention all your sizes in Pixels (px) it won't happen.
Proper adjustment happens only when you use "em" to specify size. So you have a way to turn it on/off
I'm a big fan of fixed at < 800px... it's easier to read narrower columns, and it will work anywhere. That is, if you're trying to make a website that presents hypertext... Websites which present application front-ends, are I think another can of worms entirely...
Fluid design - truly fluid - is hard. Very hard. It's not just a question of page width - do your fonts scale, and does everything scale with them? Ideally:
Sizes should be defined in em rather than px
...and that goes for element sizes, not just fonts!
Given a change in font size or zoom level, the page elements should be the same size relative to each other
Our main product is fluid, and it's a pain from my point of view as a designer, especially because it involves a lot of user-generated content.
For one thing, images - in a fixed-width site, you can have an image that fills half the width, and looks great. In a fluid site, this image is just as likely to be lost in a sea of whitespace, looking rather lonely.
Life should be easier once border-radius and other CSS3 properties come into play more, but sadly our core audience are government workers, who all, ALL STILL USE IE F#!*ING 6!
To answer the question, "is it worth it"? Yes, if you do it right.
Here's a scenario: choose a fixed-width site: your boss displays it to a client on his brand-new, 1920x1600 laptop, then complains to you about "how it all looks small on this guy's screen!"
I think it's nice to be able to scale well on a user's screen, rather than make the users pan and zoom. In a time when users surf the web from such a wide variety of devices, ranging from smartphones to ultra-mobile PCs, each with its own, possibly non-standard resolution, I think it's important to keep user-experience at a high level when your site is viewed on such screens. Regarding the text length, it could be bounded by a certain ratio, so it would fit nicely within the layout. I think there are also frameworks that may help with writing a site in a fluid manner, and help with coding maintainability.
I'm gonna go against the majority and say NO. Reasoning: fluid sites like Wikipedia are a nightmare to read on large screens due to their long line length (though its citations make it hard to read at the best of times).
The problem really occurs because there is no mechanism to size text relative to the screen resolution. If you could automatically make text bigger on bigger resolutions, you could stay closer to the 80-odd characters per line that's generally regarded as the best for readability.
There is also the problem of images and other fixed-size elements. You can have large images and let the browser shrink them if necessary, but then you run into other problems like much longer download times, and image quality problems in many browsers.
I'm a fan of sites that do have a fixed max width of between 800px - 1000px, but can also scale down so that I can read the content without scrolling side-to-side and also without zooming out because often the text becomes too small to read and it hurts my eyes. So, this is normally want I strive for because I want to build sites I can be proud of.
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.