kok官方体育ios

杭州kok官方体育ios ：Desktop-First响应设计技巧的网站

2019.08.22 杭州kok官方体育ios

133

大多数web设计师知道 尝试设计 以及它如何极大地影响 响应设计 。 但有另一种方法可能不太受欢迎,但可以以更清晰的方式解决问题。

desktop-first方法您可以构建所有你想要的功能,创造最高的规格。 当你在小型设备上测试你会专注于保持界面光同时支持尽可能多的“高端”特性。

这个工作流非常不同,但从桌面可以更好的web设计师创建功能丰富的设计。

Desktop-First的好处

技术上“desktop-first”是传统的方式,每个人都做了网站直到响应时代。

现在许多人谈论手机第一但有很好的理由坚持桌面的方法。 我经常喜欢从桌面设计当我知道我的网站会有很多大屏幕的详细功能。

这里有一些好处desktop-first意识形态。

  • 你可以看到所有的主要功能

  • 它可以让你想象所有设计的最大可能性

  • 这是最好的策略,如果你的听众主要使用台式机/笔记本电脑

当你想到现代的网站 推特 你认为移动。 但是他们有很多额外的功能,随着桌面体验。 这些桌面用户明显得到提高用户体验,是任何其他设备一样重要。

在线HTML电子邮件模板编辑器

与 明信片 你可以在线创建和编辑电子邮件模板没有任何编程技能! 包括100多个组件来帮助您创建自定义邮件模板的比以往任何时候都要快。 现在试一试 免费!

了解更多其他产品

当然不可否认,手机是很重要的。 最近手机使用 超过了桌面 这是绝对存在。

但功能丰富的网站通常依靠一个强大的桌面设计。

这也许是最大的好处desktop-first布局。 你可以看到这个网站 因为它应该 所有的钟声和口哨声。 这些配件可以(而且应该)被删除为小屏幕你测试和发现某些特性不延续。

看这另一种方式是通过简单的设计中领跑。 当您创建与移动第一你是天生的从最简单的功能,然后添加额外的大屏幕。 但它真正的容易忘记特性或只是缺少合适的计划来决定他们应该去哪里或如何功能。

尝试方法很容易考虑动态特性更像是马后炮。 但desktop-first方法你把这些特征作为主要的显示方法,然后根据需要选择删除它们。

没有完美的选择所以我建议尝试看看你喜欢什么。 如果你像我一样,喜欢丰富的桌面体验然后开始你可能会喜欢那里,较小的工作。

支持所有浏览器

最棘手的部分desktop-first设计是处理浏览器支持。

杭州kok官方体育ios 就十几二十年前只台式机和笔记本电脑市场。 吨的智能手机革命改变了所有的移动浏览器iOS、Android和其他专有设备像黑莓。

最老的浏览器缺乏支持现代桌面元素,如画布,音频/视频和动态输入。 但是很多 已经改变了 近年来。

现在基本上是合理的对所有移动浏览器支持桌面浏览器一样的特性。 现代浏览器也呈现大多数元素相同的方式所以你不会处理 呈现的问题 过去的。

最大的差异不是HTML / CSS支持,而是在触摸式的支持。

手机屏幕小得多,他们也需要用手指了。 鼠标更精确而人类手指,更不用说桌面屏幕更宽敞,更容易看。

时,从桌面到移动是至关重要的考虑不同的浏览器是如何工作的,他们支持什么,如何处理用户的触控操作。

几好规则考虑而按比例缩小你desktop-first设计:

  • 使tappable元素更大

  • 增加主体文本大小所以更容易利用的链接

  • 添加JavaScript库,支持滑动运动

你可以随时检查 HTML5规范 所有浏览器看到哪些元素支持的浏览器。 但是大部分触摸输入是一个普遍的事情,所以desktop-first是一个伟大的解决方案如果你注意移动体验。

你可以找到很多免费资源 TouchSwipe 添加支持触摸和滑动手势所有网站。

你可以 使用JavaScript 检查浏览器的尺寸或者移动操作系统iOS或赢。 这个信息你可以加载额外的样式表和创建一个完全不同的经验与触摸/滑动事件,只适用于移动用户。

从功能的列表你知道你会希望在你的网站上。 组织所有新的CSS3属性,新的HTML5元素,任何可能与浏览器支持问题。

然后查找所有你想要的浏览器支持考虑如何处理回退和polyfills。 随着时间的流逝老版本浏览器将逐步淘汰,浏览器支持将变得容易。 这使得desktop-first设计更强的理由,因为渲染引擎将接近相同。

学习更多和更深入地看看这些移动交互相关的指南:

  • 多点触控Web开发

  • 支持所有移动浏览器之间的比较

  • 如何处理:悬停在触屏设备上

优雅降级(以及为什么它重要)

的过程 优雅降级 看着更高级的技术。 这意味着你建立你的网站最大的所有功能在网站上所有你想要的,然后如果你回复其他浏览器不支持他们 回退的方法 。

这种策略的一个常见的例子是删除下拉滑动菜单移动。 因为智能手机用户不能悬停菜单链接隐藏hoverable菜单是有意义的,而是创建一个拨动开关或一个 隐藏的汉堡菜单。

然而这并不是严格的优雅降级,而用户体验的变化。 而不是你正在寻找JS函数或CSS3属性 不能支持 在一个特定的浏览器。

这些你需要找到一个polyfill或回退,创建了一个不那么迷人的经验,但仍然适用于用户。

看看 这个列表 由W3C的例子。 它涵盖了详细优雅降级可能会帮助你在正确的轨道上移动。

谢天谢地,因为大多数现代浏览器支持JavaScript, HTML5视频和画布元素所以你真的没有限制。 最棘手的部分是遗留支持过时的浏览器。 然而这个市场正在迅速缩小,你可以通过研究计 ;市场份额 。

如果你运行谷歌分析可以研究 所有的浏览器和操作系统的 从你的观众看到这是最受欢迎的。 如果没有人使用IE7浏览你的网站为什么支持吗?

每个问题你解决不同所以把它一次。 依赖于网站 我可以用 来衡量你需要处理什么类型的支持。

当桌面将优先

您可能想知道当desktop-first是适当的。 这应该是你的每个项目的默认策略吗?

也许吧。 但我认为这最终效果最好,当你设计一个地方 桌面优先于移动 。

如果移动体验可以非常简单,但桌面体验需要详细的和动态的,我说小从桌面和开始工作。

如果你总是喜欢工作从桌面和移动小那么你会得到一个本领的过程,它可能会成为你的默认。 这很好,因为它仍然会导致伟大的结果。

只要确保你有一个计划为移动网站至少有一个模糊的想法会。 一些草稿 线框图 对于这两种观点都只是为了给自己一个起点。

一个强大的桌面方法的一个很好的例子 Mashable 。 他们的实际大小的网站跨越1440 px宽,包含3列与一个巨大的新闻 大型导航菜单 。

Mashable看起来很棒在移动,但是你可以告诉桌面版不是马后炮。

等大型网站也一样 YouTube 用户体验的观众的需要。 和响应时代不仅仅是“桌面”或“智能手机”。

您还需要考虑平板电脑,小的上网本,笔记本电脑都有不同的屏幕尺寸。 Desktop-first帮助您构建一个经验,适用于大屏幕首次通过专注于每一个可能的功能。

然后你可以削减的细节完善你的界面,所以作品无处不在。

结束

杭州kok官方体育ios 通常从desktop-first角度构建我的项目,因为它帮助定义限制。 你可以选择这个网站有多宽,使用什么样的网格系统,你需要什么样的特性。

但是如果你愿意尝试的方法这是完全有效的。

辩论的一种方法是艰难的,因为每个人都有不同的工作流和他们都有优点和缺点。发现只要你觉得适合,使工作对你有利。


关键词

最新案例

联系电话 400-6065-301

留言
kok在线登陆官网|kok在哪里下载 KU酷游体育-登陆首页 kok在哪里下载|kok在哪里 kok在线登陆官网 爱游戏app官网入口