UI.

企业界的响应香港跑狗图

Brent Walbolt. 经过 Brent Walbolt.  |  2012年1月09日

当您已经有一个完整的客户工作板时,可能很难进入新技术。响应性香港跑狗图现在是一个大的嗡嗡声话,但不需要在客户身上强迫它,除非他们的用户会看到它的好处。

在352个媒体集团,我们最近看到有机会为客户,紫色通信做出一个完全反应的网站。他们为有听力损失的人制作软件,否则无法拨打电话。使用其计算机,电话,可视电话或其他电子设备,它们可以使用视频中继服务与他人通信。

紫色通信为多个电话平台提供应用,因此他们的Web流量大部分来自移动设备。看着他们的交通,很明显,客户的最佳解决方案是制作一个完全反应的网站。我们公司之前已经完成了移动网站,但这是一个网站首次为移动和桌面用户提供服务。如果您有兴趣将一些响应式网页香港跑狗图功能纳入公司或客户网站,这是要记住的一些提示:

 

大学教师’T妥协香港跑狗图

有些香港跑狗图可以赋予响应,流体布局远远超过其他人。简单的背景的简约香港跑狗图可能只需要几个调整来成为流体。因此,在客户端上推动这种香港跑狗图可能非常诱人,因为它将使这些网站更容易开发。

352个媒体集团的竞争优势之一是我们获奖香港跑狗图。因此,虽然最初我屈服于简约香港跑狗图的诱惑,但我改变了主意并决定弄清楚我们如何使用我们以响应方式使用我们想要的香港跑狗图。

开发响应香港跑狗图有三种不同的方法。一世’为他们创建了名字,以便他们’ll更容易讨论:

阶梯布局

此技术使用媒体查询在设置分辨率下提供不同的样式表。传统上,您将创建三种不同的香港跑狗图 - 一个用于台式机,一个用于平板电脑,一个用于手机。

这种方法非常吸引人,因为我决定香港跑狗图一个可能是制造流体可能相当复杂的网站。基本上,我们可以采取我们现场开发一个网站的过程,只需三个。我们甚至可以使用服务器端检测来确保您只能获得您的分辨率所需的CSS文件。

这种技术的麻烦是您必须选择哪些分辨率,您将优化您的网站。大多数人使用基于iOS设备的数字-768px为平板电脑香港跑狗图和320px用于移动香港跑狗图。但随着所有不同的智能手机和平板电脑,都有很多不同的分辨率。由于应用程序紫色通信可用于许多不同的手机,我们希望确保每个用户都能获得最佳体验。因此,虽然我认为这种技术对于iPhone App网站非常完善,但它不会满足我们对这个项目的需求。

流体栅格

另一种使您的网站响应的方法是使用百分比宽度,使得一切都将随着视口缩放到0到0.使用此方法,您可以设置基于百分比的网格,该网格将执行主要腿部。过去,您利用媒体查询来调整不同屏幕的东西。该方法在阶梯方法中具有明显的优势,因为该站点将针对每个分辨率进行优化,而不是仅少数。

这里的缺点是某些香港跑狗图可以是难以发展的难以发展的。我很长一段时间考虑了这种方法,试图弄清楚如何代码解码麻烦的区域。我们利用称为常用方法 滑动门技术 这可以允许您使用单个图像来制作具有复杂边缘的流体宽度容器。如果您没有使用它,那么肯定会看到这一教程,因为这是一种奇妙的技术。但即使我们的阿森纳和其他一些东西也是如此,它仍然很难脱掉。

流体/阶梯式杂交

最后,我决定了两种方法的组合。我们将利用阶梯技术为桌面制作一个香港跑狗图,然后在960px宽下的流体香港跑狗图中的一个大台阶。这意味着对于桌面而言,我们的进程与正常项目几乎相同。我们支持1024分辨率×768和桌面为桌面,所以我们在标准的960px宽度下使我们的网站(允许垂直滚动条和其他浏览器和OS Chrome)。该宽度下的任何视口通常都会显示滚动条。

而不是试图挑选哪个分辨率为平板电脑大小设置,而是我们刚刚将其设置为960px的网站宽度的东西会触发流体布局。那种方式没有人会得到可怕的水平滚动条。

片剂水平视图

随着额度的奖励,平板电脑(至少960px宽)在横向模式下查看网站获取完整的桌面版本。请记住,您可能希望使用媒体查询进行一些小调整,以使链接和按钮更容易触摸。

 

移动第一

如果您已经完成了对响应香港跑狗图的任何研究,您肯定听到Mantra首先为移动开发,这绝对是您应该牢记的事情。由于我们一直在开发桌面电脑的开发网站的心态,因此很容易以错误的方式查看媒体查询。您可能会想,“我需要做的就是制作一些新的图像并在媒体查询中放一些新的CSS,我的网站也将在电话上工作。”虽然这是真的,但它也完全向后。

像智能手机一样令人惊叹,他们仍然不如桌面电脑那么强大。此外,内容经常在GO上消耗。但通过遵循我们之前的逻辑,通过添加CSS和图像,我们正在优化在较慢的连接上的较低功能的设备。一旦您认为通过,您意识到您必须更改您的工作流程。

The hardest part is making this work for img tags. If you’re following best practices, you’ll have optimized images for different resolutions. The challenging part is making sure that you only download the image you need. This issue could be an article all on its own, but fortunately Jason Grigsby has already compiled 响应图像方法及其优点和缺点列表。

过去,我们必须工作的只是CSS。通过我们的“移动首先”心态,我们将制作一个Mobile.css文件,其中包含移动需求的所有CSS。这将是手机下载的唯一文件。然后,我们将制作一个名为Desktop.css的第二个文件,该文件将构建并覆盖Mobile.css中建立的基本样式。为了确保手机/平板电脑只获取Mobile.css和桌面获取Mobile.css和Desktop.css,我们的链接如下所示:

<link id="uxCSSMobileFiles" runat="server" type="text/css" href="css/mobile.css" rel="stylesheet" />
<link id="uxCSSFiles" runat="server" type="text/css" media="screen and (min-width: 960px)" href="css/desktop.css" rel="stylesheet" />

到目前为止,这种组合已经到了我测试的一切,除了9之前的Internet Explorer版本。因为我们的公司标准是支持IE7 +,我们必须达到最后一个调整。您将注意到上面的代码在服务器上运行。在后端,我们检查IE的版本,如果它少于9,我们将媒体属性更改为“屏幕,投影”。这对我们来说是最好的,但如果你没有运行任何服务器端,你可以使用respond.js。

这表明我们的桌面CSS不会像在正常站点上的优化一样优化。但是,我们正在进行的唯一牺牲正在下载一个轻量级的CSS文件,然后我们将覆盖我们需要的地方。我们需要在某处妥协,而且因为我们继续吟唱,“移动第一,”我们知道这比替代方案更好。

 

仍然提供客户控制

在352个媒体集团,我们相信让客户完全控制他们的网站。完成开发后,我们交出所有源代码。我们还提供了一种自定义内置的CMS,可让客户端管理页面,导航和站点地图。像香港跑狗图一样,这是我们不想妥协的标准,所以我们有几个额外的障碍。

One of the hardest interfaces to transfer over to mobile is the navigation. This is an issue because it’s also one of the most important interfaces on a site. The first question you have to ask is whether mobile users need quick access to the entire navigation, or if they are only interested in a key few. If they need all of the navigation, and there are more than four main-level items, I think that one of the best solutions is to group them in a <select> element. This will utilize the phone’s OS for an optimized interface that the user is already used to.

在紫色通信时,移动用户主要查看的两个主要项目:产品&服务,以及我们。所以在手机上,我们只显示这两个项目,然后将其余部分分组为“更多”下拉列表。

移动下拉导航

但我们提供客户的一件事是控制他们的导航。对于这个网站来说,他们唯一无法控制的是哪些物品在菜单中倒塌,所以我们肯定会首先与他们一起清除。但过去,他们可以添加他们想要的任何物品或子项。要完成此操作,我们使用了在命名为“更多”的最后一项中嵌套的导航副本。我们将其隐藏在桌面上,并在移动设备上隐藏我们不希望显示的顶级项目。在嵌套列表中,我们然后隐藏“产品&服务“和”关于“所以用户看不到两次。这为我们的客户提供了完全控制,而无需管理单独的移动导航(这将成为一份具有重复项目的汇率)。

对于内容区域,我们向客户提供培训,以便他们知道构建其内容的最佳方式。我们还设置了一些课程,他们可以在YouTube视频,按钮和对操作的调用等内容上使用,这确保了他们添加的东西将针对所有分辨率进行优化。

 

创建可重用的框架

在探索响应香港跑狗图等新技术时,请记住最后一件事是确保您的公司将更好地为未来做好准备。您希望每个项目都在思考客户和用户的思考,而且还要追溯到其他项目的课程。始终在那里寻找这样的项目,可以让你的脚进入新区域的门,所以你公司将继续与行业一起推进。

在352个媒体组,我们已经为我们的程序员和前端开发人员建立了框架。例如,我们将所有CSS拆分为多个文件到分组组件,并让每个人组织。我们有分开的结构,排版,表格,小部件等文件。当您进入新技术时,您可以采取看起来像简单的道路,只是放弃似乎不适合并为其创造新事物的东西未来。但通过这样做,到目前为止,你已经放弃了多年的经验。

我早先过分简单地链接CSS文件的代码。我们可能需要响应网站使用这两个新的CSS文件而不是正常框架。但是,通过一点创造力,我们认为应该将哪些文件应用于移动设备,这应该应用于桌面,并且应该在两者上分开。我们能够适应我们已经在未来为我们提供良好的东西。