網(wǎng)站設(shè)計(jì)

Website development

要訪問的響應(yīng)式網(wǎng)頁設(shè)計(jì)

發(fā)布時(shí)間：2017-01-04 10:04:35

訪問的網(wǎng)站是支持所有的瀏覽器類型和所有殘疾人用戶。這對(duì)W3C是一個(gè)很大的話題，它是在每年的普及。

無障礙設(shè)計(jì)是困難的。有很多目標(biāo)要求考慮。但即使是在正確的方向上嬰兒的步驟，可以使一個(gè)不同的世界。

本指南中的我想考慮可達(dá)性的價(jià)值，它涉及到響應(yīng)式設(shè)計(jì)。大多數(shù)網(wǎng)頁設(shè)計(jì)師與響應(yīng)的布局可以去了，所以如果你可以添加到您的工作流訪問你會(huì)達(dá)到一個(gè)更廣泛的觀眾。

響應(yīng)式設(shè)計(jì)原則

一個(gè)響應(yīng)式布局的目標(biāo)是在每一個(gè)設(shè)備的功能。無論屏幕大小和分辨率，你應(yīng)該總是使用快速響應(yīng)的設(shè)計(jì)。

為你的網(wǎng)站的每一個(gè)方面的可用性的關(guān)注。這可能是更容易開始移動(dòng)第一因?yàn)槟阌邢薜脑O(shè)計(jì)特點(diǎn)，然后移動(dòng)到桌面，支持更大的屏幕尺寸。

在這個(gè)過程中你也會(huì)考慮可達(dá)性和人們?nèi)绾闻τ媚愕木W(wǎng)站在小屏幕上。如果你的移動(dòng)布局增加文字大??？應(yīng)的按鈕/鏈接更容易點(diǎn)擊？

有一定的主題，你需要考慮網(wǎng)站的響應(yīng)和訪問。這里有一些需要考慮的要點(diǎn)：

印刷對(duì)比度
提供足夠的白色空間
列和網(wǎng)格
導(dǎo)航行為
動(dòng)態(tài)特征（圖像滑塊，視頻，等等）

所有這些功能時(shí)必須考慮創(chuàng)建一個(gè)響應(yīng)性和可訪問的網(wǎng)站。二者不直接相關(guān)，但是當(dāng)他們結(jié)合創(chuàng)造一個(gè)和諧的界面，功能很好的人。

無障礙設(shè)計(jì)

有很好的理由去通過一個(gè)可訪問性檢查表考慮如何訪問你的網(wǎng)站應(yīng)該。這可能與基本特征為屏幕閱讀器的圖像ALT標(biāo)簽。它也可能涉及到色彩的對(duì)比對(duì)于有視力障礙的用戶。

任何事情之前，你應(yīng)該首先考慮什么類型的可訪問性問題你愿意支持設(shè)計(jì)。

例如常見的可達(dá)性問題是誰不上網(wǎng)鼠標(biāo)用戶。在這種情況下，您可以創(chuàng)建鍵盤快捷鍵使用屬性TAB順序。這樣的人沒有老鼠可以瀏覽網(wǎng)站只是他們的鍵盤。

現(xiàn)在考慮智能手機(jī)和平板電腦用戶誰沒有鼠標(biāo)或鍵盤。如果你的布局是響應(yīng)那就適合這些較小的觸摸屏設(shè)備。但布局可用？

都是主要的元素tappable或紙質(zhì)文檔？有足夠大的tappable領(lǐng)域大多數(shù)用戶有自己的自來水在合適的地方注冊(cè)？

頁面的某些領(lǐng)域需要比別人更多的關(guān)注。但是如果你愿意把你的腳趾到小通達(dá)我建議開始慢慢地。你好一次支持的一個(gè)特點(diǎn)。

webaim accessibility website

我真的很喜歡WebAIM項(xiàng)目因?yàn)樗墓ぞ吆唾Y源，可以幫助你找到訪問界面元素。也一定要看看這些相關(guān)的資源。

knowbility
Web標(biāo)準(zhǔn)項(xiàng)目
無障礙網(wǎng)頁設(shè)計(jì)的可用性指南
導(dǎo)航結(jié)構(gòu)

盡可能嘗試所有的導(dǎo)航菜單恢復(fù)盡可能簡(jiǎn)單。這并不總是好有多級(jí)下拉菜單響應(yīng)設(shè)計(jì)。

有些網(wǎng)站喜歡面包多頁面設(shè)計(jì)使瀏覽網(wǎng)站更容易一點(diǎn)。例如nngroup網(wǎng)站的所有主要部分的頂部導(dǎo)航。但有些部分像報(bào)告頁面包括一個(gè)報(bào)告類別的側(cè)邊欄導(dǎo)航。

nngroup layout neilsen layout

這使用戶可以訪問子環(huán)節(jié)時(shí)，他們需要的，但是他們?cè)陔[藏頁面的鏈接將無關(guān)的內(nèi)容。

下拉菜單也可以。但你必須更細(xì)致、周到的用戶可能不在瀏覽互聯(lián)網(wǎng)專家。

滑動(dòng)凈值目標(biāo)網(wǎng)站的是一個(gè)很好的例子。在你得到一個(gè)大的類別下拉菜單桌面版本的網(wǎng)站。

但在較小的屏幕菜單轉(zhuǎn)換成一個(gè)單一的鏈接標(biāo)記為“按類別瀏覽。當(dāng)用戶點(diǎn)擊它會(huì)與所有的類別列為鏈接打開一次菜單。

target shopping website navigation

這工作不像典型的下拉而是轉(zhuǎn)換成側(cè)滑動(dòng)菜單。這種效果是因?yàn)槊恳粋€(gè)環(huán)節(jié)都有一個(gè)大的tappable區(qū)，而不是一個(gè)小的子菜單圖標(biāo)添加到主菜單。

沃爾瑪有一個(gè)非常類似的訪問菜單，移動(dòng)通過一個(gè)水龍頭類。

如果你建立與鍵盤輔助然后航行秩序是非常重要的一個(gè)導(dǎo)航。這可通過CSS和有很多指南為了幫助這項(xiàng)任務(wù)。這個(gè)TAB順序?qū)傩砸彩欠浅Ｖ匾逆I盤導(dǎo)航。

另一種方法是跳到導(dǎo)航鏈接，很多網(wǎng)站都有屏幕閱讀器和瀏覽器沒有CSS。這個(gè)工作好在較小的響應(yīng)布局，導(dǎo)航往往停留在一個(gè)位置（通常是頁眉或頁腳）。

同理，你可以添加一個(gè)滾動(dòng)到頂部的鏈接保持固定在屏幕的底部。這讓游客返回頁面頂部的，無論他們?cè)趦?nèi)容。

如果你正在尋找其他的導(dǎo)航輔助資源，我強(qiáng)烈推薦以下相關(guān)文章。

30無障礙網(wǎng)頁提示

讓你的網(wǎng)站訪問

創(chuàng)建一個(gè)完全可訪問的導(dǎo)航欄

觸摸支持UI

觸摸支持Web可訪問性是至關(guān)重要的。一些網(wǎng)民甚至沒有臺(tái)式電腦，所以他們唯一的方式是通過觸摸屏設(shè)備在線。

你網(wǎng)站上的所有元素應(yīng)該通過觸摸或滑動(dòng)的交互。鍵盤可訪問性是同樣重要的觸摸支持，雖然他們的目標(biāo)受眾的不同。

在一個(gè)網(wǎng)頁需要用戶交互的許多動(dòng)態(tài)因素。他們中的大多數(shù)已經(jīng)從鼠標(biāo)點(diǎn)擊在臺(tái)式機(jī)/筆記本環(huán)境演變。

如果你的布局會(huì)響應(yīng)你的動(dòng)態(tài)元素也應(yīng)該。這里有一些動(dòng)態(tài)元素，應(yīng)該支持觸摸輸入的例子。

幻燈片

視頻播放器

lightboxes /投資組合

下拉式導(dǎo)航

難的部分是獲得足夠的支持，在所有觸摸屏設(shè)備。容易的部分是你可以找到免費(fèi)資源，為你做這些事，噸。

JavaScript近幾年發(fā)展迅速，許多幻燈片插件是默認(rèn)支持觸摸。

swipeshow和slides.js是兩個(gè)不可思議的選擇，都是自由的，支持所有主要瀏覽器。

swipeshow screen jquery layout

有一點(diǎn)要記住的關(guān)于智能手機(jī)是他們?nèi)狈彝Ｊ录｜c(diǎn)擊一個(gè)元素通常被認(rèn)為是一個(gè)積極的事件，所以重要的是要處理的事件的準(zhǔn)確在觸摸設(shè)備

同時(shí)思考如何填充影響你的導(dǎo)航鏈接。在一個(gè)鏈接的贅肉也讓用戶點(diǎn)擊和瀏覽網(wǎng)站更容易，但它也需要更多的空間。你會(huì)發(fā)現(xiàn)，甜蜜點(diǎn)的所有的鏈接，他們是足夠大的挖掘，但是不能太大以至于超過屏幕。

高興的重排

重新排列的內(nèi)容，為游客提供了一個(gè)快速的方法來瀏覽網(wǎng)站。離開與線高度和較大的文本很多房間。

想在你的布局相比是更明智的。文字應(yīng)該很容易閱讀和瀏覽的距離。

esquire magazine homepage design

這個(gè)君子的主頁是有很多填充的高對(duì)比度的文本一個(gè)像樣的例子。屏幕閱讀器可以使這種對(duì)比毫無意義，但絕大多數(shù)用戶都有CSS啟用。

文本的對(duì)比度是一個(gè)相當(dāng)復(fù)雜的公式由W3C審查創(chuàng)造。而不是運(yùn)行這個(gè)公式自己只是利用像一個(gè)工具斯努克對(duì)比檢查

snook color contrast wcag checker

你只需輸入背景和前景顏色為獲得比轉(zhuǎn)換的領(lǐng)域。這會(huì)告訴你如果顏色組合通過WCAG 2合規(guī)以及一些指標(biāo)。

這也許是一個(gè)你可以為你的網(wǎng)站測(cè)試的簡(jiǎn)單的事情。這是超級(jí)容易檢查顏色，它更容易為高對(duì)比度的修正。只要將塔周圍的酒吧里要么使文本或減輕背景（或反之亦然）。

我想說的內(nèi)容，后一點(diǎn)是HTML的組織。當(dāng)CSS是禁用的用戶只是得到一個(gè)原始HTML頁面。這可能不漂亮，但很容易從可達(dá)性立場(chǎng)消耗。

你如何編寫HTML將如何影響布局時(shí)出現(xiàn)的CSS被刪除。

例如這個(gè)堆棧的答案給出了一個(gè)解決方案首先出現(xiàn)在HTML工具欄。這看起來很奇怪當(dāng)CSS被刪除。這個(gè)解決方案更因?yàn)閮?nèi)容的HTML在側(cè)邊欄的HTML。

這是一個(gè)非常微妙的變化，它可能不會(huì)影響人們?yōu)g覽你的網(wǎng)站的大部分。但它是值得的少數(shù)人利益的努力做。

響應(yīng)式設(shè)計(jì)的主題是巨大的，而Web可訪問性更大。我希望本指南涵蓋主題的絕對(duì)必要的解釋他們是如何一起工作來提高可用性。

慢慢的這些區(qū)域并愿意分時(shí)。但如果你只聽從建議在本指南中你仍然會(huì)有一個(gè)令人難以置信的網(wǎng)站看起來偉大和正確全面的功能。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,7022,0.html

上一篇：設(shè)計(jì)趨勢(shì)與資源:時(shí)間和日期輸入字段

下一篇：云智互聯(lián)的原創(chuàng)設(shè)計(jì)的網(wǎng)站被無情的山寨了，你一定要看看哦

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡(jiǎn)單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理