Hi Gorgoyle, and welcome to Sitepoint!
According to W3Counter, over 20% of people are browsing with a screen width of 1024px or less. Remember that unless you are targeting a very specific market segment, you’re going to have a whole range of people using your site. People on older computers with smaller screens. People on top-end machines with massive screens and very high resolution. People on corporate networks, which are often locked to 1024×768 irrespective of anything else. People on netbooks and notebooks with small screens. People on mobiles phones. People with poor eyesight who have to have a much lower screen resolution than you might expect from the monitor size in order to be able to read it.
And then you have the issue of how much of that screen is taken up by the browser window. You can’t rely on people having their browser windows maximised. I don’t, on my 1280×1024 home PC, but I do on my 1024×768 laptop and work PC. The larger the screen, the more likely it is that people won’t maximise their windows. So screen resolution is an increasingly poor indicator for window size.
in both cases some web browsers will ask for width in pixels! in your code
Sorry, but I’m not quite sure what you mean by that. You can specify dimensions in absolute terms (usually px *), relative terms (such as % of parent element) or scalable terms (like em, so that it remains in proportion to the text size). Those will all work in all browsers, although you won’t necessarily get an exact facsimile rendering, because different browsers sometimes perform the calculations in slightly different ways.
* OK, I know that technically pixels are relative measurements rather than absolute, but in terms of web design that’s generally an unhelpful distinction. It makes more sense, in terms of the rendered page, to think of them as absolute measurements.
Also for expandable-resizeable 100% page you need minimum width defined in pixels and/or maximum page width in pixels.
It’s equally sensible to set the max-width in ems rather than pixels – readability is affected both by the physical length of the line but also the number of characters per line, so setting the maximum width of the content area to be equivalent to, let’s say, about 150 characters, will give a sensible constraint whatever text size is used.
Also web design code is guided by coordinates of monitor screen from top in pixels and from left in pixels. So using any percentable size need to be related on that screen’s coordinates! Pixels again!
But because you don’t know either the size of the window or the size of the text as it appears on the reader’s computer, it can often be better to allow their browser to calculate the dimension and position in pixels, from your rules in % or ems.
Ye! Wrapping your 100% width page looks cool when you watching what you did with your coding skillz, moving your mouse wildly-resizing your browser window and wondering how you awesome are but in praxis you just risk for you site to get wrapped on some widescreen monitor and becoming completely useless for visitor to read content.
That’s where a combination of using max-width constraints and extensive testing comes in. If you work your design out carefully and test it in a wide range of setups, you should ensure that in pretty much any plausible arrangement, the site will display fine and without excessively short or long lines, without wrapping or overlapping problems, etc.
No, you probably won’t get your readers resizing their windows just to see the funky effects as the page rejigs itself to fit into the window, but each of them will see it at a different stage of the process. Your job as a designer is to ensure that your site works for the people who want to read it, not the other way round.
All design is abt “Storytelling”. You need “to tell the story” to user… and if you guide by that you wont make mistakes. This sentence is maybe too abstract here but it works when you design and think of it. It can help a lot. Ppl like stories!
This little pixel went to market, this little pixel stayed at home, this little pixel had rgb(181,88,72) and this little pixel had #000.
1 thing more is webpage height! That may vary form page to page on same website but for most friendly user experience of visiting some site is to height of page be abt height of user screen + one half of it. To user not have to scroll a lot…again that depends of your site content but also to many short pages “stored” in “pages numbers” buttons or in “next, next page” buttons wont be good for user friendly design. Solution is in finding right measure of both methods and good organizing of website content.
It’s good to remember the ‘height’ aspect of the page and to ensure that the key content is near the top so that people can see it straight away and don’t have to scroll to find it. You need to give them enough juicy stuff at the top to hook them in so that they do then bother to scroll down – if the first screenful doesn’t convince them that the page is worth reading then they won’t read on. That said, people are now perfectly used to scrolling down a page, and now that scroll-wheel mouses and scrolling trackpads are common, this is less of an issue than it was when the web first appeared.
The balance between scrolling and pagination (having to click ‘next’ to go to the next page to continue the article/list of products, etc) is a difficult one. In general, I prefer to have everything all in one page, because once it’s loaded it’s then done, and I don’t have to wait for any more page loads. I can search the entire page for text. I can easily save or print the page if I want to. On the other hand, if I was on a slow connection, I wouldn’t particularly want to have to wait while the entire page loaded if I was only interested in the first little bit. That’s a particular issue for any kind of search facility (including shopping carts) where you would expect most people to find what they were looking for in the first few results – it isn’t necessarily helpful then to serve up a page listing a hundred results if you know that most people aren’t going to look beyond #10. Part of that comes down to the context and design of each individual site. If you can allow users to choose the number of results displayed, that can give the most flexibility and the best of both worlds.