奔跑吧!台北,玩過了嗎?

最近把「北市府三週年政績報告」這個大魔王解決了,這塊讓我睡不好的大石頭總算放下。

這次專案分成三大項目:社群遊戲、政績網站、動畫,我在遊戲與網站都參了一腳,過程辛苦卻也收穫滿滿。

沒玩過嗎?遊戲在此~ https://game.glory.taipei/

這次不怎麼下去寫 Code,管理的工作倒是做了不少,特別是遊戲部分讓我獲益良多!所以就花點時間整理這次管理心得,做個紀錄,說不定能讓新手 PM 少繞一些路。

先簡單介紹自己,我在簡訊設計擔任 RD Leader,主要做 Web 前後端開發與系統維運,有時會客串其他職位例如 PM。

這篇文章將告訴你這些事:

專案開始前:記取經驗,做好準備

公司在 2017/02 對外發表了「全能古蹟燒毀


這篇文章試圖讓不會寫 Code 的人,花最少力氣理解如何實現 Responsive Web Design

Intro

RWD 是一種網頁設計類型,中文翻作“自適應式網頁設計”

目的在於讓一個網頁能在不同大小的螢幕都有及格的體驗

模式/策略

RWD 發展至今,已有很成熟的模式可以參考,遇到問題,翻一翻幾乎可以獲得解答。這些模式不外乎以下幾種策略

還需要知道的事情

儘管我說的雲淡風輕,若你完全不懂網頁,還是會做出令工程師痛苦的設計

元件順序

頁面上的所有東西,我們都叫他 DOM(Document Object Model)

每個 DOM 彼此之間連結,可以用樹狀結構表達,我們叫它 DOM Tree

DOM Tree 示意 https://docs.expressionengine.com/

DOM Tree 的顯示順序規則是

所以,上圖會顯示的字就是

“Look at”

“me”

“still talking”

“when there’s Science to do!”

在最通用的 static 定位下,這樣的順序是無法改變的

同行問題

知道這個順序後,接著來談瀏覽器如何渲染

看圖…簡單說,換行時必定同高。

所以,以下兩張圖用了完全不同順序的排列

詹致遠

資工畢,誤入設計業,曾任 RD、MIS、IT,近期增加了 PM 技能,稱職工具人。興趣是音樂跟找尋有趣的故事。

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store