很久以前在安卓2.0系统刚刚的时候就对HTML5比较关注!因为我也是那个时候刚刚入行做前端的。那个时候最大的乐趣就是看着w3plus上面各种css3的效果,觉得哇,好牛逼原来可以这样做,然后3年过去了。。。手上的APP做完的没有40个也有30个了!然后去年参加了HTML5峰会。听着一批前辈们说着他们在html5的道路中遇到的挫折,经验,以及流行的框架,制作HTML5的ide。。。也算是小有经验了!。。。然后知道的越多,现实就越残酷(大漠竟然说他不会JS,无语偶曾经的偶像竟然说他真的不会js还发誓!this is so crazy)然后吐槽一下现在(现实就在脚下。。。)

现在么一个个朋友,以前离职的小伙伴,设计师们,都牛气冲天的说她们开始搞APP啦。要搞HTML5了

然后-_-//我只想吐槽你们对HTML5的了解究竟是什么呢!

1.....某个刚刚离职的漂亮设计师妹子表示:她们现在做APP 和H5她们要求设计H5页面都是艺术字

 
我不得不吐槽!你们设计的页面确定不是在坑人吗!....都是艺术字!你是准备让前端用canvas,载入字体搞呢,还是根本这个字体就是手绘的用图片呢。。
 
(在他们的眼里或许html5就是让他们不用考虑兼容,可以随意发挥灵感的东西)
 
但是他们考虑过图片的重量,引入字体库的大小了吗!就算是最后打包成手机APP!这样的做真的合适吗!
 
如果最后只是一个webapp,他考虑过如果不在wifi的环境下用户使用的话会造成流量大量的浪费在加载图片和字体上
 
最后如果前端境界很高的话确实可以用linear-gradient制作出很多如本页底部的那些高大上的效果。但是我必须再泼一次冷水,只有safari浏览器也就是水果是完全兼容的
 
Android4.0(至少我用的是安卓4.0是不完全兼容)。。。
 
最后关于这个问题!我只想说当前端努力的哪怕从代码的体积哪怕是20K都在努力减少的同时,设计师们是否能考虑到你们做的那么多图片,是否也能减少点体积呢?
 
毕竟你做的只是一个产品的APP,本来就没什么人主动去下,除了你的客户迫不得已才去下!当然啦如果你的产品能火到别人即使是哪怕烧2M打开你一次页面或是离线
 
存储个20M的图片。那也无话可说。
 
 
 

2.....某漂亮的设计师问:如何设计出规范的移动端的效果图呢,前端工程师们是怎么实现他的呢

 
一般写webapp一共大概3种
 
第一种类似新浪的web页面。。。无脑全屏width:100%,电脑上看还是100%
 
第二种类似微店网 。。。。。最大宽度680px.....可以下载微点网的手机客户端,打开的话是680的页面(最主要春节摇到20多块钱红包,所以下了一个)
 
 
第三种响应式布局(最精准的)设计师需要准备3个分辨率的效果图,然后打开一个页面然后根据屏幕宽度适配(如bootstrap)
 
剩下的要么比较神奇,要么比较逗比,我就不列举了
 
关于这个问题,一般来说你要设计的都是单独的所以基本就是第一种和第二种了你只要设计680宽度的效果图
 

3.....某个小白前端问(设计的时候都是px)我应该用什么字体单位。。。。。没有定性!但是大部分官方都喜欢说EM。。。但是我表示PX用的好的话更加精准

4......我不得不吐槽.......千万不要随意为了做个手机网页设计左右横屏的效果

注意关键词网页   这个问题的关键是左右横屏会在网页上带来灾难性的后果!如,手机浏览器向左向右导致手机浏览器前进后退!!!

打包了我就懒得管了!毕竟phonegap,appcan各种各样的对这个问题都要足够的支持

 
 
 
 
 
 
 
 
 
 

有关html5设计那些事,你真的考虑过前端的实现吗(最近别人经常问我这种问题,所以我就写一篇了,可能也有别人和我一样吐槽过)的更多相关文章

  1. 使用 HTML5 设计辅助功能

    使用 HTML5 设计辅助功能 Rajesh Lal 下载代码示例 如果您真的对面向广大受众感兴趣,将需要为网站设计辅助功能. 辅助功能使网页更易于访问.更易于使用,可供每个人浏览. 通常,使用最新的 ...

  2. HTML5哪点事

    HTML5哪点事 [引子] 微信圈里,很多朋友时常讲起HTML5,是未来很重要的一项技术,小老虎则更关注HTML5具体包含哪些技术内容. [技术内容] 1.说到底就是传统:html + css + j ...

  3. html5设计原理(转)

    转自:   http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html 今天我想跟大家谈一谈HTML5的设计.主要分两个方面:一 ...

  4. 学习HTML5必读之《HTML5设计原理》

    引子:很久前看过的一遍受益匪浅的文章,今天再次转过来,希望对学习HTML5的朋友有所帮助. 今天我想跟大家谈一谈HTML5的设计.主要分两个方面:一方面,当然了,就是HTML5.我可以站在这儿只讲HT ...

  5. HTML5设计原理

    HTML5是Web标准的巨大飞跃,它为什么要包含那些东西,它背后的设计原则是什么? <JavaScript DOM编程艺术>和<HTML5 For Web Designer>作 ...

  6. HTML5设计网页熔岩灯导航(navigation bar)插件 已经加上完整源代码

    导航栏(navigation bar): 1.指位于页眉区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接博客的各个页面的作用. 2.网页设计中不可缺少的部分,它是指通过一定的技术手段,为 ...

  7. HTML5设计网页动态条幅广告(Banner) 已经加上完整源代码

    横幅广告(Banner): 1.横幅广告是网络广告的常见形式,一般位于网页的醒目位置上:当用户单击这些横幅广告时,通常可以链接到相应的广告页面: 2.设计横幅广告时,要力求简单明了,能够体现出主要的中 ...

  8. 一个HTML5老兵坦言:我们真的需要“小程序”么?

    在PC时代,浏览器成为互联网信息的入口,并非因为它支持了HTML技术,而是因为它给人类带来了“世界是平的”的空间和理念,人类历史上第一次实现了信息的互联互通. 今天,微信虽然用了HTML5技术来做应用 ...

  9. 新iPhone要推出双卡双待这事是真的吗?

    自2007年发布以来,iPhone似乎一直都是"异类"--以自己独特的方式走着一条引领智能手机前进的路!如,在当年遍地按键键盘的年代,iPhone以触摸屏的奇葩姿态引领了新潮流:刚 ...

随机推荐

  1. HTTP Status 500 - Servlet.init() for servlet springmvc threw exception

    自己的当前环境是ubuntu14.04 64位,tomtcat7和tomcat8,eclipse luna,然后跑了一直spring的demo项目爆了上述的错误,由于这个项目用的是spring3.2在 ...

  2. 【bzoj3295】 Cqoi2011—动态逆序对

    http://www.lydsy.com/JudgeOnline/problem.php?id=3295 (题目链接) 题意 给出某种排列,按照某种顺序依次删除m个数,在每次删除一个数前统计序列中逆序 ...

  3. Jenkins 2.x新建节点配置(Windows)

    2.0版本以上默认加入了权限插件,所以在进入主界面时是需要登录的. 一.主界面->[系统管理]->[管理节点]->[新建节点],进行节点的添加: 二.输入节点名称,已经选择[Perm ...

  4. app 摇一摇功能

    1.重写canBecomeFirstResponder ,并返回YES -(BOOL)canBecomeFirstResponder{ return YES; } 2.重写UIResponder的三个 ...

  5. 恶意软件/BOT/C2隐蔽上线方式研究

    catalogue . 传统木马上线方式 . 新型木马上线方式 . QQ昵称上线 . QQ空间资料上线 . 第三方域名上线 . UDP/TCP二阶段混合上线 . Gmail CNC . NetBot两 ...

  6. 主机宝(zhujibao) /a/apps/zhujibao/manager/apps/config/config.php no-password Login Vulnerabilities Based On Default cookie Verification From Default File

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 主机宝管理程序使用了CodeIgniter框架,要想在CodeIgnit ...

  7. PHP框架中的日志系统

    现在在一家公司做PHP后台开发程序猿(我们组没有前端,做活动时会做前端的东西),刚开始到公司的时候花2个周赶出了一个前端加后台的活动(记得当时做不出来周末加了两天班...),到现在过去4个多月了,可以 ...

  8. 手机卫士开发记录之handler错误

  9. Django TemplateSyntaxError Could not parse the remainder: '()'

    返回的数据是列表集合,如 n [5]: a = set() In [6]: a.add((1, 3)) In [7]: a Out[7]: {(1, 3)} 在模板中使用方式如下: {% for ar ...

  10. Git及Github入门笔记

    简介 Git是一个分布式版本控制系统(你可以通过Git来管理你的代码以及相关文档,可以在自己电脑上管理,同时也可以和同事协同使用管理),Github为Git提供一个服务器(简单的说,就是你可以把你的代 ...