網站建設

大多數web設計師知道 嘗試設計 以及它如何極大地影響 響應設計 。 但有另一種方法可能不太受歡迎,但可以以更清晰的方式解決問題。

desktop-first方法您可以構建所有你想要的功能,創造最高的規格。 當你在小型設備上測試你會專注于保持界面光同時支持盡可能多的“高端”特性。

這個工作流非常不同,但從桌面可以更好的web設計師創建功能豐富的設計。

Desktop-First的好處

技術上“desktop-first”是傳統的方式,每個人都做了網站直到響應時代。

現在許多人談論手機第一但有很好的理由堅持桌面的方法。 我經常喜歡從桌面設計當我知道我的網站會有很多大屏幕的詳細功能。

這里有一些好處desktop-first意識形態。

• 你可以看到所有的主要功能

• 它可以讓你想象所有設計的最大可能性

• 這是最好的策略,如果你的聽眾主要使用臺式機/筆記本電腦

當你想到現代的網站 推特 你認為移動。 但是他們有很多額外的功能,隨著桌面體驗。 這些桌面用戶明顯得到提高用戶體驗,是任何其他設備一樣重要。

當然不可否認,手機是很重要的。 最近手機使用 超過了桌面 這是絕對存在。

但功能豐富的網站通常依靠一個強大的桌面設計。

這也許是最大的好處desktop-first布局。 你可以看到這個網站 因為它應該 所有的鐘聲和口哨聲。 這些配件可以(而且應該)被刪除為小屏幕你測試和發現某些特性不延續。

看這另一種方式是通過簡單的設計中領跑。 當您創建與移動第一你是天生的從最簡單的功能,然后添加額外的大屏幕。 但它真正的容易忘記特性或只是缺少合適的計劃來決定他們應該去哪里或如何功能。

嘗試方法很容易考慮動態特性更像是馬后炮。 但desktop-first方法你把這些特征作為主要的顯示方法,然后根據需要選擇刪除它們。

沒有完美的選擇所以我建議嘗試看看你喜歡什么。 如果你像我一樣,喜歡豐富的桌面體驗然后開始你可能會喜歡那里,較小的工作。

支持所有瀏覽器

最棘手的部分desktop-first設計是處理瀏覽器支持。

杭州網站建設就十幾二十年前只臺式機和筆記本電腦市場。 噸的智能手機革命改變了所有的移動瀏覽器iOS、Android和其他專有設備像黑莓。

最老的瀏覽器缺乏支持現代桌面元素,如畫布,音頻/視頻和動態輸入。 但是很多 已經改變了 近年來。

現在基本上是合理的對所有移動瀏覽器支持桌面瀏覽器一樣的特性。 現代瀏覽器也呈現大多數元素相同的方式所以你不會處理 呈現的問題 過去的。

最大的差異不是HTML / CSS支持,而是在觸摸式的支持。

手機屏幕小得多,他們也需要用手指了。 鼠標更精確而人類手指,更不用說桌面屏幕更寬敞,更容易看。

時,從桌面到移動是至關重要的考慮不同的瀏覽器是如何工作的,他們支持什么,如何處理用戶的觸控操作。

幾好規則考慮而按比例縮小你desktop-first設計:

• 使tappable元素更大

• 增加主體文本大小所以更容易利用的鏈接

• 添加JavaScript庫,支持滑動運動

你可以隨時檢查 HTML5規范 所有瀏覽器看到哪些元素支持的瀏覽器。 但是大部分觸摸輸入是一個普遍的事情,所以desktop-first是一個偉大的解決方案如果你注意移動體驗。

你可以找到很多免費資源 TouchSwipe 添加支持觸摸和滑動手勢所有網站。

你可以 使用JavaScript 檢查瀏覽器的尺寸或者移動操作系統iOS或贏。 這個信息你可以加載額外的樣式表和創建一個完全不同的經驗與觸摸/滑動事件,只適用于移動用戶。

從功能的列表你知道你會希望在你的網站上。 組織所有新的CSS3屬性,新的HTML5元素,任何可能與瀏覽器支持問題。

然后查找所有你想要的瀏覽器支持考慮如何處理回退和polyfills。 隨著時間的流逝老版本瀏覽器將逐步淘汰,瀏覽器支持將變得容易。 這使得desktop-first設計更強的理由,因為渲染引擎將接近相同。

學習更多和更深入地看看這些移動交互相關的指南:

• 多點觸控Web開發

• 支持所有移動瀏覽器之間的比較

• 如何處理:懸停在觸屏設備上

優雅降級(以及為什么它重要)

的過程 優雅降級 看著更高級的技術。 這意味著你建立你的網站最大的所有功能在網站上所有你想要的,然后如果你回復其他瀏覽器不支持他們 回退的方法 。

這種策略的一個常見的例子是刪除下拉滑動菜單移動。 因為智能手機用戶不能懸停菜單鏈接隱藏hoverable菜單是有意義的,而是創建一個撥動開關或一個 隱藏的漢堡菜單。

然而這并不是嚴格的優雅降級,而用戶體驗的變化。 而不是你正在尋找JS函數或CSS3屬性 不能支持 在一個特定的瀏覽器。

這些你需要找到一個polyfill或回退,創建了一個不那么迷人的經驗,但仍然適用于用戶。

看看 這個列表 由W3C的例子。 它涵蓋了詳細優雅降級可能會幫助你在正確的軌道上移動。

謝天謝地,因為大多數現代瀏覽器支持JavaScript, HTML5視頻和畫布元素所以你真的沒有限制。 最棘手的部分是遺留支持過時的瀏覽器。 然而這個市場正在迅速縮小,你可以通過研究計 市場份額 。

如果你運行谷歌分析可以研究 所有的瀏覽器和操作系統的 從你的觀眾看到這是最受歡迎的。 如果沒有人使用IE7瀏覽你的網站為什么支持嗎?

每個問題你解決不同所以把它一次。 依賴于網站 我可以用 來衡量你需要處理什么類型的支持。

當桌面將優先

您可能想知道當desktop-first是適當的。 這應該是你的每個項目的默認策略嗎?

也許吧。 但我認為這最終效果最好,當你設計一個地方 桌面優先于移動 。

如果移動體驗可以非常簡單,但桌面體驗需要詳細的和動態的,我說小從桌面和開始工作。

如果你總是喜歡工作從桌面和移動小那么你會得到一個本領的過程,它可能會成為你的默認。 這很好,因為它仍然會導致偉大的結果。

只要確保你有一個計劃為移動網站至少有一個模糊的想法會。 一些草稿 線框圖 對于這兩種觀點都只是為了給自己一個起點。

一個強大的桌面方法的一個很好的例子 Mashable 。 他們的實際大小的網站跨越1440 px寬,包含3列與一個巨大的新聞 大型導航菜單 。

Mashable看起來很棒在移動,但是你可以告訴桌面版不是馬后炮。

等大型網站也一樣 YouTube 用戶體驗的觀眾的需要。 和響應時代不僅僅是“桌面”或“智能手機”。

您還需要考慮平板電腦,小的上網本,筆記本電腦都有不同的屏幕尺寸。 Desktop-first幫助您構建一個經驗,適用于大屏幕首次通過專注于每一個可能的功能。

然后你可以削減的細節完善你的界面,所以作品無處不在。

結束

杭州網站建設通常從desktop-first角度構建我的項目,因為它幫助定義限制。 你可以選擇這個網站有多寬,使用什么樣的網格系統,你需要什么樣的特性。

但是如果你愿意嘗試的方法這是完全有效的。

辯論的一種方法是艱難的,因為每個人都有不同的工作流和他們都有優點和缺點。發現只要你覺得適合,使工作對你有利。