I'm considering implementing a feature that would let visitors to my forum change the width of the pages from 800px (for example) to 100%, and vice versa... Is this a good practice?
我正在考虑实施一项功能,让我的论坛访问者将页面宽度从800px(例如)更改为100%,反之亦然......这是一个好习惯吗?
8 个解决方案
#1
You should consider that there are a lot of different screen sizes out there. So if you change a websites width to 100% it might be changing it to e.g. 1600px which would be the double of your initial size. If your site is build up of floating elements, that change in size as well, this might not be a problem. Here is a nice overview of what it means to be a liquid layout: link text
你应该考虑到那里有很多不同的屏幕尺寸。因此,如果您将网站宽度更改为100%,则可能会将其更改为例如1600px这将是您的初始大小的两倍。如果您的站点是由浮动元素构成的,那么大小也会发生变化,这可能不是问题。以下是对液体布局意义的概述:链接文本
#2
My advice is to remember that reading articles spread on full-width with resolution of 1600px is very tiresome. You have to use liquid design wise, where it's applicable.
我的建议是要记住读取文章的全宽度分辨率为1600px是非常烦人的。在适用的情况下,您必须明智地使用液体设计。
#3
Relies on your design. What you want is called a Liquid, Hybrid or Fixed lay out.
依靠你的设计。您想要的是液体,混合或固定布局。
- Liquid: Pages stretches as browser window changes size
- Fixed: Page always same size, mostly centered at browser window
- Hybrid: A combination of these two
Liquid:Pages随浏览器窗口的大小而变化
修正:页面总是相同的大小,主要集中在浏览器窗口
混合:这两者的组合
I don't know your design so I don't know which you should use.
我不知道你的设计,所以我不知道你应该使用哪个。
Changing a fixed width (800px) to a percentage is not very common. I never saw it ever.
将固定宽度(800px)更改为百分比并不常见。我从来没有见过它。
#4
Take a look at some of the most popular website and see what they do when it comes to using fixed width or a percentage (or both).
看看一些最受欢迎的网站,看看它们在使用固定宽度或百分比(或两者)时的作用。
e.g. Amazon, Google, BBC, Microsoft... etc
例如亚马逊,谷歌,BBC,微软......等
Finding a common theme with them might indicate a preferred method for the wider audience.
找到与他们共同的主题可能表明更广泛的受众的首选方法。
My own personal preference is you have a minimum (e.g. 800px) for your website, and for any increase screen size on that, you apply a percentage to fill the screen. Of course bear in mind that you can have HUGE screen resolutions which can make your layout look silly, so a MAX width might need to be introduced for your design.
我个人的偏好是你的网站至少(例如800px),并且对于任何增加的屏幕尺寸,你应用一个百分比来填充屏幕。当然请记住,您可以拥有巨大的屏幕分辨率,这会使您的布局看起来很傻,因此可能需要为您的设计引入MAX宽度。
If your still unsure stick to fixed width.
如果你仍然不确定坚持固定宽度。
#5
Choose the minimum screen size you want to support and size your page to look good at that size by default, even if its does stretch to the size of the screen. Centering the design works well if users then have larger screens, just cater for that using a stylish border and background colour to suit the page design.
选择您要支持的最小屏幕尺寸,并在默认情况下调整页面大小,即使其大小拉伸到屏幕大小。如果用户拥有更大的屏幕,那么设计的中心效果很好,只需使用时尚的边框和背景颜色来适应页面设计。
#6
Why don't you just test it? Use javascript respectively ajax to load a script that stores the clicks on your switch and the users IP with it. Then you'll know how many of your users have intrest in such a button and how many switched back because they didn't like it.
你为什么不试试呢?使用javascript和ajax加载一个脚本,用于存储交换机上的点击次数和用户IP。然后你就会知道有多少用户对这样一个按钮感兴趣,有多少用户因为不喜欢而转回。
#7
So there are two questions I'm seeing:
所以我看到了两个问题:
-
Is it a good idea to let users have control over their UI?
让用户控制他们的UI是一个好主意吗?
My opinion on this is a flat out YES. But only if a) you do it without taking shortcuts, hacks, or anything that will be instable and b) this feature isn't distracting, is easy to use, and doesn't irritate them more than help them. Do a google search for "Feature Bloat".
我对此的看法是肯定的。但是,只有当a)你这样做而不采取捷径,黑客或任何不稳定的东西时b)这个功能不会分散注意力,易于使用,并且不会刺激他们而不是帮助他们。谷歌搜索“功能膨胀”。
Now, if I was going to offer such an option, I wouldn't go with toggling from 800px to 100%. I'd have the bounding box be resizeable like a program window. This could break all of the rules that I just laid out, which is probably why I haven't tried it, but yeah, going to a site on my way-to-giant monitor and seeing a tiny 800px box and thinking "another one" and then noticing the little "resize" icon on the side, that would be cool. Ultimately we need to get over the idea of the web being a desktop publishing environment and realize its all about users getting to customize things so that it's the site THEY want to come back to.
现在,如果我打算提供这样的选项,我不会选择从800px切换到100%。我可以将边界框像程序窗口一样调整大小。这可能会破坏我刚刚提出的所有规则,这可能就是为什么我没有尝试过,但是,是的,我去了一个通往巨型监视器的网站,看到一个800px的小盒子,想着“另一个“然后注意到侧面的小”调整大小“图标,那会很酷。最终,我们需要克服网络作为桌面出版环境的想法,并实现所有关于用户定制的东西,以便它是他们想要回归的网站。
-
How do you anticipate giant screens and what is the best thing to do for such situations?
您如何预测巨型屏幕以及在这种情况下最好的做法是什么?
For this, most of what has come up is right on point. I'll remind everyone that FF does not play nice with min- and max- dimensions. There is another route that I learned not that long ago and still haven't tried. With CSS3, You can actually use the @media tag in your css to specify style sheets for specific screen sizes. they are called @ media queries, so for example:
为此,大部分内容都是正确的。我会提醒大家,FF在最小和最大尺寸方面表现不佳。还有另一条路线是我很久以前才学到的,但仍未尝试过。使用CSS3,您实际上可以在css中使用@media标签来指定特定屏幕尺寸的样式表。它们被称为@ media查询,例如:
@media screen and (min-width: 400px) and (max-width: 700px) { ... }
@media屏幕和(最小宽度:400px)和(最大宽度:700px){...}
Then if the screen is over, say 1024, you set the width to be 1000px, but anything UNDER 1024, you set the width to be 100% (or 90% or whatever). That way you don't need to worry about setting the width at 800 minimum and then having users on mobile phones unable to read the page because it's too wide, etc.
然后,如果屏幕结束,例如1024,则将宽度设置为1000px,但是在1024以下的任何内容中,您将宽度设置为100%(或90%或其他)。这样您就不必担心将宽度设置为最小800,然后让手机上的用户无法读取页面,因为它太宽,等等。
#8
I would use a min-width and max-width css attribute to set absolute min/max, then let it be fluid otherwise. Note that min/max width are not supported in IE6, but then it'll just default to fluid so it shouldn't be a big deal.
我会使用min-width和max-width css属性来设置绝对最小值/最大值,然后让它变为流体。请注意,IE6中不支持最小/最大宽度,但它只是默认为流畅,所以它不应该是一个大问题。
#1
You should consider that there are a lot of different screen sizes out there. So if you change a websites width to 100% it might be changing it to e.g. 1600px which would be the double of your initial size. If your site is build up of floating elements, that change in size as well, this might not be a problem. Here is a nice overview of what it means to be a liquid layout: link text
你应该考虑到那里有很多不同的屏幕尺寸。因此,如果您将网站宽度更改为100%,则可能会将其更改为例如1600px这将是您的初始大小的两倍。如果您的站点是由浮动元素构成的,那么大小也会发生变化,这可能不是问题。以下是对液体布局意义的概述:链接文本
#2
My advice is to remember that reading articles spread on full-width with resolution of 1600px is very tiresome. You have to use liquid design wise, where it's applicable.
我的建议是要记住读取文章的全宽度分辨率为1600px是非常烦人的。在适用的情况下,您必须明智地使用液体设计。
#3
Relies on your design. What you want is called a Liquid, Hybrid or Fixed lay out.
依靠你的设计。您想要的是液体,混合或固定布局。
- Liquid: Pages stretches as browser window changes size
- Fixed: Page always same size, mostly centered at browser window
- Hybrid: A combination of these two
Liquid:Pages随浏览器窗口的大小而变化
修正:页面总是相同的大小,主要集中在浏览器窗口
混合:这两者的组合
I don't know your design so I don't know which you should use.
我不知道你的设计,所以我不知道你应该使用哪个。
Changing a fixed width (800px) to a percentage is not very common. I never saw it ever.
将固定宽度(800px)更改为百分比并不常见。我从来没有见过它。
#4
Take a look at some of the most popular website and see what they do when it comes to using fixed width or a percentage (or both).
看看一些最受欢迎的网站,看看它们在使用固定宽度或百分比(或两者)时的作用。
e.g. Amazon, Google, BBC, Microsoft... etc
例如亚马逊,谷歌,BBC,微软......等
Finding a common theme with them might indicate a preferred method for the wider audience.
找到与他们共同的主题可能表明更广泛的受众的首选方法。
My own personal preference is you have a minimum (e.g. 800px) for your website, and for any increase screen size on that, you apply a percentage to fill the screen. Of course bear in mind that you can have HUGE screen resolutions which can make your layout look silly, so a MAX width might need to be introduced for your design.
我个人的偏好是你的网站至少(例如800px),并且对于任何增加的屏幕尺寸,你应用一个百分比来填充屏幕。当然请记住,您可以拥有巨大的屏幕分辨率,这会使您的布局看起来很傻,因此可能需要为您的设计引入MAX宽度。
If your still unsure stick to fixed width.
如果你仍然不确定坚持固定宽度。
#5
Choose the minimum screen size you want to support and size your page to look good at that size by default, even if its does stretch to the size of the screen. Centering the design works well if users then have larger screens, just cater for that using a stylish border and background colour to suit the page design.
选择您要支持的最小屏幕尺寸,并在默认情况下调整页面大小,即使其大小拉伸到屏幕大小。如果用户拥有更大的屏幕,那么设计的中心效果很好,只需使用时尚的边框和背景颜色来适应页面设计。
#6
Why don't you just test it? Use javascript respectively ajax to load a script that stores the clicks on your switch and the users IP with it. Then you'll know how many of your users have intrest in such a button and how many switched back because they didn't like it.
你为什么不试试呢?使用javascript和ajax加载一个脚本,用于存储交换机上的点击次数和用户IP。然后你就会知道有多少用户对这样一个按钮感兴趣,有多少用户因为不喜欢而转回。
#7
So there are two questions I'm seeing:
所以我看到了两个问题:
-
Is it a good idea to let users have control over their UI?
让用户控制他们的UI是一个好主意吗?
My opinion on this is a flat out YES. But only if a) you do it without taking shortcuts, hacks, or anything that will be instable and b) this feature isn't distracting, is easy to use, and doesn't irritate them more than help them. Do a google search for "Feature Bloat".
我对此的看法是肯定的。但是,只有当a)你这样做而不采取捷径,黑客或任何不稳定的东西时b)这个功能不会分散注意力,易于使用,并且不会刺激他们而不是帮助他们。谷歌搜索“功能膨胀”。
Now, if I was going to offer such an option, I wouldn't go with toggling from 800px to 100%. I'd have the bounding box be resizeable like a program window. This could break all of the rules that I just laid out, which is probably why I haven't tried it, but yeah, going to a site on my way-to-giant monitor and seeing a tiny 800px box and thinking "another one" and then noticing the little "resize" icon on the side, that would be cool. Ultimately we need to get over the idea of the web being a desktop publishing environment and realize its all about users getting to customize things so that it's the site THEY want to come back to.
现在,如果我打算提供这样的选项,我不会选择从800px切换到100%。我可以将边界框像程序窗口一样调整大小。这可能会破坏我刚刚提出的所有规则,这可能就是为什么我没有尝试过,但是,是的,我去了一个通往巨型监视器的网站,看到一个800px的小盒子,想着“另一个“然后注意到侧面的小”调整大小“图标,那会很酷。最终,我们需要克服网络作为桌面出版环境的想法,并实现所有关于用户定制的东西,以便它是他们想要回归的网站。
-
How do you anticipate giant screens and what is the best thing to do for such situations?
您如何预测巨型屏幕以及在这种情况下最好的做法是什么?
For this, most of what has come up is right on point. I'll remind everyone that FF does not play nice with min- and max- dimensions. There is another route that I learned not that long ago and still haven't tried. With CSS3, You can actually use the @media tag in your css to specify style sheets for specific screen sizes. they are called @ media queries, so for example:
为此,大部分内容都是正确的。我会提醒大家,FF在最小和最大尺寸方面表现不佳。还有另一条路线是我很久以前才学到的,但仍未尝试过。使用CSS3,您实际上可以在css中使用@media标签来指定特定屏幕尺寸的样式表。它们被称为@ media查询,例如:
@media screen and (min-width: 400px) and (max-width: 700px) { ... }
@media屏幕和(最小宽度:400px)和(最大宽度:700px){...}
Then if the screen is over, say 1024, you set the width to be 1000px, but anything UNDER 1024, you set the width to be 100% (or 90% or whatever). That way you don't need to worry about setting the width at 800 minimum and then having users on mobile phones unable to read the page because it's too wide, etc.
然后,如果屏幕结束,例如1024,则将宽度设置为1000px,但是在1024以下的任何内容中,您将宽度设置为100%(或90%或其他)。这样您就不必担心将宽度设置为最小800,然后让手机上的用户无法读取页面,因为它太宽,等等。
#8
I would use a min-width and max-width css attribute to set absolute min/max, then let it be fluid otherwise. Note that min/max width are not supported in IE6, but then it'll just default to fluid so it shouldn't be a big deal.
我会使用min-width和max-width css属性来设置绝对最小值/最大值,然后让它变为流体。请注意,IE6中不支持最小/最大宽度,但它只是默认为流畅,所以它不应该是一个大问题。