Store Website Baggrunde Gør og Don'ts

Store baggrunde giver en meget imponerende visuel indvirkning på hjemmesider. En webdesigner har mulighed for at spille med forskellige designvariabler, som normalt bruges af fotografer, som f.eks. Dybdeskarphed eller fokus. Baggrunden behøver ikke at være bare fotos, men også enhver anden stor illustration eller endda video.

I denne artikel lærer du om de forskellige store baggrundsstile og hvordan du bruger dem. Du vil også finde ud af, hvilken indvirkning store baggrunde har på båndbredde og webstedets ydeevne generelt. Endelig vil du lære at korrekt implementere store baggrunde.

Store baggrundsstile

I grunden er der mange forskellige stilarter, men de mest almindeligt anvendte stilarter på hjemmesider er:

* Fotografier som baggrunde
* Grafik og illustrationer som baggrunde
* Animationer som baggrunde

Fotografier og illustrationer er mest udbredte , animationer er stadig eksperimentelle, men som båndbredde bliver billigere og internetforbindelseshastigheder bliver hurtigere, har flere websteder råd til at bruge disse.

Almindelige fejl ved hjælp af store baggrunde

Et af de mest almindelige problemer med store baggrunde er, at de skal tilpasse sig mange forskellige skærmopløsninger . En webdesigner bør teste webstedets design ved hjælp af så mange forskellige skærmopløsninger som muligt for at undgå et af de fælles fejl, der er forbundet med at bruge store baggrunde.

Specielt en webdesigner skal eksperimentere med forskellige browservinduets bredder, fordi mange brugere ikke udvider deres browsere til fuldskærmstørrelsen, selv om de muligvis har en stor opløsningsvisning.

Lad os se på de mest almindelige fejl, som en webdesigner burde undgå, når vi beskæftiger os med store baggrunde .

Billeder er i Center, Fliselagt eller Skaleret

Det er ikke forkert at bruge et centreret, flisebelagt eller skaleret billede som baggrund , det anbefales endda for at holde symmetrien på hjemmesiden, men misbrug af disse teknikker kan give indtryk af et gennemsnitligt eller middelmådigt design til webstedets besøgende.

Lad os undersøge billedet nedenfor på et websted. Dette skærmbillede blev oprettet på en 1024 × 768 skærmopløsning:

Som du kan se, er der i denne beslutning ikke noget galt med designet, men lad os se, hvordan det ser ud til en opløsning på 1680 × 1050:

Billedet der bruges i baggrunden er centreret. Det ligner et almindeligt billede på et websted og blander ikke ind i baggrunden. Undgå at bruge baggrundsbilleder på denne måde ved at sørge for, at billedet er stort nok i bredden til de mest almindeligt anvendte skærmopløsninger . Den bedste løsning er at blande billedernes hjørner i baggrunden, så brugere med større skærmopløsninger ikke kan bemærke det.

At skære et billede til brug som baggrund kan være vanskelig , hvis du ikke ved, hvordan hver browser rent faktisk vil gøre og replikere stykkerne af billedet.

Hver browser kan replikere billeder og bruge dem på websiderne eller som baggrunde ved hjælp af CSS (cascading style sheets).

Et billede gentages ved at bruge CSS baggrundsegenskaben for at definere billedet og angive, hvordan man replikerer det. For eksempel:

krop {
baggrund: url ("images / sample.jpg") repeat-x;
}

Ovenstående kode indsætter sample.jpg- billedet som en baggrund i legemselementet og gentager det vandret. Attributet repeat-x indstiller gentagelse af billedet langs X-aksen. Du kan bruge følgende gentagelsestyper:

* Gentag-x for at gentage billedet vandret
* gentag-y for at gentage billedet lodret
* Gentag-xy for at gentage det både vandret og lodret
* Gentag ikke gentag billedet

Disse er følgende CSS-kodeeksempler for hver metode:

krop {
baggrund: url ("images / sample.jpg") repeat-x;
}

krop {
baggrund: url ("images / sample.jpg") gentag-y;
}

krop {
baggrund: url ("images / sample.jpg") repeat-xy;
}

krop {
baggrund: url ("images / sample.jpg") no-repeat;
}

Bemærk også, at du ikke er begrænset til at indstille baggrundsbilledet til legemselementet . Du kan indstille det til ethvert element på din side.

For korrekt at tegne et billede skal du sikre, at billedets kanter er i overensstemmelse med mønsteret og dermed skabe en sømløs baggrund på hjemmesiden. For eksempel viser billedet herunder, hvordan et mønster, der hedder titlen, er skåret forkert. Du kan se kanterne af hvert enkelt billede:

For at skabe en sømløs baggrund skal en webdesigner skære billedet på en sådan måde, at den venstre kant blander sig i den højre kant, og den øverste kant blandes i bundkanten som i billedet nedenfor:

Du kan se kanterne af de enkelte billeder sømløst blandes ind i hinanden. Dette billede blev oprettet fra nedenstående mønster:

Når du skalerer et billede, er den vigtigste faktor billedkvalitet og målopløsningen . Også en webdesigner bør tage højde for de forskellige billedformater, der er optimeret til hver bestemt billedstil.

De mest anvendte billedformater er:

* GIF - grafisk billedformat
* Jpeg - fælles billede ekspertgruppe
* PNG - bærbar netværksgrafik

GIF er et billedformat, der er optimeret til simpel grafik, f.eks. Tekst eller enkle former, cirkler, linjer osv. Det er ikke egnet til fotos. For eksempel:

Eksempel GIF , billedstørrelse: 3,3KB

Eksempel Jpeg , billedstørrelse: 13,5KB

Du kan tydeligt se, at JPEG-billedformatet ikke passer til grafik. Dette format skal hellere bruges til fotos, og GIF-formatet skal bruges, når det handler om grafik.

I tilfælde af store billeder er det vigtigt at optimere et billede så meget som muligt for at spare båndbredde (mere om båndbredde senere i denne vejledning). Undgå at scalere små billeder, fordi billedets opløsning vil falde betydeligt som du kan se på skærmbilledet på et websted nedenfor (prøv at se dette på en stor opløsningsvisning):

Problemet med ovenstående eksempel er, at hjemmesiden automatisk skalerer billedet i henhold til skærmopløsningen, hvilket får baggrundsbilledet til at blive pixeleret, når det ses på store opløsningsdisplays.

Påvirkningen af store baggrunde på båndbredde og webstedets ydeevne

Store baggrunde svarer normalt til store filstørrelser, som kan føre til stor indvirkning på båndbredde og også brugeroplevelse .

Båndbredden er mængden af data, der flyttes fra sted til sted, specifikt fra serveren til klienten . Ved at bruge stor grafik kan en websteds belastningstid stige betydeligt.

Det er derfor vigtigt at optimere dine billeder ved at bruge den relevante billedopløsning og format samt optimere hjemmesidens øvrige ressourcer som CSS og Javascript-filer.

Lad os se på følgende eksempel:

Her er netstedets brugsanvisning:

Der er 12 anmodninger, og i alt 627 KB downloades. Dette betyder, at hver gang nogen besøger hjemmesiden downloades 627 KB, tilføjes den samlede båndbredde på hjemmesiden. Hvis hjemmesiden har et gennemsnit på 50 besøgende om dagen, vil det i alt 31.350 MB pr. Dag.

Ved at bruge Firebug plugin til Firefox Du kan se dine forespørgsler på webstedet og få en ide om, hvordan du optimerer det.

Tips og tricks

Forsøg ikke store beslutninger og beslutninger, som du ikke kan teste hjemmesiden på. Du kan bruge tjenester som f.eks Browsershots at teste dit websted ved hjælp af forskellige skærmopløsninger, browsere osv.

Høje opløsninger er ikke alt at overveje, når du designer websites, bør du også overveje mindre skærmopløsninger . Hvad hvis en stor baggrundswebside ses fra en mobiltelefon? En webdesigner skal designe for hver browser for at præsentere hjemmesiden for et stort publikum. Disse dage har flere og flere besøgende tendens til at surfe på internettet med enheder som iPhone og andre smartphones.

Nogle gange kan du ønske at målrette mod bestemte browsere baseret på den enhed, som den besøgende bruger eller baseret på skærmstørrelse alene, ved at bruge et bestemt stilark. Ved hjælp af en lille Javascript kode kan du oprette en stilark switcher, eller du kan bruge allerede lavet kode til dette. EN Liste Apart har en god tutorial om hvordan man opretter en stil switcher.

Et andet trick er at bruge en mobiltelefonemulator, som er et program, hvor du kan se, hvordan dit website ser ud på en bestemt mobiltelefon. For eksempel kan du bruge iPhone emulator Firefox-tilføjelse.

Optimering af dine baggrunde er afgørende ved hjælp af teknikker som f.eks CSS sprites .

Hvis det billede, du vil bruge i baggrunden for dit websted, er for lille eller vil se akavet ud, så lav hele designet rundt om billedet. For eksempel:

Som du kan se, er billedet lille med det formål, hvilket tilføjer hele designet.

Et andet tip er at skabe en enkelt farve bred plads på selve billedet , og brug derefter denne farve til at male resten af baggrunden, hvilket gør en sømløs blanding mellem billedet og den faktiske baggrund.

Her er billedet centreret, venstre og højre kant er en enkelt grålig farve, og resten af baggrunden er fyldt med denne farve.

Som den bedste anbefalede praksis bruger du store billeder, over 1700 pixel i bredden til at dække næsten 95% af de displaystørrelser, der er tilgængelige i dag .