承接上文《玩轉(zhuǎn)HTML5移動頁面（動效篇)》，上次說的是讓頁面動起來的一些小技巧。
而頁面動起來的根基是功能可用的頁面，因此有必要分享一些優(yōu)化細(xì)節(jié)的技巧和方向，熟悉掌握一些方法論還是會對頁面開發(fā)大大提高效率的，并且也能防止疏忽缺漏。
====前方高能====
（1） 動畫雪碧圖
涉及的動畫十分多，用的元素也十分多，請務(wù)必使用雪碧圖（Sprite）！
網(wǎng)上的工具有一些可以幫助你生成雪碧圖的工具，例如CssGaga，GoPng等等，自動化構(gòu)建工具Grunt和Gulp也提供了相應(yīng)插件。
特別地，如果單張雪碧圖面積實在太大，可以拆分雪碧圖，例如拆分成2-4張，因為現(xiàn)代瀏覽器都支持4-6個同源請求下載，若資源實在太多，也可以考慮把靜態(tài)資源放在不同源域名下去請求，這里犧牲多幾個請求換來圖片同時加載比一張圖片慢慢加載要好，當(dāng)然，這需要具體情況去衡量。
順便提一下，我寫動畫的一個小技巧是把每一頁的動畫分在一個import.css里面，然后最后在主樣式中import進(jìn)去，這樣方便調(diào)試動畫，也容易維護(hù)，例如：
//style.css
@import url("reset.import.css");
@import url("loading.import.css");
@import url("m-animate-1.import.css");
@import url("m-animate-2.import.css");
@import url("m-animate-3.import.css");
|
當(dāng)然，import不是原生支持的，這里需要一些流程化工具讓import的頁面在輸出之前經(jīng)過組裝-壓縮的步驟。
（2） 圖片壓縮
圖片壓縮是老生常談，但是仍然有不少人忘記壓縮，那可是活生生的帶寬和流量的浪費(fèi)啊…
壓縮圖片需要有好工具，有智圖，TinyPNG，JPEGmini等等。
依靠工具外，還有以下方式可以優(yōu)化圖片：
1.盡量避免用PNG24。如果圖片色彩要求不高，請使用PNG8；
2.使用新格式，WEBP和BPG等新格式的到來，在不用考慮兼容的情況下請大膽嘗試；
3.用SVG和ICONFONT代替簡單的圖標(biāo)；
4.用FUFU的字蛛來代替藝術(shù)字體切圖。
（3）多終端兼容
多終端兼容是一切的根基，要知道有人拿著腎6+，有人拿著腎4，大則414×736，小則320×416（IPHONE4在SAFARI保留上下端導(dǎo)航），因此多終端兼容是十分必要的。
曾經(jīng)有一種派系為320派系，就是大部分頁面都是320寬度，因此干脆直接用320的容器來包一切頁面，那樣也簡單，然而IPHOEN6和IPHONE6+的出現(xiàn)簡直是滅了這個派系。
那么到底要如何兼容呢？
這里我分了三個時期來說說：
A.設(shè)計初期。先審視設(shè)計稿，因為320派系的原因，大部分設(shè)計稿只考慮到IPHONE5來設(shè)計，因此很多背景元素是只有320px寬度（頁面實際渲染寬度），例如下圖。
那么，這時候就需要設(shè)計提供一個較長的延伸背景了，最好是可以重復(fù)的，用background-repeat可以減少圖片大小。
B.設(shè)計中期。也就是具體的兼容方法，可以使用CSS3 Media Query和類覆蓋。
1.CSS3 Media Query，按范圍兼容機(jī)型。
/*iphone6*/
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
.page6 .ele-building{top: 69px;}
.page6 .ele-runner{top: 100px;}
.page6 .ele-pophome{top: 16px;}
}
|
2.類覆蓋，這種方式適合直接為小屏或大屏做整體兼容。
首先，為小屏（大屏）加一個識別類，這里小于420表示為小屏幕（IPHONE4有上下導(dǎo)航欄）：
var bh = $(window).height();
// 480 - 64 = 416 iphone4
if(bh<420){
$('body').addClass('low-screen');
}
|
然后，對應(yīng)識別類加上要變動的元素覆蓋，例如：
.page6 .ele-bg{top: 10px;}
.low-screen .page6 .ele-bg{top: 0px;}
|
C.設(shè)計后期。這是最后一步，整體檢查和體驗，這里面會暴露一些問題，例如元素在IPHONE6P顯得小了或者元素在IPHONE4擠不下了，可以來最后大招解決：
1.大屏適當(dāng)用zoom:(倍率)或者transform:scale(倍率)來增大元素，實測失真根本看不出來，設(shè)計師也滿意（畢竟不用多做一張圖?。?；
2.小屏適當(dāng)去掉一些元素，例如一些翻頁提示，一些多余圖標(biāo)，可以讓優(yōu)雅降級，把它們 display:none掉。
有以上幾步，基本就能兼容大部分機(jī)器了。兼容一直是個苦活，但是這是前端必修課，多練就會發(fā)覺其實也沒有那么難嘛。
（4）交互提示
前面說了，加了音效就要加上音樂切換開關(guān)的按鈕，不然會被用戶罵死。還有其他，例如如果你的頁面不能兼容橫屏，請監(jiān)聽橫屏狀態(tài)，然后加上適當(dāng)?shù)臋M屏提示。
例如：
// 橫屏監(jiān)聽
var updateOrientation = function(){
if(window.orientation=='-90' || window.orientation=='90'){
$('.landscape-wrap').removeClass('hide');
console.log('為了更好的體驗，請將手機(jī)/平板豎過來！');
}else{
$('.landscape-wrap').addClass('hide');
console.log('豎屏狀態(tài)');
}
};
window.onorientationchange = updateOrientation;
|
提示越多，界面越友好，有時候設(shè)計師會漏掉一些可能出現(xiàn)的頁面情況。
作為有態(tài)度的前端，請好好把關(guān)，讓用戶有好的體驗。
（5）分享接口
H5做好了，要傳播分享才能展示你的牛逼轟轟。
然而分享其實是個坑，分享到微信、手Q等都有各種問題。
A.微信
舊微信會使用WeixinJSBridge來聲明分享的縮略圖、標(biāo)題、正文等，比較方便。例如：
而最新的微信提供了新的微信SDK，需要在公眾賬號綁定所屬域名之后調(diào)用SDK作分享，可以說分享功能會更加強(qiáng)大，坑也會更加少。
B.手Q
手Q支持聲明meta標(biāo)簽的的分享方式，例如：
而若在qq.com域名下也支持api的定義方式。
C.一般化分享
在默認(rèn)兼容舊版微信、手Q或者各種瀏覽器，平臺，可以用這樣的方法：
寫h1做標(biāo)題，p做內(nèi)容，img做縮略圖，只需要把h1隱藏掉就好，這里的縮略圖最好要大于200x200px。
例如：
當(dāng)然，這樣也有利于搜索引擎拉取信息。
分享的坑還有更多，例如不同瀏覽器例如QQ瀏覽器、Chrome也會有自己的默認(rèn)拉取方式（部分截圖作縮略圖），需要多加測試優(yōu)化。
（5）SEO搜索引擎優(yōu)化
SEO（搜索引擎優(yōu)化）的基本做法是把頁面結(jié)構(gòu)寫好，這包括：
1.定義精確的網(wǎng)頁標(biāo)題。你的標(biāo)題應(yīng)該有概括性，能明確告知搜索引擎和用戶你的網(wǎng)站大概內(nèi)容和目的，可以是當(dāng)前頁面標(biāo)題-所屬類型-產(chǎn)品名，例如“全民來猜歌-年費(fèi)黃鉆-QQ空間”。
2.針對頁面內(nèi)容補(bǔ)充description和keywords的meta標(biāo)簽。你需要簡短總結(jié)頁面的主要目標(biāo)，然后補(bǔ)充description，以及根據(jù)關(guān)鍵詞補(bǔ)充keywords。
3.優(yōu)化你的超鏈接和圖片。包括優(yōu)化超鏈接顯示的文本，要具有語義性也要跟超鏈接的網(wǎng)頁具有相關(guān)性，例如“空間主頁”就不要鏈接到“www.qq.com”。同時，要補(bǔ)充”title”和”alt”屬性，例如“<img src=’images/apple.jpg’ title=’蘋果示例圖’ alt=’蘋果示例圖’ />”。
4.建立良好的網(wǎng)站導(dǎo)航和sitemap。網(wǎng)站需要有一個良好的導(dǎo)航，控制根目錄和各子目錄的關(guān)鍵，通過sitemap可以幫助網(wǎng)站主了解網(wǎng)站結(jié)構(gòu)，也方便搜索引擎收錄整個站點(diǎn)。
5.優(yōu)化目錄結(jié)構(gòu)和URL。你的URL應(yīng)該有語義性，簡短易懂，例如http://www.apple.com/macbook-air/，而且每一層級都要有它對應(yīng)的頁面展示以及語義。
6.善用h1-h6的標(biāo)題結(jié)構(gòu)樹。合理的標(biāo)題可以強(qiáng)調(diào)文字，也能讓搜索引擎更加了解到各標(biāo)題的重要性，因此建立良好的標(biāo)題樹十分有意義。
7.不斷致力于提供優(yōu)質(zhì)的內(nèi)容。社交化分享是網(wǎng)站曝光最快的因素，因此不斷提供了優(yōu)質(zhì)原創(chuàng)內(nèi)容才能真正提高你的網(wǎng)站曝光權(quán)重。
（6）無障礙
無障礙的普及是一件好事，這讓互聯(lián)網(wǎng)真正地為所有人可用。因此我們也應(yīng)該為之而努力，無障礙的根基是你頁面強(qiáng)壯的語義性和結(jié)構(gòu)性，具體可以參考《騰訊網(wǎng)無障礙說明》了解無障礙的優(yōu)化手段。
最后，羅嗦了這么多，只是我自己的一些小經(jīng)驗，請輕拍磚，多交流。
原文鏈接: 騰迅ISUX
]]>
作為一名前端，在拿到設(shè)計稿時你有兩種選擇：
這次就來談?wù)勔恍﹦赢嬙O(shè)計的小技巧，能在你時間不多又沒有動畫想法的時候瞬間讓頁面增色不少。
====前方高能====
（1） CSS3時序錯開漸顯動畫
效果就是兩個元素分別從上面掉下來，這里有個小細(xì)節(jié)（keyframes），為了讓掉下來的動畫生動點(diǎn)，應(yīng)該是在90%的時候先掉下一點(diǎn)點(diǎn)，然后瞬間在100%時回跳5px。
還有個細(xì)節(jié)，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是漸變動畫不能停止在最后一幀。有這樣一個解決方案：
1.用Modernizr去檢測是否支持這個屬性，加上識別類.no-animation-fill-mode；
2.根據(jù)識別類采取以下措施：
（1）用js模擬同樣效果；
（2）用css屏蔽掉動畫；
（3）或者直接全部都用transition來做（不要keyframes）。
示例頁面如下（查看DEMO）：
分兩種情況：
2.如果時間緊湊，又不像桑尼一樣擅長于動畫細(xì)節(jié)，可以使用一些輔助工具：
（3）SVG動畫
再使用CSS3的animation控制stroke-dashoffset：
效果不難吧！SVG還有各種用途，例如制作ICONFONT等，可以深入挖掘。
====最后總結(jié)====
當(dāng)然，真正要做到高效制作動態(tài)H5頁面，還是靠積累，因此平時做好的細(xì)節(jié)動畫自己都積累起來，下次分分鐘就能用得上。
原文鏈接:騰訊ISUX
]]>功能與目標(biāo)
首先從功能與設(shè)計目標(biāo)來看， H5專題頁主要有以下4大類型：
1.活動運(yùn)營型
為活動推廣運(yùn)營而打造的H5頁面是最常見的類型，形式多變，包括游戲、邀請函、賀卡、測試題等形式。與以往簡單的靜態(tài)廣告圖片傳播不同，如今的H5活動運(yùn)營頁需要有更強(qiáng)的互動、更高質(zhì)量、更具話題性的設(shè)計來促成用戶分享傳播。從進(jìn)入微信H5頁面到最后落地到品牌App內(nèi)部，如何設(shè)計一套合適的引流路線也頗為重要。
大眾點(diǎn)評為電影《狂怒》設(shè)計的推廣頁便深諳此道。復(fù)古擬物風(fēng)格的視覺設(shè)計讓人眼前一亮，富有質(zhì)感的舊票根、忽閃的霓虹燈，配以幽默的動畫與音效，恨不得每個選項都點(diǎn)一遍。圍繞“選擇”這個品牌關(guān)鍵詞，用引人入勝的測試題讓用戶把人生當(dāng)作大片來選擇，選到最后一題引出“大眾點(diǎn)評選座看電影”，一鍵直達(dá)App購票頁面。即使明知是軟文也忍不住帶著“矮油不錯，這個頁面有點(diǎn)diao噢”的心情點(diǎn)擊了分享。
2.品牌宣傳型
不同于講究時效性的活動運(yùn)營頁，品牌宣傳型H5頁面等同于一個品牌的微官網(wǎng)，更傾向于品牌形象塑造，向用戶傳達(dá)品牌的精神態(tài)度。在設(shè)計上需要運(yùn)用符合品牌氣質(zhì)的視覺語言，讓用戶對品牌留下深刻印象。
伴隨著浪漫的鋼琴旋律，《首草先生的情書》以一位男士的口吻娓娓道來在成長歷程中對妻子的愛與愧疚，最后引出“首草——滋陰圣品，愛妻首選”的宣傳語。設(shè)計上采用回憶般的黑白色調(diào)，簡單的照片加文字，配以花瓣掉落、水面漣漪等輕動畫，渲染出唯美優(yōu)雅的氣氛。“首草”這個全新的高端養(yǎng)生草藥品牌，用H5打出了一副走心的情感牌，讓用戶記住了“半生只為你”的愛妻品牌形象。
3.產(chǎn)品介紹型
聚焦于產(chǎn)品功能介紹，運(yùn)用H5的互動技術(shù)優(yōu)勢盡情展示產(chǎn)品特性，吸引用戶買買買。
這一類型的H5頁面多見于汽車品牌，LEXUS NX是其中的優(yōu)秀代表案例。精致和極富質(zhì)感的建模、細(xì)膩的光效營造出酷炫的視覺風(fēng)格。用手指跟隨光的軌跡切割畫面揭開序幕，通過合理優(yōu)雅的觸碰、摩擦、滑動等互動形式帶領(lǐng)用戶一同探索產(chǎn)品的7大特性，宏觀和微觀都照顧周全。
4.總結(jié)報告型
自從支付寶的十年賬單引發(fā)熱議后，各大企業(yè)的年終總結(jié)現(xiàn)也熱衷于用H5技術(shù)實現(xiàn)，優(yōu)秀的互動體驗令原本乏味的總結(jié)報告有趣生動了起來。
《京東的十大任性》用10張橫屏頁面講述了京東在2014年的十大成就，視覺設(shè)計上采用簡潔的扁平風(fēng)插畫，加入紙面質(zhì)感形成復(fù)古卡片拼貼感。不同頁面間通過手指滑動實現(xiàn)流暢的視差滾動效果，最后還有劉總這個小彩蛋。一口氣看完后大概就了解2014年京東都干了哪些大事。
二．形式為功能服務(wù)
在確定了專題頁的功能目標(biāo)之后，接下來就是關(guān)鍵的設(shè)計階段了。如何有的放矢地進(jìn)行設(shè)計，需要考慮到具體的應(yīng)用場景和傳播對象，從用戶角度出發(fā)去思考什么樣的頁面是用戶最想看的最會去分享的。以下列舉幾種常見的H5專題頁表現(xiàn)形式：
1.簡單圖文
簡單圖文是早期最典型的H5專題頁形式。“圖”的形式千變?nèi)f化，可以是照片、插畫、GIF等。通過翻頁等簡單的交互操作，起到類似幻燈片的傳播效果?？简灥氖歉哔|(zhì)量的內(nèi)容本身和講故事的能力。
滴滴打車這個案例就是典型的簡單圖文型H5專題頁，用幾張照片故事串起了整套頁面。視覺簡潔有力，采用整屏黑白照片，點(diǎn)綴以滴滴的品牌橙色。每切換一張圖片，文字就漸隱浮現(xiàn)，沒有其他互動形式，讓觀眾聚焦于內(nèi)容，通過陌生人之間的真情聯(lián)系來塑造品牌的正能量形象。
也有不甘平淡的精彩案例。在除夕夜全國人民瘋狂搶紅包的時刻，微信推出了《從此看盡中國人的名與利》這樣一個專題頁。第一眼就被鎮(zhèn)住了，好親切的RMB~每個頁面都是一張人民幣風(fēng)景局部放大圖，創(chuàng)作者加入巧妙的創(chuàng)意元素與微動態(tài)進(jìn)行細(xì)膩刻畫，帶觀眾走進(jìn)了人民幣的微觀世界。每一張鈔票圖案配合發(fā)人深省的文案，在推廣微信紅包的同時呼吁人們重新審視人情與名利的奧義。
2.禮物/賀卡/邀請函
每個人都喜歡收到禮物的感覺，抓住這一心理，品牌推出了各種H5形式的禮物、賀卡、邀請函，通過提升用戶好感度來潛移默化地達(dá)到品牌宣傳的目的。既然是禮物，那創(chuàng)意和制作便是重要的加分項。
AKQA創(chuàng)意營銷公司在圣誕之際獻(xiàn)上了一份厚禮——夢幻水晶球。通過移動手機(jī)，鏡頭從水晶球外不斷搖晃推近，漸漸走進(jìn)水晶球的微觀世界里。通過手機(jī)環(huán)顧四周，可以360度欣賞水晶球里的全景，搖一搖雪花便漫天飄灑。寫下你的祝福并分享給朋友，相信一定會驚艷到對方。這個H5頁面使用了重力感應(yīng)、3D等技術(shù)，文字與BGM的使用也十分講究，給用戶帶來了完美的互動體驗，值得細(xì)細(xì)品味。
Evernote在過年期間也別出心裁地推出語音賀卡，通過公眾號引導(dǎo)用戶對其發(fā)送一條語音消息，然后把這條祝福語音結(jié)合中國風(fēng)動畫做成一張獨(dú)一無二的語音賀卡發(fā)送給朋友。整體色調(diào)也是以Evernote品牌色為主，同時蘊(yùn)含著一絲優(yōu)雅的年味，十分討巧。
3.問答/評分/測試
問答形式的H5頁面也屢見不鮮了，利用用戶的求知欲和探索欲，一路選選選，看最后到底是什么成績。一條清晰的線索是必要的，最后到達(dá)的結(jié)果頁也需要合理不突兀，如果能輔以出彩的視覺和文案，弱化答題的枯燥感那就再好不過了。
與本文開頭一樣也是大眾點(diǎn)評的項目，這次是為姜文的電影《一步之遙》做持續(xù)推廣，讓用戶為姜文的代表作評分。視覺設(shè)計依舊出彩，開腦洞的創(chuàng)意和動畫設(shè)計令人叫絕（一定要掃一掃體驗下?。Ｑ永m(xù)了懷舊大字報風(fēng)格，字體、文案、裝飾元素等細(xì)節(jié)處理也十分用心。問答形式的H5頁面能做到這個份上也是蠻拼的。
4.游戲
從 “圍住神經(jīng)貓”、“看你有多色”等單純小游戲再到杜蕾斯“一夜N次郎”（即山寨版“別踩白塊兒”）等品牌植入式小游戲，H5游戲因為操作簡單、競技性強(qiáng)，一度風(fēng)靡朋友圈，但創(chuàng)意缺乏和同質(zhì)化現(xiàn)象導(dǎo)致用戶對無腦小游戲逐漸產(chǎn)生了厭倦。品牌要在游戲上做到成功傳播，需要在玩法和設(shè)計上多下點(diǎn)功夫。
Same在圣誕節(jié)推出了一款名為《圣誕老人拯救計劃》的H5小游戲，操作非常簡單，只需用手指交替上滑，把角色的脖子向上拉到無限長，游戲會記錄你拉的最高距離，跟朋友比一比誰比較長。界面清新可愛，與Same的招牌畫風(fēng)一致，游戲角色也是Same的品牌角色，通過幽默惡搞的游戲向用戶傳達(dá)Same獨(dú)到有趣的產(chǎn)品文化。
三．為設(shè)計加分的4個要點(diǎn)
一個H5頁面設(shè)計品質(zhì)的出眾與否，會直接影響其傳播效果，甚至影響到用戶對品牌形象的認(rèn)知。在這里總結(jié)出以下的設(shè)計要點(diǎn)：
1.細(xì)節(jié)與統(tǒng)一
要成就高品質(zhì)的用戶體驗，必須考慮到細(xì)節(jié)與整體的統(tǒng)一性。復(fù)古擬物的視覺風(fēng)格，那字體就不能過于現(xiàn)代；幽默調(diào)侃的調(diào)調(diào)，那文案措辭就不能過于嚴(yán)肅；打情感內(nèi)容牌的，動效就不能過于花哨。
大眾點(diǎn)評姜文電影推廣系列的《九步之遙》H5專題頁便牢牢抓住了這一點(diǎn)。從二維碼入口到性感的loading頁，再到最后分享提示的設(shè)計，包括文案措辭和背景音效，無不與整體的戲虐風(fēng)保持一致，給到用戶一個完整統(tǒng)一的互動體驗。
尤其關(guān)注“分享提示”這個細(xì)節(jié)設(shè)計，比起一個簡單的箭頭和一句冷冰冰的“點(diǎn)這里分享”，用心的細(xì)節(jié)設(shè)計帶來的高品質(zhì)和好感度是顯而易見的。再貼幾個精彩案例：
2.緊跟熱點(diǎn)，利用話題效應(yīng)
想要你的H5專題頁一夜爆紅，第一時間抓住熱點(diǎn)并火速上線，借機(jī)進(jìn)行品牌宣傳也不失為一條捷徑。
天天P圖抓住武則天熱播的契機(jī)推出了風(fēng)靡海內(nèi)外的媚娘妝，同時《全民COS武媚娘》的H5互動頁也第一時間上線，操作簡單易上手，一鍵上傳照片就能立刻完成媚娘妝，與萬千媚娘們進(jìn)行PK，娛樂了大眾又推廣了產(chǎn)品。
網(wǎng)易娛樂在武媚娘剪胸風(fēng)波的風(fēng)口浪尖上推出了名為《神還原武媚娘被剪胸真相》的H5專題頁，放下節(jié)操用極富想象力的粗曠草圖風(fēng)向廣大觀眾“還原”了真相。一時間被瘋狂轉(zhuǎn)發(fā)，網(wǎng)易娛樂也算是順勢自我宣傳了一把。
3.講個好故事，引發(fā)情感共鳴
不論H5的形式如何多變，有價值的內(nèi)容始終是第一位的。在有限的篇幅里，學(xué)會講故事，引發(fā)用戶的情感共鳴，將對內(nèi)容的傳播形成極大的推動。
LEVI’S新年優(yōu)惠活動專題頁以第一人稱的口吻，用小時候簡樸卻熱鬧的新年與長大后富足卻乏味的新年做對比，用手繪風(fēng)渲染出親切的懷舊氛圍。最后引出“這個新年，把壓力和束縛打包扔掉，用新鮮的眼光感受生活，一起活出趣”的品牌推廣slogan，代入感極強(qiáng)的故事無疑是驅(qū)動分享的源動力。
4.合理運(yùn)用技術(shù)，打造流暢的互動體驗
隨著技術(shù)的發(fā)展，如今的HTML5擁有眾多出彩的特性，讓我們能輕松實現(xiàn)繪圖、擦除、搖一搖、重力感應(yīng)、擦除、3D視圖等互動效果。（有興趣的話可以點(diǎn)擊這個網(wǎng)站 http://fff.cmiscm.com/幾乎有所有H5動態(tài)效果的展示）。相較于塞入各種不同種類的動效導(dǎo)致頁面混亂臃腫，我們更提倡的是合理運(yùn)用技術(shù)，用心專注于為用戶提供流暢的互動體驗。
典型的案例是淘寶在雙12推出的預(yù)售推廣H5專題頁。在瀏覽過程中我只使用了一種向上滑動的手勢，而頁面呈現(xiàn)出來的效果卻猶如一個流暢的動態(tài)GIF。設(shè)計師巧妙利用圖形設(shè)計與組合，在滑動過程中營造出一種豐富的視差滾動效果，單個圖形元素的遮罩、旋轉(zhuǎn)與整體頁面的動勢配合極為默契。
結(jié)語
隨著手機(jī)硬件的升級、HTML5技術(shù)的發(fā)展以及微信平臺的開放，HTML5的跨平臺、低成本、快迭代等優(yōu)勢被進(jìn)一步凸顯，這對身處于移動互聯(lián)網(wǎng)大潮的企業(yè)主、品牌、設(shè)計師和開發(fā)者來說，都將是一個最好的時代。未來必將涌現(xiàn)更多優(yōu)秀的H5頁面，讓我們拭目以待。
]]>
Mix Event
Commande en ligne NOURA
Ford Answers
Happy New Year
Easy Rocket Studio
Sulliwan Studio
Santa Stories
Cotonificio Olcese
FIVE MINUTES
The Portfolio of Jonathan Patterson
BMW Motorrad Special online shop
Superhero Cheesecake
Christmas Experiments
The Joe Boxer Jingle Joes by Kmart
Rosewater
Green Chameleon
Ricardo de la Blanca Brigati
The Selfie Collection
Behance Portfolio Review #3
Flatty Shadow
Rolex Awards 2014
The all new MINI 5-Door Hatch
PEEL Entertainment
Marcelo Duende
Digital For All Now
Ziggo OMG? LOL!
Thought.is
CHAPOLEONE
#7MML
Traveling Vineyard
Big Hero 6 Official Website
Spacejunk
]]>
Sound City Project
Orange #Futureself
Portfolio 2014
BeloeSuhoe
Reebok Fall/Winter ’14 Lookbook
Hashtag My Ass
Dinoalatrata
Multilingual WordPress Themes
La Piece
adidas Predator
Hibou Digital
Evoking Emotion
GreenCampusGuide – ProjectGreen
3D Grapher – Launch
Google I/O 2013 Experiment
30.000 Particles: A study creating performant particles with Canvas 2D
The warehouse
Interactive Typography Effects
Ball pool
Flat surface shader
Ripples
Surface waves
The planetarium
Wiper typography
Block based destruction of HTML5 video
The scream
