Responsive & Adaptive Web Design

Saya nemu animasi cakep nih buat ngejelasin perbedaan antara responsive design dengan adaptive design pada sebuah website. Karena sepertinya saat ini setiap website harus terlihat responsive ketika digunakan, sehingga bisa menyesuaikan dengan ukuran frame pada multi-screen.

Disini tidak akan dibahas detail tentang pengertian resposive dan adaptive web design, Anda bisa mengunjunginya di sini: pengertian responsive web design & adaptive web design, karena pada postingan ini hanya mempermudah tentang perbedaan mereka berdua, karena mereka terlihat sama tapi sebenarnya tidak. Seperti animasi berikut:
01_Responsive-vs-Adaptive

 

The Flow

Ketika ukuran layar menjadi kecil, konten didalamnya akan bergerak kebawah untuk mengisi frame, ini disebut flow.

04_Flow-vs-Static-2

 

Relative Units

Kanvas bisa menjadi apa saja, misal desktop, layar mobile atau apapun. Untuk itu kita membutuhkan sebuah unit yang fleksibel untuk bisa melakukannya, yang dinamakan dengan relative units.

02_Relative-Units-vs-Static-Units-1

 

Breakpoints

Breakpoint disini berfungsi untuk melakukan perubahan pada layout website, jadi gampangnya gini, misal diwebsite kit mempunya 3 kolom, dan untuk menampilkannya di mobile screen kita hanya perlu menampilkannya menjadi 1 kolom.

03_With-Breakpoints-vs-Without-Breakpoints-1

 

Max and Min Values

Terkadang menampilkan konten mengikuti frame sepenuhnya memang terlihat menarik, tetapi itu hanya berlaku pada konten tertentu. Misalnya jika ingin menampilkan konten video, maka hal itu menjadi tidak menarik lagi. Oleh karena itu untuk memanfaatkan Max dan Min values layoutnya.

07_Max-width-vx-No-max-width-1

 

Nested Object

Ingat dengan kondisi posisi relative, jadi gampangnya ketika kita tidak menggunakan nested object, maka object yang ada pada website akan terlihat kaku ketika melakukan perpindahan karena harus meload satu persatu object, sedangkan ketika menggunakan nested object akan terlihat seperti ini:

05_Nested-vs-Not-Nested-1

 

Mobile or Desktop First

Sebenarnya secara teknis itu tidak berbeda, tetap saja harus fokus ke projectnya yang dimulai pada layar yang kecil hingga layar yang lebih besar. Karena membuatnya responsive itu terlihat indah usefull.

08_Desktop-first-vs-Mobile-first-3

 

Webfonts vs System Fonts

Untuk website, penggunaan webfonts sangat dianjurkan, kenapa..? Karena dengan webfonts, tulisan yang ingin developer perlihatkan ke penggunanya akan tersampaikan, sedangkan ketika menggunakan system font, sangat tergantung kepada ketersediaan font yang ada pada system user itu sendiri, ada atau tidaknya.

06_System-fonts-vs-Webfonts-1

 

Bitmap images vs Vectors

Penggunaan gambar vector pada sebuah website akan lebih bagus seperti format SVG, karena gambar tidak akan pecah ketika di perbesar atau di perkecil sesuai dengan responsive design yang kita gunakan. Ini berbeda dengan penggunaan gambar bitmap seperti jpg, png dan gif.

09_Vectors-vs-Images-1
Well, seperti itulah perbedaan responsive dan adaptive design pada sebuah website. Animasi-animasi diatas saya comot dari web http://blog.froont.com/.

Semoga Bermanfaat ! 🙂

Iklan

Satu pemikiran pada “Responsive & Adaptive Web Design

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s