Ingkang paling sepisanan, para desainer nganggep yen mbangun halaman web kasebut minangka résolusi apa kanggo ngrancang. Apa sing bener-bener ana yaiku ngresiki carane desain sampeyan kudu. Ora ana apa-apa maneh kaya jembar situs web standar.
Apa Coba Resolusi
Ing taun 1995, monitor resolusi standar 640x480 minangka pamantau paling gedhe lan paling apik sing kasedhiya. Iki tegese desainer web sing fokus ing nggawe kaca sing katon apik ing browser web dimaksimalkan ing monitor 12-inch nganti 14 inci ing resolusi kasebut.
Dina iki, resolusi 640x480 ndadekake kurang saka 1 persen paling lintas situs web. Wong nggunakake komputer kanthi resolusi luwih dhuwur kalebu 1366x768, 1600x900 lan 5120x2880. Ing sawetara kasus, desain kanggo layar résolusi 1366x768 dianggo.
We are on the point in the history of web design where we do not have to worry much about resolution. Paling wong duwe monitor layar lebar lan gedhe lan ora ngoptimalake jendela browser. Dadi yen sampeyan milih ngrancang kaca sing ora luwih saka 1366 piksel, kaca sampeyan bakal katon apik ing paling jendhela browser sanajan ing gedhe monitor karo resolusi sing luwih dhuwur.
Widget Browser
Sadurunge mlayu mikir "oke, aku bakal nggawe halamanku 1366 piksel lebar," luwih akeh crita iki. Siji masalah sing sering diabaikan nalika panentu jembaré kaca web minangka kasedhiyan pelanggan manawa njaga browser. Utamane, apa padha ngoptimalake browser ing ukuran layar sing luwih gedhe utawa uga tetep luwih cilik tinimbang layar wutuh?
Ing salah sawijining survey informal saka rekan kerja sing kabeh nganggo laptop résolusi 1024x768 standar, loro disimpen kabeh aplikasi sing dimaksimal. Sisane wis macem-macem jendhela sing beda-beda kanggo macem-macem alasan. Iki nuduhake yen sampeyan ngrancang intranet perusahaan iki ing 1024 piksel, 85 persen pangguna kudu nggulung kanthi horisontal kanggo ndeleng kabeh kaca.
Sawise sampeyan nyatakake pelanggan sing ngoptimalake utawa ora, pikirake babagan wates browser. Saben browser web nduweni garis gulung lan wates ing sisi sing nyilikake papan sing kasedhiya saka 800 kanggo sekitar 740 piksel utawa kurang ing resolusi 800x600 lan sekitar 980 piksel ing jendela maksimal ing resolusi 1024x768. Iki diarani browser "chrome" lan bisa njupuk saka papan sing bisa digunakake kanggo desain kaca.
Werna utawa Cairan Lantai Kaca
Lebar numerik sing nyata ora mung sampeyan kudu mikir babagan ngrancang situs web. Sampeyan uga kudu netepake yen sampeyan bakal duwe ambane sing tetep utawa jembar cair . Ing tembung liya, sampeyan arep nyetel lebar menyang nomer tartamtu (tetep) utawa menyang persentasi (cair)?
Luwih cepet
Kaca-kaca lebet sing tetep kaya swara. Werna wis ditemtokake ing nomer tartamtu lan ora owah ora ketompo carane gedhe utawa cilik browser. Iki bisa dadi apik yen sampeyan butuh rancangan sampeyan supaya katon persis apa wae, ora ketompo carane nggoleki browser browser sampeyan, nanging cara iki ora njupuk akun pembaca sampeyan. Wong karo browser luwih sempit tinimbang desain sampeyan kudu nggulung kanthi horisontal, lan wong sing nganggo browser lebar bakal duwe ruang kosong sing gedhe ing layar.
Kanggo nggawe kaca amba kanthi cepet, mung gunakake angka piksel tartamtu kanggo jembarane bagean halaman.
Lebar Cairan
Kaca lilo cendhak (kadhangkala disebut kaca lebar fleksibel) beda-beda ing jembar gumantung carane jembaré jendhela browser. Iki ngidini sampeyan ngrancang kaca sing luwih fokus marang pelanggan. Masalah karo kaca kanthi cair iku bisa dadi angel diwaca. Yen dawa pindai garis teks luwih dawa tinimbang 10 nganti 12 tembung utawa luwih cendhek tinimbang 4 nganti 5 tembung, bisa angel diwaca. Iki tegese pembaca karo jendhela browser gedhe utawa cilik duwe masalah.
Kanggo nggawe kaca lebar fleksibel, mung gunakake persentase utawa em kanggo jembaré bagean kaca. Sampeyan uga kudu golek dhewe karo properti CSS max-width. Properti iki ngidini sampeyan nyetel jembar ing persentase, nanging mbatesi supaya ora dadi gedhe yen wong ora bisa maca.
Lan Winner: CSS Queries Media
Solusi sing paling apik dina iki yaiku nggunakake pitakon media CSS lan desain responsif kanggo nggawe kaca sing nyetel menyang jembar browser sing nampilake. Desain web responsif nggunakake isi sing padha kanggo nggawe kaca web sing bisa digunakake ing layar lebar 5120 piksel utawa 320 piksel. Kaca ukuran beda beda, nanging isi kasebut padha. Kanthi query media ing CSS3, saben piranti panampa njawab pitakonan kanthi ukurane, lan sheet style nyetel ukuran kasebut.