CTK pro

關於 CTK PRO:於2011年夏天展開了偉大的航程,初期以開發手機APP為主,2013年開始跨入Web開發,2015年開始用UCD(User-Centered Design)方法協助客戶釐清需求, 2016年大量採用AWS架構, 並導入策略UX產品為客戶在軟體開發各環節破關!

back to top

給客戶看的網頁設計(五)壓縮圖片!節省 60% 以上的空間,加快網頁速度

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1573019316804{padding-right: 10% !important;}"]2019 網頁大小已接近 4MB,是 2016 的 2 倍,比起 2011 更達到 4 倍以上。歸功於頻寬、4G 網路的普及,載入網頁的速度沒有像網頁大小一樣呈倍數成長,但隨著預期心理提昇,人們瀏覽網頁時等待的耐心變得比以往更少了! (圖片來源) 雖然網頁速度不是最直接影響到網頁成效、SEO 的項目,但一般通則是超過「3 秒」,使用者就很有可能跳出正在讀取的頁面。之前 CTK 小記也講過許多優化網頁速度的文章,要檢測網站速度,可以使用 Google PageSpeed Insights 或是 GTmetrix 來找出拖慢網站速度的原因,加以改進。 今天和大家談的,是最簡單,卻也最重要的調整:「適當的圖片」。 這裡只說到圖片,是因為包含圖片尺寸(解析度)、檔案格式、壓縮比例。牽扯到 SEO 等還關係於 alt 項目設定等等,就先來看最重要的「圖片大小」:[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="最簡單卻也最必要的調整:輸出適當的圖片" title_font_size="26"][vc_column_text css=".vc_custom_1573019451650{padding-right: 10% !important;}"]企業好不容易請了商業攝影師,拍了漂亮細緻的形象圖、示意/空間圖,要放到官網,呈現產品或企業形象概念,卻常顧慮:「我放這麼小的圖,不會看不清楚嗎?」(網頁設計公司都會提示:「圖片大小在 100kb 內為佳,卻常常收到用雲端空間傳來一張 10MB 的圖檔...

13 個網頁文案與響應式網頁設計密不可分的關係-為何要先思考好文案再建網頁

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20502" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1571734394823{padding-right: 10% !important;}"]響應式網頁設計(RWD)已是現在網站不可或缺之理念。只是,網頁文案隨螢幕解析度切換的閱讀體驗,全都靠網頁設計公司的技術,就可以克服了嗎? 網頁設計公司:「當然沒問題!」「只要把文案準備好,程式判斷過目前瀏覽裝置的寬度後,就會自動幫你斷行 了!」 客戶:「等等,文案那個『了!』可以不要換行嗎?這樣看起來很怪,可不可以幫我斷行在『自動』兩個字前面?」 網頁設計公司:「可以啊,先跟我說一下你現在視窗的解析度,再來是,若使用者用更大或更小的螢幕瀏覽,可能會看起來怪怪的喔?」 客戶:「...

給客戶看的網站設計(四)5 個網頁設計不可容許的錯誤

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20480" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1570006215184{padding-right: 10% !important;}"]一般來說剛設計好的網站上,不太會出現錯誤(因為網頁設計公司一定會提供測試機讓你檢視,自行上稿的內容錯誤除外)。但以下這些網頁設計錯誤,讓使用者看到了,可能非常惱火,嚴重者會降低網站的信任感、專業度,或者覺得網站許久沒有更新、維護,進而對公司抱持保留的態度。 ☛ 看看投資人怎麼看待企業官網[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="失效或者錯誤的連結!" title_font_size="26"][vc_column_text css=".vc_custom_1570066036052{padding-right: 10% !important;}"]尤記得前一陣子韓國瑜 Line 官方帳號,發佈雨量報導的連結時,意外導向激情內容,頓時間鬧的沸沸揚揚。錯誤的連結容易造成使用者「認知失調」(cognitive dissonance),閱讀內容時容易心生反感,嚴重者影響到連結、網站的聲譽與信任度,在設定超連結或網站導覽按鈕等連結時,務必小心檢查。 失效的連結則容易讓人感受到網站建置不完全,或是設計上有缺漏。俗稱 404 頁面代表伺服器無法提供訊息或伺服器無法回應等問題,一般可能是網站讀取失效、URL 設置錯誤等問題產生。常常也因為頁面 URL 更改、移動後,使用者透過就的連結進入頁面而看到。 維護使用者感受的作法有很多,除了客製化 404 頁面外(上圖即為例子,還有引導回首頁的按鈕),彈出通知視窗、採用 301 永久轉址,導向首頁或相關頁面,都是合宜的作法。 進一步更要偵測誰透過哪個 URL 進入官網的 404 頁面,藉以追蹤可能的使用者情境,或設定相關轉址讓網頁瀏覽更有連貫性。 ☛ 維基百科中有關 HTTP 404 的描述[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="錯字!" title_font_size="26"][vc_column_text css=".vc_custom_1570065463681{padding-right: 10% !important;}"]你說錯字?!沒錯,就是錯字! 上搞的肉容,和綱站美感決對是大有關系(上面這段文字,是不是怎麼看都不舒服呢?)。 不管是客戶自行上稿,還是由網頁設計公司代為上稿,一旦重要的頁面(尤其像首頁、關於我們、企業理念等處,更不能有錯字出現)出現錯字,網頁設計的再好看,整體素質還是會被大打折扣。[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no"...

行動優先網頁設計與響應式網頁設計?你選哪一個?

BLOG日誌內其實已經介紹過許多 RWD 網站設計的訣竅,像是表格與 RWD 的愛恨情仇,Youtube 嵌入影片 ifram 的 RWD 調整方式,都是現代網站必須的。不過!就是這個 but ,到底我們是從原始人的觀點(網路世界五到十年應該算是夠原始了吧?),真的所有的 Responsive Web Design 都符合行動優先(Mobile First)的思維嗎?...