Advertisement
  1. Web Design
  2. Responsive Web Design

Apakah Masa Depan desain Web responsif?

Scroll to top
Read Time: 21 mins
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Indonesian (Bahasa Indonesia) translation by Puuma (you can also view the original English article)

Aku punya kesenangan besar memberikan keynote penutupan pada responsif hari keluar 3: The Final Breakpoint. Diadakan di Brighton, UK, pada 19 Juni 2015, konferensi adalah pertemuan desainer dan pengembang yang berbagi alur kerja strategi, teknik, dan pengalaman mereka dengan desain web responsif.

Berikut adalah apa yang harus saya katakan.

Menutup Keynote

Hari ini telah memberikan tur dunia responsif desain menakjubkan. Kita telah melihat bagaimana untuk tingkat kita alur kerja dan proses. Kami telah belajar cara-cara baru untuk meningkatkan aksesibilitas dari produk kami. Kami telah bergulat dengan modern CSS dan kemampuan HTML yang membantu kami merangkul ukuran layar yang sangat variabel yang berputar-putar, dan berputar di sekitar kita.

Kami telah menjelajahi masa depan kode modular dan browser kapasitas untuk bekerja tanpa konektivitas jaringan. Dan kami telah bahkan mengambil perjalanan ke kemungkinan masa depan di mana web mungkin pergi.

Cover of A List Apart magazine showing Responsive Web Design headlineCover of A List Apart magazine showing Responsive Web Design headlineCover of A List Apart magazine showing Responsive Web Design headline

Kami telah datang jauh sejak Ethan's artikel, cairan grid, fleksibel media, dan media queries. Ajaran tiga orang menabur benih yang tumbuh dan berkembang seperti yang kita telah datang untuk lebih memahami implikasi dari perangkat proliferasi. Kami telah melihat bahwa web mampu terjadi di mana saja dan melakukan cukup banyak apa-apa.

Saya berpendapat bahwa "Desain Web Responsif" adalah artikel pertama yang benar-benar berhasil menangkap konsep yang telah dibicarakan oleh John Allsopp bertahun-tahun sebelumnya dalam"A Dao of Web Design" dan menyaringnya menjadi sesuatu yang komunitas desain dan pengembangan dapat benar-benar tenggelam gigi mereka ke dalam.   Ini memberikan contoh konkret web kemampuan untuk flex dan membentuk dirinya ke dalam bentuk apa pun yang diperlukan untuk mengambil.

Itu pertama kalinya banyak desainer telah datang untuk berdamai dengan gagasan bahwa "pengalaman" bukanlah hal yang monolitik.

Tentu, banyak dari kita di komunitas standar web telah berbicara bicara dan berjalan kaki dengan progressive enhancement. Dan kita memperoleh mengkonversi, namun kemajuan yang lambat. Ethan menunjukkan — secara langsung dan ringkas-apa peningkatan progresif Desain visual bisa terlihat seperti.

Memberikan pengalaman yang sama untuk setiap manusia yang mencoba untuk mengakses situs kami akan menjadi mustahil. Ada hanya terlalu banyak faktor untuk mempertimbangkan. Kami punya ukuran layar, layar kerapatan, kecepatan CPU, jumlah RAM, ketersediaan sensor, ketersediaan fitur antarmuka metode... breathe... jenis sistem operasi, versi sistem operasi, tipe browser, versi browser, plug-in diinstal, kecepatan jaringan, latensi jaringan, Jaringan, firewall, proxy, router, dan faktor lain mungkin selusin pikiran saya tidak mampu memetik di tengah angin badai pertimbangan teknis.

Dan itu bahkan tidak mempertimbangkan pengguna kami.

Ketika datang ke orang-orang kita perlu untuk mencapai pekerjaan kami untuk benar-benar peduli, kita harus mempertimbangkan tingkat melek huruf, membaca ketajaman, tingkat domain pengetahuan, gangguan kognitif seperti ketidakmampuan belajar dan disleksia, perhatian defisit masalah, lingkungan gangguan, gangguan penglihatan, pendengaran, gangguan motor, berapa banyak mereka mengerti bagaimana menggunakan perangkat mereka, berapa banyak mereka mengerti bagaimana menggunakan browser mereka, bagaimana berpengalaman dalam web Konvensi Umum mereka, dan satu ton "faktor manusia" lain.

Setiap orang berbeda dan semua orang datang ke web dengan kebutuhan khusus mereka sendiri. Beberapa yang selalu bersama mereka, kebutaan misalnya. Lain sementara, seperti melanggar lengan mousing Anda. Yang lain murni situasional dan tergantung pada perangkat Anda menggunakan pada waktu dan kemampuan teknis atau kendala.

Mencoba untuk merancang satu monolitik pengalaman untuk setiap orang untuk memiliki dalam setiap konteks yang menganggap setiap faktor akan mustahil. Dan belum, Sir Tim Berners-Lee memiliki visi untuk web yang mampu akan di mana saja. Dialah gila?

Visi Sir Tim untuk web adalah bahwa konten dapat dibuat sekali dan diakses dari mana saja. Berbeda tetapi terkait potongan "hypermedia" tersebar di seluruh dunia bisa dihubungkan satu sama lain melalui link. Selain itu, mereka akan dpt oleh siapa saja di perangkat mampu membaca HTML. Gratis.

Pada akhirnya, Sir Tim membayangkan universal aksesibilitas.

Untuk banyak dari kita, memastikan website kami diakses merupakan afterthought. Kami bicara permainan yang baik ketika datang ke "pengguna-tengah" ini atau itu, tapi sering memperlakukan kata "aksesibilitas" sebagai sinonim untuk "pembaca layar". Hal ini jauh lebih dari itu. "Akses" adalah tentang orang-orang. Orang mengkonsumsi konten dan menggunakan antarmuka dalam banyak cara yang berbeda, beberapa serupa dan beberapa cukup berbeda untuk bagaimana kita melakukannya.

Tentu saja, orang-orang dengan gangguan visual sering menggunakan pembaca layar untuk mengkonsumsi konten. Tetapi mereka mungkin juga menggunakan braille sentuhan umpan balik perangkat atau braille printer. Mereka mungkin juga menggunakan keyboard. Atau mereka dapat menggunakan layar sentuh dalam konser dengan isyarat audio. Atau mereka dapat menggunakan kamera untuk memungkinkan mereka untuk "membaca" konten melalui OCR dan text-to-speech. Dan ya, gangguan penglihatan mempengaruhi persentase decent rakyat (terutama seperti yang kita usia), tetapi hanya bagian dari teka-teki "akses".

Kontras antara teks dan latar belakang adalah faktor penting dalam memastikan kandungan tetap dapat dibaca dalam situasi pencahayaan yang berbeda. Pilihan warna merupakan keprihatinan aksesibilitas.

Bahasa yang kita gunakan di situs kami dan dalam antarmuka kami secara langsung mempengaruhi betapa mudahnya bagi pengguna untuk memahami apa yang kita lakukan, produk yang kami tawarkan, dan mengapa hal itu penting. Ini juga mempengaruhi bagaimana kita membuat pengguna merasa tentang diri sendiri, pengalaman mereka, dan perusahaan kami. Bahasa merupakan keprihatinan aksesibilitas.

Ukuran halaman web kami memiliki efek langsung pada halaman kami berapa lama diperlukan untuk men-download, berapa biaya pelanggan kami untuk mengaksesnya, dan (kadang-kadang) bahkan Apakah konten dapat dicapai. Kinerja merupakan keprihatinan aksesibilitas.

Aku bisa terus, tapi aku yakin Anda mendapatkan titik.

Aksesibilitas adalah tentang menyediakan pengalaman yang baik untuk semua orang, terlepas dari kemampuan fisik atau mental, jenis kelamin, ras, atau bahasa. Ia mengakui bahwa kita semua memiliki kebutuhan khusus — keterbatasan fisik, keterbatasan bandwidth, keterbatasan perangkat — yang mungkin memerlukan kita untuk mengalami antarmuka yang sama dalam cara yang berbeda.

Ketika saya mengunjungi situs web pada telepon saya, misalnya, saya secara visual terbatas oleh resolusi layar saya (terutama jika saya menggunakan browser yang mendorong Zoom) dan saya terbatas dalam kemampuan saya untuk berinteraksi dengan tombol dan link karena saya sedang browsing dengan ujung jari saya , lebih besar dan jauh lebih akurat daripada sebuah kursor mouse.

Pada layar sentuh, saya mungkin perlu pengalaman untuk menjadi sedikit berbeda, tapi aku masih perlu dapat melakukan apa pun yang saya datang ke situs untuk melakukan. Saya membutuhkan sebuah pengalaman, tapi selain itu aku butuh pengalaman yang sesuai.

Merangkul kenyataan bahwa pengalaman tidak perlu hanya satu hal yang akan membantu kami menjangkau lebih banyak orang dengan lebih sedikit sakit kepala. Pengalaman dapat- dan harus-dapat dibuat sebagai kontinum. Ini adalah peningkatan progresif: kita mulai dengan pengalaman dasar yang bekerja bagi setiap orang — konten, link nyata, generasi pertama bentuk kontrol, dan bentuk-bentuk yang benar-benar mengirimkan ke server. Kemudian kita membangun pengalaman dari sana.

Animated Gif showing different routes to the same end resultAnimated Gif showing different routes to the same end resultAnimated Gif showing different routes to the same end result

Browser Anda mendukung HTML5 bentuk kontrol? Hebat! Anda akan mendapatkan lebih baik virtual keyboard ketika Anda pergi untuk mengetik alamat email Anda. Anda dapat menggunakan CSS? Awesome, biarkan aku membuat membaca bahwa pengalaman lebih baik untuk Anda. Oh, Anda dapat menangani permintaan media! Biarkan aku menyesuaikan tata letak sehingga panjang baris tersebut sedikit lebih nyaman. Wow, browser Anda support Ajax?! Di sini, biarkan aku beban dalam beberapa permainan asah untuk konten yang terkait Anda mungkin menemukan menarik.

Bayangkan duduk di sebuah restoran, hanya untuk memiliki pelayan segera membawa Anda steak. Tapi kau seorang vegetarian. Anda bertanya apakah mereka menawarkan sesuatu yang Anda bisa makan dan mereka sopan Balasan: "Oh aku minta maaf, daging adalah suatu keharusan. Mengapa Anda tidak hanya makan daging? Sangat mudah! Kau benar-benar hilang pada beberapa lezat makanan." Tidak ada pelayan yang benar-benar peduli tentang pengalaman Anda akan melakukannya.

Dan namun kita — sebagai sebuah industri-tampaknya tidak memiliki masalah mengatakan seseorang mereka perlu mengubah browser mereka untuk mengakomodasi kita. Itu salah. Pekerjaan kita tidak berarti tanpa pengguna. Kita harus membungkuk ke belakang untuk menarik dan mempertahankan mereka. Ini adalah layanan pelanggan 101.

Ini datang kembali ke hukum Postel's, yang Jeremy sering menceritakan:

Menjadi konservatif dalam apa yang Anda lakukan, menjadi liberal dalam apa yang Anda terima dari orang lain.

Kita perlu menjadi lemah ketika datang ke browser mendukung dan tidak membuat terlalu banyak (atau lebih baik namun apapun) asumsi tentang apa yang dapat kami kirim.

Tentu saja hal ini tidak semua orang di industri kami sudah siap untuk merangkul pendekatan, jadi saya akan menawarkan kutipan lain aku datang kembali untuk waktu dan waktu lagi...

Ketika sesuatu terjadi, satu-satunya kekuatan Anda adalah sikap Anda terhadap; Anda dapat menerima atau membenci itu.

Kita tidak dapat mengendalikan dunia, kita hanya dapat mengontrol reaksi kita untuk itu.

Sekarang Anda yang telah berkumpul untuk ini akhir responsif Day Out (atau yang mengikuti di rumah) mungkin memahami hal ini lebih daripada kebanyakan. Kami merasa pemboman konstan perangkat baru, ukuran layar, dan kemampuan. Satu-satunya cara yang saya telah menemukan untuk menangani semua ini adalah untuk menerimanya, merangkul keanekaragaman, dan melihat proliferasi perangkat dan browser sebagai fitur, bukan bug.

Terserah kepada kita untuk mendidik orang-orang di sekitar kita yang memiliki — baik oleh kecelakaan atau maksud — tidak diterima bahwa keragaman adalah realitas yang kita hidup di dan hal-hal hanya akan mendapatkan lebih gila. Mengubur kepala kita di pasir bukanlah suatu pilihan.

Ketika saya mencoba untuk membantu orang-orang memahami dan menerima keberagaman, saya sering meraih salah satu latihan pikiran favorit saya dari John Rawls . 

Photo of the philosopher John Rawls 1921 to 2002Photo of the philosopher John Rawls 1921 to 2002Photo of the philosopher John Rawls 1921 to 2002

Rawls mil adalah seorang filsuf yang digunakan untuk menjalankan eksperimen sosial dengan siswa, kelompok gereja, dan sejenisnya.

Dalam percobaan, peserta diizinkan untuk menciptakan masyarakat ideal mereka. Itu bisa mengikuti setiap filsafat: bisa monarki atau demokrasi, atau anarki. Ini bisa menjadi kapitalis atau sosialis. Orang-orang dalam percobaan ini memiliki kebebasan untuk kontrol mutlak setiap aspek dari masyarakat... tapi kemudian ia akan menambahkan twist: mereka tidak bisa mengendalikan apa posisi mereka menduduki di masyarakat.

Twist ini adalah John Harsanyi apa — teoretikus permainan awal — merujuk sebagai "Cadar dari kebodohan". Apa Rawls mil ditemukan, waktu dan waktu lagi, adalah bahwa individu-individu yang berpartisipasi dalam percobaan akan condong menciptakan masyarakat paling egaliter.

Masuk akal: apa rasional, tertarik diri manusia akan memperlakukan orang tua, orang sakit, orang-orang dari jenis kelamin tertentu, ras, kepercayaan, atau warna buruk jika mereka bisa menemukan diri mereka dalam posisi yang sama itu ketika tirai ditarik pergi?

Hal yang kita lakukan untuk mengakomodasi khusus kebutuhan sekarang membayar dividen di masa depan. Lihatlah landai.

Ramps on a pavementRamps on a pavementRamps on a pavement

Mereka adalah contoh klasik dari sebuah fitur aksesibilitas untuk orang-orang di kursi roda yang juga bermanfaat bagi orang yang tidak mereka: orang-orang yang membawa Bagasi, Layanan pengiriman pengangkutan hal-hal yang berat pada boneka, orangtua yang mendorong anak-anak (atau anjing mereka berpakaian up) di kereta bayi, komuter yang berjalan Sepeda, dan pria yang hanya lebih suka berjalan menaiki lereng yang lembut untuk pengeluaran usaha yang diperlukan untuk me-mount sebuah langkah.

Ketika kita membuat alternatif jalan untuk pergi dari titik A ke titik B, orang dapat mengambil salah satu yang paling sesuai bagi mereka, Apakah dengan pilihan atau keharusan. Dan semua orang dapat mencapai tujuan mereka.

Kita semua memiliki kebutuhan khusus. Beberapa kita lahir dengan. Beberapa kita mengembangkan. Beberapa bersifat sementara. Beberapa tidak ada hubungannya dengan kita secara pribadi, tetapi situasional atau semata-mata tergantung pada perangkat keras yang kita gunakan, metode interaksi yang kita miliki untuk kita, atau bahkan kecepatan di mana kita dapat mengakses Internet atau memproses data.

Apakah desain web responsif tentang jika tidak aksesibilitas? Ya, prinsip-prinsip dasar yang prihatin dengan desain visual, tapi dalam gambaran besar, mereka semua tentang menyediakan pengalaman terbaik mungkin.

Sebagai praktisi responsif Desain, kami memahami manfaat menyesuaikan antarmuka kami. Kami memahami fallback. Kami memahami bagaimana desain pengalaman kuat yang bekerja di bawah berbagai kondisi. Setiap hari kita memperluas aksesibilitas dari produk kami.

Keterampilan ini akan membuat kita sangat berharga sebagai teknologi terus menawarkan cara baru mengkonsumsi dan berinteraksi dengan situs kami.

Kami hanya mulai berenang atau kaki-eh, tangan-ke dunia bergerak-gerakan berbasis gestural kontrol. Tentu, kami telah memiliki mereka dalam dua dimensi pada layar sentuh untuk sementara waktu sekarang tetapi tiga dimensi bergerak-gerakan berbasis kontrol hanya mulai muncul. Anda dapat melihat demo dari gestural kontrol di sekitar tanda 41 detik dalam video berikut:

Lompatan besar pertama di arah ini adalah Kinect di Xbox 360 (dan kemudian, Windows). Dengan Kinect, kita berinteraksi dengan komputer yang menggunakan gerakan tubuh seperti mengangkat tangan (yang mendapat Kinect memperhatikan), mendorong tangan kami ke depan untuk klik keran, dan cengkram menyeret kanvas dalam arah tertentu.

Kinect diantar dalam sebuah revolusi besar dalam hal berinteraksi dengan komputer, tapi dari perspektif interaksi, menyajikan tantangan yang sama Wii controller dan Sony PlayStation Move. Gerakan tubuh yang besar seperti mengangkat tangan Anda (atau wand controller) dapat melelahkan.

Mereka tidak juga sangat akurat. Jika Anda berpikir bahwa layar sentuh akurasi adalah sebuah masalah, gerakan tangan seperti untuk pose Kinect atau LEAP Motion bahkan lebih dari sebuah tantangan.

Untuk mengakomodasi interaksi seperti ini (yang kami saat ini tidak punya cara untuk mendeteksi) yang kita perlu menyadari betapa mudahnya untuk klik pada interaktif kontrol. Kita perlu menentukan jika kami tombol dan link yang cukup besar dan apakah ada cukup ruang antara mereka untuk memastikan pengguna kami maksud akurat disampaikan ke browser. Dua spesifikasi yang dapat membantu mengatasi hal ini adalah Media Queries tingkat 4 dan Pointer peristiwa.

Dalam Media Queries tingkat 4, kami menjadi dapat menerapkan aturan style untuk konteks tertentu interaksi. Sebagai contoh, ketika kita memiliki sangat akurat kontrol kursor kami (seperti dalam kasus jarum atau mouse) atau kurang akurat kontrol (seperti kasus layar sentuh atau gerakan fisik):

Tentu saja, kami ingin menawarkan default masuk akal dalam hal ukuran dan jarak sebagai mundur untuk remaja browser dan perangkat.

Kami juga memiliki kemampuan untuk menentukan apakah perangkat mampu melayang di atas sebuah elemen dan dapat menyesuaikan antarmuka sesuai.

Kita masih perlu untuk mengetahui seberapa baik semua ini berakhir mengerjakan multimodal perangkat seperti tablet permukaan, namun. Desain akan berubah sebagai pengguna beralih antara mode input? Harus itu? Untuk itu, spec juga menyediakan any-pointer dan any-hoverto, memungkinkan Anda untuk query untuk Apakah apapun didukung metode interaksi memenuhi persyaratan Anda, tapi di sini adalah kata peringatan dari spec:

Merancang halaman yang bergantung pada melayang atau menunjuk akurat hanya karena setiap-hover atau setiap-pointer menunjukkan bahwa mekanisme masukan dengan kemampuan ini tersedia, cenderung mengakibatkan pengalaman buruk.

Opsi query media ini mulai untuk menggelar di Chrome, Mobile Safari, dan Microsoft Edge, jadi it's worth mengambil melihat mereka.

Pointer Events adalah spesifikasi lain yang mulai mendapatkan beberapa daya tarik. Generalizes interaksi untuk satu peristiwa daripada memaksa kita untuk silo pengalaman menjadi berbasis mouse, touch-driven, pena-driven, (mendesah) berbasis kekuatan, dan sebagainya.

Kita diam-diam dapat mendeteksi dukungan untuk acara-acara Pointer...

... dan kemudian menangani mereka semua dalam cara yang sama atau membuat cabang-cabang yang didasarkan pada pointerType:

Tentu saja, selain mempertimbangkan tingkat akurasi pengguna kami memiliki sementara berinteraksi dengan layar kita, kita juga perlu mempertimbangkan berpotensi meningkatkan jarak di mana pengguna kami membaca konten kami.

Untuk itu, saya telah bereksperimen dengan viewport lebar (vw) unit.

Untuk waktu yang lama, saya telah menggunakan ems untuk tata letak-lebar (Jadi garis panjang sebanding dengan ukuran font). Saya juga menggunakan ukuran font yang relatif. Dengan itu sebagai dasar, saya dapat menggunakan media query yang cocok dengan lebar maksimum dan mengatur ukuran font basis di vw setara di lebar maks.

Kemudian seluruh desain hanya akan memperbesar tata letak ketika melihat melampaui ukuran.

Jika Anda tidak ingin sesuatu seperti itu secara otomatis, Anda dapat mengaktifkannya akan toggled on dan off dengan JavaScript.

Hal mendapatkan lebih gila lagi ketika Anda mulai untuk faktor dalam perangkat seperti HoloLens. Dan tidak, saya tidak mendapatkan untuk bermain dengan satu belum, tapi Anda dapat melihat demo besar di 1:27 menandai video ini:

Tapi gagasan menjadi mampu menjatuhkan satu layar virtual resizable pada setiap permukaan menyajikan beberapa kemungkinan menarik sebagai pengguna dan beberapa tantangan yang unik sebagai desainer. HoloLens, tentu saja, membawa dengan itu gerakan kontrol juga, sehingga akuntansi untuk berbagai jenis input harus mendapatkan kita cukup jauh.

Dalam nada yang sama, kita harus mulai berpikir tentang apa yang pengalaman dapat dan akan terlihat seperti ketika kami sedang browsing semata-mata dengan pandangan kita. Tatapan pelacakan memiliki asal dalam ruang aksesibilitas sebagai sarana untuk menyediakan antarmuka kepada orang-orang dengan terbatas atau tidak menggunakan tangan mereka. Tradisional, tatapan pelacakan perangkat keras telah beberapa ribu dolar, meletakkan itu dari jangkauan banyak orang, tapi yang ini mulai berubah.

Dalam beberapa tahun terakhir, kekuatan komputasi perangkat kami telah meningkat sebagai biaya hardware yang terkait dengan mendukung pandangan pelacakan telah menurun drastis. Mencari di sekitar, Anda dapat melihat pandangan pelacakan mulai pindah ke ruang publik: banyak smartphone dan smartwatches dapat mengenali ketika Anda melihat mereka (atau setidaknya mereka lakukan kadang-kadang). Ini adalah hanya langkah singkat dari mengetahui mana pada layar Anda cari. Dan hampir setiap high-end smartphone sekarang dilengkapi dengan kamera menghadap ke depan, yang membuat mereka cocok kandidat untuk menyediakan metode interaksi ini.

Anda dapat melihat demo besar telepon wijen wajah teknologi pelacakan dari mark 18-kedua dalam video ini:

Sesame Phone dirancang untuk memungkinkan orang untuk menggunakan smartphone tanpa menggunakan tangan mereka. Menggunakan wajah pelacakan untuk memindahkan kursor virtual di sekitar layar, yang memungkinkan pengguna untuk berinteraksi dengan sistem operasi yang mendasari serta aplikasi individu. Mendukung keran, babatan, dan lain isyarat (melalui menu konteks) dan cukup mengesankan dalam pengalaman saya. Teknologi seperti ini memungkinkan orang-orang yang menderita dari MS, arthritis, distrofi otot, dan lebih menggunakan smartphone dan — lebih penting bagi kita — menelusuri web.

The Eye Tribe dan Fixtional juga bekerja untuk membawa mata pelacakan untuk smartphone dan tablet. Pelacakan mata mirip dengan wajah pelacakan, tetapi mengikuti kursor fokus Anda. Mikro gerakan — berkedip, wink, dll-memungkinkan Anda untuk berinteraksi dengan perangkat.

Meskipun kebanyakan perangkat lunak pelacakan tatapan meniru mouse dan memiliki sensitivitas disesuaikan, akurasi itu sebagai perangkat penunjuk ini tidak fantastis. Ketika saya menggunakan telepon wijen, misalnya, saya memiliki waktu sulit mengendalikan posisi kepala saya untuk menahan kursor masih hover dan klik tombol. Saya yakin ini akan membaik dengan latihan, tetapi aman untuk mengatakan bahwa di tatapan interaksi, lebih besar, well‑spaced, dan lebih mudah ditargetkan link dan tombol akan anugerah.

Sejauh ini, saya telah terfokus pada metode interaksi yang memudahkan navigasi dan memakan konten. Tapi apa tentang mengisi formulir? Saya dapat memberitahu Anda bahwa mengetik email surat oleh-huruf pada virtual keyboard, menggunakan wajah Anda, sucks...

Untungnya, sebagian besar implementasi gestural ditambah dengan beberapa bentuk pengenalan suara. Kinect, misalnya, akan menerima verbal perintah untuk menavigasi dan menyelesaikan tugas-tugas seperti mengisi formulir. Telepon wijen juga mendukung perintah suara untuk tindakan tertentu dasar, mendikte email, dan sejenisnya.

Ditambah dengan suara, metode alternatif interaksi Kinect dan wijen telepon bekerja benar-benar baik. Tapi suara interaksi dapat berdiri sendiri juga.

Kebanyakan dari kita akrab dengan Apple's Siri, sekarang Google Now dan Microsoft Cortana. Asisten digital ini hebat mengambil informasi dari sumber-sumber tertentu dan melakukan hal-hal asisten-y lain seperti menghitung tip dan mengatur pengingat. Sejauh berinteraksi dengan web, namun, mereka tidak... belum. Kita dapat terlibat dengan mereka, tetapi mereka tidak dapat (selalu) terlibat dengan halaman web.

Mengekspos informasi yang disimpan di halaman web kami melalui HTML semantik dan terstruktur syntaxes seperti microformats, microdata dan RDFa harus akhirnya membuat konten kami tersedia untuk asisten ini, tetapi kita tidak benar-benar tahu. Pembuat berbagai mereka belum benar-benar memberi kita petunjuk tentang cara untuk melakukan itu dan, seperti berdiri sekarang, tidak satupun dari mereka dapat melihat halaman web dan membacanya untuk Anda. Untuk itu Anda perlu memohon pembaca layar.

Masing-masing perusahaan menawarkan pembaca layar pihak pertama. Dan semua mampu membantu Anda berinteraksi dengan halaman, termasuk membantu Anda mengisi formulir, tanpa harus melihat halaman. Dan belum, teknologi ini tidak diiringi dengan asisten mereka sesuai. Mungkin tidak akan lama sebelum kita melihat yang terjadi.

Ketika kita mulai untuk mempertimbangkan bagaimana website kami akan dialami dalam konteks suara, keterbacaan halaman web kami menjadi penting. Jelas prosa yang ditulis dengan baik dan urutan logis sumber yang akan menjadi kebutuhan mutlak. Jika halaman kami tidak membuat rasa ketika membaca, apa gunanya?

Konten strategi Steph Hay antarmuka dilihat sebagai sebuah kesempatan untuk berkomunikasi dengan pengguna kami. Itu benar-benar akan segera.

Menariknya, Microsoft telah memberi kita mengintip apa yang mungkin ingin desain perintah kustom suara untuk website kami melampaui apa OS Native mendukung dengan Cortana. Dengan kata lain, mereka membiarkan kita mengajar mereka asisten.

Dalam Windows 10, aplikasi diinstal web dapat mencakup file definisi perintah suara (VCD) di kepala halaman untuk mengaktifkan perintah kustom:

File VCD yang direferensikan adalah hanya file XML yang mendefinisikan kata kunci untuk aplikasi web dan perintah yang dapat dikeluarkan.

Menggunakan sintaks yang sangat dasar, VCD mengidentifikasi opsional potongan frase dan variabel Cortana harus ekstrak:

Aplikasi tertentu ini melewati informasi yang diambil untuk JavaScript untuk diproses. That's right, Cortana memiliki JavaScript API juga. Pretty neat.

Tetapi tradisional komputer dan ponsel pintar bukan satu-satunya tempat kita mulai melihat pengalaman berbasis suara. Kami juga memiliki tanpa tubuh suara seperti Amazon Echo dan Ubi.

Amazons Echo and the UbiAmazons Echo and the UbiAmazons Echo and the Ubi

Sekarang, mereka berdua tampaknya tepat terfokus pada membantu rumah Anda menjadi "cerdas" — musik streaming, menyesuaikan termostat, dll- tetapi tidak sulit untuk membayangkan perangkat ini menjadi digabungkan dengan kemampuan untuk melihat isi dan berinteraksi dengan web.

Dalam waktu dekat, berbasis suara interaksi dengan web akan sepenuhnya mungkin. Mereka mungkin akan mengisap sedikit pada awalnya, tetapi mereka akan mendapatkan lebih baik.

Aku akan membuat yang agak tebal prediksi: sementara sentuhan telah revolusioner dalam banyak cara terhadap peningkatan akses digital, suara akan menjadi lebih signifikan. Antarmuka berbasis suara akan menciptakan peluang-peluang baru bagi orang-orang untuk berinteraksi dengan dan berpartisipasi dalam dunia digital.

Karena kita sudah berpikir tentang bagaimana pengalaman kita membuat konsumsi di berbagai perangkat, kami punya melompat pada orang lain bekerja di web ketika datang ke suara. Kita melihat pengalaman sebagai kontinum, mulai dengan teks.

Sebagai teknologi suara matang, kami akan yang orang melihat sebagai ahli. Kami akan memberdayakan generasi berikutnya dari situs web dan aplikasi menjadi suara-diaktifkan dan dengan demikian, kami akan meningkatkan kehidupan miliaran. Karena "aksesibilitas" ini bukan tentang Cacat, tentang akses dan tentang orang-orang.

Tentu, kami akan membuatnya lebih mudah untuk melihat film kali dan membeli tiket untuk melihat terbaru Transformers bencana, tapi kita juga akan memberdayakan hampir 900 juta orang secara global — lebih dari 60% diantaranya adalah perempuan-buta huruf. Dan itu adalah populasi yang telah diabaikan di web kami dominan tekstual.

Kita akan menciptakan peluang-peluang baru bagi masyarakat miskin dan kurang beruntung untuk berpartisipasi dalam dunia yang telah dikecualikan mereka. Anda mungkin tidak menyadari, tetapi 80% dari perusahaan Fortune 500-pikir Target, Walmart — hanya menerima lamaran pekerjaan online atau melalui komputer. Kami akan memungkinkan orang-orang yang memiliki keterampilan komputer terbatas atau yang berjuang dengan membaca untuk melamar pekerjaan dengan perusahaan-perusahaan ini.

Kami dapat membantu menjembatani kesenjangan digital dan kesenjangan keaksaraan. Kita bisa membuat kesempatan bagi orang-orang yang lebih baik kehidupan mereka dan kehidupan keluarga mereka. Kita memiliki kekuatan untuk menciptakan lebih banyak ekuitas di dunia ini daripada sebagian besar dari kita pernah bermimpi.

Ini adalah waktu yang sangat menarik, bukan hanya untuk komunitas desain responsif, bukan hanya web, tetapi untuk dunia! Masa depan akan datang dan saya tidak sabar untuk melihat betapa hebatnya Anda membuatnya! 

This is for everyoneThis is for everyoneThis is for everyone

Responsive Day Out 3: The Final Breakpoint diadakan di Brighton, UK pada 19 Juni 2015. 

Lebih Banyak Hands-On Dengan Pengembangan Web 

Artikel ini adalah bagian dari seri pengembangan web dari penginjil teknologi Microsoft tentang pembelajaran JavaScript praktis, proyek sumber terbuka, dan praktik terbaik interoperabilitas termasuk browser Microsoft Edge dan EdgeHTML rendering engine baru . 

Kami mendorong Anda untuk menguji di seluruh browser dan perangkat termasuk Microsoft Edge — browser default untuk Windows 10 — dengan alat gratis di dev.modern.IE:

Pembelajaran teknologi mendalam di Microsoft Edge dan Platform Web dari para insinyur dan penginjil kami: 

Lebih banyak alat dan sumber lintas platform gratis untuk Platform Web: 

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.