Tutorial Web Responsif – part 1

Tutorial Web Responsif – part 1
May 5, 2014 mirzailhami

Web responsif mulai sangat digemari sekitar 2 atau 3 tahun yang lalu. Mungkin Anda sudah sangat mengenal apa itu web responsif. Jika web Anda dapat ditampilkan dengan baik pada layar smartphone, tablet dan desktop, maka dapat dikatakan web Anda sudah responsif.

Sederhananya, web responsif itu mampu menyesuaikan tampilannya di layar dengan ukuran berapapun, baik layar yang berorientasi potrait maupun landscape.

Mengingat sekarang ini pengguna smartphone sudah sangat menguasai pasar internet, maka wajib bagi desainer dan pengembang web untuk membuat web yang didukung di semua platform dan layar, atau disebut juga dengan web responsif.

Tutorial Web Responsif bagian 1

Contoh tampilan responsif di Samsung Tablet.

Kenapa harus web responsif?

Bayangkan jika 60% pengunjung dari aplikasi web yang Anda bangun berasal dari perangkat smartphone, misalnya iOS, Android ataupun Windows phone. Maka Anda wajib menyesuaikan layar web Anda agar didukung diberbagai smarthpone tersebut.

Jauh sebelum teknologi web responsif ada, para pengembang harus membuat beberapa web untuk satu aplikasi saja. Ini karena web yang harus didukung di berbagai layar. Tentu saja ini akan membuang banyak waktu, dan tidak efisien.

Sudah responsif atau tidak?

Pada artikel sebelumnya, saya juga membahas bagaimana memanfaatkan  emulator yang ada di Google Chrome untuk melihat tampilan sebuah web di berbagai layar smartphone. Atau juga bisa dilakukan dengan me-resize browser Anda.

Semua perangkat smarthpone sekarang ini sudah mendukung penggunaan HTML5 dan CSS3, maka tidak sulit untuk kita mengetahui apakah web yang bersangkutan sudah responsif atau belum.

Persiapan

Untuk membuat web responsif, cukup menggunakan HTML dan CSS. HTML dibutuhkan untuk membuat struktur dasar layout dan CSS nantinya digunakan untuk mengatur layout yang responsif.

Bagi yang baru mulai belajar HTML & CSS, silahkan pelajari terlebih dahulu sintaks-sintaks penulisan HTML & CSS dasar. Atau juga dapat mempelajarinya di Inspirasi Desain Web untuk Pemula.

BACA:  Tutorial Web Responsif – part 2 untuk membuat web responsif.