Skilgreina breidd vefsíðunnar þinnar

Það fyrsta sem flestir hönnuðir hafa í huga þegar þeir byggja upp vefsíðu þeirra er það sem ályktunin er að hanna fyrir. Það sem þetta raunverulega skiptir máli er að ákveða hve breiður hönnun þín ætti að vera. Það er ekkert annað sem venjulegt breidd vefsvæðis.

Af hverju íhuga ályktun

Árið 1995 voru stöðluðu 640x480 upplausnarmennirnir stærstu og bestu skjáirnar í boði. Þetta þýddi að vefhönnuðir einbeittu sér að því að gera síður sem horfðu vel út í vafra sem voru hámarkaðir á 12 tommu til 14 tommu skjá á þeirri upplausn.

Þessa dagana, 640x480 upplausn gerir minna en 1 prósent af flestum website umferð. Fólk notar tölvur með miklu hærri upplausn, þ.mt 1366x768, 1600x900 og 5120x2880. Í mörgum tilvikum virkar hönnun fyrir 1366x768 upplausn skjár.

Við erum á punkti í sögu vefhönnunar þar sem við þurfum ekki að hafa áhyggjur af upplausn. Flestir hafa stóra skjá á skjánum og hámarka ekki vafra gluggann. Svo ef þú ákveður að hanna síðu sem er ekki meira en 1366 punktar á breidd, mun síðuna þín líklega líta vel út í flestum vafraglugga, jafnvel á stórum skjáum með hærri upplausn.

Vafra breidd

Áður en þú byrjar að hugsa "allt í lagi, mun ég gera síðurnar 1366 pixlar breiður," það er meira í þessari sögu. Eitt oft gleymt mál þegar ákvörðun um breidd vefsíðunnar er hversu stór viðskiptavinir þínir halda vafra sínum. Sérstaklega, hámarka þær vafra sína í fullri stærð eða halda þau minni en fullskjárinn?

Í einum óformlegum könnun samstarfsaðila sem allir notuðu 1024x768 upplausnartæki með 1024x768 upplausn, héldu tveir öll öll forritin hámarkað. Hinir höfðu mismunandi stóran gluggakista af ýmsum ástæðum. Þetta sýnir að ef þú ert að hanna innra net þessa fyrirtækis með 1024 punkta á breidd, þá þurfa 85 prósent notenda að fletta lárétt til að sjá alla síðuna.

Eftir að þú hefur reiknað fyrir viðskiptavini sem hámarka eða ekki skaltu hugsa um vafrann. Sérhver vefur flettitæki er með skrúfubretti og landamæri á hliðum sem skera lausan pláss frá 800 til um það bil 740 dílar eða minna á 800x600 upplausn og um 980 punktar á hámarka glugga við 1024x768 upplausn. Þetta kallast vafrinn "króm" og það getur tekið í burtu frá nothæðu plássi fyrir síðuna þína.

Föst eða fljótandi breiddarsíður

Raunveruleg töluleg breidd er ekki það eina sem þú þarft að hugsa um þegar þú býrð breidd vefsvæðis þíns. Þú þarft einnig að ákveða hvort þú hafir fasta breidd eða fljótandi breidd . Með öðrum orðum, ætlar þú að stilla breiddina í tiltekinn fjölda (fast) eða í hlutfalli (vökva)?

Fastur breidd

Síður með fastan breidd eru nákvæmlega eins og þau hljóma. Breiddin er ákveðin í tilteknu númeri og breytist ekki, sama hversu stórt eða lítið vafrinn er. Þetta getur verið gott ef þú þarft hönnunina þína til að líta nákvæmlega það sama, sama hversu breiður eða þröngur lesendur lesandans eru, en þessi aðferð tekur ekki tillit til lesenda þína. Fólk með vafra þrengra en hönnunin verður að fletta lárétt og fólk með víðtæka vafra mun hafa mikið magn af tómt rými á skjánum.

Til að búa til fastar breiddarsíður skaltu einfaldlega nota tiltekna punkta númer fyrir breidd hliðarsviðanna.

Liquid Breidd

Síður með fljótandi breidd (stundum kölluð sveigjanleg breidd) geta verið breiddar eftir því hversu breiður vafrinn er. Þetta gerir þér kleift að hanna síður sem einbeita okkur meira að viðskiptavinum þínum. Vandamálið við síður með fljótandi breidd er að þau geta verið erfitt að lesa. Ef skanna lengd lína textans er lengri en 10 til 12 orð eða styttri en 4 til 5 orð getur verið erfitt að lesa. Þetta þýðir að lesendur með stóra eða smáa vafra glugga eiga í vandræðum.

Til að búa til sveigjanlegar breiddarsíður skaltu einfaldlega nota prósenta eða ems fyrir breidd síðasviðanna. Þú ættir einnig að kynna þér CSS hámarksbreidd eignarinnar. Þessi eign leyfir þér að stilla breidd í hundraðshlutum, en takmarkaðu það svo að það verði ekki svo stórt að fólk geti ekki lesið það.

Og sigurvegari er: CSS Media Queries

Besta lausnin þessa dagana er að nota CSS fjölmiðla fyrirspurnir og móttækilegur hönnun til að búa til síðu sem stilla á breidd vafrans skoða það. Móttækilegur vefhönnun notar sama efni til að búa til vefsíðu sem virkar hvort sem þú skoðar hana á 5120 punktum eða 320 pixlar á breidd. Hinar mismunandi stærðu síður líta öðruvísi en innihalda sama efni. Með fjölmiðlafyrirspurninni í CSS3 svarar hvert móttökutæki fyrirspurnina með stærð sinni og stíll lakið er stillt á viðkomandi stærð.