萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 20個增強網頁兼容性設計的實用工具

20個增強網頁兼容性設計的實用工具

20個增強網頁兼容性設計的實用工具 三聯教程

Cover Photo by: Wang Qi@DamnDigital

互聯網時代,人們利用各種設備上網:筆記本電腦、上網本、平板電腦、智能手機,甚至電視機。這些設備的屏幕和問題解決方案都各不相同,因而很難創建一個適用於所有這些設備的網站。

不過,還是有解決方法的。兼容性設計 就是為適應不同尺寸屏幕的整改設計。如果你想創建一個增強網頁兼容性的設計,你就需要應用fluid grids,圖像以及queries。繼之前發布的18個較強的兼容性網頁設計案例後,這次與讀者們分享的是20個增強網頁兼容性設計的實用工具。

Golden Grid System

Golden grid system 是為增強網頁兼容性設計的折合式grid。他有四個特征:列,跨頁,底線,script。

Lettering.JS

這是jQuery針對基本網頁文字處理技巧的一個插件。Lettering.js,擁有如下功能:字距調整型字體、編輯創意設計、可管理代碼,用戶完全可以簡單操控。

FitText

FitText可隨意調整字體大小。這款插件可以使兼容性網頁頁面布局突出大標題,主次分清。

Fluid 960 Grid System

Fluid 960 Grid System 的模版是根據Nathan Smith之前的作品而創建的。即960 Grid System:傳承了MooTools和jQuery JavaScript libraries的效果。

Gridless

Gridless可使用戶輕松應對兼容性網站。它是以HTML5和CSS3代碼為首選的優先兼容手機的插件,且支持文字處理佳的跨浏覽器網頁。

Skeleton

Skeleton 是一個小的CSS & JS文件集,可以讓用戶迅速設計好網頁:無論什麼尺寸的屏幕,看起來都很不錯,比如17寸的筆記本電腦屏幕或者iPhone。

Responsive Design Testing

只要輸入這個網頁地址,就可以測試任何尺寸的浏覽器。

PX to EM

這是一個為用戶設置EM字體量身定制的計算工具。用戶只要選中相應的PX字體,就可以即時轉化為相應的EM大小的字體。

BluCSS

BluCSS是一個使用簡便且易記的CSS framework。當用戶進行下一個項目設計時,不必擔心之前必要設計元素的遺漏。

Seamless Responsive Photo Grid

假設用戶想在網頁上同時展示很多圖片,而且要求圖片間無縫連接。 Seamless就可以做到。詳情請進本站。

SimpleGrid

SimpleGrid 針對的是4個尺寸的屏幕:720像素,大於720像素,大於985像素,大於1235像素。這就是說當用戶訪問網頁時,頁面大小會自動切換到其各自浏覽器窗口的大小。SimpleGrid帶你告別橫向滾動條。

Adapt.js

Adapt.js是一個縮小為826字節的JavaScript文件,用於選定浏覽器運行頁面前要加載的CSS文件。如果要使浏覽器tilt或者重新調制大小,Adapt.js 會在必要時僅僅檢查屏幕寬度,提供必要的CSS。

Fluid Images

在這裡,你會找到很多與fluid images有關的實用信息和模范代碼。

Convert a Menu to a Dropdown for Small Screens

當浏覽器窗口很窄時,右上方的菜單欄會從常規的連接行轉變為下拉式菜單。具體方法,詳見本站。

resizeMyBrowser

resizeMyBrowser是一款測試兼容性網頁設計的完美工具,讓用戶輕松重置浏覽器大小,一站式體驗時下最流行的尺寸或者個性化定制。

Responsive Table

所謂兼容性設計就是為適應不同尺寸屏幕而進行的整改設計。同時數據表足夠寬,用戶絕對可以找到理想的問題解決方案。

Columnal

Columnal CSS grid system 混合了標准代碼和個性化代碼。這款grid system部分代碼借鑒於cssgrid.net,還有些代碼靈感則來自於960.gs 。Columnal使兼容性網頁設計更加簡便。雖然它的屏幕寬度是1140像素,但是因為采取了fluid設計,所以Columnal可以兼容大部分浏覽 器的寬度。

1140 CSS Grid

1140尺寸的 grid與1280尺寸的顯示器完美匹配。如果顯示器再小點,就會呈現fluid grid且會自動調節為浏覽器的寬度。另外1140 grid應用了media queries以支持移動浏覽器,這樣可以將所有信息列同時置頂,保證了信息的可讀性。

Mobilize.js

HTML5 和Javascript framework可使網頁實現移動化。網頁開發者通過Mobilize.js可將現有網頁創建為移動式網頁,且自動檢測移動浏覽器,同時還支持 iPhone, Android, Blackberry, Opera Mini等很多其他浏覽器及設備。

Adaptive Images

Adaptive Images可將小圖像傳輸到小型移動設備上。它的嵌入式解決方案會自動創建、捕捉、傳輸設備偏好版圖片,而不需要額外改動圖像。

來源:DesignWoop

編譯:Antonia Huang@DamnDigital,(轉載請注明來自DamnDigital)

copyright © 萬盛學電腦網 all rights reserved