響應式網頁

響應式圖片(Responsive Images)

在行動裝置上關於圖片常遇到圖檔體積過大或解析度不佳等問題,這些問題可經由選擇適當的圖片格式、壓縮、設定適合的尺寸、依照解析度提供適當的圖片來解決,本文要探討的是如何在 HTML 上使用 picture 與 img srcset sizes 來讓瀏覽器根據自身環境選擇適當的圖檔。

圖片最佳化 效能調校 加載效能 Image Optimization Loading Performance 響應式網頁 Responsive Web Design Media Query · 留言


如何做圖片壓縮?

記錄圖片壓縮要做的事情、推薦圖片壓縮和效能檢測的工具。

圖片最佳化 效能調校 加載效能 Image Optimization Loading Performance gulp Lighthouse 響應式網頁 Responsive Web Design 吃什麼 · 留言


活動咖手機版網站上線了 - 活動平台行動裝置網站或 App 設計的現狀探討與改進

這陣子剛好在幫活動平台網站-活動咖 EventPal 設計 + 製作行動裝置版網頁,因此參考了不少前輩的作品 - Accupass、KKTIX、Pinkoi、friDay 等。在這裡記錄一些我對這些網站的想法,還有我們家產品所遇到的問題和設計的功能、解法。

SEO Responsive Web Design 搜尋引擎優化 響應式網頁 · 留言


Responsive Patterns: Layout

Responsive Patterns 是一個蒐集響應式設計與實作的元件庫,舉凡 Layout、Navigation、Forms、Carousel、Tabs、Accordion 和 Lightbox 等皆有,很適合當成學習教材。先來玩玩 Layout 吧 - 分成這幾類:Reflowing、Equal Width、Off Canvas、Source-Order Shift、Lists 和 Grid Block。

響應式網頁 Responsive Web Design Media Query css · 留言


利用 Bootstrap Grid System 排版的學習筆記

利用 Bootstrap Grid System 來排版真是一個方便的方法-若頁面上有許多小方格會隨著解析度而有不同的排列方式,就很適合用 Grid System 來排版。

Bootstrap Media Query 響應式網頁 Responsive Web Design css · 留言


使用 Bootstrap 建立一個 RWD Template(Twitter Bootstrap in Responsive Web Design)

使用 Bootstrap 建立一個 RWD Template 的筆記。

Bootstrap 響應式網頁 Responsive Web Design Media Query · 留言


響應式網頁(Responsive Web Design)實作筆記

響應式網頁(Responsive Web Design)是一種設計概念,希望能讓網頁適用在不同的平台上。公司最近想對產品大改版,於是又來練練 RWD 摟!

響應式網頁 Responsive Web Design Media Query · 留言