手机中的页面

今年折腾手机里的页面折腾的不少,一开始要求是用响应式,结果发现做点不变更需求的不要求快速上线的需求还好,可这TMD世界上有不变更的不快速上线的需求吗?
答案是木有啊!!!

先说说响应式页面
一套页面就要适应所有终端有木有,这是一个无底洞啊同志们!!!你要测多少设备,切多少适应式图片,写多少兼容性代码,特别是设计师同志设计出来的没有mobile first,这一开始就注定了后面源源不断的微调啊!!!
当然,今年主要都是跟活动类的需求,比起平台类的来说,时间要求高,过了这个点这活动上线就没什么意义了。所以在我分析了不少响应式页面后……
终于发现,原来做成PC和手机两套页面就可以了。为什么呢?

  • 第一,从数据上来说,现在手机和PC是最大头的访问来源,别的设备,只要显示PC或手机中的页面就OK。
  • 第二,从开发效率上来说,只做手机和PC很有针对性,不像响应式什么都是目标,那什么可能都捞不着。
  • 第三,从性能上来说,因为有第二条有针对性,那么我们也可以针对两种设备做优化,响应式怎么个优化?

接下来就是手机中的页面要怎么弄
继续阅读“手机中的页面”

CSS动画

今年前些日子在 2013 WebRebuild 成都站 上做的了关于CSS动画的分享,所以把分享PPT放出来了,欢迎大家接着拍砖。呵呵,这几天有点小暴发,因为2013年快过去了,赶紧要把一年的心得分享出来,从而好迎接2014的挑战呢~

这个PPT,为了与以往大家的不一样,在表现形式上用了WEB方式实现,切换特效就是用的CSS,谁让咱讲的就是CSS动画呢,为了这,可花了一整天的时间呢。然后里面有不少的DEMO,基本上都是我写的啊,这一年真是一把鼻涕一把泪啊,另外DEMO太多为了性能所以DEMO默认是不显示的,按一下R键就显示当前DEMO,同时也会关闭别的DEMO。当然也是和公司说好,可以放出来的一些代码,虽然前端代码原本别人想看就能看……

好嘛,地址是:http://s5s5.github.io/CSS-Animations/
国际惯例也是放在Github上的:https://github.com/s5s5/CSS-Animations
继续阅读“CSS动画”

我的一些代码片断

我常用的一些代码片断,欢迎大家拍砖!已经放到Github上了,请访问:
https://github.com/s5s5/Code-snippets-of-s5s5
这里复制一份,但不在这里更新了,以后在Github上更新。


HTML

HTML文档声明

<!DOCTYPE html>

HTML编码使用utf-8,放置于

区最上方 (文件保存时存为 utf-8 无BOM)

<meta charset="utf-8">

强制IE系浏览器用最新渲染模式渲染

<meta http-equiv="X-UA-Compatible" content="edge">

多终端设备访问时自动缩放到屏幕宽度

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Meta 值是SEO优化的关键

<meta name="description" content="" />
<meta name="keywords" content=""/>

Title 部分更是SEO优化的关键

<title></title>

继续阅读“我的一些代码片断”

锋利的jQuery

优点:轻量、选择器、DOM操作、事件处理、兼容、链式操作
理念:write less, do more.
PS:windows.onload 与 $(document).ready() 区别
代码风格:1、链式操作风格(同级多行、子级缩进),2、注释
jQuery对象与DOM对象:1、方法不通用,2、可互转($(cr), $cf[0])
PS:is(‘:checked’)
与其它库的冲突:在别的库之前JQ被引入用jQuery. ,之后用noConflict()

基本选择器:#id .class element * selector1,…,selectorN
层次选择器:$(‘ancestor descendant’) $(‘parent > child’) $(‘prev + next’) $(‘prev ~ siblings’)
过滤选择器::first :last :not(selector) :even : odd :eq(index) :gt(index) :lt(index) :header :animated :focus :contains(text) :empty :has(selector) :parent :hidden :visible [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attribute|=value] [attribute~=value] [attribute1][attributeN] :nth-child(index/even/odd/equation) :first-child :last-child : only-child :enabled :disabled :checked :selected
表单选择器::input :text :password :radio :checkbox :submit :image :reset :button :file :hidden
继续阅读“锋利的jQuery”

跨平台密码管理方案

LastPass 是个不错的跨平台密码管理方案,可惜你想跨平台就要收费,于是就想到有没有免费的,找了几个,最后试用 KeePass + 插件 的方式最好,记录一下。

PC:KeePass2 + KeePassHttp + chromeIPass + Dropbox
iOS:MiniKeePass + Dropbox
Mac: KeePassX + Dropbox (感谢好心人LYF)
Linux: KeePass2 + Dropbox (感谢好心人LYF)
Android: KeePassDroid + Dropbox (感谢好心人LYF)
……

非产产6

为什么运营
内容运营:内容评判、优质推荐、触发内容、话题炒作
营销推广:推新、激活、唤醒流失、新功能、渠道
用户团队:服务的心态
品牌/公关:品牌创立、引导舆论
行业分析:通过行业报告引导
运营事故:控制范围、减少影响、避免再次发生
数据分析:探寻原因、预测风险、要有质的认识、数据反哺策划

非产产4

非产品与产品不同:1、思维方式不同(怎么做 VS 为什么做、做什么);2、判断标准不同。

组成:(功能 + 外观 + 载体) + (品牌)
目标:用户价值,竞争优势

以用户为中心
挑战:适应用户、吸引用户、留住用户
从用户的角度换位思考:别把自己当典型用户、重视第一次体验、先场景
访谈和观察身边的用户:多开放式问题、多WHY、观察用户行为

竞品:特点、发展、用户反馈
可能性测试:验证想法

定位=目标用户+策略 : 功能、体验(海底捞)、用户群差异(YY)

需求设计:过滤和排序(基础核心 > 口碑 > 长尾)
体验设计:别让我等、别让我想、别让我烦(在使用过程中的感受,细节成就体验)

非产产3

java移植的故事:同步目标
开发GG的经历:想想你的老板

目标的产生:
竞品只是指引
战略分析是想做什么
竞品分析是最快了解产品的方式
行业分析与战略分析的差别
方法不重要 – 分析的过程 – 了解产品为何这么做 – 推导出你的产品目标
需求 – 产品目标

心态的作用:
不喜欢的产品怎么喜欢?
已是最好如何改进?
把产品当作自己的孩子:把产品推荐给熟悉的每一个人
屁股决定脑袋
疯狂用你的产品
只有韦小宝最适合当产品经理

团队内部:多用、多想、多问
尽一切可能去了解产品的目标!
做主人、爱产品,好的产品能成就你!
DON’T MAKE ME THINK

退出移动版