"kelompok 6"

Muhammad akmal
rut novita handayani

Desain responsif dan aksebilitas

 supporting lecturer

nurhadi, s.kom, m.pd

Interaksi manusia dan komputer

 Desain responsif dan
aksebilitas
Desain responsif dan aksesibilitas adalah dua konsep yang terkait langsung dalam
beberapa hal. Prinsip RD bertujuan untuk membantu memberikan pengalaman menonton
terbaik untuk suatu halaman atau konten di berbagai perangkat, sementara aksesibilitas
membantu membuat konten lebih mudah digunakan dan dinavigasi oleh penyandang
disabilitas tertentu. Keduanya sejalan dengan gagasan desain pengalaman pengguna
(UX) yang lebih luas, yang menyatakan bahwa situs harus selalu dirancang untuk
pengalaman yang paling lancar dan berkualitas setinggi mungkin.

Any Question?
 PENGERTIAN
AKSEBILITAS
Aksesibilitas adalah konsep yang berkaitan dengan kemudahan dan kesederhanaan
akses serta penggunaan suatu produk, layanan, atau lingkungan oleh semua individu,
termasuk mereka yang memiliki disabilitas atau keterbatasan. Ini mencakup berbagai
aspek kehidupan, termasuk teknologi, transportasi, infrastruktur fisik, informasi, dan
layanan publik. Dalam konteks web dan teknologi digital, aksesibilitas berarti
memastikan bahwa situs web, aplikasi, dan konten online dapat diakses dan
digunakan oleh semua orang, termasuk mereka dengan berbagai jenis disabilitas,
seperti disabilitas visual, auditif, motorik, kognitif, atau neurologis.
 BEBERAPA PRINSIP AKSESIBILITAS YANG PERLU
DIPERTIMBANGKAN DALAM RESPONSIF WEB
DESAIN MELIPUTI:

• Tata Letak Responsif: Pastikan desain responsif yang memadai agar konten
dapat menyesuaikan ukuran layar yang berbeda, termasuk perangkat mobile dan
tablet.
2. Penggunaan Warna yang Kontras: Pastikan teks dan elemen penting memiliki
kontras yang cukup agar mudah dibaca oleh semua orang, termasuk mereka yang
memiliki masalah penglihatan.

3. Penggunaan Tag HTML yang Benar: Gunakan tag HTML dengan benar, seperti
heading (h1, h2, h3, dst.) untuk mengatur hierarki informasi dan membuat konten
lebih mudah dipahami.
 4. Deskripsi Alternatif untuk Gambar: Sediakan deskripsi alternatif (alt text) untuk
semua gambar agar pengguna yang menggunakan pembaca layar dapat memahami
kontennya.

5. Navigasi yang Mudah: Pastikan navigasi situs web Anda mudah digunakan,
dengan menu yang terstruktur dengan baik, tautan yang dapat diakses dengan
keyboard, dan fokus yang jelas.

6. Penggunaan Video dan Audio yang Diakses: Sediakan teks alternatif atau
terjemahan untuk konten video dan audio, serta kontrol pemutaran dan volume yang
dapat diakses.
 7. Uji Aksesibilitas: Selalu uji situs web Anda dengan alat uji aksesibilitas dan
perangkat bantuan seperti pembaca layar untuk memastikan kelayakan
aksesibilitas.

8. Keyboard Accessibility: Pastikan semua fungsi dan tautan dapat diakses dan
digunakan dengan keyboard, bukan hanya dengan mouse atau perangkat sentuh.
 9. Peningkatan Kontrast Font: Jika memungkinkan, pertimbangkan opsi
untuk meningkatkan kontras font untuk membantu pengguna dengan
penglihatan yang buruk.

10. Pemantauan Aksesibilitas Terus-menerus: Aksesibilitas bukanlah tugas

sekali jadi, tetapi harus dimonitor secara terus-menerus dan diperbaiki jika
ditemukan masalah.
 P E N G E RT I A N D E S A I N
RESPONSIF WEB
R E S P O N S I V E W E B D E S I G N A D A L A H S U AT U T E K N I K D A L A M D E S A I N
W E B YA N G M E M U N G K I N K A N TA M P I L A N W E B S I T E D A PAT
M E N Y E S U A I K A N D I R I D E N G A N U K U R A N L AYA R P E R A N G K AT YA N G
DIGUNAKAN OLEH PENGGUNA. DENGAN RESPONSIVE DESIGN,
W E B S I T E A K A N T E R L I H AT B A I K D A N M U D A H D I B A C A PA D A L AYA R
S M A R T P H O N E , TA B L E T, L A P T O P, D A N D E S K T O P.
 1.Fluid Grids (Grid yang Fleksibel): Menggunakan grid sistem yang
fleksibel yang memungkinkan elemen-elemen situs web untuk

KONSEP
menyesuaikan ukuran mereka secara proporsional dengan lebar layar.
Ini memastikan tampilan yang konsisten dan mudah dibaca.

DESAIN
RESPONSIF
WEB 2.Media Queries: Media queries adalah teknik CSS yang digunakan
untuk mengubah tampilan situs web berdasarkan ukuran layar
perangkat. Dengan media queries, Anda dapat mengatur aturan untuk
mengubah tata letak, font, dan elemen lainnya sesuai dengan ukuran
layar yang berbeda.
Back to Agenda Page
 3. Breakpoints (Titik Hentian): Titik hentian adalah ukuran layar
tertentu di mana desain situs web berubah. Biasanya, ada beberapa

KONSEP titik hentian yang telah ditentukan untuk mengakomodasi

perangkat berukuran desktop, tablet, dan ponsel.

DESAIN
RESPONSIF
WEB 4. Flexible Images (Gambar Fleksibel): Menggunakan gambar yang
dapat menyesuaikan ukurannya dengan baik sesuai dengan lebar
layar. Ini dapat menghindari masalah gambar terlalu besar atau
terlalu kecil pada perangkat yang berbeda.

Back to Agenda Page

 5. Mobile-First (Mobile Pertama): Pendekatan "mobile-first" berarti
Anda merancang situs web Anda terlebih dahulu untuk perangkat

KONSEP mobile dan kemudian meningkatkannya untuk perangkat desktop.

Ini memastikan bahwa pengalaman pengguna pada perangkat
mobile lebih baik.
DESAIN
RESPONSIF
WEB 6. Content Prioritization (Prioritas Konten): Anda harus
mempertimbangkan apa yang paling penting untuk ditampilkan
pada layar perangkat kecil dan bagaimana mengurutkan konten
dengan baik. Hal ini sering melibatkan menyederhanakan
navigasi dan menampilkan konten yang relevan lebih awal.

Back to Agenda Page

 7. Performance Optimization (Optimisasi Kinerja): Memastikan
situs web memuat dengan cepat pada perangkat dengan koneksi

KONSEP internet yang lambat adalah kunci. Ini mencakup pengoptimalan

gambar, penggunaan cache, dan pemangkasan kode yang tidak
perlu.
DESAIN
RESPONSIF
WEB 8. Cross-Browser Compatibility (Kompatibilitas Lintas
Browser): Pastikan situs web Anda bekerja dengan baik di
berbagai jenis browser, termasuk Chrome, Firefox, Safari, dan
Internet Explorer.

Back to Agenda Page

 9. User Experience (Pengalaman Pengguna): Selalu
pertimbangkan pengalaman pengguna. Pastikan situs web
KONSEP mudah digunakan dan intuitif, terlepas dari perangkat yang
digunakan oleh pengguna.
DESAIN
RESPONSIF
WEB 10.Testing (Pengujian): Selalu uji situs web Anda di
berbagai perangkat dan ukuran layar untuk memastikan
responsifnya. Gunakan alat pengujian responsif untuk
membantu Anda mengidentifikasi masalah.

Back to Agenda Page

PLAYER 1 HIGHSCORE 2500 PLAYER 2

DESAIN WEB
ADAPTIF
Adaptive Web Design adalah suatu rancangan web yang pengaturan layoutnya dibuat fix untuk beberapa ukuran layar
yang paling umum digunakan.Ukuran layar yang dimaksud adalah lebarnya. Jadi ketika kita mengakses halaman web
pada smarphone yang lebar layarnya 320 px, maka layout web yang fix untuk ukuran 320 px akan diload. Bila diakses
dari smartphone ukuran layar 960 px maka akan diload layout web yang sesuai ketika pada proses perancangan awal.
Dengan kata lain, seorang web designer harus merancang beberapa tampilan web untuk beberapa ukuran layar yang
berbeda (ukuran layar yang umum dan banyak digunakan).
PLAYER 1 HIGHSCORE 2500 PLAYER 2

Hal ini berbeda dengan "Responsive Web Design" yang hanya cukup membuat satu
tampilan layout yang kemudian akan menyesuaikan dengan ukuran layar dari device yang
digunakan. Dalam desain adaptif, mengembangkan enam desain untuk enam lebar layar
paling umum adalah hal yang wajar; 320, 480, 760, 960, 1200, dan 1600 piksel, dan akan
terus berkembang sesuai dengan resolusi layar yang dikembangkan produsen perangkat
mobile.
 keterkaitan
Desain Responsif dan Aksesibilitas

Desain responsif dan aksesibilitas adalah dua konsep yang terkait langsung dalam beberapa cara.
Prinsip RD bertujuan untuk membantu memberikan pengalaman menonton yang sebaik mungkin
untuk sebuah halaman atau konten di berbagai perangkat, sementara aksesibilitas membantu
membuat konten lebih mudah digunakan dan dinavigasi oleh penyandang disabilitas tertentu.
Mereka berdua memasukkan ide yang lebih besar dari desain pengalaman pengguna (UX), yang
mengatakan bahwa situs harus selalu dirancang untuk pengalaman yang paling mulus dan kualitas
tertinggi. Namun, penting untuk dipahami bahwa hanya karena kedua konsep ini terkait tidak
berarti bahwa dengan berfokus pada satu Anda dapat menjamin yang lain. Memasukkan
aksesibilitas tidak berarti Anda akan ditinggalkan dengan situs yang responsif, atau sebaliknya.
 Bagaimana Desain Responsif
Mempengaruhi Aksesibilitas

Di mana RD dan aksesibilitas berbeda sering kali disebabkan oleh niat. Desain
responsif menciptakan standar seragam yang memenuhi kebutuhan utama
penggunanya, sedangkan aksesibilitas lebih dalam dan memastikan lapisan
fungsionalitas yang sangat dibutuhkan bagi pengguna yang menggunakan teknologi
pendukung seperti pembaca layar. Dalam hal itu, ini bukan tentang bagaimana
aksesibilitas memengaruhi desain Web responsif, melainkan bagaimana desain
responsif memengaruhi aksesibilitas. Bergantung pada pilihan yang Anda buat saat
mendesain situs responsif, Anda dapat membantu dan merusak aksesibilitas dalam
ukuran yang sama. Demi argumen, pertimbangkan situs responsif yang sangat
bergantung pada gambar latar CSS
thanks for everyone's attention