网站设计的类型和应用工具

虽然你可能会在网上看到一些关于一大堆网站设计风格（固定，静态，流畅等）的文章，但在今天的移动第一世界中，只有两种方法可以正确设计网站：自适应和响应式网站。

最好的部分是，使用现代设计工具，您不需要知道如何编写代码来构建在所有设备上看起来很棒的令人惊叹的网站。

了解自适应和响应式网站的优缺点将帮助您确定最适合您的方式。

自适应性网站

自适应网站设计使用针对不同屏幕尺寸定制的两个或更多版本的网站。根据网站如何检测需要显示的“版本”，可以将自适应网站分为两大类。 

根据设备类型进行调整

当您的浏览器（也称为客户端）连接到网站时，HTTP请求将包含一个名为“user-agent”的字段，该字段会通知服务器有关尝试查看该页面的设备类型。

基本上，这意味着该网站知道要显示的版本（例如：桌面版或移动版）。这种方法的唯一问题是，如果您缩小桌面上的浏览器窗口，页面将无法适应，因为它继续显示完整的“桌面版本”。

根据浏览器宽度进行调整

网站不使用“用户代理”，而是使用媒体查询和断点在版本之间切换。因此，您不必使用台式机，平板电脑和移动版本，而是拥有1080px，768px和480px宽度版本。除了在设计时提供更大的灵活性之外，这种方法在大屏幕上更改浏览器的大小时提供更“响应”的外观。

优点

WYSIWYG编辑（所见即所得）定制设计更快更容易构建，无需代码交叉浏览器和跨设备兼容性快速加载页面

缺点

使用“设备类型”的网站在桌面上的小浏览器窗口中查看时可能看起来很破碎只有响应网站可以完成的某些效果的限制

响应式网站

响应式网站使用灵活网格（基于百分比）和断点（使用媒体查询）的组合来创建每个屏幕大小的自定义外观。与仅在遇到断点时适应的自适应网站不同，响应式网站会根据屏幕大小不断变化。

优点

无论设备类型如何，每种屏幕尺寸都有很棒的体验响应式网站建设者通常都是僵硬的，这使得设计难以“破解”大量的可用模板.

缺点

需要进行广泛的设计和测试以确保质量（从头开始）无需访问代码，定制设计可能具有挑战性

注意：自适应网站可以包含响应元素。例如，可以构建图像库以完全响应，而站点的其余部分是自适应的。

网站设计工具

设计网站有两种主要方式：使用桌面应用程序或模板网站。您决定使用的工具会因您的团队规模，预算，网站类型和技术要求而有很大差异。 

桌面应用

用于设计网站的最流行的桌面应用程序是  Photoshop。此过程要求设计人员在将设计发送给开发团队以将设计转换为代码之前构建设计。

通常，这是大型或复杂网站的事实标准，因为它允许设计人员在将所有技术挑战转移到开发团队时专注于外观。

不幸的是，由于涉及多种资源和特定技能，因此该过程可能是昂贵且耗时的。

为避免涉及开发人员，使用网站构建者来设计具有较少技术要求的网站可能是有益的。

相关：草图与Photoshop：是时候从Photoshop切换到草图了吗？

模板网站

目前市场上有几种网站建设选择。并非所有这些都被视为“网站设计工具”，因为编辑限制可能使创建自定义内容变得非常困难，而不必依赖代码。

响应式网站

创建流畅的响应式网站很难。工具可以生成响应式网站，但编辑体验使用网格和盒子，这使得构建独特的设计几乎不可能，而无需进行广泛的编码。

这是更复杂的网站设计工具的用武之地。