PIXNET Logo登入

布萊恩的創業小窩的部落格

跳到主文

歡迎光臨布萊恩的創業小窩在痞客邦的小天地

部落格全站分類:職場甘苦

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 5月 06 週一 201904:30
  • 前端工程師之路不停歇~Media Query之媒體特性(上)

前端工程師之路不停歇~Media Query之媒體特性(上)

 
前端工程師走過路過不要錯過!快來學Media Query特性,你絕對不能不會啊!
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(131)

  • 個人分類:前端工程師就是我!
▲top
  • 5月 03 週五 201923:23
  • 前端工程師之路不停歇~Media Query的CSS插入字條件

前端工程師之路不停歇~Media Query的CSS插入字條件

前端工程師來說應該都要知道media query的CSS在不同情況會插入以下不同的字,快緊接著看介紹!
 
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(100)

  • 個人分類:前端工程師就是我!
▲top
  • 5月 02 週四 201923:37
  • 關於RWD,前端工程師必備的三點(下)-流動布局

關於RWD,前端工程師必備的三點(下)-流動布局

前端工程師要認識RWD的最後一項重點-流動布局,它到底是什麼?一直學不會的你,今天是你翻身的機會!
 
前端工程師在撰寫RWD網站時,所使用流動布局 Fluid Grid (又稱「液態布局」或「液態網格」)是兩種技術的組合:「Grid Design (網格式設計)」和「Liquid Layout (液態排版)」,介紹如下:
 
Grid Design (網格式設計)
而設定相對尺寸 - 百分比 (%) 的同時,也要制定寬度的最大值與最小值。當寬度超過或低於某限制時,版面依然可以固定。這樣一來,若螢幕寬度大於其最大值時,元素的兩側就會留白,這樣就可以確保在網頁設計做完之後,網頁的版面不管在什麼裝置上都能保持適合閱讀的介面。
網頁設計的過程中,會使用<div>進行排版,寫法有兩種:「float (浮動) 」與「display-inline-block」
 
1.float (浮動)
下方的範例用 float 將 4 個 div 由左至右排序。在寬螢幕上可以並排展示,但是在行動裝置上,4 個 div 則會依序自動調整排列位置:後方的 div 會自動移至前一個 div 下方。
See the Pen float-right-n-left by Tedutw (@Tedutw) on CodePen.


結果就算位置重新調整,這 4 個 div 仍然是靠左、或靠右。因為他的原理是使用 「float: left」將元素浮動靠左對齊。你也可以用 「float: right」將元素浮動靠右對齊
 
2.display: inline-block
跟上述的「float (浮動) 」相同,都可將元素做到靠左對齊或靠右對齊,差異是 float (浮動) 會與其他的元素重疊。相反的,display-inline-block 就沒有這個缺點。
兩者差異的例子如下:
See the Pen float vs inline:block by Tedutw (@Tedutw) on CodePen.
<
Liquid Layout (液態排版)
另一個能達成「流動布局 Fluid Grid」的技術是「Liquid Layout (液態排版)」,主要原理就是把尺寸單位改成百分比來製作版面,使每一個區塊的尺寸都能根據瀏覽器的大小自動做調整,而非以固定的尺寸呈現。參考語法如下:
div{
width: 36%
}

但是一開始寫網頁時,就使用百分比 (%) 這類的相對尺寸來制定元素的大小是有難度的。這時就可以先以固定尺寸 (px) 來製作,等網頁完成後再轉換成相對尺寸 (%) 。
轉換公式參考:子元素的百分比 ={欲變更元素的固定尺寸 /
父元素的固定尺寸}*百分比。

讓我們舉個例來說:假設整個網頁版面是用 1024px 固定寬度來設計,而要變更的 div 區塊寬度為 360px,則整個網頁版面可視為父元素;欲變更的 div 區塊則視為它的子元素,此例套用公式則為:{360px (欲變更元素的固定值) / 1024px (父元素的固定尺寸)}*百分比 = 35.15625%。
 
除了各子元素可以這樣換算之外,padding 跟 margin 也可以用這個方法來換算,範例如下 :
padding: 8px,換算成百分比的公式為:
{8px / 1024px (網頁版面的固定尺寸,視為父元素)}*百分比 = 0.78125% 這時 padding: 0.78125%。
 
本篇為「前端工程師的基礎RWD教學」系列文章第二篇,全系列文章如下:



前端工程師的基礎RWD教學系列文章目錄


 



  1. 前端工程師的基礎RWD教學(一)RWD基礎概念

  2. 前端工程師的基礎RWD教學(二)流動布局Fluid Grid

  3. 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法

  4. 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型

  5. 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件

  6. 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上

  7. 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下

  8. 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image





 
 
  HERE!延伸閱讀看過來:




 關於RWD,前端工程師必備的三點(上)基礎概念





關於RWD,前端工程師必備的三點(中)-Media Query

前端工程師之路不停歇~Media Query之媒體特性(上)



人工智慧進化!大量產出可信度極高的假新聞與文章,你能辨真假嗎?


我僅上半年達內教育評價極高的Java課程之後,便立馬辭職了...

用上大數據!美妝產業用科技行銷術接軌新客群
達內課程先就業再付款- 中時電子報


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

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(453)

  • 個人分類:前端工程師就是我!
▲top
  • 4月 30 週二 201915:35
  • 關於RWD,前端工程師必備的三點(中)-Media Query

關於RWD,前端工程師必備的三點(中)-Media Query

 
對前端工程師最重要的CSS之一,就是Media Query,詳細的分析請繼續往下看~
 
RWD 網頁設計必備語法:Media Query
前端工程師在製作 RWD 響應式網頁時,一定會用到的 CSS 語法就是 Media Query。簡單來說,我們可以把 Media 視為 CSS 的擴充元件(這樣會比較好理解)。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的Media Type,也是本篇前端工程師課程文章的講解重點),再針對這些 Media Type 定義其樣式 (Media Features,中文譯作「媒體樣式」或是「媒體特徵」)。
 
Media Query 使用方法
如果要使用 Media Query ,則使用方式有下列三種:
1. 在 HTML5 中使用,以下範例為用 media 屬性判斷使用者的裝置大小:當螢幕小於 400 px 時,套用指定的 CSS 檔案「Screen.css」:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="Screen.css">

2. 上面的功能,若不使用HTML5,而是在 CSS 中使用,則為:
@media screen and (max-device-width: 400px){...}

3. 你也可使用 @import
@import "screen.css" screen and (max-device-width: 400px)

看了以上 Media Query 的使用方法後,你會發現以上三種的範例中包含了「screen」、「and」和「max-device-width: 400px」。這三者分別為「媒體類型(media type)」、「判斷條件 (and/not/only)」和「媒體特徵 (media feature)」。媒體類型(media type)於此篇文章做說明、and/not/only 判斷條件於本篇文章做說明,而媒體特徵 (Media Feature) 的各式屬性也於此篇(頁面尺寸與顯示品質的屬性)與此篇(「顏色類」和「互動類」的屬性)列出。
 
 
本篇為「前端工程師的基礎RWD教學」系列文章第三篇,全系列文章如下:


前端工程師的基礎RWD教學系列文章目錄

 



  1. 前端工程師的基礎RWD教學(一)RWD基礎概念

  2. 前端工程師的基礎RWD教學(二)流動布局Fluid Grid

  3. 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法

  4. 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型

  5. 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件

  6. 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上

  7. 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下

  8. 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image





 
 
  HERE!延伸閱讀看過來:
關於RWD,前端工程師必備的三點(上)基礎概念
關於RWD,前端工程師必備的三點(下)-流動布局


前端工程師之路不停歇~Media Query之媒體特性(上)  


 

Python課程讓你跟AI漫畫不脫節!現在連電影都加入陣營!

AI人工智慧撰寫科技恐被濫用,將因此有大量假新聞出現?!
哪個程式語言能像瑞士刀一樣百變實用?讓Python課程告訴你答案!
中國IT教育領導品牌 達內教育集團第一家海外授權中心
 
 
 



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

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(39)

  • 個人分類:前端工程師就是我!
▲top
  • 4月 29 週一 201923:32
  • 關於RWD,前端工程師必備的三點(上)基礎概念

關於RWD,前端工程師必備的三點(上)基礎概念

前端工程師課程幫你打好基礎!今天開啟RWD的門讓你更深入剖析它!
 
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(119)

  • 個人分類:前端工程師就是我!
▲top
  • 4月 26 週五 201922:16
  • 一起來玩google新的人工智慧辨識功能!看看你的圖片能不能考倒它!

一起來玩google新的人工智慧辨識功能!看看你的圖片能不能考倒它!

人工智慧的發展大家有目共睹,今天就來介紹google百百款的辨識功能和發展!
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(1,875)

  • 個人分類:IT人的數位生活
▲top
  • 4月 25 週四 201921:30
  • 前端工程師和網頁設計師必學-了解整體網站的規劃流程

前端工程師和網頁設計師必學-了解整體網站的規劃流程

前端工程師規劃網站必學的流程,今天一步步教你怎麼做,讓你在規劃網站時事半功倍!
 
AWD 跟 RWD 的目的一致,都是希望能針對桌機、平板、手機等不同尺寸的裝置,而顯示出易於瀏覽的網站畫面。
在規劃網站時,相信有不少的 PM 在與前端工程師或是網頁設計師在溝通上遇到瓶頸,像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度,講解 RWD 與 AWD 網站的差異,以及如何規劃與選擇。

讀完本系列文章後,你將會了解:


 






(目錄)

  1. RWD 和 AWD 的差異與優缺點

  2. 我該選擇 RWD 還是 AWD ?

  3. AWD 要怎麼做才能對 SEO 無痛?

  4. 了解整體網站的規劃流程-PM與前端溝通更順利





與前端溝通更順利!從了解整體網站的規劃流程開始
無論是設計網站或是 APP 開發,合理的設計四個流程就是這四個:Sketch、 Wireframe、 Mockup、 Prototype。
#1 Sketch (草圖)
這個階段需要靠大家一起腦力激盪,只需要用筆和紙將腦中的想法粗略的勾勒出來-這也是最快得到靈感的方法。就算是粗糙不堪的草圖,也比文字更能夠表達、整合、具象化大家的想法,是在進入到 Wireframe (線框稿)之前的必備步驟。
需要工具:筆與紙
擬真度:最低
階段目標:溝通、整合大家的想法與創意
 
#2 Wireframe (線框稿)
Wireframe (線框稿)階段的重點在於釐清需求與確認網頁上一定會出現的功能。所以必須先排除視覺元素的討論,單單專注在功能的規劃,以免失焦。
線框稿會以簡單的草稿圖,以低擬真度的方式呈現網頁上的主要資訊、排版與架構,以及如何與使用者互動等。通常設計師會使用 Balsamiq 提供的 Wireframe 工具、或是 powerpoint 、手繪等方式,以黑白的方格、線和圖來呈現不同的層級,其元素必須要非常精簡,是為了避免討論時失焦,加速效率和速度。某些還未確定的內容,就先利用方框或假文字來表示,例如圖片、影片與文字等等。
因此,在 Wireframe 階段不能出現過度的細節會比較好,比如說網頁的字型選用、 Button 的陰影、首頁輪播圖的大小等等。
需要工具:可以用 Balsamiq、Powerpoint、Photoshop、Illustrator...依照個人習慣而定
擬真度:低
階段目標:功能導向設計,整合產品團隊中的成員意見達到共識
 
#3 Mockup (視覺稿)
UI 設計師會根據 PM 確定好的 Wireframe 介面,使用 Axure 等網站視覺模擬軟體進行網站視覺設計上的配色、排版、配色等,以增強使用者體驗網站的效果。在製作 Mockup 的途中,UI 設計師必須數度與 PM 討論網站的功能、呈現的效果,還有與前端工程師溝通特效製作和開發成本與可行度以進行取捨。此時設計出來的 Mockup 圖經過客戶確認後,下一步就是直接交由前端工程師根據 Mockup 稿進行開發,所以在 Mockup 階段和最終網頁的外觀會完全一致,但是尚未無真正能操作的功能-不能操作、不會動、靜態。(如同手機無功能的模型機的概念)。
推薦工具:Axure
擬真度:中
階段目標:確認網頁的視覺呈現,而這個視覺是以達成網頁的各項功能為前提而制定。
 
#4 Prototype (原形)
Prototype (原形) 可將網站以高擬真的方式呈現,幾乎可以將真正要上線的網頁之各項功能模擬出來。上一階段的 Mockup (視覺稿) 是無功能的靜態樣板,那在這一個階段則是加入各項互動的功能:如下拉選單、動態內容、狀況邏輯設定、計算、動態 Hide/Show Layer 效果等許多互動的物件與功能,並允許使用者可以設定點擊、Mouse over 或手指滑動觸發互動,可以任意加入註解與超連結,幾乎是完全模擬真實網站的意像。
推薦工具:Axure
擬真度:高
階段目標:Debug 問題、確保網站的所有功能達都能到業主的設定目標。
本系列文章前三篇:
1.RWD 和 AWD 的差異與優缺點
2.我該選擇 RWD 還是 AWD ?
3.AWD 要怎麼做才能對 SEO 無痛?

 
 
  延伸閱讀:
 
 



那些前端工程師不一定會告訴你的五四三,今天在這裡你有福了!

 



HTML5教學之CSS一把罩!---只要和文字有關,通通交給我

HTML5教學之CSS一把罩!---邊框和區塊和文字有相同地位



 
 
 
  


學Python的你要注意哦!千萬別學到得"冒名頂替症後群"!
 



台灣連鎖藥妝龍頭也需要了解的大數據課程,你知道多少?



你也能成為HTML5教學的化妝師



NOWnews 今日新聞

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

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(114)

  • 個人分類:前端工程師就是我!
▲top
  • 4月 24 週三 201922:34
  • 前端工程師和網頁設計師必學-AWD怎麼做才能對SEO無痛?

前端工程師和網頁設計師必學-AWD怎麼做才能對SEO無痛?

網頁設計都會遇到的小瓶頸:該如何讓AWD的SEO無痛?今天就帶你來了解!
AWD 跟 RWD 的目的一致,都是希望能針對桌機、平板、手機等不同尺寸的裝置,而顯示出易於瀏覽的網站畫面。
在規劃網站時,相信有不少的 PM 在與前端工程師、網頁前端設計師或是UI設計師在溝通上遇到瓶頸,像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度,講解 RWD 與 AWD 網站的差異,以及如何規劃與選擇。

讀完本系列文章後,你將會了解:


 






(目錄)

  1. RWD 和 AWD 的差異與優缺點

  2. 我該選擇 RWD 還是 AWD ?

  3. AWD 要怎麼做才能對 SEO 無痛?

  4. 了解整體網站的規劃流程-PM與前端溝通更順利





AWD 要怎麼做才能對 SEO 無痛?
很多人都說 AWD 對 SEO 不利。那是因為大多數的人會省去將 「行動版」 與 「桌機板」 串在同一個網址的流程,索性就把把網站做成兩個獨立的桌機版跟行動版兩個網站,再進行轉址,所以流量自然會分流,如此一來,對 SEO 當然有負面影響!
觀察很多分成桌機版跟行動版的網站 (如 Momo 購物、Facebook 等等) 的 URL ,會發現行動版的網址前面多會有個 「m.」 的開頭,就是這樣的情況。
但我們先回到原點,弄懂 AWD 的基本原理,其實很簡單, AWD 只是分成桌機版與行動板等兩套 CSS(有時可能會多出其他的而有兩套以上的 CSS)。但是一個網站擁有多套 CSS 並不等於要分成兩個網站。工程師常見的做法是撰寫程式讓同一個 URL 之下,判斷裝置而吐出相對應的網站架構與 CSS 樣式。多了這個步驟,才可以集中流量在同一個網址中,對 SEO 或品牌辨識度都比較好,就不會有前面提到 「分流」 的問題,也不會影響到 SEO優化。
所以不要再說 AWD 對 SEO 不利了!記住,不利 SEO 的是把 「網站做成兩個獨立的桌機版跟行動版兩個網站,再進行轉址」 的作法。你所需要的,是要把行動版與桌機板使用同一個 URL。
繼續看本系列文章下篇:
4.了解整體網站的規劃流程-PM與前端溝通更順利

本系列文章前二篇:
1.RWD 和 AWD 的差異與優缺點
2.我該選擇 RWD 還是 AWD ?

 
 延伸閱讀:
 
 




觀察一下URL的蛛絲馬跡,你會發現SEO優化比你想像中的有趣!

 




在做SEO優化時,讓測試頁不被搜尋到的方法是..

覺得電子書很死板?多虧HTML5教學,你該改觀囉!



 
  
 

 達內教育評價:"嚴師出高徒",他作夢也沒想到他成為工程師了!
 
 



學習程式語言,加上網路行銷課程,讓你意外自己怎麼這麼無敵!



想當Python工程師,這個症候群可要小心了!?




人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

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

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(29)

  • 個人分類:前端工程師就是我!
▲top
  • 4月 23 週二 201922:16
  • 前端工程師和網頁設計師必學-你該選擇RWD還是AWD?

前端工程師和網頁設計師必學-你該選擇RWD還是AWD?

前端工程師和網頁設計師總會遇到的問題,AWD和RWD,如何選擇最適合自己的,看完今天的分享就知道啦!
AWD 跟 RWD 的目的一致,都是希望能針對桌機、平板、手機等不同尺寸的裝置,而顯示出易於瀏覽的網站畫面。
在規劃網站時,相信有不少的 PM 在與前端工程師或是網頁前端設計師在溝通上遇到瓶頸,像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁、或是無任何技術背景的網頁規劃者為角度,講解 RWD 與 AWD 網站的差異,以及如何規劃與選擇。

讀完本系列文章後,你將會了解:


 






(目錄)

  1. RWD 和 AWD 的差異與優缺點

  2. 我該選擇 RWD 還是AWD?

  3. AWD要怎麼做才能對 SEO 無痛?

  4. 了解整體網站的規劃流程-PM與前端溝通更順利





 
該選擇 RWD 還是 AWD ? 先看看自己的需求吧!
當下 RWD 正夯,但並不代表所有的網頁都適用 RWD 技術。身為決策者的我們,必須先檢視網站的規模、內容、專案的需求以及人力,再決定使用 AWD 還是 RWD。
至於哪一類的網站適合 RWD、哪一種的網站適合 AWD,簡單的整理如下表所示:
RWD vs AWD 簡易比較表


 
RWD
AWD




人力需求
較少,因為只有一套 CSS
較多 (因為需要多套 CSS),
需要網頁人才與尚需前端工程師撰寫判斷裝置後自動匯入相應的 CSS 的程式



維護成本
較少,因為只有一套 CSS
較多,因為有多套 CSS 以及程式


適用內容
網站內容較單純時適用。
如簡單的企業形象網站、一頁式網站等等。

網站內容較多、較複雜時適用。
如博克來、MOMO 購物網、蝦皮拍賣等。



適用排版
較簡潔的畫面與排版
較多元化、複雜的畫面與排版


SEO 支援
SEO 優化、維護較容易
同左,但前提是不能直接把網站分成桌機版跟手機版兩個網站再進行轉址,導致流量分散。
工程師必須要在同一個 URL 下寫出對應裝置的網站架構並指定適用的 CSS



可支援的裝置
各裝置都適用
各裝置都適用


以上表格建議一行一行仔細看過。 以下再作補充說明:
 
評估現有的資源人力
只需要寫一套 CSS 的 RWD 所耗的時間與成本一定比 AWD 還快又省,適合小型網頁、新創產業或是各方面資源有限的狀況下。幾近客製化的 AWD 網頁雖然有利於做 UI / UX,但是需要前端工程師來撰寫判斷使用者來配對 CSS 的程式,且若想要做 SEO 的話,也是需要前端工程師把多套 CSS 串在同一個 URL 的。
對網頁設計畫面要求較嚴謹的狀況下,就使用 AWD 吧!
若有足夠的預算,且希望使用者無論使用手機、桌機、平板等尺寸不一的裝置都能擁有完美的網頁瀏覽體驗的狀況下,就選擇 AWD 吧!往後在網頁維護上,前端工程師或是網頁設計師也更能找到對應的 CSS 檔來修改,且比較沒有如 RWD 般所有的樣式都塞在同一套 CSS 有 「牽一髮動全身」 的隱憂。 若硬要使用 RWD 也無非不可行,但是若 CSS 樣式寫得不夠嚴謹的話,則恐怕不同的裝置會寫到同一種 style,這時就需要花更多時間來修復,反而浪費更多成本。
繼續看本系列文章下篇:
3.AWD 要怎麼做才能對 SEO 無痛?
4.了解整體網站的規劃流程-PM與前端溝通更順利

本系列文章前一篇:
1.RWD 和 AWD 的差異與優缺點

 
 延伸閱讀:
 
 



CSS必學!前端工程師與Div.Span標籤的應用(上)

 



蛤?HTML繼承關係?前端工程師課程大解密

那些前端工程師不一定會告訴你的五四三,今天在這裡你有福了!



 
 
 
 
從達內教育評價事件來看Geego(奇科?)IT培訓評論的謬誤

SEO優化不只揚善,也要利用robots meta隱惡


百度CEO拿下全球AI人工智慧領導第三名,緊追蘋果微軟!!

達內教育開幕 培養台灣IT人才進入全球企業


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

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(25)

  • 個人分類:前端工程師就是我!
▲top
  • 4月 22 週一 201914:18
  • 前端工程師和網頁設計師必學-關於RWD和AWD的差異與優缺點

前端工程師和網頁設計師必學-關於RWD和AWD的差異與優缺點

 
前端工程師或網頁設計師都應該要懂的RWD和AWD的差別,今天算你賺到,都幫你整理出來了!
AWD 跟 RWD 的目的一致,都是希望能針對桌機、平板、手機等不同尺寸的裝置,而顯示出易於瀏覽的網站畫面。
相信有不少的 PM 在與前端工程師或是網頁前端設計師當他們在規劃網站時,會在溝通上遇到瓶頸,像是網站要使用 RWD 還是 AWD 等等。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃的初學者為角度,講解 RWD 與 AWD 網站的差異,以及如何規劃與選擇。

讀完本系列文章後,你將會了解:


 






(目錄)

  1. RWD 和 AWD 的差異與優缺點

  2. 我該選擇 RWD 還是 AWD ?

  3. AWD 要怎麼做才能對 SEO 無痛?

  4. 了解整體網站的規劃流程-PM與前端溝通更順利





 
RWD 和 AWD 的差異與優缺點
在網頁上,RWD 是「Responsive Web Design (響應式網頁設計)」的縮寫;而 AWD 則是 「Adaptive Web Design (自適應式網頁設計)」的縮寫。RWD 與 AWD 是為現今大多數人們習慣使用手機、平板等行動裝置上網而生的 CSS 寫法,讓網頁設計無論在桌機螢幕上、或是尺寸較小的行動裝置上,都能清楚的呈現,讓使用者能更舒服的瀏覽網頁。
RWD 與 AWD 的差異,簡單的來說,前者是無論行動裝置或是桌機,都使用同一套 CSS;而後者是針對各種裝置撰寫對應的 CSS,可以有多套 CSS,例如桌機有桌機的一套 CSS,手機有自己的一套 CSS。
簡單的來說,就是前者只有一套 CSS 檔案、後者卻有多套 CSS 檔案。詳述如下:
RWD 會把所有裝置的樣式都寫在同一套 CSS 中,因此無論行動裝置或是桌機,都是使用同一套 CSS 。當使用者打開了網頁,就能即時透過網頁的寬度,決定要套用到 CSS 中的哪一個樣式。
而AWD 是針對各種裝置撰寫對應的 CSS,因此就會針對不同的裝置,而有多套的 CSS 樣式碼:例如桌機有桌機的一套 CSS,手機有自己的一套 CSS。AWD 的方式必須仰賴前端工程師撰寫的程式,來判斷使用者是使用哪種裝置開啟網頁,再自動匯入相應的 CSS 檔案:如程式判斷出某使用者是使用桌機瀏覽網頁的話,就會自動匯入桌機的 CSS 樣式檔案;若是使用手機開網頁,就匯入手機的 CSS 樣式檔。
 
RWD、AWD 的優缺點比較
RWD 與 AWD 只是方式不同罷了,沒有所謂的哪個比較好,至於它們各自的優缺點,請參考下圖的比較表:

RWD vs AWD 優缺點比較


 





 
RWD
AWD




相同之處
兩種都會判斷裝置而顯示出對應的樣式。


不同之處
無論行動裝置或是桌機,都使用同一套 CSS。
當使用者打開了網頁,就能偵測網頁的寬度而決定要套用哪些 CSS 樣式碼。

針對各種裝置撰寫對應的 CSS,因此會有多套 CSS,一般來說會有兩套 CSS:桌機專屬的一套 CSS,手機專屬的一套 CSS。
當使用者打開了網頁,程式就能自動偵測網頁的寬度而決定要套用哪個 CSS 檔案。



優點
節省網站製作成本
因為無論是桌機、手機的樣式,全都只塞在同一套 CSS 檔案,所以開發成本較低,適合內容較單純的網站、新創公司或是個人工作室使用。
SEO更方便
因為同一個網頁、URL 也只有一個,所以更方便 SEO。

網頁維護更分明,不怕樣式被吃到
雖然成本較 RWD 高,但是由於桌機與手機的 CSS 分別在不同的檔案,因此在維護上會比 RWD 更分明、更能清楚地找到對應的樣式碼,不需要大海撈針。更沒有更改一個 CSS 而影響到不該改變的區塊 style 也改變的後顧之憂。
有利於 UI/UX
若對畫面顯示的要求較高,希望能在各種裝置上畫面都能完美呈現的場合、或是網站內容較多、圖文排版較複雜時,就適用 AWD,可針對不同的瀏覽介面而做出對應的 UI/UX,讓介面更美觀好用、給使用者更佳的網頁瀏覽體驗。
行動裝置網頁載入更快
可針對行動裝置而做優化,將原本的大圖縮減成最合適的尺寸,減少不必要的大圖,就能加快行動裝置的網頁 loading。



缺點
開發容易、維護耗時:
全部的樣式碼都一窩蜂塞在同一套 CSS 裡面,所以在網頁維護上較不容易,常常需要大海撈針般找到對應的程式碼。若遇到需要修改的狀況,很可能修改某個樣式碼,卻也影響到了其他不需修改的樣式碼,而導致網站 「跑山」 的窘境。
行動裝置網頁載入恐會更慢
因為所有的裝置都使用同一個 CSS 碼,所以較無法針對行動裝置做圖片顯示的最佳化,加上 RWD 網頁的機制是將資訊先下載後,再根據裝置大小重新排列,所以會較慢。

維護較容易,但開發成本高:
一開始需要針對不同的裝置而寫出好幾套 CSS,耗時耗力,且還需工程師撰寫讓網頁自動感應載具而套用對應 CSS 的程式。若有 SEO 的需求,還需另請工程師將同一網頁的多套 CSS 串在同一個網址內,否則流量會自動被手機與桌機瓜分。



 
繼續看本系列文章下篇:
 
2.我該選擇 RWD 還是 AWD ?
 
3.AWD 要怎麼做才能對 SEO 無痛?
 
4.了解整體網站的規劃流程-PM與前端溝通更順利
 
 
 延伸閱讀:
 




HTML5教學的初學者看過來!你得從這兩樣東西開始!




開始踏上HTML5教學的道路,這東西讓你網站美觀又吸引人!



HTML表格標籤的進化史,上HTML5教學的你不可不知!


Python課程讓你免煩惱AI智慧的8億職缺危機 還能輕鬆領高薪


  




台灣連鎖藥妝龍頭也需要了解的大數據課程,你知道多少?
 



OMG!再不學Python課程,到時我會是被淘汰的其中一位!?

 


人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

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

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(13)

  • 個人分類:前端工程師就是我!
▲top
«1...51525366»

個人資訊

布萊恩的創業小窩
暱稱:
布萊恩的創業小窩
分類:
職場甘苦
好友:
累積中
地區:

熱門文章

  • (162)從達內教育評價事件來看Geego(奇科?)IT培訓評論的謬誤
  • (78)人工智慧和生化人科技下的底層生活-"戰鬥天使:艾莉塔"為你呈現
  • (78)有了Python課程,癌細胞看你往哪跑!
  • (223)前端工程師抄捷徑!今天把網頁顏色代碼直接整理給你!
  • (138)輕鬆入門前端工程師的HTML5課程(4)元素排版-下
  • (1,224)常常聽到的Java,原來真的是咖啡名字!!?
  • (141)前端工程師的必備品Emmet(四)快速設定顯示文字與自訂屬性值
  • (38)人工智慧對未來的衝擊,我們該如何應對?-張忠謀給的四個建議
  • (7,342)Python基礎功不可少-dir()與help()的使用
  • (13)十種文字特效,讓你的網路行銷影片獨樹一格~

文章分類

  • UI.UX設計五四三 (25)
  • 前端工程師就是我! (74)
  • 達內教育評價,不會讓你失望 (14)
  • 各式程式語言讓你挑! (135)
  • 網路行銷課程.SEO優化 (86)
  • IT評比 (2)
  • IT人的數位生活 (260)
  • 未分類文章 (1)

最新文章

  • 全球首屆的元宇宙時裝周盛會,落幕後的反響是什麼?
  • 烏克蘭運用人工智慧以辨別戰爭罹難者,是好還是壞?
  • 2022年的人工智慧七大突破就是這些了!!!??
  • Google迫使YouTube Vanced中止開發啦!!!
  • 有關Python跟Java的差別,一篇文章就讓你懂!
  • 前端工程師網頁開發神器Emmet,沒聽過?今天介紹給你!
  • 在元宇宙受傷,你會感受到痛??這次該不會是玩認真的吧?
  • 怕自己成為股市小韭菜嗎?人工智慧操盤手有機會拯救你!!
  • 是什麼原因,讓日本飯店狠下心裁了兩百多個人工智慧!??
  • 透過診斷視網膜病變,人工智慧成功降低糖友的失明風險!

動態訂閱

文章精選

文章搜尋

誰來我家

參觀人氣

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