多设备兼容课程的3个视觉设计提示

仅仅通过台式电脑进行数字交互的日子已经一去不复返了。今天，许多人使用各种各样的设备，如平板电脑和智能手机来访问互联网。一个Gartner的研究报告显示，到2018年，超过50%的用户将首先使用移动设备进行所有在线活动。使用多种设备访问互联网的人数的巨大增长迫使公司开发与设备无关的在线材料，电子学习课程也不例外。

你是不是太打算创建基于网络的网站了可以在不同设备上无缝访问的学习材料？在你需要考虑的各个方面中，开发一个好的视觉设计策略无疑是最重要的。这里有3个sure-shot技巧来为您的多设备兼容的在线课程设计获胜的视觉设计。

1.利用层叠样式表的力量

通常，电子学习开发人员在设计可以在多个设备上访问的基于web的课程时，会为各种布局使用相同的视觉资产。但是，根据上下文，建议包含稍微不同的图像。使用CSS的媒体查询功能在不同的设备上显示不同的图像是一个好主意。下面是一个例子:

上面的图像很大，可以在台式电脑上有效地显示。然而，它在移动设备上的渲染效果可能并不好。所以，当在平板电脑上访问内容时，这个图像可以被替换为下面的内容。

当你使用CSS媒体查询时，确保你采用了“移动优先”策略。注意你的默认布局是移动布局，而不是桌面布局。这将有助于确保在移动设备上加载课程时，只下载移动元素，而不下载桌面资源。

2.使用矢量图像代替位图

位图最大的问题之一是它们不能重新缩放，这导致在更高分辨率时的视觉体验很差。您可以通过选择向量图像来克服这个问题。与位图不同，这些图像可以无限缩放，这有助于在桌面屏幕上有效地渲染它们。

您可以使用CSS为响应式电子学习课程中使用的矢量图像生成阴影、渐变和圆角等效果。然而，大多数矢量图像在老式浏览器(如InternetExplorer 8)上无法正确呈现。您可以使用