负责任的响应式网页设计的 15 个最佳实践

响应式网页设计不仅仅是挤压和拉伸的问题。

它是关于根据屏幕宽度以无数种方式提供一个网站。

要添加什么？ 要删除什么？ 如何优先考虑最重要的事情？ 对搜索排名有何影响？ 您如何仅使用一个代码库完成所有这些工作？

对网站进行响应式编码确实需要专家。

因此，我们请了 AwesomeWeb 最优秀的响应式网页设计师之一 Tim Cross，让您深入了解如何构建一个合适的、负责任的和响应式的网站。

无论您是雇用 Tim 还是决定自己为您的网站添加响应能力，都请将其作为了解需要做什么的资源。

1.隐藏的导航菜单。

在较小的屏幕上隐藏主导航菜单是保持布局简单的好方法。 图标、文本或两者的组合向用户指示菜单在哪里。

您的选项包括一个简单的下拉菜单，其中菜单向下滑动并覆盖下面的主要内容，或者菜单扩展并覆盖整个屏幕的覆盖方法。

BBC Sport 使用按下时展开的下拉菜单。 由于他们在同一页面上有多个折叠菜单，因此他们使用不同的号召性用语来帮助用户了解页面的层次结构。

Huge 使用覆盖菜单。 他们还在桌面视图中使用这种菜单样式，保持汉堡图标可见并简化页面上的内容。

新手博主的重要提示：

投资一个优质的主题，以最好的方式展示您的品牌。

免费主题非常适合开始，但大多数无法正确定制。 记住那句话：第一印象很重要！

2.水平滑动菜单。

在较小的屏幕上显示菜单的另一种方法是保持其可见，但让内容溢出屏幕边缘。 显示部分文本被截断表示他们可以滑动显示。

《卫报》使用清晰的水平滚动菜单，带有额外的号召性用语以查看“全部”——按下时会显示为下拉菜单。 在可用空间中应用不同方法的一个很好的例子。

谷歌上的水平滚动菜单是一个纯文本链接列表，从屏幕边缘溢出——一种向用户指示更多内容的简单方法。 每个文本链接都有下拉菜单，按下时会出现。

3. 为按钮和链接提供大的、可点击的区域。

与其让手机上的按钮变小，不如让它们变大，以便更容易点击。 事实上，这不仅仅适用于小屏幕，无论是什么设备——从触摸屏平板电脑到台式电脑，都对它们大有好处。

大按钮提高了可用性。 除了使按钮变大外，文本链接也受益于变大。 例如，如果您有一个新闻标题网格，每个标题中都有一个文本链接，上面写着“阅读更多”，而不是将这个链接设为链接，而是将整个内容设置为一个链接，以便用户可以点击任何地方.

更容易使用。 为所有人提供更好的体验。

Oliver Bonas 网站上的“添加到购物篮”按钮大而清晰，并通过对比色从页面中脱颖而出。

Pretty Green Energy 网站有大按钮，内容列表项上有大的可点击区域。

4. 平衡字体粗细和大小。

标题和段落文本之间的大小比例应该很好地平衡。 大标题在移动设备上看起来不太好，尤其是当它们超过几行时。 一切都应该适当调整大小。

较新的移动设备具有高分辨率屏幕，这使文本更清晰易读。 当您使用更大的显示器时，您可以在移动屏幕上缩小一点并增加字体大小。

耐克在桌面上使用了更粗的字体，这在横幅中效果很好。 在移动设备上，它们会变亮字体并减小大小以使其适合一行。

No Drama 减少了它在移动设备上的 H1 标题，以便它们适合屏幕并且不会过度影响页面。

5. 最佳阅读宽度。

在大屏幕上使布局更宽时，重要的是要考虑内容的行长。

如果一行文本太长，则很难阅读，因为很难逐行阅读。 同样，太短的线条会破坏阅读的节奏，因为眼睛必须经常来回移动。

通常的做法是将行长保持在 60-75 个字符左右。 这可以通过将文本区域的最大宽度设置为大约 500/700 像素宽来实现。

99u 通过最佳阅读宽度、简单的共享链接和位置良好的侧边栏保持其页面平衡，不会过多地影响文章。

除了具有正确的阅读宽度外，《卫报》的文章布局也很简单，有大量空白区域和清晰、整洁的侧边栏。

6.将重要信息放在手机顶部附近。

在手机顶部显示电话号码、联系信息、立即购买号召性用语等。 移动用户需要快速获取信息，但这也适用于任何设备。

即使现在浏览器尺寸如此多样化，并且“折叠”的概念不再存在，将关键的行动号召放在页面顶部仍然很重要。 例如，在电子商务产品详细信息页面上，最好让大多数用户都可以看到“添加到购物篮”按钮，而无需滚动。

Metris Kitchens 将其关键信息放在移动设备的顶部附近，因为对于他们的用户来说，清楚、快速地查看联系信息（查找陈列室）和转换操作（索取小册子）非常重要。

Ebay 确保价格和立即购买按钮在移动设备上清晰可见。

7. 更改内容块在小屏幕上折叠时的顺序。

决定先在小屏幕上显示更重要的内容，然后更改内容顺序——这可以通过 CSS 来实现（如果布局太复杂，有时也可以使用 JS）。

如果在桌面上有一个文本内容块和一个图像块并排放置，请确定更相关的内容。

或者页面上的侧边栏和内容区域 - 在移动设备上，如果它折叠，那么侧边栏将是第一个，并将所有内容推到页面下方，因此最好在移动设备上交换它。

在 Brown Thomas 的这篇社论内容中，产品信息首先定位在移动设备上。 在桌面上，内容顺序被交换，以便在产品旁边出现生活方式照片。

Melanie F 产品详细信息页面首先将产品图片放在移动设备上，然后将产品信息推送到桌面上并排放置。

8. 在小屏幕上隐藏内容。

在移动设备上，您可以通过隐藏在大屏幕上可见的内容来简化布局，方法是完全隐藏或使用选项卡和手风琴来显示/隐藏内容。 这会在较小的屏幕上整理页面并让用户查看所有关键信息，如果他们愿意，可以选择查看更多信息。

christianlouboutin.com 上的这个产品页面简化了它的标题并减少了移动设备上的产品信息，将产品图像作为第一个内容块。

在 Selfridges 上，缩略图的轮播在移动设备上被移除，只留下简单的左/右箭头来滑动。

9. 在更宽的屏幕上显示更多内容。

拥有更宽的屏幕可以让您将更多内容推送到屏幕上。 用户在滚动之前可以立即看到更多内容。 布局可以扩展并容纳更多列。

Jimmy Gleeson 上的这个投资组合网格视图会随着屏幕变宽而增加可见项目的数量，从而允许更多内容显示在页面的上方。

Smashing Magazine 的导航布局非常复杂，并且在不同的屏幕尺寸下变化很大。 这是真正考虑布局并最大化每个设备和屏幕尺寸的所有可用空间的一个很好的例子。

10. 不要忘记纵向模式下的平板电脑。

有时，这种方向要么属于小型移动布局，它更基本并且没有利用所有可用的屏幕空间，要么它与桌面布局混为一谈，这会使内容全部被压扁。

在 CSS 中更好地使用媒体查询可以使布局恰到好处。

这个 Protest 产品详情页面的布局在较小的空间内仍然有很多信息，不会打乱布局的比例和间距。

Firebox 产品详细信息布局不会影响表格纵向模式中的任何内容。 桌面上出现的一切都还在，内容以一种平衡而简单的方式呈现。

11. 用长的可滚动图库页面替换放大图像功能。

在小型设备上，如果您正在查看的图像填满屏幕，则无法使用放大图像窗口。

对于图片库，请使用可滚动的长页面，或带有左/右箭头的可滑动轮播。 长长的可滚动图库也适用于平板电脑和台式机。

Apple 上的这个图片库在桌面和移动设备上使用了一个长的可滚动页面。 在移动设备上删除了标题，以进一步简化布局。

UrbanEars 上的这个产品库出现在同一页面上，并在按下链接后向下展开。 它保留了弹出窗口的基本好的部分，即。 不会转到新页面，而是以更好、更有用的方式呈现图像。

12.优化触摸屏的UX。

为横幅、菜单、图片库等添加滑动手势。

触摸屏的使用本质上是直观的，因此我们可以更微妙地使用导航助手，例如，旋转木马屏幕上的一半图像表明还有更多内容。

悬停事件在触摸屏上不一致。 禁用这些并用触摸事件替换。 如果悬停时显示的内容不重要，只是花哨的装饰，那么在触摸屏上一起禁用它。

Born Group 投资组合页面上的悬停状态在桌面上显示动画，并显示项目的标题。 由于仍然需要在触摸屏上访问此信息，因此悬停事件被替换为触摸事件——点击查看信息，然后点击查看项目。

Made 网站在其主页横幅中添加了滑动事件。 他们清楚地考虑了他们的用户，并在网站的其余部分，在自然滑动的地方（例如，在产品轮播上）使用这些触摸事件。

13.使用更少的图像。

很多效果，例如背景渐变和按钮悬停状态，都可以通过纯 html & css 来实现。 页面加载速度更快，这对移动设备特别有用，并且浪费在创建大量图形上的时间更少。

为您的图标使用字体意味着您不必创建图像。 它们具有可扩展性、边缘更清晰、加载速度更快，并且适用于视网膜显示器。 此优化适用于所有设备和屏幕。

desk.com 网站很好地使用了图标字体。 添加颜色就像更改字体颜色一样简单，是增加页面影响力的好方法。

Pretty Green Energy 网站的部分标题使用大图标字体。 增加图标字体的大小很简单，不需要编辑图像。

14. 响应式视频。

此方法允许任何大小的视频自动响应设备大小，而无需在视频本身上设置明确的高度或宽度。

只需几行 css 即可实现。 这适用于直接插入页面和 iframe 的视频。

Anyilu上的视频横跨整个页面，填满了整个空间。 这给页面带来了很大的影响。 它们会在不同的屏幕尺寸上自动响应和调整大小。

Brown Thomas 上的嵌入式视频使用 iframe 并且完全响应。 没有指定高度或宽度，允许轻松的内容管理和快速的页面创建。

15. 褶皱不再存在。

设备更小、更高、更宽和更长。

将所有内容都塞在页面顶部并不重要。 用长而流畅的内容块和宽大的间距让页面呼吸和扩展。

人们自然滚动。 通过在“折叠”下方为他们提供更多内容，您实际上是在邀请他们更多地参与页面并阅读您的内容。

Apple 上的 iMac 产品页面是一个长而流畅的页面，滚动时会发生很多事情。 体验会吸引您。他们还使用固定导航，因此当您向下移动页面时，关键的行动号召（即立即购买）仍然可见。

Sonos 产品页面在固定宽度的内容文本块和更宽的全屏图像面板之间取得了很好的平衡。 当您滚动时，这会使页面变得有趣且更具吸引力。 间距很平衡，不会过于拥挤。

包起来

检查您的分析。 我敢打赌，移动流量的百分比比您想象的要高。 我敢打赌，它会逐月增长。

如果您的网站没有响应，那么访问您网站的每个移动用户都会有糟糕的体验。

即使它是响应式的，我敢肯定还有许多可以改进的地方。

响应式网页设计是我的专长。 我可以在任何网站、WordPress、Modx 或其他网站上工作。 我的客户通常每月至少有 10,000 次以上的访问，我根据您网站的复杂性收取 1,500 至 3,000 美元的费用。

雇用我一次，我会做好工作，您再也不用担心糟糕的移动体验了。

如果您有任何疑问，请查看我的作品集并在此处与我联系。