PIXNET Logo登入

英傑銳網路數位設計

跳到主文

(02)2713-1769 RWD自適應網頁設計,台北市RWD網頁設計,台北網頁設計,網站架設 https://www.injerry.com/

部落格全站分類:視覺設計

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 9月 14 週日 201423:42
  • 【市場趨勢】從iPhone6看RWD響應式網站的重要性

ScreenShot00005
    


我們都知道蘋果iPhone6即將於9/26在台灣正式開賣,這次Apple發表的iPhone6總共有兩種尺寸的規格,一種是4.7吋的iPhone6,另一款則是5.5吋大螢幕的iPhone6 Plus;小編身邊的朋友已經不少人指定要購買iPhone6 Plus的機型了,因為不外乎是喜歡”螢幕尺寸越大越好”。
其實從智慧型手機問世以來,他所帶來的影響不僅僅是手機產業的革命與變動,就連周遭一些配件商也跟著影響與帶動,例如可自行更換離電池的賣家越來越難賣了,因為現在智慧型手機幾乎都無法自行拆換電池,或是我們以往常聽到”全配座充”或”簡配旅充”。再來就是帶動手機殼這龐大的商機,甚至推出可自行設計&列印的客製手機殼,導致以往手機需全機包膜的需求者,現在正在逐漸轉型。
除此以外影響的層面不僅僅如此而已,就連我們的網路網頁市場,也跟著逐漸轉型;在網路網頁設計的市場當中,以往的業者,只需要專心Focus在一般PC電腦的消費者身上即可,但現在,因為智慧型手機的人越來越多,人手一機,隨時隨地都要上網一下,就連小編有時出去逛街,突然不知道吃甚麼,也要透過LBS去搜尋一下附近有沒有好吃的店家,可謂真的是無法離開手機一分鐘呀!
所以,為了搶下這片廣大的智慧型手機用戶的藍海當中,網頁設計後來逐漸演變出現”手機版網頁 (Mobile Web Design)”甚至是”APP”的軟體開發。我相信,目前為止還是有很多網頁設計公司還是有”手機版網頁”設計這項服務;但以往的智慧型手機螢幕尺吋屈指可數,要馬不就是640x960,要馬就是480x800…,所以即使是設計手機板的網頁,也只要符合這兩種此吋的螢幕大小,設計出來的手機版網頁其實不大會有問題。但是很可惜的,如今智慧型手機的螢幕尺寸大小越來越多種,這對於網頁設計公司與網頁設計師來說,越來越頭疼,因為要設計一個良好的瀏覽者UI介面,真的越來越困難。

(由上圖此表可以看出手機螢幕尺吋真的是眾多版本)
所以這也是為甚麼RWD自適應網站(Responsive Web Design)這幾年會越來越火紅,越來越多企業都指名採用的最基本技術與規範,因為我們都知道RWD這項技術可以很輕鬆的解決多尺吋、多裝置相容性的問題;更可以不需要一次規劃三種平台(PC、平板裝置、手機裝置)的網頁設計,我們僅僅只需要一個設計的版面,透過HTML5與CSS3的最新技術,就可以達到適合任何螢幕尺吋的裝置瀏覽;後台僅需要維護一次就搞定,方便儼然是對於這年頭,管理者最需要的一個基本的功能與要求,因為畢竟可以省下不少的時間。
最後,從Apple推出iPhone6 Plus版本我們更可以知道,多尺吋的智慧型手機時代,已經正式來臨了。店家們,應該要正視”自己店家的網站”適不適合多裝置瀏覽了!
(繼續閱讀...)
文章標籤

英傑銳數位設計 發表在 痞客邦 留言(1) 人氣(1,373)

  • 個人分類:資訊文章
▲top
  • 7月 19 週六 201401:31
  • Responsive Web Design 響應式網站的實用工具

tool1_1


Responsive Web Design 響應式網站的實用工具
今天要帶大家介紹的是一個很不錯的工具,它叫做 Responsive Inspector
這工具是讓你用來快速判斷、並分析您所瀏覽的網站是否能符合多裝置不同螢幕尺寸大小
簡單講,就是快速讓您了解這網站是否有RWD自適應的功能!
OK,首先,你必須先去Google的應用程式商店,輸入關鍵字 "Responsive Inspector" 做搜尋,即可找到這項應用程式

緊接著,就是順利將它安裝到Google Chrome上面
接下來,你就可以看到你Google Chrome的右上方會多一個如圖示的小圖,代表您已安裝完成!

Responsive Inspector 該如何使用呢?
當您點開按鈕以後,若您發現有如以下(甚至更多)顏色的Bar出現,代表這個網站就有符合多裝置螢幕尺寸瀏覽的網頁設計機制,也就是我們俗稱的Reponsive Web Design (RWD技術)

倘若點開後,甚麼都沒有,空空的,代表這個網站就是沒有RWD的技術!在手機或平板裝置上面瀏覽很可能會發生問題。

是不是很實用呢?
(繼續閱讀...)
文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(916)

  • 個人分類:資訊文章
▲top
  • 7月 02 週三 201400:05
  • 國外RWD | Responsive Web Design 欣賞網站

1



國外 Responsive Web Design 的欣賞網站
目前國外普遍接受RWD的網站,因為對於一個網站的管理者來說,RWD這樣的製作方式,省去了不少的維護時間,所以就讓我們一起來欣賞國外人家製做過的作品吧!
以下要介紹的這個網站是Media Queries,他們蒐集了超過400多種的RWD網站提供參考,其中有些非常的漂亮,非常值得設計師們參考!
連結:http://mediaqueri.es/
 
延伸閱讀:RWD (Responsive Web Design) 自適應網站的簡單介紹
英傑銳網路數位有限公司:Responsive Web Design 專業的RWD自適應網站製作公司
(繼續閱讀...)
文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(1,560)

  • 個人分類:資訊文章
▲top
  • 6月 23 週一 201409:34
  • RWD (Responsive Web Design) 自適應網站的簡單介紹

01

什麼是Responsive Web Design (RWD)?
RWD英文全名為:Responsive Web Design
中文名稱為:自適應網頁設計、響應式網頁設計。
簡單的來說,就是讓一個網頁在電腦、智慧型手機、平板上都可以有很好的瀏覽效果。
自從行動裝置,智慧型手機和平板電腦的崛起之後,造成螢幕規格有大大小小,因此在電腦上的畫面轉移到手機和平板來觀看時, 會造成瀏覽上的不便利。
以下的例子將為您介紹甚麼是RWD自適應網頁設計:
1.在傳統 PC 瀏覽器呈現的效果
如下圖,以往在傳統PC上呈現網頁尺寸,寬度較寬(此範例為1920x1080像素)

2.在平板裝置上呈現的效果
此時,您可以發現,上方按鈕列的地方,因為螢幕寬度的關係,所以已經自動縮為下拉式的方式,方便瀏覽者點選。

3.在手機裝置上呈現的效果
在手機上,您可以發現,某些字體有稍微變大,更方便手機瀏覽者瀏覽,同時,網頁中的圖片已經按照螢幕的寬度,自動縮為適合瀏覽的圖片大小。
   
RWD自適應(響應式)網站的優點:

  • 維護成本低

  • 可同時適用不同裝置

  • 品牌形象一致

  • 符合使用者習慣

  • 利於分享


  • RWD自適應(響應式)網站的缺點:

  • 較舊的瀏覽器不支援,特別是IE7(含)以下

  • 小螢幕尺寸不適合複雜的功能或介面

  • 載入速度問題

  • 需要較高的製作成本


  • 延伸閱讀:RWD(Responsive Web Design)自適應網站的製作方式
    英傑銳網路數位有限公司:Responsive Web Design 專業的RWD自適應網站製作公司
    (繼續閱讀...)
    文章標籤

    英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(2,082)

    • 個人分類:資訊文章
    ▲top
    • 1月 19 週四 201202:45
    • 網站版權聲明的正確寫法



    正確的格式應該是:Copyright [dates] by [author/owner]
    © 通常可以代替Copyright,但是不可以用(c)。
    All Rights Reserved 在某些國家曾經是必須的,但是現在在大多數國家,都不是法律上必須有的字樣
    參見下面幾個正確的格式:
    ©1995-2004 Macromedia, Inc. All rights reserved.
    ©2004 Microsoft Corporation. All rights reserved.
    Copyright © 2004 Adobe Systems Incorporated. All rights reserved.
    ©1995-2004 Eric A. and Kathryn S. Meyer. All Rights Reserved.
    (繼續閱讀...)
    文章標籤

    英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(2,128)

    • 個人分類:資訊文章
    ▲top
    • 1月 04 週三 201201:02
    • Yahoo!奇摩更換為微軟bing 搜尋引擎SEO排名恐將大洗牌

    5499_201112161316511l1ed.jpg

      
    早在2010年,微軟的線上服務技術部資深副總Satya Nadella公佈Yahoo!和Bing兩大搜尋引擎完成技術整合的消息,而美國與加拿大的YAHOO搜尋引擎也紛紛技術整合為BING搜尋引擎系統,從去年就開始再傳,台灣會在今年完成技術整合。
    目前有更明確的說法,台灣YAHOO!奇摩於2011年第三季前,就會將BING的技術整合好,全台網友將要開始使用BING來做搜尋。這樣一來,將會導致目前自然排序全部洗牌!這不但意味著台灣使用者將要改變習慣使用BING搜尋系統,而目前的搜尋引擎排名也會改變,原本在台灣YAHOO搜尋排名前十名的SEO網站,在YAHOO與微軟的技術整合之下,名次可能不再如以往前面,不知掉落何方,很多網站的流量可能會因此突然滑落。
    這樣的整合也可能導致台灣網友以後轉向Google,以及原本在YAHOO排名較好的網站開始購買關鍵字廣告。因為台灣的網友對於GOOGLE搜尋系統並不陌生,雖然目前YAHOO搜尋的市占率較高,一旦改換成BING搜尋系統,網友可能會因為不熟悉BING系統的因素,既而轉往GOOGLE,使得GOOGLE搜尋引擎的市占率增加;而原本在YAHOO搜尋排名較高的網站,也可能因為BING的關係,使得他們的名次更動,而改換為買YAHOO關鍵字廣告,以確保自己的網站曝光位置持續保持在前頭。
    在網路世界當中,每年、每季甚至於每月都不斷有大大小小的變動,唯有在變動之前就想好對策,才能即時因應。
    文章來源出處 :網際時代 - http://www.web-time.com.tw/details/ec.aspx?id=337
    (繼續閱讀...)
    文章標籤

    英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(539)

    • 個人分類:資訊文章
    ▲top
    • 8月 02 週二 201103:30
    • 全flash網頁如何兼顧SEO

    基本上,Flash本來應該是個非常不利於搜尋引擎的一種玩意兒,起碼一直以來大家都抱持著這樣的疑問,認為Flash的內容應該是無法被搜尋引擎所搜尋到,但是難道真的為了SEO就得放棄Flash?不過其實也不是完全無解,因為前幾天工作上有人談到這個問題,乾脆就把資料整理整理吧!
    首先,雖然Flash可以用來製作整個網站,但是我依然不推薦這樣做,除非你有辦法把內容完全從Flash當中分離。當然,目前Google搜尋引擎已經可以解析Flash當中的連結內容,不過如果你過度使用Flash,又沒有好好的把內容拉出來,在SEO上還是贏不了非Flash頁面且符合網頁標準化規範的網頁的喔!
    但是如果非要在網頁當中使用flash,又該如何讓它成為可以讓搜尋引擎輕易搜尋的網頁呢?

    (繼續閱讀...)
    文章標籤

    英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(291)

    • 個人分類:資訊文章
    ▲top
    • 4月 29 週五 201102:39
    • Apache設定限制目錄瀏覽的方法

    很多人設定Apache都會碰到的問題之一,就是該怎麼限制別人瀏覽自己網站的目錄。如果沒限制,目錄內所有檔案的位置都會被看到,有更新但還未公開在首頁的檔案就會被看到。
    有一種很簡單但沒效率的作法是在你不想公開給外面看到的每個目錄下面,都放一個內容空白的index.html,讀取該目錄就會出現空白或你寫在該檔案設定的轉址頁面,但這僅適合用在免費網頁空間,一般不建議這樣使用。另一種方式則是使用.htaccess檔案,藉由裡面的規則來限定存取範圍,但設定上還是有些麻煩之處。
    (繼續閱讀...)
    文章標籤

    英傑銳數位設計 發表在 痞客邦 留言(1) 人氣(16,563)

    • 個人分類:資訊文章
    ▲top
    • 11月 29 週一 201001:39
    • 影響搜索引擎排名因素的調查報告(2009)

    著名SEO網站SEOMOZ今年調查得出的一份「影響搜索引擎排名因素的報告」。他們每兩件做這樣一個調查,調查對象是全世界各地的SEO專家。然後總結出專家們的百分比報告,對於SEOer來說,還是非常值得研究的。
    總的排名因素百分比分佈情況
    ‧24% 域名的權威性和信譽
    ‧22% 頁面的外鏈數量和質量
    ‧20% 外部鏈接的錨文字
    ‧15% 頁面上關鍵字使用情況
    ‧7% 流量和點擊率
    ‧6% 網絡社交關係指標
    ‧5% 域名註冊和主機數據
    (繼續閱讀...)
    文章標籤

    英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(41)

    • 個人分類:資訊文章
    ▲top
    • 6月 09 週三 201011:09
    • 18個UI原稿圖(包括twitter手稿)

    x201067194752.jpg
    作一個最專業的網頁設計師,網頁原稿圖是必須的
    Jerry在設計網頁的時候,有時候也會親手繪製手繪稿供參考用
    以下來自各個專業設計師之手,18個偉大的UI的原稿.....好好欣賞吧.......

    (繼續閱讀...)
    文章標籤

    英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(513)

    • 個人分類:資訊文章
    ▲top
    12»

    最新文章

    • 【RWD響應式教學】- Facebook fb-like-box Plugin符合RWD響應式網頁
    • 【CSS教學】- 簡單CSS語法美化Table表格底色奇數偶數相間
    • 【市場趨勢】從iPhone6看RWD響應式網站的重要性
    • Font Awesome 一行語法,輕鬆在網頁加入ICON圖示
    • Responsive Web Design 響應式網站的實用工具
    • 國外RWD | Responsive Web Design 欣賞網站
    • RWD(Responsive Web Design)自適應網站的製作方式
    • RWD (Responsive Web Design) 自適應網站的簡單介紹
    • 【HTML教學】- 如何使用HTML語法,在手機版網站上撥打電話或簡訊的超鏈結
    • 【HTML教學】X-UA-Compatible設置IE兼容模式

    熱門文章

    • (30,107)五行搞定CheckBox全選或全不選
    • (513)18個UI原稿圖(包括twitter手稿)
    • (27,829)[Html]圖片型表單按鈕Button
    • (16,563)Apache設定限制目錄瀏覽的方法
    • (36,609)[CSS教學] - 如何使用CSS設計細框線Table表格
    • (13,913)[jQuery教學] - jQuery強大的圖表套件 Highcharts
    • (9,752)[CSS教學] - CSS背景漸層顏色語法產生器 (Ultimate CSS Gradient Generator)
    • (14,662)[CSS教學] - CSS表單美化
    • (75,505)[CSS教學] - 純CSS二、三階層動態選單按鈕 (完美支援各版本瀏覽器)
    • (20,057)[CSS教學] - CSS基礎您不能不知道的block(塊元素)、inline(內聯元素)差別

    文章分類

    • 網頁設計作品 (16)
    • JavaScript (2)
    • Html (6)
    • Flash (2)
    • jQuery (5)
    • PHP (4)
    • CSS (22)
    • 資訊文章 (14)
    • 攝影資訊 (1)
    • 網路行銷 (2)
    • 未分類文章 (1)

    誰來我家

    參觀人氣

    • 本日人氣:
    • 累積人氣: