Pirmā lieta, ko lielākā daļa dizaineru ņem vērā, veidojot savu mājas lapu, ir tā izšķirtspēja, kas jāizstrādā. Tas, ko tas patiesībā nozīmē, ir izlemt, cik liels ir jūsu dizains. Šādas lietas vairs nav kā standarta vietnes platums.
Kāpēc apsvērt izšķirtspēju
1995. gadā standarta 640x480 izšķirtspējas monitori bija lielākie un labākie monitori. Tas nozīmēja, ka tīmekļa izstrādātāji koncentrējās uz tādu lapu veidošanu, kuras šajā pārlūkprogrammā izskatījās labā izteiksmē, maksimāli palielinot 12 collu līdz 14 collu monitoru.
Šobrīd 640x480 izšķirtspēja veido mazāk nekā 1 procentu no lielākās vietnes satiksmes. Cilvēki izmanto datorus ar daudz augstākām izšķirtspējām, tostarp 1366x768, 1600x900 un 5120x2880. Daudzos gadījumos tiek izstrādāts 1366x768 izšķirtspējas ekrāns.
Mēs atrodamies tādā tīmekļa dizaina vēsturē, kurā mums nav jāuztraucas par risinājumu. Lielākajai daļai cilvēku ir lieli, platekrāna monitori, un tie nepalielina pārlūkprogrammas logu. Tātad, ja jūs nolemjat izveidot lapu, kura platums nepārsniedz 1366 pikseļus, lielākajā izšķirtspējā jūsu lapa visticamāk izskatīsies lielākajā daļā pārlūkprogrammas logiem.
Pārlūka platums
Pirms dodaties pie domām, "labi, es padarīšu savas lapas 1366 pikseļi plata", ir vairāk par šo stāstu. Viens bieži aizmirst jautājums, pieņemot lēmumu par tīmekļa lapas platumu, ir tas, cik lieli jūsu klienti saglabā pārlūkprogrammas. Konkrēti, vai viņi maksimāli palielina pārlūkprogrammas pilnekrāna izmērā vai saglabā tos mazāk nekā pilnekrāna režīmā?
Vienā neoficiālā aptaujā, kurā piedalījās kolēģi, kuri visi izmantoja uzņēmuma standarta 1024x768 izšķirtspējas klēpjdatoru, divi saglabāja visu to lietojumu maksimumu. Pārējiem bija dažāda izmēra logi, kas tika atvērti dažādu iemeslu dēļ. Tas parāda, ka, izstrādājot uzņēmuma iekšējo tīklu ar 1024 pikseļu platumu, 85 procentiem lietotāju būtu jāplit horizontāli, lai redzētu visu lapu.
Kad esat atbildīgs par klientiem, kuri maksimāli vai nepietiekami, domā par pārlūkprogrammas malām. Katrai interneta pārlūkprogrammai ir ritjosla un tā robežojas ar malām, kas samazina pieejamo vietu no 800 līdz 740 pikseļiem vai mazāk ar 800x600 izšķirtspēju un ap 980 pikseļiem maksimālajos logos ar 1024x768 izšķirtspēju. To sauc par pārlūku "chrome", un to var noņemt no izmantojamās vietas jūsu lapas dizainam.
Fiksētie vai šķidruma platuma lapas
Faktiskais ciparu platums nav vienīgais, kas jums jādomā, izstrādājot vietnes platumu. Jums arī jāizlemj, vai jums ir fiksēts platums vai šķidruma platums . Citiem vārdiem sakot, vai jūs plānojat iestatīt platumu uz noteiktu skaitu (fiksēts) vai procentos (šķidrums)?
Fiksēts platums
Fiksētā platuma lapas ir tieši tādas, kādas tās izklausās. Platums ir fiksēts noteiktā skaitā un nemainās, neatkarīgi no tā, cik liels vai mazs ir pārlūks. Tas var būt labi, ja jums ir nepieciešams, lai jūsu dizains izskatās tieši vienādi, neatkarīgi no tā, cik plaši vai sašaurināti ir jūsu lasītāju pārlūkprogrammas, taču šī metode neņem vērā jūsu lasītājus. Cilvēkiem ar pārlūkprogrammām, kas ir šaurāki par jūsu dizainu, būs jāvirzās horizontāli, un cilvēkiem ar plašu pārlūku ekrānā būs liels tukša vieta.
Lai izveidotu fiksētu platumu lapas, vienkārši izmantojiet konkrētus pikseļu numurus jūsu lapas sadalījumu platumam.
Šķidrais platums
Šķidruma platuma lapas (dažreiz sauktas par elastīgas platuma lapām) atšķiras platumā atkarībā no pārlūka loga platuma. Tas ļauj jums izveidot lapas, kas vairāk koncentrējas uz jūsu klientiem. Problēma ar šķidruma platuma lapām ir tāda, ka tos var būt grūti nolasīt. Ja teksta rindiņas skenēšanas ilgums ir garāks par 10 līdz 12 vārdiem vai īsāks par 4 līdz 5 vārdiem, to var būt grūti nolasīt. Tas nozīmē, ka lasītājiem ar lieliem vai maziem pārlūkprogrammas logiem ir grūtības.
Lai izveidotu elastīgas platuma lapas, vienkārši izmantojiet procentos vai ems jūsu lapas sadalījumu platumā. Jums vajadzētu arī iepazīties ar CSS max-width īpašumu. Šis īpašums ļauj iestatīt platumu procentos, bet pēc tam to ierobežot, lai tas netiktu tik liels, ka cilvēki to nevar izlasīt.
Un uzvarētājs ir: CSS mediju vaicājumi
Šobrīd vislabākais risinājums ir izmantot CSS multivides vaicājumus un atsaucīgu dizainu, lai izveidotu lapu, kas pielāgojas tā pārlūka platumam, kurā tas tiek skatīts. Reaģējošs tīmekļa dizains izmanto tādu pašu saturu, lai izveidotu tīmekļa lapu, kas darbojas, vai jūs to aplūkojat 5120 pikseļu platumā vai 320 pikseļu platumā. Dažādu izmēru lapas izskatās citādi, taču tajos ir viens un tas pats saturs. Ar mediju vaicājumu CSS3 katra saņemošā ierīce atbild uz vaicājumu ar tā izmēru, un stila lapa pielāgojas šim konkrētajam lielumam.