無限創造DNA-主腦公開展幕後之王 網站設計篇

Responsive Web Design

Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule[1], with fluid proportion-based grids (which use percentages and EMs instead of pixels)[2], to adapt the layout to the viewing environment, and probably also use flexible images.[3][4][5] As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.

秀了一段自己都看不太懂英文後,簡單的解釋responsive web design就是下面這張圖

是用於不同尺寸螢幕的網站設計。
Jobs的功勞,網站常用的螢幕尺寸有一般電腦、平板電腦(ipad…etc)、行動裝置(iphone …etc)
過去有一陣子流行一次做三個網站,近年比較流行的技術是「一個網站對應3種裝置」
也就是去年Adobe大會的主題,「創意遨遊所有螢幕」。

 

無限創造DNA官方網站:www.bin-live.com
無限創造DNA官方粉絲頁 :https://www.facebook.com/2012DNA
回到這次的官網設計,這次首頁簡單的點出強調3d與互動的主題:
下圖:一進場飛入的圖案與3D主視覺

下圖:在效能以及視覺的拉扯下產出的小巧思(滑鼠碰到背景的小圖案都會有不一樣的動作出現)

下圖:關於本展 http://www.bin-live.com/#/about/(使用swfAddress讓全flash網頁也能有獨立的網址)

 

下圖:
內頁使用非flash的方式製作,增加網站優化與被搜尋的機會。
再搭配Responsive Web Design技術讓網站可以自由變形成為符合任何螢幕的大小

 

心得:
Responsive Web Design難不難?不難,寫4套css和一組切換碼就好了XD,這根本是做四個網站啊!
不過說實在的,網站還有許多地方要調整,希望大家繼續期待,我們會繼續將網站的優化做到最好。

再附上一張我覺得很漂亮的圖片

購票資訊

票種 票價 適用範圍
全票 250元 一般個人參觀者
優待票 220元 大專院校以下學生憑學生證購票入場或65歲以上長者憑證件,可現場購買一張
免票
  1. 身高90公分以下之兒童
  2. 身心障礙者憑證件與陪同者一位

售票通路 :

7-11 ibon點我開始購票)/ 現場購票

主辦單位 :時報國際 / 時藝多媒體 / 相信音樂

交通方式

展館位置:華山1914文創園區  紅磚六合院A.B棟(北平東路與杭州北路交叉口)
搭乘捷運: 善導寺站6號出口步行約5分鐘
搭乘公車:審計部(忠孝東路)/205、232、232(副)、262(區間)、276、299、忠孝新幹線
開車 :園區提供24小時停車服務,平日每小時30元,假日每小時50元。