阿腸網頁設計工作室 – 2014 全新改版,部落格搬家、網頁設計

久久未發文,突然不知道第一句話該怎麼寫?揮別了以往會在年底發表的回顧文,直接來到了2014年發表第一篇部落格文章,因為最近比較忙,少了很多時間可以撰寫文章,手邊也好多東西delay中。不過剛好看到今天外面的好天氣,突然想說來寫篇2014的第一篇文章好了!就從年底前默默規劃改版的阿腸網頁設計工作室官方網站作為序。

記得去年初春公開的阿腸網頁設計工作室官網嗎?就是一個大紅色的搶眼色系,採用滾動式的滑動,全站只有一個頁面,不過最近也做了一個大幅度的調整,直接變成一頁頁的網頁,除了讓瀏覽動線上更好,色系部分也改為比較舒服的配色,希望家可以在網站上停留久一點、閱讀上可以舒適一點,順便讓網站多一點點PV。


這次的官網嘗試透過Sass+Susy的方式撰寫,為了之後的RWD響應式網頁設計,讓各螢幕尺寸都可以正常觀看,同時也可以加快網頁的開發速度,不過礙於時間關係,暫時還沒有對手機板做調整,等過年有時間一口氣補完好了XD。在特效的使用上,比起上次少用了很多jQuery,大量使用jQuery對於用戶的瀏覽體驗雖然比flash好(跨平台),但是相對的會造成用戶瀏覽器資源吃重、CPU吃重等問題,因此大部分的特效能使用CSS3替代的就改用CSS實現,至於舊版瀏覽器不支援CSS部分,則是盡量讓他可以看為主,版面部分還需花時間做些微調。

首頁上方採用大圖輪播,讓使用者視覺完全聚焦,這些首頁上方大圖輪播,展示的不只是漂亮的圖片,而是我們的部分作品集。去年無名宣布關閉,我們接手不少的部落客搬家,並協助幫助他們無痛轉移、快速上手WordPress部落格,同時也替他們網站進行客製化開發與網站優化、部落格人氣轉移等。

阿腸網頁設計工作室 – 2014 全新改版,部落格搬家、網頁設計

首頁

在前端UI設計工,因對初次嘗試Sass + Susy,光是對column的規劃就花了大半的時間,以往用像素去計算位置一時間要轉換還要磨合一下。不過抓到感覺之後,後面在版面規劃上都比較快。下圖是首頁的下半部分。網頁結構上也是使用HTML5的語意化結構。

阿腸網頁設計工作室 – 2014 全新改版,部落格搬家、網頁設計

網頁設計

網頁設計的部分,我們主要採用 WordPress 作為基底,進行網頁客製化版型、功能開發,我們不購買國外版型來修改,一律依照客戶需求進行客製化開發,同時會對程式進行優化,讓你的網站可以在我們的虛擬主機上,達到最棒的呈現效果與瀏覽速度。

作品瀏覽

作品瀏覽部分,如同前一版的設計,也是採用CSS不過這次直接手刻效果了,並搭配上CSS3的動畫效果「CSS3 transition」來達到漸變的特效。區塊的排版上則採用了Susy的欄位設定,把網頁區分為12欄,每一個作品集使用4欄進行排版,完全不用拿計算機算半天,一整個很方便。不過在位置的設定上因為Susy是用了CSS3的「nth-child」,有些舊版瀏覽器無法辨識,就會造成版面跑掉了XD。不過Chrome、Firefox、IE9以上,都可以正常運作。

阿腸網頁設計工作室 – 2014 全新改版,部落格搬家、網頁設計

免費版型

去年我們推出了3個免費的WordPress佈景主題供大家分商業性的免費使用,如果你還沒跟到的,別忘了來測試使用一下囉!佈景主題一律採用CSS3 + HTML5 的結構進行規劃撰寫,採用 WordPress 最新的語法進行開發,讓你的網站保持在安全的狀態上。內建社群功能,讓你功能內建不需安裝一堆消耗資源的外掛,只要安裝好佈景就通通幫你Ready!

阿腸網頁設計工作室 – 2014 全新改版,部落格搬家、網頁設計

2012年中剛好碰到了無名、Yahoo部落格關閉,認識了不少不同的部落客圈的朋友們與加入WordPress部落格圈的朋友,2014年當然希望有更多的使用者可以體會到自己架設網站的美好與優勢,就是打造出完全屬於自己的部落格平台。仰賴在BSP雖然是個安全的保護,就很像小孩子依偎在媽媽身旁受到呵護,但總有一天小孩也是需要成長獨立的