首頁 新聞 全部
以類別搜尋
以關鍵字搜尋
全部
GOOGLE定義的 回應式網頁設計...
日期:
2016/12/15
標題:
GOOGLE定義的 回應式網頁設計...
內容:

回應式網頁設計 (RWD) 是一種設定,可讓伺服器一律向所有裝置 發送相同的 HTML 程式碼,並透過 CSS 調整網頁在裝置上的 呈現方式。 如果所有 Googlebot 使用者代理程式均獲准檢索網頁及其資產 (CSS、javascript 和圖片),則 Google 的演算法應能自動偵測 這項設定。

回應式設計能為所有裝置提供相同的程式碼,可根據螢幕尺寸調整呈現方式。

TL;DR

  • 使用 meta name="viewport" 標記,指示瀏覽器如何調整內容。
  • 前往我們的「Web 基礎知識」網站參閱更多相關文件。

使用 meta name="viewport"

如要向瀏覽器傳送資訊,告知網頁會配合所有裝置適時調整,請在文件的標題 加入中繼標記:

 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

中繼檢視點標記能指示瀏覽器如何 配合裝置的寬度調整網頁大小和縮放比例。如果 未提供中繼檢視點元素,行動瀏覽器會預設 以電腦版螢幕的寬度來轉譯網頁 (雖然因裝置而異, 但一般約為 980px)。行動瀏覽器隨後會嘗試加大字體, 並且選擇將內容縮放至符合螢幕的大小,或者僅顯示 與螢幕大小相符的部分內容,讓內容更容易閱讀。

對使用者而言,這代表字體大小可能不一致, 且使用者可能需要輕觸兩下或使用雙指撥動縮放, 才能查看及使用內容。對 Google 而言,由於網頁要求 在行動裝置上進行這類互動,我們可能無法判斷網頁 是否適合行動裝置使用。

左邊為未指定中繼檢視點的網頁:行動瀏覽器因此按預設 採用電腦版網頁的寬度,並將網頁縮放至符合螢幕的大小, 導致內容難以閱讀。右邊為相同網頁,不過指定了 符合裝置寬度的中繼檢視點:行動瀏覽器不會縮放網頁, 內容也容易閱讀。

如需使用回應式圖片,請加入 <picture> 元素。

一般而言,如果您的網站可以在新型瀏覽器 (例如 Google Chrome 或 Apple Mobile Safari) 中運作,那麼該網站就可以使用我們的演算法。

為什麼要使用回應式設計

我們建議您使用回應式網頁設計的原因如下:

  • 使用者可以使用單一網址,以更輕鬆的方式分享及連結到您的內容。
  • 可協助 Google 的演算法為網頁正確指定索引編列屬性, 不需要發送訊息指明既有的相對應電腦版/行動版網頁。
  • 無需維護多個內容相同的網頁,減少工程師的處理時間。
  • 降低行動版網站發生常見錯誤的機率。
  • 使用者無需重新導向即可瀏覽最適合裝置大小的畫面, 縮短載入時間。此外,根據使用者代理程式執行重新導向容易出錯, 可能導致網站的使用體驗大打折扣 (詳情請參閱 「偵測使用者代理程式時遇到的問題」一節)。
  • Googlebot 檢索您的網站時可節省資源。 對於採用回應式網頁設計的網頁, 任何 Googlebot 使用者代理程式只要檢索這些網頁一次 (不需依據不同的使用者代理程式多次反覆檢索), 即可擷取所有版本的內容。提高檢索效率可間接協助 Google 為網站中的更多內容建立索引,並確保擷取的內容是 最新版本。

如果您有興趣進一步瞭解回應式網頁設計,可先前往網站管理員中心參考 我們的網誌文章,以及造訪網頁基礎知識網站。

JavaScript

建立適合行動裝置瀏覽的網站時,您必須仔細思考 如何使用 JavaScript 調整網站在不同裝置上的呈現方式 和行為。JavaScript 的典型用法包括自動判定應在網頁中 顯示何種廣告或哪一種解析度的圖片。

本節說明 JavaScript 的不同使用方法,以及這些方法與 Google 建議使用的回應式網頁設計之間的關係。

常見配置

建立適合行動裝置使用的網站時,三種常見的 JavaScript 實作方法如下:

  • 適應性 JavaScript:在這項配置中,網址會向所有裝置提供相同的 HTML、CSS 和 JavaScript 內容。在裝置上執行 JavaScript 時, 網站的呈現方式或行為會發生變化。如果網站需要 使用 JavaScript,那麼 Google 建議您使用此配置。.
  • 聯合偵測:在這個實作方法中,網站會同時使用 JavaScript 和裝置功能的伺服器端偵測來向不同的裝置 提供不同的內容。
  • 動態提供的 JavaScript:在這項配置中,網站會向所有裝置 提供相同的 HTML,但會透過相關網址來提供 JavaScript (會根據裝置的使用者代理程式動態提供不同的 JavaScript 程式碼)。

下文將詳細說明這些配置。

適應性 JavaScript

在這項配置中,網址會向所有裝置提供相同的內容 (HTML、CSS、JavaScript 和圖片)。只有在裝置上執行 JavaScript 時,網站的呈現方式或行為 才會發生改變。這與使用 CSS 媒體查詢的回應式網頁設計具有 類似原理。

例如,假設網頁向所有裝置提供相同的 HTML (其中包括 <script> 元素), 用以要求提供 JavaScript 的外部網址。所有要求 JavaScript 網址的裝置 都會接收到相同的程式碼。執行時,JavaScript 會偵測裝置 並對網頁進行部分調整,例如加上專為智慧型手機最佳化的 圖片或廣告代碼,而非針對電腦最佳化的 內容。

這項配置與回應式網頁設計緊密相關,我們的演算法可以 自動偵測這項設定。此外,這項配置不需要使用 Vary HTTP 標頭,因為網頁及其資產的網址 不會動態提供內容。鑒於上述優勢, 如果您的網站需要使用 JavaScript,則建議您使用 這項配置。

聯合偵測

聯合偵測設定可讓伺服器與 JavaScript 在用戶端 配合執行,以便偵測裝置的功能並調整 提供的內容。

例如,假設某個網站可根據裝置是電腦或智慧型手機 改變內容的呈現方式。在此例中,網站可以加入 用於偵測螢幕尺寸的 JavaScript,然後將偵測到的數據傳送給伺服器, 由伺服器對要發送給裝置的程式碼進行更新或更改。通常, JavaScript 會將偵測到的裝置功能儲存在 Cookie 中, 供伺服器用來讀取來自同一台裝置的後續造訪。

由於伺服器會向不同的使用者代理程式回傳不同的 HTML, 因此聯合偵測應視為一種動態服務配置。詳情請參閱 動態服務一節。簡而言之,如果網址需要 向不同的使用者代理程式提供不同的 HTML 內容, 網站中必須加上「Vary: User-agent」HTTP 回應標頭。

動態提供的 JavaScript

在這項配置中,伺服器會向所有裝置提供相同的 HTML, 其中包括 <script> 元素。該元素是用於新增外部 JavaScript 檔案, 這個檔案的內容則根據發出要求的使用者代理程式而有所差異。也就是說, JavaScript 程式碼是動態提供的。

 

連結網址
Google 推出 Chrome 55,正式預設不支援 Flash 技術!
日期:
2017/06/12
標題:
Google 推出 Chrome 55,正式預設不支援 Flash 技術!
內容:

近一兩年內我們不時聽見,各大瀏覽器將會淘汰十分過氣 Flash 網頁技術,像 Firefox、Safari 等都先後預設不再支援此技術。來到今天,市占最高的 Google Chrome 瀏覽器,在經過數個月的過渡期後,終於如期地在踏入 12 月就推出新版本,在預設的情況下,正式由 HTML 5 取代 Flash 技術。

 

Google 早於今年 5 月開腔表示,最快今年底就會將 Chrome 瀏覽器預設停止使用 Flash。而在 8 月推出 Chrome 53 測試版本中已開始預設封鎖 Flash 技術,並將 HTML 5 定為預設的網頁技術標準。Google 隨後由 9 月開始進行深度的技術過渡,逐步幫助大家徹底放棄使用 Flash 技術。當中例如一些舊有以 Flash 做出來的網頁分析、Flash 物件等將會被屏蔽起來。

今天已踏入 12 月,Google 正式兌現承諾推出 Chrome 55 for Windows、Mac、Linux 等版本,正正式式將將瀏覽器預設為不支援 Flash 技術,除非使用者在必需要的情況下自行安裝 Flash 插件,否則將會以 HTML 5 技術取而代之。

據最新統計顯示,Google 的 Chrome 瀏覽器市占率達到 55%,如今連 Google 亦已正式預設不支援 Flash,相信這將可以加速 Flash 技術徹底地在互聯網上消失,成為數碼世界的歷史。

 

此文章原刊於 Qooah.com 

連結網址
Google 推出 Chrome 55,正式預設不支援 Flash 技術!
日期:
2017/05/04
標題:
Google 推出 Chrome 55,正式預設不支援 Flash 技術!
內容:

市占最高的 Google Chrome 瀏覽器,在經過數個月的過渡期後,終於如期地在踏入 12 月就推出新版本,在預設的情況下,正式由 HTML 5 取代 Flash 技術。

Google 早於今年 5 月表示,最快今年底就會將 Chrome 瀏覽器預設停止使用 Flash。而在 8 月推出 Chrome 53 測試版本中已開始預設封鎖 Flash 技術,並將 HTML 5 定為預設的網頁技術標準。

今天已踏入 12 月,Google 正式兌現承諾推出 Chrome 55 for Windows、Mac、Linux 等版本,正正式式將將瀏覽器預設為不支援 Flash 技術,除非使用者在必需要的情況下自行安裝 Flash 插件,否則將會以 HTML 5 技術取而代之。

內文引用:
Google 推出 Chrome 55,正式預設不支援 Flash 技術!
https://tw.news.yahoo.com/google-%E6%8E%A8%E5%87%BA-chrome-…

Google 官網公告:
https://blog.google/products/chrome/flash-and-chrome/

微軟IE 11將開始封鎖舊版Flash
http://www.ithome.com.tw/news/108478

微軟Edge也將暫停播放不重要的Flash內容
http://www.ithome.com.tw/news/105183

Firefox 49開始向不重要的Flash說「不」
http://www.ithome.com.tw/news/108603

蘋果Safari 10將以HTML 5優先,不會自動開啟Flash、Java與Silverlight
http://www.ithome.com.tw/news/106563

Twitch也開始棄守Adobe Flash,改投HTML5懷抱
http://www.ithome.com.tw/news/97601

 

文章來源: https://www.facebook.com/netwargame/posts/1159911297391052

 

連結網址
重新建置透過行動裝置瀏覽的網站需要多少成本?
日期:
2016/12/15
標題:
重新建置透過行動裝置瀏覽的網站需要多少成本?
內容:

答案是...不一定!可能的情形如下:

  • 如果您可以為網站選用回應式範本或主題,那麼就有可能將網站免費改成行動版網站。無論訪客使用的是桌上型電腦、平板電腦或手機,回應式範本/主題都能自動調整為適合螢幕的大小,為使用者提供最佳瀏覽體驗。

  • 如果您具備建立行動版網站的技術,就能在不花半毛錢的情況下,將網站改為行動版。歡迎造訪 Web Fundamentals網站!

  • 聘請開發人員將網站改為行動版可能需要花費時間和金錢。另外,如果您的網站已建立多年,建議您聘用新的開發人員為您重新建立網站。在這種情形下,您就必須支付翻新網站的費用。這是因為現今的網站開發技術和主題 (或網頁範本) 日新月異,重新建立網站或許會比整修網站更有效率。這種做法尤其適合下列類型的網站:

    • 以 Flash 建立的網站
    • 使用過時電子商務平台的網站

 

連結網址
如何踏出第一步?建置響應式網站
日期:
2016/12/15
標題:
如何踏出第一步?建置響應式網站
內容:

就基本的實作層面而言,在將既有的電腦版網站轉換成行動版本時,必須將電腦版網站現有的內容區段重新編排成適合透過行動裝置瀏覽的設計樣式。

 

無論您是聘請開發人員設計或親自動手建立行動版網站,都可以前往我們的行動版網站搜尋引擎最佳化網頁參閱相關文件,進一步瞭解實作上的技術性資訊。

 

連結網址
為什麼需要建立適合透過行動裝置瀏覽的網站?
日期:
2016/12/15
標題:
為什麼需要建立適合透過行動裝置瀏覽的網站?
內容:
電腦版網站會造成行動裝置使用者在瀏覽和使用上的不便。使用者在瀏覽尚未針對行動裝置最佳化的網站時,必須靠雙指撥動或縮放螢幕才能閱讀網站內容,因此在使用上甚感不便之餘,很可能就會放棄瀏覽您的網站。反觀適合透過行動裝置瀏覽的版本不僅容易閱讀,使用上也極為流暢方便。

在美國,有 94% 的智慧型手機使用者會透過手機搜尋當地資訊。 有趣的是,77% 的行動裝置搜尋都發生在使用者的住家或公司,而這些都是可能會有桌上型電腦的地方。

 
連結網址
如果您尚未建立適合透過行動裝置瀏覽的網站,我們極力推薦您這麼做...
日期:
2016/12/15
標題:
如果您尚未建立適合透過行動裝置瀏覽的網站,我們極力推薦您這麼做...
內容:

行動科技正在改變世界。在這個人人都有智慧型手機的時代,大家都不停在與人互動及搜尋資訊。在許多國家/地區,智慧型手機的數量已經超過個人電腦,因此打造適合透過行動裝置瀏覽的網站已成為經營線上業務的一項重要環節。

 

如果您不知道自己的網站是否適合透過行動裝置瀏覽,歡迎立即接受行動裝置相容性測試

 

 

連結網址
Google今起改變手機版搜尋器結果排序 無手機版網頁企業排序大跌
日期:
2016/12/09
標題:
Google今起改變手機版搜尋器結果排序 無手機版網頁企業排序大跌
內容:

最近剛被歐盟指控違反反壟斷法的互聯網搜尋引擎巨擘Google(GOOG-US),今(21)日起改變全球手機版搜尋器的結果排序方式,由以往與桌面版一樣,改為根據手機瀏覽網頁的困難程度排列,意味沒有特別設立手機版網頁的企業,在搜尋結果的排位將大幅下跌,減少潛在顧客瀏覽其網頁的機會。此舉牽連甚廣,有網絡專家甚至將這改變稱為「手機浩劫」(Mobilegeddon)。

香港《文匯報》綜合外電消息,Google會根據網站的字型大小、連結密集程度,以及版面能否隨屏幕大小調整,決定網站是否適合手機觀看,假如被評定為不適合,便會把它在搜尋結果排序中貶到較低位置。今次更新將適用於全球所有語言的Google搜尋器,但使用手提電腦或桌上電腦搜尋均不受影響。

CNET網站助理編緝阿赫塔爾認為,用家以手機或平板電腦瀏覽網頁時,的確希望能搜尋到版面配合手機的網頁。由於目前Google有一半搜尋是通過流動裝置進行,若企業沒設置手機版網站,它們在手機搜尋結果的排序便會大幅下跌,損失難以估計。

手機市場分析公司Somo測試顯示,不少大型企業、傳媒以至政府機構網站均會被新系統排到低位,例如時裝品牌Versace、微軟Windows Phone、英國《每日郵報》、瑞安航空,還有控告Google的歐盟。

由於很多網站都依靠搜尋器引導用家前往,故Google此舉可以造成龐大影響。Google去年更新Panda搜尋規則後,eBay便因此失去在搜尋結果的最高排名,更連帶影響公司業績。

大型企業及機構固然受害,但影響最大的還是小商店。儘管Google今年2月已預告有關更新,小企業受資源及技術所限,難以迅速迎合新要求,部分企業更對改變全不知情,只能眼睜睜看網站排位急降。網頁設計公司Duda總裁薩丹估計,互聯網將有數百萬網頁受新制打擊。

澳洲小型企業議會已向Google提出呈請,要求給予更長寬限期,讓小店適應新排序。執行董事斯特朗解釋部分企業貨品實惠、網頁充實,顧客應有權利找到它們,認為新方案正正反映Google的霸權。Google回應指顧客閱讀的困難程度跟網頁內容同樣重要,將協助各網站改變。 

英國《衛報》報導稱,Google還會為手機版搜尋器作另一改動,搜尋結果頁的網址格式會簡化,不再出現全個網址。以蘋果公司Apple Watch的頁面為例,現時Google會顯示頁面的詳細網址「www.apple.com/hk/watch」,但新版搜尋器將以「Apple > hk > watch」顯示網址。

新的搜尋結果不再列出網域和全個網址,而是使用網站的真實名稱,Google認為這有助用家更了解網站的內在結構,也能提供另一個方式,快速檢視搜尋結果是否用家需要。新顯示經測試後,也會擴展至桌上版。

Google一直致力減省冗長網址,旗下Chrome瀏覽器下月將推出新版本,網址欄只會顯示主域名,後綴全數省去,期望令用家更易發現網絡釣魚行為,減低受騙機會。

據《波士頓環球報》報導,歐盟上周正式指控Google涉嫌蓄意在搜尋結果中,把自家服務排在較前列,對質素較佳的競爭者不公平。事件餘波未了,旅遊網站TripAdvisor及Expedia投訴Google同樣利用搜尋次序,推廣自家旅遊服務Google Flights。

TripAdvisor總裁考費爾發聲明指,Google改變搜尋結果排序,令顧客先接觸有利Google的搜尋結果,犧牲顧客利益,並非公平競爭,這不能繼續下去。歐盟上周亦透露正調查Google其他商業活動。

Google高級副主席辛格爾否認指控,更指TripAdvisor過去4年收入翻倍,穩居最大旅遊網站的地位,卻指控Google打壓。

美國聯邦貿易委員會(FTC)競爭事務局前助理總監賴利批評Google的反駁,指即使TripAdvisor依然成功,Google的做法仍有可能減少對手的潛在顧客,並不代表Google沒有做出反競爭行為。

搜尋結果排位方法

■根據網站的字型大小、連結密集程度,以及版面能否隨屏幕大小調整,決定網站是否適合用手機觀看。

■假如被評定為不適合,便會在搜尋結果排序中貶到較低位置。

資料來源:鉅亨網

 

連結網址
Google給了APP相當好的譬喻...關鍵:緊鄰核心、能小就小
日期:
2016/11/21
標題:
Google給了APP相當好的譬喻...關鍵:緊鄰核心、能小就小
內容:

Google給了APP相當好的譬喻...關鍵:緊鄰核心、能小就小

 關鍵:緊鄰核心、能小就小。
 
Google給了相當好的譬喻:App就跟點心一樣,名字簡單、一看明白、包裝撕開就隨手吃下,不要搞得像有六道餐點的晚宴大餐。
 
更多精采說明請參考
 
 

 

Google給了APP相當好的譬喻...關鍵:緊鄰核心、能小就小  關鍵:緊鄰核心、能小就小。 Google給了相當好的譬喻:App就跟點心一樣,名字簡單、一看明白、包裝撕開就隨手吃下,不要搞得像有六道餐點的晚宴大餐。 更多精采說明請參考 Google I/O 2012 - Google Play: Marketing 101 for Developers

連結網址
81%台灣人出門必帶智慧手機 亞太之冠
日期:
2016/11/21
標題:
81%台灣人出門必帶智慧手機 亞太之冠
內容:

Google於今(13)日發表「2013我們的行動星球:台灣」研究報告,公布台灣手機用戶的使用狀況。報告顯示,有81%的台灣智慧型手機使用者,出門一定要攜帶智慧型手機,超越日本(80%)成為亞太地區手機依賴度第1名,第34名分別為香港(77%)和新加坡(73%)

Google今天公布與易普索市調公司(Ipsos MediaCT)共同合作的「2013我們的行動星球:台灣」研究報告,針對1000名使用智慧型手機上網的台灣使用者(18-64)進行訪談。

其中「行動網路及使用者行為調查報告」顯示,2013年第1季台灣智慧型手機的普及率,從去年同期的32%大幅增加至51%。有69%的智慧型手機用戶最近1週內每天使用智慧型手機,81%的用戶出門必定攜帶手機,顯示智慧型手機已成為台灣人的生活重心。

調查還發現,智慧型手機常被用於搜尋資訊與造訪社群網站,60%的使用者每天都會使用搜尋功能,61%的使用者每天至少會造訪一次社群網站。此外,有87%用戶曾使用智慧型手機研究產品或服務,其中更83%的用戶曾在取得搜尋結果後採取行動,如與商家聯絡、購買、光顧商家和與人分享。

Google台灣總經理陳俊廷指出,智慧型手機在消費者決策購買的過程中扮演關鍵的角色,透過手機研究產品與服務更容易促成跨平台購買,且台灣人使用手機購物的趨勢也越來越明顯。他認為,手機將成為新興的購物管道。

根據調查結果,有90%的智慧型手機用戶會留意行動廣告。對此,Google業務總監李芝禎表示,手機已成為刺激消費的主要媒介,台灣消費者高度留意行動廣告,使得手機已是企業或品牌不得不經營的重點區域。

 

連結網址
總數
16
Copyright © 2015-2025 大都市資訊科技有限公司 版權所有
TEL: 0938-111-356 / (02)8970-6038 
EMAIL: service@ct101.com.tw