Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
Why are websites portrait when screens are landscape?
- Thread starter adversecamber
- Start date
- Sort by reaction score
If you scrolled horizontally, surely a line of text would never end?
You would keep scrolling from left to right until you got to the end of what is being written.
You would keep scrolling from left to right until you got to the end of what is being written.
Because that's how we read (in English anyway), left to right, top to bottom. A website that you need to scroll across would have lines that are too long, essentially unreadable. It's a design thing, think about a newspaper, how the columns are only so wide, when there is all that room across ...
It makes sense (in my head) that the browser would know the size of the window/display and then justify the text accordingly.
And what exactly would you consider "accordingly?" As others have stated, a number of cultures read left to right and top to bottom, and a horizontal page flow would create very hard to read pages. It could be broken into columns that you read from left to right, but frankly the technology isn't there to do this reliably, especially when the first was getting its foot holds. Now people stick with it because it's easier and it's what people expect. When I come across pages where the content scrolls horizontally I generally fail to realize it and leave the page before noticing. Also my mouse scroll wheel would need to be setup for scrolling horizontally as I never use scroll bars them self to adjust a page.
Also a lot of people such as myself don't use their browser at full screen. I keep mine somewhat narrow as I have other applications up behind it that I reference and use on a regular basis. There's been a number of studies that show people do better when reading content in a narrow column rather than long lines of text. So I guess to summarize an answer for you, it's because it's a best practice for web design layouts.
According to the size of the window. That shoots down your "don't use the browser at full screen" argument.
And if you read my posts, I'm not suggesting that you'd need to scroll anything other than vertically, just that text could be formatted in such a way that it uses the space afforded to it, therefore leading to less 'wasted' space (see attached above) and less scrolling - a bit like, as you may notice, MacRumors Forums does when altering the width of the window.
But then long lines of text become harder and harder to read, newspapers are the way they are for reason.
Do you find MR hard to read?
Surely, if people had a problem with it then they could resize the window?
So you're really just picking at some sites you come across that you don't feel make use of space appropriately. Why not ask those site owners why they chose to design them as such? The likely answer is that most of the web isn't designed by professionals and they aren't aware of techniques to design more fluid layouts, or they have customers that tell them the design will be X pixels wide, no more, no less.
Some posts with really long paragraphs are hard to read, but I normally keep the window about 1/2 the size of my screen, that makes it easier.
It's not really the browser. It's how the HTML/CSS that the browser is rendering is written.
Websites are often designed to work in the smallest browser window likely to be used for viewing it, which is why they end up being 800px wide and 1200px tall on large displays.
Liquid GUI is an elegant alternative; you simply code the various site components to scale and position relative to the window dimensions.
ie: the top navigation anchors itself to the top of the window, the content area/background scales to fill the entire window, and the content itself is centered in the content area.
The site automatically configures itself to "fit" the browser window, and has no predefined aspect ratio.
Liquid GUI is an elegant alternative; you simply code the various site components to scale and position relative to the window dimensions.
ie: the top navigation anchors itself to the top of the window, the content area/background scales to fill the entire window, and the content itself is centered in the content area.
The site automatically configures itself to "fit" the browser window, and has no predefined aspect ratio.
Sorry, guess I misinterpreted your first post. And based on that other post, it sounded to me like you think the browser should override what the web page has asked to render. Maybe you can give us some background on your familiarity with HTML and CSS and web design and what you think are possible solutions to this dilemma that would work in an expected, consistent way across all browsers, screen resolutions, platforms, websites, etc.
Liquid GUI has no special accessibility issues, compared to a modular layout.
Accessibility and SEO are billable upgrades to web content that are doable regardless of the format of the site.
The client has to be willing to pay for it though.
Accessibility and SEO are billable upgrades to web content that are doable regardless of the format of the site.
The client has to be willing to pay for it though.
Because the most popular resolution is 1024x760. Designers like to control the way that there sites will look, so they create fixed widths so it looks the same on a 13 inch laptop, or 30 ACD. Allowing images and text to flow freely based on resolution takes the look and feel away from the designer and the site will look different based on your screen resolution.
I wish to affirm that liquid layouts do not cause any accessibility issues above and beyond any other method.
I've read this entire thread and golf clapped quietly to myself when someone finally mentioned the OP was really asking for a liquid layout. I have encouraged this on this forum, and many folks think I'm crazy for doing so and that its better to design the layout for the most common and popular standard of the day, i.e. when users mention screen resolutions in this very thread.
Okay, forget about MY bias, let's hear what the W3C has to say:
Notice the mentioning of other devices - these days we have wireless devices, computer screens of varying aspect ratios galore, so this is important.
This emphasizes the importance of flow, and if any of you follow this forum regularly, much of the advice centers around div's replacing tables for layout and CSS being integrated as a modern means of development. Liquid layouts are perfectly compatible with XHTML/CSS - it's worth stressing.
Nobody here, not even I, are saying convert all your web sites to liquid layout - the only major point I am making is developers should learn more about the technique and apply it more often. Make use of your screen real estate and let the browser in modern media machines handle resizing and conformity based on variable heights, widths, sizes and percentages of content layout all while separating content from style via XHTML/CSS as you'd normally do.
Just some food for thought, we're all right, nobody is wrong.
-jim
I've read this entire thread and golf clapped quietly to myself when someone finally mentioned the OP was really asking for a liquid layout. I have encouraged this on this forum, and many folks think I'm crazy for doing so and that its better to design the layout for the most common and popular standard of the day, i.e. when users mention screen resolutions in this very thread.
Okay, forget about MY bias, let's hear what the W3C has to say:
Notice the mentioning of other devices - these days we have wireless devices, computer screens of varying aspect ratios galore, so this is important.
This emphasizes the importance of flow, and if any of you follow this forum regularly, much of the advice centers around div's replacing tables for layout and CSS being integrated as a modern means of development. Liquid layouts are perfectly compatible with XHTML/CSS - it's worth stressing.
Nobody here, not even I, are saying convert all your web sites to liquid layout - the only major point I am making is developers should learn more about the technique and apply it more often. Make use of your screen real estate and let the browser in modern media machines handle resizing and conformity based on variable heights, widths, sizes and percentages of content layout all while separating content from style via XHTML/CSS as you'd normally do.
Just some food for thought, we're all right, nobody is wrong.
-jim
I use both fluid and fixed designs in my sites, though I have been designing many more fixed designs lately.
There are pros and cons to each:
Fluid:
Pros- Expands the whole page and uses all screen real estate.
Cons- You lose the ability to use banners and graphics that require you to know the exact size of the page.
Fixed:
Pros- More ability to design. You know the exact size the site is going to be and can adjust images accordingly.
Cons- You lose real estate.
There are many other pros and cons, but for me, this is what it boils down to.
Summary: You lose a lot control of the design with fluid, but lose screen real estate with fixed. It depends on the site you are building. Most of my sites are more graphics-heavy, so I design it in fixed...
There are pros and cons to each:
Fluid:
Pros- Expands the whole page and uses all screen real estate.
Cons- You lose the ability to use banners and graphics that require you to know the exact size of the page.
Fixed:
Pros- More ability to design. You know the exact size the site is going to be and can adjust images accordingly.
Cons- You lose real estate.
There are many other pros and cons, but for me, this is what it boils down to.
Summary: You lose a lot control of the design with fluid, but lose screen real estate with fixed. It depends on the site you are building. Most of my sites are more graphics-heavy, so I design it in fixed...
As to embedded images - in any layout the key difference between fluid and fixed designs involve a few more steps with slicing and setting up dynamic width div's. I admit and we all know it's far, far easier to design a layout to exact dimensions, compared to slicing up layers within a graphics editing tool and assigning some of them to be dynamic width (i.e. as background images that repeat-x or repeat-y where applicable, requiring extra steps in design, exporting and logically creating the CSS to make it work).
I've gone through the process numerous times on fluid designs which involve (for example, headache inducing...) gradients in graphics and quite a bit of planning in advance for the slicing and placement of the image content. Time equals money, understood. I'm just noting for the record that once you start doing a few, like anything else you do it faster plus fixing mis-alignment is even easier in the long run because that will be mostly controlled via CSS, less frequent need to re-export image after editing in your image editor. For the professionals out there, try a few more liquid layouts this year and practice what the W3C guidelines suggest.
Peace to all and keep an open mind, that's all I'm sayin', honest! I've said my thing, don't wanna talk this to death.
-jim
I've gone through the process numerous times on fluid designs which involve (for example, headache inducing...) gradients in graphics and quite a bit of planning in advance for the slicing and placement of the image content. Time equals money, understood. I'm just noting for the record that once you start doing a few, like anything else you do it faster plus fixing mis-alignment is even easier in the long run because that will be mostly controlled via CSS, less frequent need to re-export image after editing in your image editor. For the professionals out there, try a few more liquid layouts this year and practice what the W3C guidelines suggest.
Peace to all and keep an open mind, that's all I'm sayin', honest! I've said my thing, don't wanna talk this to death.
-jim
You are missing out on one thing, a design does not have to be 100% fluid or 100% fixed. There is middle ground. On my site I do something along the lines of width: 47em, with max-width: 90%, and min-width: 20em. This is something that's catching on since 100% fluid on 32" monitors with the browser full screen leads to hard reading. Yea sure, this technique doesn't work on IE since it doesn't support min/max-width, but still the principle is there. Also banners can be made to have some flexibility, depending on the exact banner, there may be some extra part of it that gets hidden with overflow depending on the size of the page. Though again, that's a per basis decision that would need to be made.
So on a 30" screen you want a line of text to be 25" wide? Sorry, that won't be legible.
That is exactly the reason not to have full screen windows.
IMO, this is correct, and far too frequent.
Textfield width and navigation labels should always be controlled by the developer for maximum readability and correct scale/positioning, and should not be allowed to arbitrarily expand to fit the window dimensions, or render with fonts/sizes not congruent with the overall design.
(client-side font settings and local stylesheets should not be allowed to disrupt your layout; I've seen plenty of examples in which otherwise beautifully designed sites absolutely fall apart when the text is scaled by the client. Yeah, I know; accessibility, yadayadayada...*hurl*)
There is a remarkable difference between a site that simply (and often stupidly) expands to fill the entire window, and one that uses a true liquid layout in which the scale, position and appearance of every object, font, component and pixel within the site is implicitly controlled by code.
Liquid layout = intelligent scaling and positioning of content;