布莱恩F爱
向一位来自Portlandyobet英雄联盟的谷歌开发专家学习Angular、Web技术和Node.js。
广告 ·ultimatecourses.com
用终极课程学习Angular的正确方法

2015年网站设计目标

在着手2015年的网站设计时,你的设计目标是什么?包括手机吗?响应式设计呢?以下是我认为2015年网站设计的五大目标。

  • 尝试
  • 100%的宽度
  • 响应设计
  • 矢量图标
  • 高密度图形

尝试

对于一个2015年的网站来说,第一个也是最重要的目标就是手机目标布局。这是什么意思?

  • 在设计阶段创建移动布局和模型
  • 使用移动优先的CSS框架,例如引导
  • 使用移动优先的CSS背景图像
  • 专注于适合移动设备的排版和空白

移动优先的设计策略很简单:为移动和然后不用手机就能响应用户。这是什么样子的?我们网站的样式和CSS默认为移动视图。然后,我们为那些更大的显示设备重写了默认样式,也许是按照顺序:平板手机,然后是平板电脑,然后是台式机,然后是大型电脑和电视显示器等超大尺寸设备。

100%的宽度

2015年网站重新设计的第二个目标应该是采用100%宽度的布局。许多在响应式布局之前创建的网站都是通过CSS媒体查询使用固定宽度布局完成的。这些固定宽度的布局以桌面体验为目标,通常将显示器上显示的宽度设置为1024 x 768像素。今天的网站必须采用100%使用屏幕宽度的布局。这是一个必须用于更小屏幕的设备。

响应设计

如果响应式布局不是你2015年设计目标的一部分,那么,你就不是在为现在和未来设计。响应式布局必须是今天网站的设计目标,这样我们就可以在各种网络设备上针对用户。在最纯粹的目标中,你应该把你的网站设计成可以在任何大小的设备上观看。这意味着使用所有基于百分比的度量,没有断点。然而,现实情况是,我们通常希望针对用户经常使用的特定设备。在我看来,响应式设计应该针对3个主要断裂点:

  • 移动
  • 平板电脑或768像素以上的设备
  • 桌面或992像素以上的设备

响应式设计不仅仅是使用CSS媒体查询来针对各种设备和它们的大小。它是关于使用现代web设计技术来确保用户在这些资源有限的设备上获得最佳体验:屏幕大小、带宽、电池等等。其中一些技术包括:

  • 使用响应媒体,设置img, iframe,对象,嵌入,和视频元素的宽度和最大宽度属性设置为100%。
  • 使用<图片>元素和CSS背景图像。为设备加载适当大小的图像,以避免下载不必要的大图像。请注意,图像元素还没有被广泛采用
  • 尽可能使用基于SVG矢量的图像。SVG已经被浏览器广泛采用。只要你的网站目标用户是> IE8(我希望如此),那么你应该使用SVG图像。

矢量图标

CSS3引入的概念网页字体。有了这个功能,我们就可以定义由浏览器加载的自定义字体,并使用各种文件格式。最终的结果是双重的。首先,web从很久以前浏览器采用的一套受限制的字体中解放出来。第二,字体不一定必须是拉丁字符(或任何其他字符集),我们也可以创建符号字体。以下是一些常见的基于矢量的图标字体(没有特定的顺序):

高密度图形

随着使用高密度像素显示器的用户数量持续增长,让高密度图形成为2015年网站设计不可或缺的组成部分变得越来越重要。苹果公司称他们的高密度显示器为“视网膜显示器”。其他制造商则称其为“超高清”显示器。不管你怎么称呼它,作为web开发人员,我们都希望确保我们的用户拥有最好的体验。去年八月我写了一篇文章介绍视网膜和响应HTML5图像。我建议你去看看。

还有别的事吗?

我错过什么了吗?在你的2015年网站设计的前5大清单中有什么我没有提到的吗?

布莱恩F爱

嗨,我是布莱恩。我对TypeScript, Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。