腾讯精品文!六大奇招带你优化HTML5移动页面 - 优设网 - UISDC

腾讯精品文!六大奇招带你优化HTML5移动页面

2015/04/30 15994评论区

play-with-html5-improvement-1

承接上文《六大奇招带你玩转HTML5移动页面动效》,上次说的是让页面动起来的一些小技巧,而页面动起来的根基是功能可用的页面,因此有必要分享一些优化细节的技巧和方向,熟悉掌握一些方法论还是会对页面开发大大提高效率的,并且也能防止疏忽缺漏 >> >

(1) 动画雪碧图

涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)!

cover-01

网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGagaGoPng等等,自动化构建工具Grunt和Gulp也提供了相应插件。

特别地,如果单张雪碧图面积实在太大,可以拆分雪碧图,例如拆分成2-4张,因为现代浏览器都支持4-6个同源请求下载,若资源实在太多,也可以考虑把静态资源放在不同源域名下去请求,这里牺牲多几个请求换来图片同时加载比一张图片慢慢加载要好,当然,这需要具体情况去衡量。

顺便提一下,我写动画的一个小技巧是把每一页的动画分在一个import.css里面,然后最后在主样式中import进去,这样方便调试动画,也容易维护,例如:

w20150430 (1)

当然,import不是原生支持的,这里需要一些流程化工具让import的页面在输出之前经过组装-压缩的步骤。

(2)  图片压缩

图片压缩是老生常谈,但是仍然有不少人忘记压缩,那可是活生生的带宽和流量的浪费啊…

压缩图片需要有好工具,有智图TinyPNGJPEGmini等等。

依靠工具外,还有以下方式可以优化图片:

1.尽量避免用PNG24。如果图片色彩要求不高,请使用PNG8;

2.使用新格式,WEBP和BPG等新格式的到来,在不用考虑兼容的情况下请大胆尝试;

3.用SVG和ICONFONT代替简单的图标;

4.用FUFU的字蛛来代替艺术字体切图。

字蛛的介绍:《前端工程师的菜!姗姗来迟的中文Webfont(附神器推荐)》

(3)多终端兼容

多终端兼容是一切的根基,要知道有人拿着肾6+,有人拿着肾4,大则414×736,小则320×416(IPHONE4在SAFARI保留上下端导航),因此多终端兼容是十分必要的。

曾经有一种派系为320派系,就是大部分页面都是320宽度,因此干脆直接用320的容器来包一切页面,那样也简单,然而iPhone 6和iPhone 6+的出现简直是灭了这个派系。

那么到底要如何兼容呢?

这里我分了三个时期来说说:

A.设计初期

先审视设计稿,因为320派系的原因,大部分设计稿只考虑到iPhone 5来设计,因此很多背景元素是只有320px宽度(页面实际渲染宽度),例如下图。

玩转HTML5移动页面(优化篇)

那么,这时候就需要设计提供一个较长的延伸背景了,最好是可以重复的,用background-repeat可以减少图片大小。

B.设计中期

也就是具体的兼容方法,可以使用CSS3 Media Query和类覆盖。

1.CSS3 Media Query,按范围兼容机型。

w20150430 (2)

2.类覆盖,这种方式适合直接为小屏或大屏做整体兼容。

首先,为小屏(大屏)加一个识别类,这里小于420表示为小屏幕(IPHONE4有上下导航栏):

w20150430 (3)

然后,对应识别类加上要变动的元素覆盖,例如:

w20150430 (4)

C.设计后期。

这是最后一步,整体检查和体验,这里面会暴露一些问题,例如元素在IPHONE6P显得小了或者元素在IPHONE4挤不下了,可以来最后大招解决:

1.大屏适当用zoom:(倍率)或者transform:scale(倍率)来增大元素,实测失真根本看不出来,设计师也满意(毕竟不用多做一张图!);

2.小屏适当去掉一些元素,例如一些翻页提示,一些多余图标,可以让优雅降级,把它们 display:none掉。

有以上几步,基本就能兼容大部分机器了。兼容一直是个苦活,但是这是前端必修课,多练就会发觉其实也没有那么难嘛。

(4)交互提示

前面说了,加了音效就要加上音乐切换开关的按钮,不然会被用户骂死。还有其他,例如如果你的页面不能兼容横屏,请监听横屏状态,然后加上适当的横屏提示。

例如:

w20150430 (5)

提示越多,界面越友好,有时候设计师会漏掉一些可能出现的页面情况。

作为有态度的前端,请好好把关,让用户有好的体验。

(5)分享接口

H5做好了,要传播分享才能展示你的牛逼轰轰。

然而分享其实是个坑,分享到微信、手Q等都有各种问题。

A.微信

旧微信会使用WeixinJSBridge来声明分享的缩略图、标题、正文等,比较方便。例如:

玩转HTML5移动页面(优化篇)

而最新的微信提供了新的微信SDK,需要在公众账号绑定所属域名之后调用SDK作分享,可以说分享功能会更加强大,坑也会更加少。

B.手Q

手Q支持声明meta标签的的分享方式,例如:

玩转HTML5移动页面(优化篇)

而若在qq.com域名下也支持api的定义方式。

C.一般化分享

在默认兼容旧版微信、手Q或者各种浏览器,平台,可以用这样的方法:

写h1做标题,p做内容,img做缩略图,只需要把h1隐藏掉就好,这里的缩略图最好要大于200x200px。

例如:

玩转HTML5移动页面(优化篇)

当然,这样也有利于搜索引擎拉取信息。

分享的坑还有更多,例如不同浏览器例如QQ浏览器、Chrome也会有自己的默认拉取方式(部分截图作缩略图),需要多加测试优化。

(5)SEO搜索引擎优化

SEO(搜索引擎优化)的基本做法是把页面结构写好,这包括:

1.定义精确的网页标题。

你的标题应该有概括性,能明确告知搜索引擎和用户你的网站大概内容和目的,可以是当前页面标题-所属类型-产品名,例如“全民来猜歌-年费黄钻-QQ空间”。

2.针对页面内容补充description和keywords的meta标签。

你需要简短总结页面的主要目标,然后补充description,以及根据关键词补充keywords。

3.优化你的超链接和图片。

包括优化超链接显示的文本,要具有语义性也要跟超链接的网页具有相关性,例如“空间主页”就不要链接到“www.qq.com”。同时,要补充”title”和”alt”属性,例如“<img src=’images/apple.jpg’ title=’苹果示例图’ alt=’苹果示例图’ />”。

4.建立良好的网站导航和sitemap。

网站需要有一个良好的导航,控制根目录和各子目录的关键,通过sitemap可以帮助网站主了解网站结构,也方便搜索引擎收录整个站点。

5.优化目录结构和URL。

你的URL应该有语义性,简短易懂,例如http://www.apple.com/macbook-air/,而且每一层级都要有它对应的页面展示以及语义。

6.善用h1-h6的标题结构树。

合理的标题可以强调文字,也能让搜索引擎更加了解到各标题的重要性,因此建立良好的标题树十分有意义。

7.不断致力于提供优质的内容。

社交化分享是网站曝光最快的因素,因此不断提供了优质原创内容才能真正提高你的网站曝光权重。

(6)无障碍

无障碍的普及是一件好事,这让互联网真正地为所有人可用。因此我们也应该为之而努力,无障碍的根基是你页面强壮的语义性和结构性,具体可以参考《腾讯网无障碍说明》了解无障碍的优化手段。

最后,罗嗦了这么多,只是我自己的一些小经验,请轻拍砖,多交流。

绝对是五一出行的贴心教程】

人多多的地方如何拍出大气感?
《五一标配教程!如何在人多的地方拍好旅行照?》

每一个单身狗得砍头,想爱就别怕伤痛:
《五一标配教程单身篇!一个人旅行应该怎样自拍?》

单身的你奏凯!情侣的赶紧看过来!
《超实用!教你给女生拍写真时提升颜值的几个技巧》

原文地址:isux.tencent
作者:TQ

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量94万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/play-with-html5-improvement

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 设计师干货 界面设计 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 海报设计 用户体验设计 设计规范 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里