Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Tips dan trick membuat website responsive
selamat sore kawan-kawan,
saya butuh masukan nih dari temen-temen, ketika pengen membuat web app yang responsive, apa aja sih yang tips2 dan tricknya (tecknikal, contoh : pakai media query), supaya terorganisir dan mudah dimanage, mudah dibaca. mana yang teman-teman saranin, mobile first atau desktop first ?
10 Jawaban:
Coba pelajari dari beberapa framework terkenal macem bootstrap, materialize, dll. Itu ada yg namanya sistem grid yg dimana itu dibagi-bagi menjadi beberapa bagian yang bisa disesuaikan ukuran layar devicenya. https://getbootstrap.com/docs/4.0/layout/grid/ Klo saran sih lebih baik yang mobile first sih
sama mainin @media screen resolusinya di css, kak.
saran ane, biasakan menulis media query dari yang terbesar. ex:
@media (max-width: 2560px){
}
@media (max-width: 1440px){
}
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (max-width: 425px){
}
@media (max-width: 375px){
}
@media (max-width: 320px){
}
mungkin itu alurnya.
hmm.. iya bener atas ane,, urutin.. kdg d hp tertentu resolusi ga kebaca bsa jd berantakan,, sma lebar nya jgn terlalu nyesek gan ksh space dikit pk margin... itu aja si klo mnrt ane...
Saran, biar gak berlama-lama buatnya dan makan waktu yang berjam-jam, bahkan berhari-hari, fokus dulu selesain bagian desktopnya, kalo bagian desktop udah beres, baru mulai bermain-main dengan media screennya.
yang pasti, jika startnya pass, makan sisahnya mudah dan tentu tidak memakan waktu lama.
@cacadosman point yang bisa diambil pake css framework dan mobile first
@bumiharum pointnya pake media query
@mhdadil klo agan ini, sarannya desktop first
@reihanagamskdesktop first, sama hari2 dengan space di hp (pakai margin biar ga dempet2)
@fatrosumendong desktop first
thx semua gan atas masukannya !! jadi ada 2 kubu nih ya desktop first sama mobile first. fitur2 apa ya yang harusnya dihilangin di mobile ? contoh hover di mobile kan ga perlu, soalnya pakai touch / ga ada pointernya. bagaimana dengan layout websitenya ? terus foto biar ga terlalu besar sizenya, kan kayanya kasihan klo di hp ngeload file besar2
kalau saya ga jauh2 dari
- bootstrap untuk grid
- css/less/sass untuk media query
- jquery untuk media query yg lebih sulit
@QaiserLab maksud dari point ke 3 apa bang ? media query yang lebih sulit ?
agak lebih dinamis. misal perlu untuk membuat layout fix di ukuran size monitor tertentu namun kondisi tersebut terjadi ketika mouse di scroll. kalau yg seperti ini CSS saja ga bisa handle, perlu javascript karena ada pembacaan event mouse scroll.
menurut sy.. di bikin mockup.. ketika develop tau mana yang perlu di hilangin mana yang egk fitur dari segi desktop.. first desktop baru mobile..
