每个网页设计师至少应该知道这个词。响应设计..这允许网站适应不同屏幕尺寸，其中每一个都属于不同的布局。 嗯，就这么回事儿。 当应用新布局时设备尺寸为由断点定义，添加CSS文件。

我无法认同... 设计师应该做他们想做的事安居乐业..如果这意味着只做视觉设计工作，那就去做吧。只是对前端技术的简单了解可以使同一个设计师更直观为开发人员创建资产时。

响应式设计与前端技术的关系

如果你能理解这种划分，它将在设计工作中释放出有意识的努力。它还将迫使ux运动设计人员考虑需要做多少工作。动画界面.，我emo了。

我相信每个设计师至少应该明白前沿发展的三种基本语言以及它们的使用方式。比方说大多数下拉菜单依赖于JavaScript， 那必须的！ 但是只使用CSS的替代方案也是。

前端语言的基础

作为设计人员，您的工作是考虑每个断点是如何发生的。影响模型..你可能要负责设计几个公司，每个公司不同屏幕尺寸.

上手。 优美退化是相反方法哪里所有的主要功能都是先说说设计的。然后如果用户不支持JavaScript或CSS，则开发人员将决定如何处理这些特性。

优美退化的概念

有很多话要说分水岭在设计师和开发人员之间..当然有许多设计师/开发人员的混合体可以了解硬币的两面但它们很少。

我最近发了一篇文章覆盖渐进增强详细地说这是我最喜欢的开发方法。 改进一下。 渐进增强从非常基本的特性开始，然后使用更多的“高级”功能。

渐进增强的开发方法

这是不可能的设计师会被要求做模型的任何这些情况。但重要的是设计师要理解这些术语以及它们的含义， 等着瞧。 主要原因是它们影响开发过程..对于可访问性是重大关切.

只是并不是所有的创意团队都愿意使用SVG来进行网页设计。浏览器肯定支持它们，但在某些情况下它们也很难实现。这就是为什么沟通对于成功的设计师/开发人员关系至关重要。

沟通在设计师/开发人员关系中的重要性

如果你模块化设计元素， 使开发人员更容易用可重用CSS类..想一想你能在哪里合理再利用相同的颜色、 差点意思。 纹理和页面元素，但是您需要在这方面很聪明。不损害整体美学。

一旦您理解了CSS断点定义了布局更改时的条件，就可以更容易地将这些资产传递给dev团队，要我说...。

CSS断点在布局中的应用

渐进增强和优美退化是处理相同问题的两种不同方法：可访问性。并不是所有的用户都会使用支持网站100%动态功能的设备或浏览器。

模块化设计描述创建网站的方法。“模块”那可能是随时间重复使用..想想按钮， 说到点子上了。 表单输入，标题样式，或者带有花哨风格的区块引号。

模块化设计的重要性

这是可能的而不学习编写一行代码.

这些用户仍然应该获得一个起作用的经验，这需要通过适当的编码来处理。一些屏幕阅读器可能忽略所有JavaScript和CSS代码， 我晕... 但网站还需要发挥作用。

可访问性在网站设计中的重要性

网页设计师通常被认为具有前沿技能和他们的设计才能。 不错。 这是个火辣的辩论主题主要是主要原因是无正确答案.

你猜怎么着？ css为网站风格..除了CSS动画和CSS之外它大多是静态的创建大多数视觉效果在一页纸上。最动态特征是用JavaScript创建的。

CSS与JavaScript在网站设计中的作用

是个狼人。 开发人员总是想重用代码尽可能多地使用这种方法进行开发较少冗长和减少文件大小说实在的，这是一种重要的代码优化技术。

模块化设计原子设计，这两种方法都是针对开发人员的。不过可视化可以帮助您理解代码是如何工作的，所以如果您正在努力可视化模块化设计检查这个职位看看几个例子。

模块化设计与可视化

推荐阅读：.您需要代码优化的原因

官宣。 本文题目：成都网站设计：所有Web设计者都应该理解Web开发的概念

通常这是设计师的工作， 准备图像，捕捉任何必要的照片，并设计图标从零。这意味着设计师要单独负责交付可视资产开发人员到头来将其编码到布局中。这就是为什么理解视网膜尺寸向视网膜支持资产给开发人员再说说的模型，可以。。

大多数设计师都知道要支持@2x图像， 但是新的iphone +设备@3x决议..只是有些项目不需要使用@3x映像大小，所以在再说说确定任何资产之前，请与项目负责人交谈，拭目以待。。

图像分辨率的选择

PPT你。 讨论使用矢量图形的利弊，并决定对每个项目最有效的方法。只要了解了这些特性，您就可以清楚地与开发人员沟通，甚至可以帮助他们编写视网膜支持的布局代码。

矢量图形的使用

当设计人员正在制作下拉菜单时他们可以考虑通过代码实现它的复杂性..了解哪些元 是吧？ 素需要JavaScript的设计人员可以更好地理解他们要求开发人员构建的内容。

下拉菜单的代码实现

设计师/开发人员的价值

等着瞧。 要查看断点在实际站点上的工作方式，请查看媒体查询网站。

如果你注解您在不同的模型上复制了哪些元素， 这样开发人员就可以用重复代码标记站点的这些部分-使发展更快、更简单，佛系。。

元素注解的重要性

再说说要考虑的是SVG的进展在网上。所有现代浏览器支持SVG这是矢量图像格式..这意味着svg图标将自动缩放，不造成任何质量损失。所以呢，您不需要SVG图形的视网膜资产，梳理梳理。。

SVG在网站设计中的应用

断点由一定像素宽度， 最小或大，其布局调整以适应该屏幕的大小。所以呢，响应式布局在1080 px显示器上将与320 px智能手机上的布局不同。

响应式布局的不同断点

我强烈建议这个粉碎的杂志帖子如果你想了解更多关于视网膜设计的工作流程。改过它是一个免费的Photoshop操作集合，它可以自动创建视网膜版本你的资产。

视网膜设计的工作流程

被割韭菜了。 创意项目蓬勃发展适当沟通..只是 当设计人员和开发人员不确定如何彼此交谈..我不认为设计人员需要知道如何编写正确的JavaScript，开发人员也不应该掌握字体选择。但是有一些基本议题我觉得是双向的。

设计师与开发人员的基本议题

推荐阅读：网页可访问性设计基础的设计师指南