关于响应式网站的技术提示

  我很好地解释了为什么引导客户很重要,现在我要告诉您设计响应式网站的最佳方法。
 
  您可能会理解您的开发和编码,在应对响应式网站时,每个人的工作流程都是不同的。这本身就很好,因为这意味著我们总能产生新的工作方式。
 
 别担心,我将给您一些设计响应式网站的建议,在结合上一篇响应式 WordPress 网站设计的一些建议(一)的内容,您应该可以很容易地付诸行动。您可以选择使用它们,并在您认为合适的时候组合应用它们。尝试各种不同的方式来设计响应性网站,看一看哪些方法最适合您。
 

 
  视觉稿

  在 Photoshop(或其他任一款设计软件)中为静态宽度的站点建立一系列视觉稿曾经是大多数设计师设计网站的方式,对一些设计师来说,现在仍然使用这一工作流程。如果您喜欢使用图形设计软件来设计网站的视觉稿,这确实很好。
 
  但不要试图为每一个解析度或宽度设计一个视觉稿,大量的视觉稿会让您抓狂。相反,回想一下有关线框图的技术文章。考虑一下我们是如何看待这些线框图的内容流的,以及我们是如何决定将所有内容布局在设计稿上的。试著将它们转换到您的设计中,并考虑当屏幕大小改变时,这些元素将如何流动和移动。
 
  内容的变化将是重要的, 可以建立几个不同尺寸范围内的展示模型。但对一些其他变化, 例如文字编辑区域, 我认为最好保持为初始的编码原型。如果您喜欢为每个主要阶段设计一个模型,那么无论如何,请继续,只要您知道这将增加到您的专案时间。
 

 
  在浏览器中设计

  您可能听说过在过去围绕著浏览器设计的争论。在浏览器中设计是指您从一个线框图阶段直接进入浏览器开始设计阶段,而不是使用任何图形软件设计视觉稿。如果您使用很多线上工具来帮助您建立您的设计层级元素,这也可以很好地工作。然而,许多设计师会认为在浏览器中进行设计很困难,这是因为他们觉得这么做限制了他们的创造力,让他们更难想出有创意的、独特的、视觉上令人兴奋的构思。但作为一名开发人员,您很可能非常喜欢使用代码,因此乐于在浏览器中尝试进行设计,并看看会得到什么结果。
 
  在浏览器中做决定

  这可能是我个人最喜欢的。在浏览器中做决定意味著您可以在图形设计软件和浏览器中做同时工作。就我个人而言,我认为您想要得到一个更好的设计结果,必须将它放置在浏览器中进行验证。视觉稿在图形设计软件中的呈现方式总是与在浏览器中的呈现方式有些不同,在浏览器中验证建立原型和并快速迭代阶段效果要好得多。
 
  混合使用图形设计软件和浏览器的工作意味著您可以为您的设计和您必须做出的决策提供很大的灵活性。虽然在图形软件中可以做出许多重大的创造性决策,但浏览器是您最终选择的产出环境。
 

 
  内容为先,电脑端为先或是移动端为先?

  首先,如果您还没有从上文中学到什么-先开始您的设计工作吧。这意味著您要确保您使用的是真实的内容和您设计的网站上要使用的内容。
 
  其次,您是在移动装置上工作 (从更小的布局开始) 还是在桌面自顶向下 (从全宽的桌面布局开始) 完全取决于您自己。网上有很多相关争论,但实际上这是您自己的决定。如果您觉得从更大的尺寸到更小的尺寸更有创意,即使您以相反的方式建造网站,那也没关系。
 

 
  一些有用的响应式设计工具

  让我总结一下一些有用的工具资源,有很多工具可以帮助您设计响应式网站,看看吧:
 
  网格

  ·Gridset(http://www.gridsetapp.com/)
 
  ·ZURB Foundation(https://foundation.zurb.com/)
 
  ·Inuit.css(https://github.com/inuitcss)
 
  字型

  ·Typecast(http://typecast.com/)
 
  ·Typekit(https://fonts.adobe.com/?ref=tk.com)
 
  样式指南和样式库

  ·Styletil.es(http://styletil.es/)
 
  ·Brad Frost’s Pattern Lab(http://pattern-lab.info/)