2016-02-02

什麼是 RWD 響應式網頁設計?

什麼是 RWD(Responsive Web Design)? Responsive Web Design,簡稱 RWD,也就是響應式網頁設計、回應式網頁設計,這是近年網頁設計開發技術上的趨勢,該技術主要就是在撰寫程式時去設定彈性的畫面設計,讓網頁會自動適應不同的裝置大小,自動變化排版方式,讓不管是用電腦、平板、手機上網的人,都可以有最佳的瀏覽體驗,不需要再拖拉縮放網頁大小,直接呈現最合適的字級與版面設計。 相較於電腦的畫面資訊量,在手機上的資訊量和介面設計上,一定是比電腦來的簡單並重點式的資訊呈現。15 秒快速看懂 RWD 若您正用電腦觀看本文,歡迎動動滑鼠拖拉目前的瀏覽器大小!不可不知 RWD 的優點 (一)開發成本較低:相較於 APP 的開發成本與審核上架時間,RWD 是更具有成本效益的選擇。 (二)利於搜尋引擎排名: Google 已在 2015 年公佈,優化過的行動網頁將會優先顯示在行動搜尋排名上。 (三)管理較容易:不需獨立出電腦版、手機版網頁, 處理兩邊的網站資料,使用 RWD 只要維護一個網站就好。 (四)畫面彈性多尺寸:不管是使用電腦、平板、手機,同一個網站都適用於各種裝置大小,也統一了品牌形象。 (五)利於分享:擁有單一網址連結,可以快速分享出去,點擊就立即進入網站瀏覽。Google Developers 行動裝置相容性測試 設計了 RWD 網頁,更能友善我們的行動裝置,Google 提供以下網頁可以測試網站是否有符合 Mobile-Friendly 設計原則。 https://www.google.com/webmasters/tools/mobile-friendly/   同場加映✨ 品牌電商專屬的功能介紹: https://www.365shop.com.tw/apps_list.php 快讓你的品牌網站擁有多裝置的介面吧!

more
2016-09-23

讓 RWD 網頁設計,成為您行動優化的第一步!

先前電商筆記有整理一篇文章 〈什麼是 RWD 響應式網頁設計?〉,以影片的方式讓大家快速瞭解 RWD 網頁的呈現,而本篇我們整理了  developers.google.com 所提供的友善行動網站的相關資訊,讓大家更了解 RWD 網頁設計的優勢。RWD 回應式網頁設計是 Google 建議採用的設計樣式 link RWD 的設計能讓瀏覽器配合裝置的寬度調整網頁大小和縮放比例。 如果未提供中繼檢視點元素,行動瀏覽器會預設以電腦版螢幕的寬度來轉譯網頁 (雖然因裝置而異, 但一般約為 980px)。行動瀏覽器隨後會嘗試加大字體, 並且選擇將內容縮放至符合螢幕的大小,或者僅顯示與螢幕大小相符的部分內容,讓內容更容易閱讀。  上圖左邊的部分,是直接將電腦版的畫面等比縮小至符合手機的螢幕,文字與圖片因此過小,導致閱讀上的困難;而右邊的部分,則是有採用回應式的網頁設計,針對手機的螢幕大小,自動將版面做調整,讓內容容易閱讀,才是符合行動友善的網頁設計。為什麼要使用回應式設計? 使用者可以使用單一網址,以更輕鬆的方式分享及連結到您的內容。 可協助 Google 的演算法為網頁正確指定索引編列屬性, 不需要發送訊息指明既有的相對應電腦版/行動版網頁。 無需維護多個內容相同的網頁,減少工程師的處理時間。 降低行動版網站發生常見錯誤的機率。 使用者無需重新導向即可瀏覽最適合裝置大小的畫面, 縮短載入時間。此外,根據使用者代理程式執行重新導向容易出錯, 可能導致網站的使用體驗大打折扣 (詳情請參閱 「偵測使用者代理程式時遇到的問題」一節)。 Googlebot 檢索您的網站時可節省資源。 對於採用回應式網頁設計的網頁, 任何 Googlebot 使用者代理程式只要檢索這些網頁一次 (不需依據不同的使用者代理程式多次反覆檢索), 即可擷取所有版本的內容。提高檢索效率可間接協助 Google 為網站中的更多內容建立索引,並確保擷取的內容是最新版本。 資料來源 Google Webmasters > Mobile Friendly Websites讓 Responsive Web Design,成為您行動優化的第一步  也許有些經營者會想說, 已經有了獨立的行動版網頁,還需使用 RWD 的設計嗎? 上述列出的問題,其實多數就是針對將電腦版與行動版分開的比較,當一個網站擁有電腦版與行動版,表示各自有對應的網址,不同網址的流量數據就會分開統計,有如上述提到的,同樣的頁面資料就需要上兩次,分別上給電腦版和行動版,網站維護的成本相對來說是比較高的。 然而經營購物網站,勢必要加強行動版的網頁設計,當我們花了廣告預算替網站導入流量時,卻因為網頁設計導致使用者的離站比例高,這是很可惜的事情。而 Google 也在其行動友善網站的頁面上指出:「回應式網頁設計是 Google 建議採用的設計樣式」。  365SHOP 品牌電商平台,設計的購物網站,也都是使用 Responsive Web Design(RWD) 的方式,同樣也在意行動版網頁的品質嗎?快來優化您的網站吧!  若您對品牌購物網站有興趣,歡迎你透過以下方式與我們聯繫:  365SHOP官網線上填單 |  Facebook粉專私訊 喜歡我們的文章嗎?搶先到網站下方訂閱電子報。

more
2016-11-04

購物網站也要多品牌經營-「多品牌主頁」介紹

你也是經營多品牌的代理商或品牌商嗎? 許多代理商、品牌商想要建置一個給廠商本身的品牌網站,同時也希望旗下的品牌能夠擁有獨立露出的頁面空間,並且有對應的品牌故事、產品資料等內容,然而以現在普遍的開店或是架站平台,大多都是單一的品牌網站為主,很少有多品牌的廠商使用,這是為什麼呢? 因為這些快速架站的平台模式,比較難滿足擁有「多品牌經營」廠商的需求。 多品牌主頁,是我們 365Shop 品牌電商加值功能之一,建立擁有多品牌的網站,在網站前台的設計呈現,各個品牌都有足夠的空間可以去展示品牌的特色與產品,而在後台的資料也是架構式的整理,並可將產品與品牌連動資料呈現在網頁上,因此同樣的產品資料不需要重複上 2 次,也可以將資料重複呈現在不同的頁面區塊。 為什麼需要多品牌主頁?網站包含多個品牌資料 若您的網站要呈現的商品並非只有單一品牌,而是擁有多個品牌底下的產品的話,那麼當然需要「多品牌主頁」。 多品牌主頁讓每個品牌在購物網站上都有獨立露出的機會,多品牌主頁可以針對該品牌,建立形象圖、品牌故事、系列商品、形象影片、廣告圖等眾多資料,就能夠替每個品牌精心打造專屬的品牌頁面。 各品牌有獨立的品牌介紹頁面(如下圖): 詳細案例介紹:精選案例擁有大型品牌系列 除了多品牌之外,包含像是大型品牌,旗下也會有許多系列品牌,各個系列品牌也都有各自的品牌商品,品牌的架構就多了一層,因此在資料結構上就需要整理的更明確,當消費者進入網站,才不會對眾多品牌混淆,而是能清楚瞭解各個品牌間的對應關係。 進入品牌之後,該品牌底下有許多相關的系列品牌(如下圖): 進一步點選其一系列品牌後,會出現該品牌底下的產品(如下圖): 多品牌主頁有什麼特色?品牌獨立主頁面 品牌主頁可以放置如以下的資料: 品牌形象圖 品牌形象影片 品牌介紹 產品資料 廣告區(Banner) 其他.... 品牌數量少時,資料管理起來相對比較容易,但是如果遇到品牌與其商品數量繁多的時候,品牌管理就變得很重要。產品與品牌連動 連動的方式可以將品牌主頁自動帶出其品牌底下產品的資料,對於該品牌底下的所有產品就可以一目了然,然而在各個產品資料的內頁介紹裡,也會顯示該產品所屬的品牌 Logo,點選 Logo 就可以直接進入品牌主頁面。總結「多品牌主頁」的優點: 多品牌獨立主頁面,可放置多元內容 支援大型品牌系列,雙層主次品牌也沒問題 產品與品牌連動,資料管理便利又輕鬆 實際應用案例 PINYAN 品業實業 >> 多品牌主頁 Camperland 偉盟國際 >> 多品牌主頁 想了解更多方案內容? 線上填單聯繫,於上班日 10:00~18:00 聯繫  >> 填單去 立即撥打電話 02-25787750  >> 撥打電話 FB粉絲團訊息詢問  >> 立即私訊 喜歡我們的文章嗎?搶先到網站下方訂閱電子報。

more