Monday, 13 July 2015

Contoh Desain Web Responsif

Sebelum menulisa halaman web responsif, mari kita lihat beberapa contoh terbaik dari situs web responsif, Kita dapat mengunjunginya secara online untuk melihat fitur lebih jelas. Mereka digambarkan sebagai berikut pada saat tulisan ini dibuat :

August

Contoh pertama kali ini adalah August (http://www.agst.co/), yang merupakan tempat untuk menemukan seniman yang paling berbakat di dunia. Halaman web adalah sebuah situs satu halaman dengan form untuk mendaftar minat Anda  pada akhir halaman.

Ketika Anda mengubah ukuran situs ini, Anda akan melihat bahwa perubahan tampak sangat halus. Ketika Anda melihat perubahan yang terjadi antara setiap breakpoint, Anda melihat perbedaan yang dibahas dalam bagian berikut.

Perangkat Besar dan Sedang
Untuk perangkat Besar dan perangkat medium, August menggunakan HTML5 video playing yang diulang-ulang. Background yang membentang lebar penuh, Sedangkan konten berpusat pada sebuah wadah. Ketika Anda gulir ke bawah halaman, Anda akan melihat bahwa situs ini  penuh dengan gambar berat, dengan teks yang dibungkus gambar dengan hati-hati.


Tampilan awal dari situs "august", dengan video di putar di background

Gambar pada situs “august” membungkus di sekitar copy pada perangkat besar dan menengah

Perangkat Kecil
Dengan perangkat yang lebih kecil (misalnya tablet), August  menonaktifkan video yang diputar di background. dan memilih untuk menggantinya dengan gambar.
Pada perangkat kecil, "august" situs menggantikan background video dengan gambar statis

Cara dimana teks membungkus gambar yang disesuaikan sehingga teks menempati lebih jauh ke gambar sehingga tidak menutupi citra utama

Perangkat Ekstra Kecil
Di view palig kecil, yang ditujukan untuk perangkat kecil, situs menyesuaikan dengan perangkat yang lebih kecil dengan mengganti gambar yang tidak cocok untuk mobile. Media Query menargetkan ketinggian  viewport yang digunakan untuk mengatur ukuran font lebih lanjut untuk memastikan teks menempati dengan benar  pada halaman.
Pada perangkat ekstra kecil kita, teks diubah ukurannya dan gambar diukur dengan tepat untuk layar yang lebih kecil dengan baik.

Ketika Anda telah melihat bagaimana gambar telah berubah, Anda dapat melihat bahwa sekarang gambar dicrop dengan lebar viewport dan teks pindah lagi ke gambar untuk mencegah gambar overlapping.

Pada bagian konten, copy dipindahkan ke atas gambar untuk mencegah tumpang tindih.

Nyetimber

Situs web Nyetimber (http://nyetimber.com/our-story/) sangat berbeda dengan situs August karena Nyetimber merupakan situs dengan multipage. Situs ini mempunyai bagian dengan judul “Our Story,” yang menggunakan parallax scroll effect untuk menceritakan kisah tentang bisnis; Halaman ini akan menjadi fokus  kita untuk contoh berikutnya.

Perangkat Besar dan Sedang
Story of company direpresentasikan dengan parallax effect pada desktop, Anda scroll situs elemen yang berbeda membawa tampilan pada interval waktu yang berbeda.
Situs Nyetimber dimulai dengan pengantar cerita

Jika Anda mengklik salah satu tombol view film, Anda akan dibawa ke video yang mengisi viewport
Ketika dibuka, video mengisi viewport

Ketika Anda gulir halaman, Anda akan  menemukan bagian dimana Anda dapat dibawa ke panel untuk mengetahui informasi lebih lanjut tentang perusahaan.


Perangkat kecil
Pada tablet, navigasi telah turun dibawah logo, dan fungsi parallax sudah dihapus.
Daripada membuka dengan layar penuh, Video sekarnag inline
Video ditampilkan inline ada perangkat kecil, menggunakan  Vimeo HTML5 player untuk memainkan video

Sebagai pengguna tidak dapat membawa  pada perangkat touch screen. Panel tidak lagi memiliki tindaan melayang-layang tetapi ditampilkan sebagai daftar informasi tentang Nyetimber.
Panel informasi secara default terlihat pada perangkat kecil.

Perangkat Ekstra Kecil
Pada  ponsel, header telah dikurangi dan menghilangkan navigasi, dan menampilkan logo pada strip dibagian atas.
Menu menjadi default collapsed pada perangkat ekstra kecil, dengan menu ikon untuk beralih.

Setelah menekan tombol navigasi pada header, navigasi selanjutnya akan terbuka.
Menekan menu ikon akan membuat menu menjadi expand

Sisa dari konten diubah ukurannya menjadi lebih kecil, dan mengubah ukuran font menjadi kecil seluruhnya.
Konten tersebut dipersempit, semua block ditumpuk dan ukuran teks dioptimalkan untuk perangkat.

Contoh Lain

Ada banyak contoh lebih yang tersedia di situs AWWWards, yang mana mereka memiliki seluruh bagian yang didedikasikan untuk desain responsif.

No comments:

Post a Comment