很久以前在安卓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. The user operation is waiting for "Building workspace" to complete

    1.选择菜单栏的“Project”,然后把菜单栏中“Build Automatically”前面的对钩去掉. 2.当你修改或添加代码后,选择菜单栏的“Project”,然后选择菜单栏中“Build A ...

  2. UOJ265 【NOIP2016】愤怒的小鸟

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  3. ES5/ES6的区别研究(ECMAScript)

    我所理解的概念应该是语法的区别和特性的区别 这里是ECMAScript的解析http://baike.baidu.com/item/ECMAScript 参考: (ES6)http://es6.rua ...

  4. NuGet包引用依赖问题

    如A包需要引用B包,然后在项目中安装A包时,自动把B包也装上. 在nuget命令行打包的时候,如果是指定项目的csproj文件进行打包的,都只能打包当前项目的dll,那么如果使用了第三方的dll而没有 ...

  5. phpMyadmin /scripts/setup.php Execute Arbitrary PHP Code Via unserialize Vul Object Injection PMASA-2010-4

    目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 对这个漏洞简单的概括如下 . "/scripts/setup.php&q ...

  6. Linux 开机 logo 修改

    从内核被解压到文件系统被挂载,我们看到的经典画面是一个小企鹅.如果嫌小企鹅枯燥,我们可以把它换掉. 1. 准备图片 这里需要的是 ppm 图片,所以,我们需要把常见格式给转换为 .ppm 才能使用.c ...

  7. [iOS dispatch_once创建单例]

    自苹果引入了Grand Central Dispatch (GCD)(Mac OS 10.6和iOS4.0)后,创建单例又有了新的方法,那就是使用dispatch_once函数,当然,随着演进的进行, ...

  8. C++ 参考网站

    Reference Web cites for the C++ standard library cppreference cplusplus sgi IBM MSDN isocpp More res ...

  9. AngularJs angular.bind、angular.bootstrap、angular.copy

    angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...

  10. React Native 开发之 (04) 例子讲解

    一.了解index.ios.js React-Native就是在开发效率和用户体验间做的一种权衡.React-native是使用JS开发,开发效率高.发布能力强,不仅拥有hybrid的开发效率,同时拥 ...