流畅的网站是否值得一试?[关闭]


218

我现在正在制作一个网站,并且试图确定是否应该使它流畅。固定宽度的网站更容易制作,也更容易使它们看起来一致。

不过,老实说,我个人更喜欢查看流畅的网站,这些网站可以延伸到显示器的整个宽度。我的问题来自这样一个事实,在大多数现代浏览器中,您都可以控制并滚动鼠标滚轮以基本调整任何网站的大小。

那么创建一个流畅的网站值得麻烦吗?


1
if(a == 1){+ a} else {'nawp'}
Sphvn 2010年

Answers:



43

对我来说,使网站流畅,但添加最小/最大宽度属性似乎是两全其美。您支持流动性,但将其限制为一定的宽度(例如800px和1200px)。

由您决定-以下是要考虑的一些事项:

  1. 当行很长时,文本很难阅读。
  2. 您的听众的分辨率可能会比平常更大或更小,而选择“不正确”的静态宽度会使他们烦恼。
  3. 保持流体位置可以,但不必比其静态对应位置困难得多。

关于浏览器兼容性的任何评论吗?
HaveAGuess


谢谢,林给getskeleton的反应电网去..
HaveAGuess

37

绝对。对于拥有巨大监视器的人来说,必须调整页面大小是一个很大的不便。在某些布局下,它也可能有些晦涩。小麻烦,无论多么琐碎,实际上都会影响人们对您网站的看法。

而且,上网本的分辨率很奇怪,因此很难为其设计网站。例如,我以1024x600的分辨率编写。

这不是特别难如今是(在现代浏览器),尤其是min-max-height在CSS中,而新的梯度,等,在CSS3,所以图像缩放不会像在不久的将来大问题。

在回应下面的评论时,我认为在这种特殊情况下,优点胜过缺点-IE6到处都是问题。我们只需要处理它。


24
“现在也不是特别困难”,我希望有所不同。IE6仍然很真实。编写适用于这种小巧的f @@@ er的流畅布局是一项艰巨的挑战。尝试搜索“ css圣杯”。rr
支出者

4
我认为,像所有Web开发人员一样,我大多数时候都喜欢忽略IE6。不能摆脱它,但是它使我更快乐:)。(我知道我回避了评论,但我现在想不出任何回应。)
卢卡斯·琼斯

91
停止支持IE6
Jason

21
是的,在乌托邦,我们都将停止支持IE6,但通常情况下,金钱会相反。
支出者

13
根据w3schools.com/browsers/browsers_stats.asp,13%的Web使用IE6,15%的Web使用IE7。这是支持IE6的一个很好的理由。简单的思想上的厌恶是不足以抛弃IE6的。对不起,杰森。
保罗·内森

16

您必须意识到大多数计算机用户甚至都不知道如何放大浏览器!到目前为止,大多数用户还不了解我们拥有的计算机。我们总是必须记住这一事实。


2
好,那意味着什么?您在争取哪一边?
标记

1
这意味着我在争夺流畅的网站,因为我们无法假设用户知道如何自行更改大小。
亚历·巴拉诺斯基

您是否不必调整浏览器的大小来告知网站是否流畅?谁能不知道如何调整窗口大小?
09年

1
是的,我的意思是放大:)我本人只是在一分钟前第一次放大了我的浏览器。
亚历·巴拉诺斯基

那么,那么您就是一个不知道如何使用计算机的人
bevacqua,2010年

9

基于文本的应用:。基于表格的应用程序:

流体布局的优点

  1. 拥有大显示器的人可以使用其屏幕空间。
  2. 当您的页面上有很多信息时,对于使用大型显示器的用户来说更容易。

流体布局的缺点:

  1. 如果宽度太宽,则很难阅读宽度可变的文本列。在报纸上使用专栏有一个很好的理由:它使跳到下一行变得非常容易得多。
  2. (有点)难以实现,因为CSS的局限性。

如果要显示表格数据(iTunes,数据库管理器等),则流体宽度很好。如果要显示文本(文章,Wiki页面等),流体宽度不好。


在大型浏览器上,维基百科很难阅读,因为句子之间的距离不会随着行长的增加而缩小。我发现来回扫描眼睛非常困难,因为在来回移动眼睛时没有可遵循的“装订线”。
Ape-in​​ago

8

从我的iPhone的角度来看,使用代码块时固定宽度的布局是有问题的。宽代码块的滚动条没有显示,因此我无法读取该块的最右边。

否则,我认为这很简单,这是您要设计的网站类型以及它在不同大小的屏幕和窗口上的外观如何。如前所述,可以选择设置最大宽度,但是同样的注意事项也适用于代码块和iPhone。我已经设计了两者,但我不喜欢一个。

虽然,当我以流畅的布局使用浏览器尺寸时,看着盒子四处移动很有趣,但是我很容易被逗乐。


6

最重要的是考虑网站或应用程序的主要用例。您希望人们专门在移动设备上使用它吗?手机,上网本,台式机?

看看Ethan Marcotte的“响应式Web设计”:http : //www.alistapart.com/articles/sensitive-web-design/

很棒的文章演示了如何通过媒体查询来使用真正流畅的布局。有时您需要为不同的用户代理构建一个单独的前端,但是有时媒体查询是为不同的用户代理提供多种分辨率的理想工具。


5

这取决于您要执行的操作。看一下SO。它是固定宽度,很棒。实际上,如果它是流动的,那将有点PITA。有些网站的布局看起来比较流畅,但就个人而言,除非您有充分的理由进行修改,否则我会选择固定的。


1
它总是适合我的浏览器,而不是让我调整大小。那怎么会是PITA?在某些情况下,使用液体布局很难实现复杂的图形布局,但这当然不适用于SO的斯巴达式设计。
bobince

2
这将是PITA,因为所有答案都将遍及整个页面。我很高兴看到文字环绕在500左右的像素处。这就是为什么书籍通常以宽度比例书写的原因,因为人们的眼睛在某个点横向移动后会感到疲倦……
Jason

那不是PITA。那就是我想要的。如果要限制很长的行,请在em中设置max-width,但是典型字体大小的500px并不长。很少的实际研究不能支持传统的基于打印的行长来进行屏幕阅读。
bobince

3
我个人希望SO保持流畅。
Nosredna

4

评论中有很多不错的观点,但是从您的问题来看,您似乎真的很喜欢流畅的设计,并且想要创建一个顺畅的设计,这是您的网站,而不必像网络上的其他网站一样。

请注意每种解决方案的优点和缺点。


3

在一定程度上-是的。

有一定的宽度,如果文本太宽,则开始变得讨厌阅读。如果您有大型显示器,则易于测试,只需抓住记事本并将一些文本粘贴到其中即可,而无需换行。

但是,当减小尺寸时,保持流畅可能是个好主意。手机浏览器越来越能够显示“正常”网站,但是它们有时受宽度限制,因此,如果您的网站可以容纳在更小的空间中,则会受益。

就我个人而言,我也喜欢将浏览器保留在显示器上,但仅保留显示器宽度的一半(24英寸)。可以很好地缩放的网站非常好。

我认为这主要是为了用户方便。并非所有网站都会从流畅的内容中受益,但我认为包含大量文本内容的网站是最能从中受益的网站,至少是在流畅到最大宽度(例如800px或其他宽度)的情况下


同意 我倾向于在800-1200像素宽的范围内建立我的所有网站。纵观页面上的1600像素,通常没有足够的内容来散布,它开始显得空虚。
womp

2

是。页面缩放很棒,但是它主要用于使文本变大,而不是使文本填充视口。当然,如果主体文本已经太宽,则缩小文本以使其适合通常会使其变得不可读。

如果要使文本适合视口(无论是否缩放),都需要液体布局。

设计师试图证明固定宽度的设计(*)常常夸大“长线难以阅读”的观点,但实际上,它在屏幕上似乎不像在纸上那样牢固。当然,设置一个好的行距/行高很重要,最大宽度可以用来抑制长行的最严重的过度。(将其设置为相对字体的em单位。)您不会在IE6中获得最大宽度,但这并不是曾经的灾难。(如果您真的在乎那些人,可以使用一些JavaScript来修复它。我不需要。)

(*对于高度图形化的布局来说确实不那么有用。但是对于诸如er,StackOverflow这样的更简单的布局,实际上没有任何理由不采用液体。Tsk @SO,!)


2

前言:不是专业的网络美术师。

我发现,在手机和超宽屏尺寸下,尤其是在相当有趣的复杂性方面,有太多麻烦的东西让事情流淌。

通常,我会以某种方式围绕固定宽度的网站进行设计;通常限制在[600,1200]。

我还发现内容的超宽列很难阅读。我似乎还记得,有一些研究表明每列行的单词数是最佳的。


2

您可以像这样。

#使主布局流畅,并对其施加' max-width:1140px '并将其居中。

这样一来,在大屏幕上就不会出现“长行”文本,而在小屏幕上(不会包括800x ***及以下),不会出现网页的正确沉降。

我已经在我的新项目中实现了这种方法,它的工作就像一个魅力。

atb .. :)


1

我认为决定/确定的决定也应基于网站的内容

  1. 对于具有大量简单信息的网站(例如新闻门户),最好使用流畅的布局。

  2. Web服务在固定尺寸上具有更好的外观和工作方式,因此您总是知道接口元素在其位置上的位置,并且不会一直在移动。


1

是的,值得创建流畅的网站
正如您所说,在设计阶段进行适当的计划时,它看起来不错且合理。

您对Ctrl + Scrollbar的影响并不怀疑。此功能主要用于辅助功能,通过增加大小使文本更具可读性。

但是,如果您以像素(px)表示所有尺寸,则不会发生。仅当使用“ em”指定大小时,才进行正确的调整。所以你有办法打开/关闭它


0

我的固定在<800像素的大风扇...它更易于阅读窄栏,它在任何地方工作。也就是说,如果您要创建一个呈现超文本的网站...呈现应用程序前端的网站,我认为是另一种完全可以蠕虫的网站...


0

流畅的设计-真正的流畅-很难。很难。这不仅仅是页面宽度的问题-字体是否可以缩放,并且所有内容都可以随之缩放吗?理想情况下:

  • 尺寸应以em而不是px
  • ...而且适用于元素大小,而不仅仅是字体!
  • 给定字体大小或缩放级别的变化,页面元素彼此之间的大小应相同

我们的主要产品是流动的,从我作为设计师的角度来看,这是一件痛苦的事情,特别是因为它涉及许多用户生成的内容。

一方面,图片-在固定宽度的网站中,您可以拥有一张填充一半宽度且看起来不错的图片。在流动的位置,此图像很可能在空白的海洋中丢失,看起来很寂寞。

一旦生活变得更轻松border-radius,其他CSS3属性将发挥更多作用,但可悲的是,我们的核心受众是政府工作人员,所有人仍然使用IE F @!* ING 6!


要回答这个问题,“值得吗?” 是的,如果您做对了。

这是一个场景:选择一个固定宽度的网站:您的老板在他的全新1920x1600笔记本电脑上将其显示给客户,然后向您抱怨“在这个人的屏幕上看起来很小!”


0

我认为能够在用户的屏幕上很好地缩放而不是使用户平移和缩放是很好​​的。当用户从各种各样的设备(从智能手机到超移动PC)浏览网络时,每一个设备都有自己的,可能是非标准的分辨率,我认为在以下情况下保持较高的用户体验很重要:在此类屏幕上可以查看您的网站。关于文本长度,可以将其限定为一定比例,因此可以很好地适合布局。我认为也有一些框架可以帮助以流畅的方式编写网站,并有助于编码的可维护性。


0

我要反对大多数,说不。推理:诸如Wikipedia之类的易变站点由于行长较长而难以在大屏幕上阅读(尽管其引文使其在最佳情况下难以阅读)。

确实发生此问题,因为没有机制来调整文本相对于屏幕分辨率的大小。如果可以在较大的分辨率下自动使文本变大,则可以保持每行80多个字符的距离,而这通常被认为是可读性最好的。

还存在图像和其他固定大小元素的问题。您可以拥有大图像,并在必要时让浏览器缩小图像,但是随后您会遇到其他问题,例如更长的下载时间以及许多浏览器中的图像质量问题。


我认为具有高rez屏幕的人正在学习有关设置默认缩放比例的信息,如果您构建站点固定宽度,则可能需要在一两年内重新设计
HaveAGuess11年

0

我是确实有固定最大宽度在800像素-1000像素之间的网站的粉丝,但也可以缩小比例,这样我就可以阅读内容而无需左右滚动,也无需缩小,因为文本经常会变得太宽细小阅读,会伤害我的眼睛。因此,这通常是我要争取的,因为我想建立自己引以为傲的网站。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.