"March, 2016" 有16篇文章

首頁  /  2016  /  March

手機網頁選單設計-購物網站設計趨勢(一)

軟硬體發展快速,網頁的設計方式必須不斷更新,網頁設計中有許多設計元素會影響使用者操作,其中選單是引導消費者到達產品頁面很重要的媒介,歐斯瑞今天要先從選單設計談起,現今選單的設計趨勢,並透過幾個知名品牌網站與大家分享,這些品牌他們是怎麼讓消費者更容易找到想要的產品,一起來看看吧!   手機網頁設計方式必須一直求新?

購物網站設計趨勢(一):手機網頁選單設計

軟硬體發展快速,網頁的設計方式必須不斷更新,網頁設計中有許多設計元素會影響使用者操作,其中選單是引導消費者到達產品頁面很重要的媒介,歐斯瑞今天要先從選單設計談起,現今選單的設計趨勢,並透過幾個知名品牌網站與大家分享,這些品牌他們是怎麼讓消費者更容易找到想要的產品,一起來看看吧!   為什麼網頁設計方式必須一直求新?

電子報行銷工具:MailChimp教學

歐斯瑞本篇文章要教你使用MailChimp電子報製作流程,電子報製作之前你必須先註冊/登入帳號,就可以開始來跟我一起製作囉!   什麼是MailChimp   MailChimp是一個大量發送電子郵件的工具,多用於企業定期發送郵件給客戶,同時也是行銷人員做為電子報行銷的工具;MailChimp它不需要下載也不需要安裝程式,並提供多樣化的功能以及各類型的版型樣式,同時能管理眾多的客戶群組,當然也少不了追蹤郵件活動以及產生追蹤報表,MailChimp主要的四大功能為:   建立電子郵件活動 模板設計 E-mail名單管理 檢視活動報告

如何在Magento設置組合商品

  Magento提供了許多商品類型,其中組合商品能允許客戶自由搭配各個商品選項,來組成一套自己想要的商品,而不用花費太多的時間來從目錄中找尋各別的商品選項,例如在選購相機組,你可以選擇主機、鏡頭、相機包、相機帶、電池數量、保固時間等,而其價格可依據各個商品選項的不同來帶出,或是採用固定金額來銷售的方式,藉此可幫助提升網站的轉換率。 首先必須新增此組合商品內的所有商品選項,因為組合商品並沒有獨立庫存管理,都是由普通商品內所帶出的數值,所以我們必須先新增各個普通商品,請參考如何上傳商品? 來新增普通商品     範例:手機組商品  

如何購買與安裝SSL憑證

SSL憑證是由可信度高的簽證單位,經過資料審核後用來認證網域(DN)為可信任的網站的一種機制,所以電商網站幾乎都會申請此憑證用來加強自己網站的安全性與信任度,擁有SSL憑證的網站就可以經過設定https加密瀏覽。沒有憑證也不是不能設定,只是會出現警告訊息,所以錯誤的設定可能就會讓使用者離開網站。  

Magento二三事,你不該使用套版的三大理由

試想,當你在逛街的時候,看到一間裝潢乾淨大方、動線分明、商品整齊陳列的店面,跟另外一家裝潢花俏、可是走道空間狹窄、商品陳列分類不清楚的店面,你會選擇哪一家進去消費呢? 我想答案應該大多是前者,或者至少在逛完後者後,會覺得前者比較好。 網路商店也是一樣,網站的視覺設計、讀取速度、操作流程、是否易於找尋商品往往左右了網站的銷售量,這也是接下來我們要告訴你,為何不該使用套版的三大理由。 第一點、使用套版一定不完全合身

Photoshop教學【CC 影片編輯】將影片加入音訊

今天astralweb要與大家分享使用Photoshop CC 2015在影片中加入音訊,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識   置入影片檔,並選擇動態介面 在時間軸下方的音軌列中,點擊音樂符號後,選擇 新增音訊(如果要增加更多音訊,可以新增更多的音軌) 選擇音訊檔後,就完成在音軌上增加了音訊 可以對著音訊的時間軸上點擊右鍵,來做簡單的編輯 如果影片本身有聲音,一樣可以對著影片點擊右鍵來關閉聲音 檔案>轉存>演算視訊 依照需求存輸出影片檔就完成 Photoshop 教學導覽

MailChimp:在電子報中嵌入Youtube影片

如果你要嵌入Youtube影片在MailChimp電子報信件中,你是不是也貼上Youtube分享的程式碼都沒有作用? 此篇教學文章就來教你要如何在MailChimp嵌入影片。   開始嵌入影片之前,小編先告訴你幾個重要的小提醒: 1.嵌入的影片呈現的是一張預覽縮圖,點擊圖片後才會開啟播放影片 2.MailChimp嵌入影片是抓取Youtube縮圖作為顯示 3.若要更改影片預覽縮圖畫面,必須到Youtube影片後台修改縮圖(youtube必須要email認證後才能自訂縮圖) 4.嵌入的影片必須設為公開影片 5.嵌入影片之後,請寄測試信確認是否能成功瀏覽影片

Photoshop教學【CC 影片編輯】儲存循環播放GIF

今天astralweb要與大家分享使用Photoshop CC 2015來做簡單的影片編輯,再將它儲存成連續GIF,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識 1.開啟動態介面     2.然後置入影片     3.在時間軸上可以勾選重複播放,方便我們即時預視效果     4.選擇 檔案>轉存>儲存為網頁用     5.將檔案格式選擇GIF     6.在下方的重複播放選項選擇永遠  

搜尋引擎優化(SEO) – 用站內連結(Interlinking)提高自然搜尋排序

關於搜尋引擎優化(SEO),歐斯瑞曾經寫過許多文章,跟大家分享實用的免費SEO工具以及入門方法。通常我們協助客戶進行搜尋引擎優化的時候,主要會區分為站內優化與站外優化兩大方向來做優化。今天我們要再介紹如何使用站內連結(interlinking)來提高自然搜尋的排序。簡單的說就是將您網站的重要關鍵字於網頁內容中建立站內連結(interlinking),來看看我們怎麼做的吧。   當您進入歐斯瑞官網當中的資訊分享,可以看到我們已將所有文章依照服務項目進行分類,並且透過文章分類下方的連結(interlinking),您可以快速點選想要深入了解的類別。  

電商網站常見錯誤Top 10

在前幾篇分享文章裡和大家分享了一些有關在測試電商網站時,可能會偵錯到或是較常見到的各種錯誤,不管是畫面或功能方面,或者是所使用的設備與瀏覽器…等等。特別是當一個電商網站有做響應式網頁時更應該要小心謹慎地測試,以避免在其他行動裝置上瀏覽網頁時發生跑版或是功能有問題的情況。那麼到底有哪些是很容易不被注意與被忽略的呢? 今天歐斯瑞的測試人員J整理了在測試電商網站時,十大常見的錯誤給大家參考 下面例舉幾個最常犯的錯誤,並提供範例圖與說明讓大家了解   TOP 1  位置 位置往往是在測試時很常見到的錯誤,舉凡文字、圖片、按鈕位置…等,以下圖為例。

電商網站的整合測試

系統整合主要是把在不同系統和設備上的不同功能串連起來,形成一個資料往來的交流管道。簡單來說就好比從A山到B山,勢必要有一座橋樑來連接兩座山以便往來。就連現在大部分的購物網站也不例外,舉凡ERP系統整合、金流系統整合、物流系統整合…等,都會將所要使用的系統整合串接起來。 所以今天就以Magento與金流系統做整合為例,那麼該如何檢測呢?流程畫面如下:   簡易流程示意圖         成功案例: 假設測試電商網站A選好商品並按下”前往付款”按鈕,如下圖。      

掌握開發無障礙網頁的基本原則

無障礙網頁的立意是讓身障者也能瀏覽閱讀網站內容,並與網頁互動。除了對身障者友好之外,無障礙網頁設計的重要原則就是:讓使用者在各種不利的情況之下,都能自由地瀏覽並閱讀網站內容,並且充份地理解而無任何阻礙。舉例來說:讓視力退化的老年人也能輕鬆閱讀網站文章;在網路頻寬受限的地區也能瀏覽及閱讀網站內容;即使裝置不支援javascript也不會錯失網站的內容。   國家通訊傳播委員會提出了底下14點規範,是目前國內開發無障礙網頁的原則與方向 對於聽覺及視覺內容要提供相等的替代文字內容 不要單獨靠色彩來提供特殊資訊 適當地使用標記語言和樣式表單 闡明自然語言的使用 建立編排良好的表格

WordPress 4.4 版本開始支援響應式圖片

新釋出的wordpress4.4版本開始支援srcset 及 sizes標籤的使用,這使得wordpress能夠依瀏覽器的大小顯示適當尺寸的圖片。假使我們在文章中插入了全尺寸(1500×600)的圖片。使用者在行動裝置上看到的圖片會使用較小的圖片來替代,只有在電腦上才會看到的全尺寸的大圖片。這個新功能可以減少流量的傳輸、加快網站的載入速度。   在Wordpress的原始功能中,當我們上傳圖片到網站上時,會自動產生全尺寸、大圖、中等、縮圖等四種不同尺寸的圖片,在發表文章時、我們可以選擇適當尺寸的圖片插入文章之中。舉例來說,如果我們上傳了的1500

行銷人不可不知GA小技巧 – 善用Google Analytics快訊進行網站流量監測

網路行銷人員都知道監測與分析網站流量數據的重要性,目前最普遍使用的網站流量分析工具非Google Analytics莫屬了。然而,你知道如何利用Google Analytics幫你監測網站流量數據的重大變化,好讓你隨時掌握網站數據嗎?         Astralweb今天就要介紹如何在Google Analytics設定這項功能 – 自訂快訊。對網路行銷人員來說有許多應該要立即排除的基本問題,例如網頁出現404訊息,網站沒有流量,跳出率太高;或者電子商務型網站最關心的重大警訊,如轉換率太低;還有廣告管理人員這些都可以透過Google

網頁版面快速調整工具:快速移動瀏覽器物件

今天astralweb要與大家分享快速更改網頁上物件的位置,可以省去PS的時間,也很快速,一起來看看如何使用吧!   在某些情況下,我們只需要對網頁上的物件位置做調整時,但我們只是想要看看結果如何時,不仿考慮使用這種方式來節省時間吧。但僅限運用在物件位置移動,而縮放、刪除、裁切等,它是做不到的喔! 對於一般民眾不需要使用影像處理軟體,即可做修改,對於網頁設計師來說,省去捕捉畫面、開啟PS、去背、裁切、存檔等步驟,快速做修改。     1. 首先到 staticresource.com/dragon.js,去複製程式碼