whocansaveme 发表于 2017-4-13 21:19:05

(0923更新) 时间就是金钱,我的朋友.希望这贴能节省你的.....

本帖最后由 whocansaveme 于 2020-9-23 10:11 编辑

鉴于部分Aff对LP的需求,分享一些我平时在WEB端常用到的一些最基础的 工具/lib 集。都经过了公司项目实际产品的检验,并且都是开源优秀工具,基本所有都在github上可以查到。最最最重要的是,在有基础前端技能的前提下,使用非常方便。(对于我个人,这些工具极大地降低了开发成本)

1. bootstrap
中文站 www.bootcss.com. 用来设计、布局pc/mobile的响应式页面,可以做到mobile端自适应,非常强大。推荐!

2. fontawesome
http://fontawesome.io。 做LP没有精美小图标?fontawesome 675个随你挑。使用字体渲染以及CSS来进行图标绘制。意味着你能方便无损修改大小、做特效。推荐!

3. animate css
https://github.com/daneden/animate.css使用CSS,用最简单的方式,给你的LP加上兼容PC/Mobile端的动画效果,结合fontawesome,神器。谁用谁知道!推荐!

4. fastclick
https://github.com/ftlabs/fastclick解决移动端手指单击的延迟问题。PC端鼠标click事件与移动端手指点击tap事件不一样,手指tap会有一个百毫秒多的延时。这个库就是为了解决这个问题而存在。属于优化层面,有切实需要的就加上。

5. ismobile
https://github.com/kaimallea/isMobile 移动设备类型检测。简单易用易扩展。

6. hammer
https://github.com/hammerjs/hammer.js 无需jquery的,支持各种手势的js库。属于进阶库,需要特殊交互的LP首选。

7. jquery
这个不用多说了吧?

如果需要自己设计制作LP,以上几个基础工具足够满足99%的需求了。

对于LP,网上现成的各种模板,很多非常好了。实在需要自己搞的,上述几个工具应该能节省不少时间哈。

有啥问题欢迎讨论。
补充1:
1. 针对你的OFFER受众国家以及你的VPS地点,可以选择性的使用上述工具的CDN连接(很多库官方提供CDN连接),如果没有速度理想的,使用专门的CDN提供商的服务,建议选择覆盖国家多的提供商,这样选一家就够了,不贵的。
2. 关于页面打开速度的几点优化,不难搞,但这优化的几十几百K,决定了用户打开LP的速度跟体验。基本的2个方法有:
a. 每一个LP,只选择这个LP必须使用的lib。如果这些LIb是在自己的VPS上,把他们压缩、混淆为一个文件,并且最小化,然后再引入。
b. 务必配置nginx的缓存以及压缩。

PS:珍惜用户的每一次点击。
====0417更新=====
今天更新3个能节省时间的小工具,都是chrome的extension。

1. Alexa Traffic Rank
在浏览网站的时候,一键查询该网站的alexa排名以及相关信息。

2. SimilarWeb
同样一键查询网站流量排名等基本信息,很好用。 一般1 2一起对比使用。


3. Google翻译
这个,不用说了吧?

3个工具都是chrome的插件,获取方式直接在google play上搜索。




==========我又来更新了(自己太懒了....) 20200923=========

这次更新2个在谷歌官方文档中提到的2个网页性能多维度检测工具。需要的同志自取。

1. PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=zh-CN

2. Google Lighthouse
https://developers.google.com/web/tools/lighthouse/


我记得在近期的一个算法更新上,网页性能的权重被进一步提高了,具体可以看这个博文:
https://webmasters.googleblog.com/search/label/speed











zlc000190 发表于 2017-4-13 21:31:15

#在这里完全不会用啊快速回复#

manzippo 发表于 2017-4-13 21:52:18

这个先留个名,下次回来再研究,多谢!

whocansaveme 发表于 2017-4-13 21:53:33

zlc000190 发表于 2017-4-13 21:31
#在这里完全不会用啊快速回复#

不要气馁。有现成的LP就用现成的并且做一些微创新即可。主要精力要放到核心上,个人愚见。

whocansaveme 发表于 2017-4-17 09:46:30

====0417更新=====
今天更新3个能节省时间的小工具,都是chrome的extension。

1. Alexa Traffic Rank
在浏览网站的时候,一键查询该网站的alexa排名以及相关信息。

2. SimilarWeb
同样一键查询网站流量排名等基本信息,很好用。 一般1 2一起对比使用。


3. Google翻译
这个,不用说了吧?

3个工具都是chrome的插件,获取方式直接在google play上搜索。

xiangwofei 发表于 2017-4-18 12:50:30

bootstrap虽然很强大,但STM上的大牛却说尽量不要用bootstrap来制作mobile LP,因为bootstrap做出来的LP会比较大

whocansaveme 发表于 2017-4-18 13:23:30

xiangwofei 发表于 2017-4-18 12:50
bootstrap虽然很强大,但STM上的大牛却说尽量不要用bootstrap来制作mobile LP,因为bootstrap做出来的LP会比 ...

可以针对性的对所需功能做裁剪。如果觉得麻烦,其他库选择也很多。

leonwqhb 发表于 2017-6-6 09:01:53

非常感谢啊。

第零句对白 发表于 2017-10-30 20:19:00

很是感谢:lol

whocansaveme 发表于 2020-9-23 10:09:23

==========我又来更新了(自己太懒了....) 20200923=========

这次更新2个在谷歌官方文档中提到的2个网页性能多维度检测工具。需要的同志自取。

1. PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=zh-CN

2. Google Lighthouse
https://developers.google.com/web/tools/lighthouse/


我记得在近期的一个算法更新上,网页性能的权重被进一步提高了,具体可以看这个博文:
https://webmasters.googleblog.com/search/label/speed


cloudysky 发表于 2021-3-25 07:15:52

学习   下次用到再回来看
页: [1]
查看完整版本: (0923更新) 时间就是金钱,我的朋友.希望这贴能节省你的.....