首页 » 建站资讯 » 使网站移动友好的10个自适应Web设计技巧

使网站移动友好的10个自适应Web设计技巧

WPJAM TOC

在这个数字时代,你不能忽略许多人正在使用平板电脑和智能手机访问你的网站这一事实。如果你的网站目前没有响应或不适合移动设备,则很可能失去大量访问者。因此,采用响应式设计始终是一个好主意。由于我具有设计许多响应式网站的经验,因此我想分享十个有用的技巧来设计出色的响应式网站。

1.从移动优先方法入手

你应该先构建移动网站,然后再扩展并构建网站的平板电脑和台式机设计。这三个(移动设备,平板电脑和台式机)主要关注的问题之一是徽标和/或文字。如果文本易于在移动设备上阅读,则台式机或平板电脑应该没有任何问题。

2.对内容进行适当的计划

内容规划始终是设计响应式网站的重中之重。无论使用什么设备浏览,构建响应式网页设计都是使网站内容更具可读性和访问性的最佳时机。你应以最小的浏览器宽度绘制出网站内容应在每个页面上显示的顺序。

3.首先建立你的网站布局

我建议你在进行编码之前先构建接口的整个布局。这样,你将拥有客户想要的网站外观。在构建移动网站布局时,一个重要的考虑因素是使按钮足够大以方便指尖。另一个考虑因素是保持网站设计的简单性和功能性。我已经看到许多设计师在移动界面上添加了太多内容,但这不是必需的,因为它可能会导致许多设计和可用性问题。

4.对导航菜单说“不”

由于自适应网站的目标屏幕较小(智能手机或平板电脑),因此始终建议隐藏主导航菜单。在它的位置,你可以选择组合图标和文本以向用户指示菜单。你可以包括一个简单的下拉菜单(可以向下滑动),也可以包括一种叠加技术,该菜单可以扩展并覆盖整个屏幕。如果你的网站仅包含2-3个导航菜单,则可以将它们包含在屏幕上的简单菜单中。如果元素多于3个,则可以考虑创建一个可打开到下拉菜单的图标。

5.尝试使用许多软件程序

要构建复杂的网页设计,你应该为每个站点分别使用自定义程序和代码。在WordPress中使用模板不足以构建复杂的网页设计。例如,如果布局相当简单,则可以使用诸如“ Moboom”之类的模板,但是对于复杂的布局,则应使用诸如独立程序之类的程序,例如对于移动布局使用GoMobi,对于桌面使用Adobe Dreamweaver。

6.断点

常见的设计思路是,断点应基于常见的屏幕尺寸(平板电脑,手机和台式机)。但是,通过开发特定的设备分辨率,我们不能完全接受以灵活性,流动性和适应性为中心的响应式设计的潜力。采取设备不可知的方法并根据站点的内容设置断点是一个好主意。你应该探索你的设计,以便找到自然崩溃的地方。

7.创建优化图像

为了构建响应式设计布局,应为每个布局创建优化的图像。这样,你可以减少带宽和扩展问题。尝试使用GIF,JPEG和PNG文件格式。建议不要使用PNG,因为它会使文件大小增长5到10倍。你应该尝试对图像使用精确的尺寸(即100ppi时为500x350px),并设置图像尺寸以匹配。这将消除缩放,还将保留网站图像的质量和分辨率。如果图像缩放,可能会导致分辨率和色彩深度出现问题。

8.对速度的需求

缓慢的加载时间是响应式Web设计的缺点之一。最近的一项研究表明,48%的响应式网站加载时间为4-8秒。这种加载时间的长度在1997年是可以接受的,但是在2015年,有64%的智能手机用户希望网站在4秒内加载。

网站运行缓慢的主要原因之一是未优化的图像。你应该使用TinyPNG和Adaptive Images等高效工具快速缩小大型图像。除此之外,你应该摆脱过多的元素,不仅是为了增强用户体验,而且还应该是网站的速度。太多的因素使网站无法承受,使你的网站不愉快。为此,你可以使用GZIP之类的压缩程序。

9.可读性强

不要让阅读者捏捏或斜视阅读,因此,请使文本大小足够大,以便从较小的屏幕上阅读。建议使用16 px,1 em或12 pt的文本大小。为了设计标题,可以使用FitText之类的工具来创建响应文本。

10.屏幕方向设计

据统计,有59%的人使用横向,而有41%的人使用纵向。你应该设计你的网站在两个方向上都看起来不错,但要更加注意横向。你应该确保图像没有在该方向上拉伸。

网站的响应式设计使所有用户无论使用什么设备都可以更轻松地查看你的网站。创建诱人的响应式网页设计需要大量的工作和时间。如果你使用十种以上易于遵循的技术来创建响应式网页设计,我相信你可以轻松地创建一个完美的响应式网站。

本文翻译自:https://www.tisindia.com/blog/responsive-web-design-tips-make-site-mobile-friendly/

Yahoooooooo!

Aini99

Yahoooooooo!

相关推荐

微信扫一扫,分享到朋友圈

使网站移动友好的10个自适应Web设计技巧
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close