I have been working on this website and it is almost over.. until I discovered my computer is on a high resolution (1920 x 1080px).
I tested my website in 1024x768px and it was... not what I expected.
Anyway I searched far and wide around the web and there are still questions that I did not find answers to, so I am here to ask you , hoping to find an answer !
First of all, what I want about my website, is to be comfortable to any screen resolution on computer, from 1024 to 1920.
Also, I want it to be comfortable when you reduce the window (you know, like when you make a webpage only cover half the screen).
( English is not my mother tongue so I hope it will still be understandable for you guys.. )
1- I began using px. That does not work on lower resolutions, users have to unzoom. So now I am using % as advised on the web. But now when I reduce my window on the left of my screen, it adapts too, but too much.. I want it to make a horizontal scrollbar appear when you reduce the window too much.
SO basically that is my question, what should I do ? I find many websites that work fine (like this one, if you reduce the window a horizontal scrollbar appear !)
Maybe combining px and % ? I don't know, I really have no idea what to do.
2- Is the resolution of the screen comparable to the size of the window on a screen ? For example, my resolution is : 1920x1080px
If I put my window on the half left of my screen, will be equivalent to a resolution of 1920x5040 px ?
3- For phones and tablets, is it just a question of smaller resolutions ? Or is there something more ?
Thank you so much for helping me on this one !
Cheers,
Bill
First of all, you need to have a container of all your element. Every percentage value is based on it's container. And for scrollbar, may there in your site container have CSS overflow: hidden, so you need to remove it or change it to overflow: auto
I think you meant the content will be shrink horizontally and expand vertically. This is because you don't have any container to wrap each element with percentage width. So you need to have it and set min-width of that container.
For touch device, your site will zoomed out based on how big is your container.
This is not a simple question to answer. What you want to do is stop thinking in terms of pixels. Read about responsive design. Read about the elastic nature of HTML, and its ability to reflow your document. Read about media queries.
Basically, from a starting point, DON'T specify explicit widths for anything unless it is necessary. s and s automatically stretch to your full screen width, regardless of resolution.
You have quite a bit of a learning curve ahead of you, I'm afraid. Good luck and read lots.
Related
I am farely new to both HTML & CSS (maybe 4/5 months experience.),
I have started developing several websites as a learning basis,
& then I realised
that all of my designs were not 'responsive', so subsequently, I have started to replace all my 'px' values with vw, vh, vmax & vmin.. I have run into some sort of brick wall with my learning curve and wondering if anyone else has experienced this or knows any good sources that could help enlighten me..
Using the 'vw' property is at first sight going well, when I change the browser size everything shrinks, as intended to the viewport width, but getting the vertical scaling of objects, divs, inputs & options is proving to be somewhat difficult. I have attempted playing around with calc() vmin, vmax, vh etc, but they don't seem to be interchangeable unless I stick all of these into css variables. I know that flex-box and grid are designed to be responsive but these still don't seem to do much for the vertical scaling on smaller devices.
I have heard of em's & rems as unit's for font but these are not "responsive",
in the same way Vw & Vh are. ie, changing size on window resize.
Is there something I'm missing, Youtube searches for responsive design only yield hundreds of results for both flex-box and grid. But nothing much for general scaling down of both height and width (proportionatly)..
the first main question is which one is better out of the two
for proportionate scaling
(Vmin or Vmax)? across a range of devices?
if I am currently not intending to use any media queries?
I've tried multiple variations of calc(vw -*/+ vmin/vmax) + px/em/vh/vw/rem..
but the vertical measurements still stay the same... Can Anyone point me towards a good resource or video on youtube for this subject..
I'm finding the inspect element/test by device app in firefox very usefull, but need a shove in the right direction....
Any Ideas??
The first thing would be to check if you have set the viewport meta in your index.html file. If not that should be your very first step.
Secondly before writing the css for a website, you should go through the flex box and grids in css. You could spare with grids but flex box is of utmost importance. Then you could go further and study a little about the BEM model for css. Playing around with percentages and REM’s or vh may not help as you would have a web page which would shrink and expand according to the content that you tend to render. You should therefore make not of the layout of your website and what all things need to stay fixed and what all is going to change when you switch to another device. You should also go through using min-height , max-height and min-width, max-width with flex box that should make your life easy. Good Luck!!!!
try to search about bootstrap because when it comes responsiveness of the website bootstrap is your friend.
I have searched for this question, but I can't find a good solution, so maybe you guys can help me.
Link
If you look at this site, you can see that in each side (left/right), there is a banner. The width for these two are 160px each. the website is using the WHOLE screen at any givin time, but the ads are still 160px no matter what, and the game in the middle is the one shrinking to fit the screen, both vertically and horisontally.
How can I achieve this, and is it even possible to do in css alone? I've looked their code, but I can't really figure it out.
Banner provided by thirt pars (like AdSense) can't generally be resized for an obvoius reason: the advertiser provides, one or more images for the banner, possibly of different sizes; but that sizes are generally not intended to be "scalable" 'cause in that case the result might suck...
You can scale the container, of course, but you are asking about ADS...
When creating a web-site design, is the only real option to provide a fixed content width?
I notice most major websites (this one included) center all the content into a fixed width, which ensures all elements look correct on all screen sizes.
I think I already know the answer to this, but a colleague seems to think that there should never be a horizontal scrollbar and a website should resize to the users screen width. I make the argument that text can resize but other elements can’t (buttons, textboxes etc), so a fixed width is the only option.
I'd love your opinions each way.
Surely fixed width is the only way you can guarantee the correct layout on ALL browsers?
You can get clever with floats/media queries to make layouts work well at narrower widths.
But it is indeed more common to go with a fixed width:
It’s easier to design
Not many people have narrow monitors these days — most websites seem to assume they’ve got 1000 pixels of horizontal space to work with, and I haven’t heard of them getting many complaints
Touch-based OSs (iOS, Android et. al) make zooming web pages feel very natural, so pixel dimensions aren't quite as important there.
When lines of content get too wide (I think more than around 60 words?), they get difficult to read, so there’s not much advantage to be gained from having elements expand to full width for users who have bigger browser windows.
I think the most likely group of users to have less horizontal space available is smartphone users, and you’re going to want a specific design for them if you care that much about their experience.
Oh, just one thing though: “Surely fixed width is the only way you can guarantee the correct layout on ALL browsers?” With the greatest possible respect, that’s a bit of a programmer’s way to think about it. You can’t guarantee anything about web page rendering. Browsers and operating systems can do whatever they want. That’s the web. Let it go.
Dynamic-width web-sites are generally composed of one or many percentage-width blocks which make 100% total. So blocks size change with resolution or browser resizing, but if total width is too short it can occure lisibility problems, so a minimal width is specified for <body>, in which case a horizontal scrollbar appears.
But you can think differently : http://www.smashingmagazine.com/2008/08/14/will-horizontal-layouts-return/.
I tend to make my websites have a minimum width for legibility, but otherwise the width is determined as a percentage of the window size (I normally pick 80%).
I find this gives me ample coverage of the viewport, whilst still looking good on larger monitors.
I find this approach fails on larger screens when there is little content, as the content tends to get stretched into a line at the top of the page, which can make things confusing. So for those pages it can be good to have a fixed width, centred style.
No. A thousand times no.
If your website presents any kind of body text, fixed width is an abomination from the depths of the mid-90s, forcing readers to scroll like crazy, while being mocked by vast expanses of unused screen space to either size. (Now, a variable number of columns I might buy.)
BTW: flag for CW.
Horizontal scrollbars are a big problem. A properly designed website should be able to scale down to be used on small resolution screens (640x480). Also, it's nice to have to have my browser window maximized just to browse a site. Also, there's no reason why a person with a high resolution monitor shouldn't be able to use the extra space their monitor gives them.
Google Labs Browser Size
I've always preferred fixed-width layouts over fluid-width layouts, one of the main reasons is that I'm able to better understand how the whole picture will be without having to worry about the screen resolution.
But now the "picture" has changed, there is a high discrepancy between the lowest and highest resolutions used by most users nowadays and they seem to be here to stay.
I've a netbook that only supports 800 pixels or 1024 pixels wide; I also have a 22" monitor that supports 1650 pixels and, 24" monitors that support 1920 pixels and more are becoming pretty common.
I've pretty much "ignored" the 800 pixels users for some time and I've been developing with fixed 950/960 pixels wide, I also notice that popular sites (SO for one) either use this approach or the fluid one.
For text (almost) only websites (like Wikipedia) I don't see a problem using the fluid system but what about all the other websites that depend on images / video to create interesting content? Social Networks, Classifieds, and so on... What is (will be) their approach to address this issue?
Seam Carving seems like a good option for the near future but it hasn't matured enough (neither browsers nor jQuery nativelly support it at this point in time), I also feel like users wouldn't understand it, get confused with it and as a consequence abandon the website.
The de facto standard on the web is still 1024 pixels wide, and leaving 980 pixels unused in a 24" monitor just seems plain odd not to say wrong. So what are our options?
I would love to hear what you think about this and your experiences with both fluid and fixed systems.
PS: Popular websites using either one of these systems are also welcome, I'm specially interested in seeing non-text websites that use the fluid system.
EDIT: I just saw this answer and I got kinda confused about the difference between fluid and liquid layouts, aren't they supposed to be exactly the same?
I generally think that fluid layouts are a good idea. The problem starts when your fluid layout starts to get really wide with high resolution screens - there is a limit to how far the human eye can track horizontally without losing the vertical positioning. That is why newspaper columns, for example, are always rather narrow.
Try to look at wikipedia in a high resolution screen, and you'll see that they limit the maximum width to something around 800-900px - more then that (assuming a rather standard 12pt font) and people stop being able to read until the end of the line and then effortlessly find the start of the next line, and the whole thing breaks into a mess of eye and neck strain.
On web sites I build, I use max-width to limit the maximum width of the text content (and in that I also include images and other stuff) to about 720-800px, which with sidebars and such can possibly get to around 1000px. If the screen is wider then that, then either center the content of left align it (right align on RTL web sites) - both work well.
But you have to design your layout so that it flows when the available width is narrower - this is very useful for people with netbooks (which are rather popular now and I expect will become more popular in the future), smart phones and even small screen mobile devices. Such mobile devices more and more feature standard browsers and you should address this in your designs - even if a mobile browsers can reduce your website somehow, the "mobile mode" usually does this by messing up the page and killing your intended user-experience.
leaving 980 pixels unused in a 24" monitor just seems plain odd not to say wrong
I’d disagree here. If you’ve got a monitor with that high a resolution, you’re probably not running with a maximised browser window. And even if you are, are you really fussed that the content’s all in a fixed area in the middle? Really?
As long your site has a decent, useable layout, I don’t see the problem with space either side on high-res monitors.
There are ways to create different #media rules inside of a stylesheet—W3C has something on this—and although it's a big Schroedinger's Cat whether the handhelds' browsers will obey the rules, it's fairly safe to assume that, even if they don't, they have big enough and well-ratioed screens to just use a scale model of the site as it appears on desktops.
Seems to me that it was in the devices' manufacturers' best interests to make them compatible with web sites that predate the advent of such devices by 5-10 years.
And if not, it's their problem.
I approach the problem from a different angle. Have a fluid layout but give it a minimum width (rather than a maximum width). You can achieve this with CSS.
The problem with the images is not such big. What you do is the following:
Upload your image at the maximum size you expect to have.
Make the image fluid as follows:
<img src="http://example.png" style="width:32.5%">
As you resize the page the image will re-size itself at the percentage width. Just make sure that you don't have any width or height attributes in the image. I call it superlastic :)
Fluid layouts were the answer before Responsive Design support in browsers came out. No need to use fluid or elastic layouts anymore.
http://lessframework.com/
https://github.com/thatcoolguy/gridless-boilerplate
There is no right answer to this question as no two design goals are ever alike. Fluid layouts make any semblance of typographic control virtually impossible, but not all designs need or want it.
No collection of "best practices" will ever equate to an actual design education, and not all users feel compelled to blow their browser windows up to fill the entire screen, either.
Most informative discussion on layouts I have read so far is in Andy Budd's CSS Mastery book. If you get a chance, do read it. I think it's a must have book on CSS (intermediate level). It looks like the layouts chapter is available in article form here.
http://www.webreference.com/authoring/style/sheets/css_mastery2/
Another link :
http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
Liquid and Fluid are two different names for the same technique.
HTH.
I think it's better to have a maximum width of the layout, you can change that with Javascript.
A good example of that is this layout, look what happens (in Firebug or something) with the layout if you change the width: http://tweakers.net/
They have chosen a width of 1208px and make it smaller with Javascript when the width of the browser changes. With Javascript disabled, the website is still 1208px wide, which seems not to be a problem anyway.
EDIT:
The first width of the website will be like 900px. With Javascript you will check the width of the browser and you give the a class with the closest resolution to your browser width. For example: the browser width seems to be 1100px, so you give a class 'res1024', or the browser width is 1080px, then you give a class 'res1100'.
This will be your CSS:
#wrapper {
width: 900px;
}
.res1024 #wrapper {
width: 1000px;
}
.res1100 #wrapper {
width: 1080px;
}
I hope it helps you :], you can ofcourse change a lot more with this body class, like:
.res900 #menu {
width: 100px;
}
EDIT 2:
You can handle images the same way:
.res900 img.fluid {
width: 200px;
}
.res1100 img.fluid {
width: 300px;
}
I have a client with a resolution Width of 1200 on their monitor and I need to maximize the width of my web site but I don't want the client to have to use the horizontal scroll bar. What is the max width you can use in a website in IE 7 with a screen resolution of 1200 without needing to use a horizontal scroll bar(Other users will have a larger width and all users must have the same width)?
Extra info- The web site is already built and can not use a width of 100% as this has bad consequences in a non textual web site. Yes the resolution is a width of 1200 (the client has a 1920 X 1200 resolution monitor that is set on its side).
The OS is Vista and as the client is government he will have Vista at least through 2010 and can not change his theme/browser etc.
You asked two questions, really. To answer the title question:
20px (IE7, Windows XP, Default Theme)
Everybody else has done a great job of answering the real question.
how about:
body{
width:100%;
}
and by this I mean, let the user size their browser to whatever they want, and make your content fit their screen.
Update:
As users have noted below, sometimes 100% is a bit too much... for those cases I would highly recommend this article & demo by Cameron Adams (The Man In Blue) that applies fluid layouts that re-arrange the content/CSS bases on the width of the browser.
Simple, the maximum width is 100%.
Seriously though, what possible reason could you have for designing a website to the scale of a single persons single computer? What happens when they buy a new computer?
I design any fixed-width sites to roughly 900-1000 px and center it. This is the general approach taken by most sites and I strongly recommend not straying from it unless your design is capable of using percentage widths. Your client will understand if you explain it in these terms and show them any of the thousands of popular sites following this behaviour.
Just don't hardcode any pixel widths?
It doesn't seem likely that you're going to get it down to the exact pixel; since users can change their Windows theme, the right-hand scroll bar can vary in width.
Most websites I have seen do this allow their website to "float" into the width of the page by using CSS.
If you don't want to set the body width in css to 100%, then set it at about 95%. That will still allow the page to expand/contract to the end-user's desired width, down to only 400 width without a horizontal scroll.
The following formula should work for you, whether you use it for minimum or maximum page widths.
$safe_PgWidth_Percentage = (1 - (20/$minPageWidth));
While users in a restricted environment may not be able to change their operating system, browser, etc. I cannot imagine that they would not be able to grab the corner of their browser window and reduce or enlarge it by dragging.
That's the point your commentors are making. Coding the body to a percentage, in fact as close as possible to 100%, takes care of useability issues, including fixing your horizontal scrolling dilemma.