最早介紹 Everypixel 這家公司的產品是「Everypixel 整合 50 個頂尖免費圖庫搜尋引擎,使用演算法過濾不適合圖片還能比價」,簡單來說,很多免費圖庫的相片品質參差不齊,有些甚至還有濃濃的「圖庫感」,Everypixel 就是透過機器學習和類神經網路技術,讓程式自動幫我們篩選掉一些一看就不會想使用的相片;後來還推出另一個「Everypixel Aesthetics Tool」由使用者上傳相片,交給機器幫你判斷這張相片究竟夠不夠吸引人。
網頁開發
Squircley 線上 SVG 圖片產生器,可製作圓形、正方形或方圓形彩色圖片
Svg Wave 線上製作波浪背景圖,調整波峰數或高度產生 SVG、PNG 格式
對於一般內容網站來說,為了使頁面內容有好的可讀性,可能會維持網頁底色為白色或單一顏色,但如果是網路服務或應用程式,想讓背景活潑也能加入變化,例如 Hero Patterns、Background Image Generator 或 SVG Backgrounds 產生紋理材質背景,既不會太過混雜又不像單一顏色這麼無趣,在維持網頁效能的情況下只要透過 SVG 或產生小張 PNG 圖片,以 CSS 方式載入就能自訂背景。
CSS Background Patterns 免費背景圖產生器,可建立純 CSS 背景素材
想想後來的網頁比較少有背景圖需求,多半都是以單色為主,如果覺得略顯單調,也能使用紋理材質或漸層色做為背景,例如 Paper-co 就有許多日系的紙張紋理材質可用做背景,不僅看起來可以提升質感,也不會影響閱讀造成負擔,另一個之前推薦過的 Subtle Patterns 也有超過 500 種紋理素材可供下載;若喜歡重複背景圖 Hero Patterns 可以在不下載任何檔案情況下產生好看的平鋪式背景圖,或是使用 ColorSpark、Gradient Backgrounds 製作漸層色背景,需要背景圖的朋友可以試試看這些服務。
Screenshot Rocks 線上製作帶有瀏覽器或手機外觀的網頁擷圖
如何製作出上圖帶有瀏覽器外框的網頁擷圖畫面呢?可能很多人會選擇打開網頁,將視窗調整到適當大小後擷圖即可,這個答案好像也沒有錯,只是相較於使用 Mockup 工具來說會更費時費力,其實只要透過像是 BrowserFrame 或 Mobile Mockup 就能在輸入網址後快速製作出模型圖,看起來會比自己擷取還要更有質感。如果是 Mockup Photos、Smartmockups 還能直接套用免費圖庫提供的高品質相片,免費資源網路社群有一部分的文章首圖都是以類似工具處理,看起來很自然而且能提昇質感。
everysize 輸入網址就能測試響應式網頁在各種裝置尺寸的顯示效果
現在很多人是透過智慧型手機或平板電腦瀏覽網頁,在網頁設計上就要考量到如何讓不同尺寸螢幕大小也能正常顯示,以往會製作成電腦版和手機版兩種格式,後來多半以響應式網頁設計(Responsive web design)技術直接在不同尺寸螢幕上顯示最適合的樣式,更重要的是可以節省維護的成本和時間。想測試自適應設計在各種裝置顯示情形,除了直接使用手機瀏覽外,其實也有不少工具可以輔助,像是 Responsive Viewer、ScreenDump 或是 Responsive Screenshots。
Screenshot Tracker 擷取並追蹤網頁長截圖,測試在不同裝置顯示情形
網站開發者經常需要測試網頁在不同裝置、螢幕大小的顯示樣貌,以前會針對行動裝置另外製作一個行動版,現在比較普遍作法是使用響應式網頁設計(Responsive web design,簡稱 RWD),可自動調整為最適合閱讀的大小,但這些開發過程可能都得借助於測試工具幫忙,例如瀏覽器外掛程式 Responsive Viewer 可在單一頁面查看不同螢幕大小裝置的顯示樣式,或是透過線上工具 ScreenDump 預覽網站在不同尺寸螢幕顯示效果。
Detailed SEO Extension 快速得知網頁的搜尋引擎最佳化相關資訊(Chrome 擴充功能)
通常在網站流量出現變化時網站管理者會去探究原因,如果你的訪客多為來自搜尋引擎的自然流量,有很大機會是搜尋引擎排名下降或類似問題,當然各家公司使用的演算法技術是商業機密,但通常都圍繞著一些大原則,像是被我視為最重要的 Google 搜尋引擎最佳化入門指南就是最核心的參考書,當中有提到使用正確語法清楚表達網頁資訊。