當(dāng)前位置:首頁(yè) >  科技 >  IT業(yè)界 >  正文

Bootstrap響應(yīng)式設(shè)計(jì)在中國(guó)-關(guān)于移動(dòng)網(wǎng)站和卓越網(wǎng)站體驗(yàn)的那些事兒

 2014-03-17 11:03  來(lái)源: A5站長(zhǎng)網(wǎng)   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

為移動(dòng)而生-更窄的網(wǎng)頁(yè)并不是移動(dòng)網(wǎng)頁(yè)

提供完整的用戶體驗(yàn),打通移動(dòng)端與客戶端的區(qū)隔,這在中國(guó)互聯(lián)網(wǎng)業(yè)界已經(jīng)沒(méi)有什么好爭(zhēng)辯的了,然而天國(guó)總是有天國(guó)的實(shí)情,比如人們對(duì)于移動(dòng)網(wǎng)站的理解,從早年的“短信網(wǎng)址”笑料收?qǐng)?,到現(xiàn)在的微信上諸多“偽微門戶”泛濫,離真實(shí)的移動(dòng)用戶體驗(yàn)相差很遠(yuǎn)。

比如下圖是一個(gè)熱門微信頒發(fā)出來(lái)的“微門戶”頁(yè)面,其實(shí)和早年的wap網(wǎng)站制作一樣,只不過(guò)是做了一個(gè)“更窄”的網(wǎng)頁(yè),并沒(méi)有理解移動(dòng)設(shè)備的真正需求。

在移動(dòng)設(shè)備上,人們使用手指觸摸來(lái)取代鼠標(biāo)點(diǎn)擊,并不能使用“二指琴魔”來(lái)不斷放大設(shè)備。

不同的媒體又有不同的介質(zhì),比如PAD和手機(jī),雖然同屬移動(dòng)設(shè)備,又有不同。

再者,在蘋果設(shè)備上,橫屏與豎屏有不同的媒體查詢規(guī)則。

如何讓圖片在移動(dòng)設(shè)備是同比放大,而不是被屏幕遮蔽?

這時(shí)只有祭出Bootstrap這面大旗,方能迎刃而解。

巨頭的精湛之作-匠人打造、為匠人用

很少有一個(gè)web框架為了適應(yīng)移動(dòng)互聯(lián)網(wǎng)時(shí)代而誕生的。

而Bootstrap恰恰是這樣的一個(gè)作品,雖然目前國(guó)內(nèi)開發(fā)者接觸的人群不多,但一場(chǎng)流式布局與響應(yīng)式體驗(yàn)的變革將由其引領(lǐng)。

檢驗(yàn)一個(gè)網(wǎng)站是否支持響應(yīng)式標(biāo)準(zhǔn)其實(shí)很簡(jiǎn)單,就是將網(wǎng)友窄,如果能自適應(yīng)屏幕就是符合這一標(biāo)準(zhǔn),目標(biāo)大多數(shù)網(wǎng)站不支持此標(biāo)準(zhǔn),而越來(lái)越多的名企和卓越門戶已經(jīng)引入這一標(biāo)準(zhǔn)。

Bootstrap的娘家Twitter(推特),可謂是當(dāng)今移動(dòng)互聯(lián)網(wǎng)的開山鼻祖,開創(chuàng)了微博這一個(gè)新網(wǎng)絡(luò)載體,大陸網(wǎng)民所能體驗(yàn)到的新浪微博、騰訊微博無(wú)不是其追隨者。

早期Twitter提供的內(nèi)部開發(fā)工具缺乏一些精致和平易近人的設(shè)計(jì),為了應(yīng)對(duì)復(fù)雜的設(shè)計(jì)需求,Twitter前端工程師在開發(fā)風(fēng)站時(shí)喜歡采用自己所熟悉的技術(shù),這就了網(wǎng)站維護(hù)困難、可擴(kuò)展性不強(qiáng)、開發(fā)成本等問(wèn)題。

2010年6月,為了提高內(nèi)部協(xié)調(diào)性和工作效率,Twitter公司的幾個(gè)前端開發(fā)人員自發(fā)成立了一個(gè)興趣小組,期望設(shè)計(jì)一個(gè)偉大的作品,開發(fā)一個(gè)開放源碼的前端工具包,旨在幫助設(shè)計(jì)師和開發(fā)人員快速、高效的構(gòu)建出卓越的網(wǎng)頁(yè),這就是Bootstrap。

最終,Bootstrap在Twitter公司迅速成長(zhǎng),且被業(yè)界廣泛采用(美國(guó)NASN、Breaking News、WordPress、Drupal等均導(dǎo)入了Bootstrap),不僅包括了基本樣式,而且有了更為優(yōu)雅和持久的前端設(shè)計(jì)版式,目前這個(gè)版本為3.0。

可以毫不客氣的說(shuō),看到Twitter公司的白鴿圖標(biāo),就可以看到Bootstrap的優(yōu)雅美麗,這正是無(wú)數(shù)個(gè)WEB開發(fā)者朝思夜想和渴求的!

下圖:印象筆記和HTC官網(wǎng)的響應(yīng)式體驗(yàn)

開發(fā)者利器-提供網(wǎng)站開發(fā)效率的首選

還在用*{margin:0px;padding:0px}這樣的全局定義?

還在用圖片作為圖標(biāo)?

還在用自定義的媒體查詢來(lái)定義各個(gè)界面的寬度?

這已經(jīng)遠(yuǎn)遠(yuǎn)不夠。

一個(gè)優(yōu)秀的網(wǎng)站應(yīng)該除了堅(jiān)強(qiáng)的內(nèi)核,還應(yīng)該包括:

l 跨設(shè)備、跨瀏覽器

l 支持響應(yīng)式設(shè)計(jì)

l 良好的柵格系統(tǒng)

l 優(yōu)秀的字體樣式

l 多媒體展示

l 良好的導(dǎo)航和表單

l 支持hmtl5

l 以及更多

BootStrap在中國(guó)-逐浪CMS首倡導(dǎo)入

中國(guó)軟件業(yè)不缺乏優(yōu)秀的設(shè)計(jì)者和思想家,但缺乏優(yōu)秀的行動(dòng)家。

全世界人民沉浸在元旦圣誕的節(jié)日快樂(lè)中,逐浪CMS的人可能是從前一天開始加班到元旦中午12點(diǎn),為了趕在新年發(fā)布一個(gè)產(chǎn)品。

全國(guó)人民都在看兩會(huì),逐浪軟件的架構(gòu)師們可能奔波在雪域高原和南海之濱,用腳去丈量祖國(guó)母親的每一寸胸膛。

早在2013年中旬,通過(guò)與中科院、阿里云、中化集團(tuán)、搜狐軟件團(tuán)隊(duì)、中電集團(tuán)等多家企業(yè)的合作中,迫切認(rèn)識(shí)到提升整體CMS的應(yīng)用和web體驗(yàn)的重要性,先后推出了微信接口、MIS系統(tǒng)、云盤、二維碼、設(shè)備自適配等技術(shù),并成功于2014年的第一季度全面導(dǎo)入BootStarp框架,全面向國(guó)內(nèi)用戶開放下載。

逐浪CMS目前中國(guó)首家導(dǎo)入Bootstrap的網(wǎng)站內(nèi)容內(nèi)核系統(tǒng)廠商,這源于我們以客戶為本的服務(wù)品質(zhì)、以質(zhì)量為先的研發(fā)導(dǎo)向、以技術(shù)為本的企業(yè)思維。

目前逐浪CMS官網(wǎng)和測(cè)試平臺(tái)均已上線,可以自由支持各類移動(dòng)體驗(yàn),同時(shí)點(diǎn)擊屏幕上的電話,能自動(dòng)啟動(dòng)手機(jī)上的電話拔號(hào)和發(fā)送短訊等功能。

目前逐浪CMS官網(wǎng)已經(jīng)開放全面支持Bootstrap的CMS內(nèi)核系統(tǒng),用改革開放的精神來(lái)說(shuō):我們既要走得出去,也要請(qǐng)得進(jìn)來(lái)。

期待中國(guó)互聯(lián)網(wǎng)的開放進(jìn)取新時(shí)代的到來(lái)!

下圖逐浪CMS移動(dòng)設(shè)備響應(yīng)式界面:

下圖:逐浪軟件體驗(yàn)門戶界面

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)文章

  • wordpress利用360網(wǎng)站衛(wèi)士和多說(shuō)改善網(wǎng)站體驗(yàn)

    備案后用息壤的虛擬主機(jī)比較多,服務(wù)器在北京,說(shuō)是聯(lián)通、電信、鐵通、教育網(wǎng)四線網(wǎng)絡(luò),實(shí)際上網(wǎng)絡(luò)不是很穩(wěn)定??斓臅r(shí)候是真快,就像建在本地的服務(wù)器一樣,慢的時(shí)候那真是,給人的感覺(jué)就像建在火星上的網(wǎng)站一樣。鑒于息壤主機(jī)非常便宜,30塊錢一年,再加上我最近又懶得到處折騰了,于是乎嘗試了多種方法改善網(wǎng)站體驗(yàn)。就

  • 聯(lián)動(dòng)天下SSD云主機(jī),給用戶“飛”一般的網(wǎng)站體驗(yàn)

    互聯(lián)網(wǎng)的發(fā)達(dá),使越來(lái)越多企業(yè)開始利用互聯(lián)網(wǎng)這條快速通道做營(yíng)銷推廣了,但同時(shí)也表示著電商之間的競(jìng)爭(zhēng)日益的激烈,在電商云集的的大背景下,企業(yè)要想成功的開展網(wǎng)絡(luò)營(yíng)銷,難度絕對(duì)不會(huì)小。其中要顧慮到方方面面,如域名注冊(cè)、購(gòu)買主機(jī)、網(wǎng)站優(yōu)化等,今天筆者針對(duì)購(gòu)買主機(jī)這方面為大家詳細(xì)的解說(shuō)一下:

  • 用戶離開網(wǎng)站的原因主要是網(wǎng)站體驗(yàn)度不夠?

    所以一個(gè)網(wǎng)站并不是自己足夠美觀、足夠創(chuàng)新就能留住用戶的,要去站在用戶的角度去思考,什么樣的才是用戶需要的,什么樣的用戶不喜歡的,一定要弄明白,不然你前期投資再大,也是竹籃打水一場(chǎng)空,錢就這樣打水漂了。

    標(biāo)簽:
    網(wǎng)站體驗(yàn)
  • 增強(qiáng)網(wǎng)站與用戶的互動(dòng)性 全力提升網(wǎng)站體驗(yàn)

    現(xiàn)在的時(shí)代是屬于web3.0的時(shí)代,也就是一個(gè)共享、互動(dòng)的時(shí)代,互動(dòng)性已經(jīng)成為網(wǎng)站發(fā)展的日益重要的影響因素之一,沒(méi)有互動(dòng)性的網(wǎng)站就像一潭死水,不會(huì)有任何用戶會(huì)有欲望在網(wǎng)站上逗留或者購(gòu)買商品的。因此,增強(qiáng)網(wǎng)站的互動(dòng)性非常有必要,那到底怎么樣才能增強(qiáng)互動(dòng)性來(lái)提升網(wǎng)站體驗(yàn)?zāi)?下面筆者和大家分點(diǎn)來(lái)談?wù)劸唧w的

    標(biāo)簽:
    網(wǎng)站體驗(yàn)
  • 解決網(wǎng)站體驗(yàn)行之唯艱 從做好細(xì)節(jié)服務(wù)開始

    當(dāng)互聯(lián)網(wǎng)流行開來(lái)的時(shí)候,人們不得不面對(duì)一個(gè)棘手的問(wèn)題,那就是需要記憶一系列的密碼,前段時(shí)間,還爆發(fā)了因?yàn)镼Q繼承權(quán)的問(wèn)題,就是妻子要索取丈夫的QQ號(hào)碼密碼卻不可得,由此可以看出,密碼已經(jīng)對(duì)我們的生活影響產(chǎn)生了多么巨大的影響!當(dāng)人們都在呼吁提升網(wǎng)站的體驗(yàn)

    標(biāo)簽:
    網(wǎng)站體驗(yàn)

熱門排行

信息推薦