Startup – 零程式碼,免費 Bootstrap 網頁設計及架站平台優缺點分析

有沒有比 WordPressWixWebflow 更簡易的網頁架設平台嗎?

Startup 是初創人士和網頁設計新手的理想架站平台,以採用 Bootstrap 前端框架構建網站而聞名。透過網上編輯器加入網頁模板,半小時內即可擁有漂亮實用的響應式設計 (RWD, responsive web design) 網頁,一行程式碼也不用寫。2021 年 11 月初,平台迎來新版本 Startup 5,以配合 Bootstrap 最新一代的框架,架構更精簡流暢。

平台功能簡介

加入網頁模板

整個設計都在 Startup Builder 上進行。先根據網頁的內容類型和篇幅,從左欄選擇並加入所需的網頁元素和模板到網頁上。

Startup 提供多達 150 多個網頁元素模板,涵蓋常用元素如導覽列、聯絡區,以及用途具體的如價目表和應用程式展示頁。每個元素都有多款設計及深淺色版本可選。模板典型泛用,適合不同類型的網站。

編輯器介面

如要修改文字或圖片,先在中間的介面選取要編輯的元素,然後在右欄編輯。

中間:網頁佈局,點擊按鈕將元素上移、下移或刪除。
右欄:修改元素屬性,如文字、圖片、間隔、背景、HTML 標題語法、進場動畫等等。
左欄:指定區域 <section> 的元件圖層列表,可複製、移動及加入網頁元素,如彈出式視窗,日後將會補齊更多元素。

在左欄可打開並加入個別元素

編輯圖片

介面提示每張像素圖片需要兩張圖檔,分別是標清 (1x) 及高清 (2x,標清兩倍大) 尺寸,以符合 retina 高清螢幕的開發標準。這段程式碼很容易被忽視,但在視覺介面中就顯得明暸易用。此外,介面亦有欄位寫上圖片替代文字以改善 SEO 及幫助視障人士理解圖片。

至於 SVG 圖示,鑑於目前無法上傳 SVG 檔案,因此需要貼上 SVG 程式碼,這一點不太方便,但下方有選項可改變圖示的背景和線條顏色,這是在其他平台少見的便利功能。

根據 Breakpoint 設定元素

部份設定能夠針對不同的裝置視窗闊度,亦即 breakpoint 去佈局。例如,如果網頁在桌面電腦上顯示,會需要較多的間距,但在手機上則不然,所以我們會根據 breakpoint 做調整。

以上例子所示的 XXL 代表 viewport 達 1440px 或以上的裝置。

其他平台傾向預覽指定的 breakpoint 時做調整。雖然這裏你要切換螢幕尺寸方可預覽,但好處是所有 breakpoint 的設定一目了然,不必跳來跳去。

全站風格樣式

當今網頁設計重視網頁元素及視覺上的一致性,Startup 提供簡單的設定助你輕鬆實現。

當沒有選取頁面元素時,右欄顯示全站風格樣式設定,包括字體、顏色及頁面捲動時的動畫。這些都是全局設定 (global settings),因此會影響目前網頁及整個專案/網站的元素。

如果你對網站的風格沒有頭緒,你可嘗試從右上方的 5 種預設風格中選擇,頁面的字體和顏色會相應改變。這些設定都很直觀,但要注意:

  • 字體:支援多種語系的 Google Fonts,可以先選語系,後選字體,但沒有繁體中文可選(可能 Google Fonts 的繁體中文字體太少了)。
  • 顏色色塊有涵義:例如,Action 組別是以 Action 1、Action 2 命名;深淺色文字的三個色塊分別代表主色(主要文字)、輔色(次要文字)和禁用色 (disabled),所以別隨便選色。

匯出 HTML

一旦完成網頁設計,你可以從頂部工具列點擊「預覽」,打開預覽頁面。如果沒問題,就可以一鍵「匯出」網站。這包括專案的所有網頁和資源,如圖片、JavaScript、CSS、SCSS、HTML、PHP 等。

  • 用戶需升級至收費方案方可匯出。
  • 匯出只適用於靜態網站*。對於電商或表單,建議先匯出網頁,然後根據文檔修改程式碼。文檔有與電郵、Telegram 和 MailChimp 相關的整合指引。

根據產品路線圖,平台日後將與 static.app 整合,有望一鍵發佈及托管網站,而毋須額外匯出。

*靜態網站:網站內容固定不變,顯示的內容完全反映 HTML 的程式碼。

分享設計成果

在專案介面可取得個別網頁的分享連結。打開連結並登入平台後,可以看到編輯介面,但這與常見的分享不同,它不是公開的頁面預覽,因此較適合與有登入帳戶的同事分享連結。

為甚麼要用 Bootstrap 做網頁?

沒有哪個前端工程師或網頁設計師不認識 Bootstrap 這把萬用刀!它是目前最受歡迎的開源前端開發框架。它使響應式網頁開發變得簡單,有齊全的組件和程式碼,並且易於維護,使開發更有效率。Startup 採用 Bootstrap v5.1 建立網站,支援 Bootstrap 5 的所有組件,所以工程師會發現相當容易承接專案。

方案收費

雖然免費方案讓你免費建立網頁,但你仍然要匯出網頁才能讓網站上線,所以無論如何你都需要升級至付費方案。說白點,免費方案其實是個讓你體驗一下編輯器的試用方案。付費方案則可以讓你使用提供的所有網頁元素,而 Business 和 Agency 兩種的付費方案的分別在網頁匯出的次數,前者每月最多 20 次,後者則無次數限制。

總結

優點

  • 介面比其他平台更易用直觀。視覺化的編輯介面令你毋須寫程式碼也可製作網頁。
  • 提供多款泛用模板,能在半小時內建立不花巧,打「安全牌」的響應式網頁。
  • 附隨機和預設的功能,幫助用戶做決策。例如隨機放置指定數量的模板、隨機顏色組合、預設風格樣式等。
  • 以 Bootstrap 開發框架建立網頁。

缺點

  • 部份功能欠缺提示較難發現,無法拖拉元素或圖層來排序元素,介面的易用性有待改善。
  • 較少自訂功能,不適合定制設計的網站
  • 不支援/不適合製作動態頁面。雖然有電商模板,但實際只能實現介面設計的部份。

與其他平台相比,Startup 比較容易上手,因為它沒有很多自訂和花哨的功能,適合需要快速出品和簡單佈局的網站,如着陸頁、活動頁和產品頁。在功能和價格方面,Startup 的功能較少,相比之下不算便宜。如果你只是建立一個簡單的網站,但覺得 Wix、WordPress、Webflow 等平台太複雜,介面不夠直觀,或者你沒有充裕的開發資源和時間,而你的工程師習慣 Bootstrap 框架的話,那麼不妨一試。

我從 Startup 4 開始使用,但不是用來架站,而是作為設計靈感的參考或指導設計師。Startup 的版型很基本、通用,是一張「安全牌」,所以如果你有興趣,也可以參考一下。

Startup Framework by Designmodo

Startup – Free Bootstrap Builder for Templates & Themes
https://designmodo.com/startup/