Sidens højde, bredde og justering

Før smartphones og tablets blev populære, oprettede webdesignere sider med fast bredde, der arbejdede med de mest almindelige skærmstørrelser – normalt 1024 pixels bredt og 768 pixels højt. Alt dette ændrede sig omkring 2013 med den enorme stigning i iPhone-brug til at surfe på nettet. Nu er der ikke noget enkelt svar på “hvilken størrelse skal mit websted have?” – alle websteder skal være lydhøre.

Responsivt design betyder oprettelse af websider, der tilpasser sig forskellige enheder og skærmstørrelser. Det bruger det samme indhold, men præsenterer det forskelligt, afhængigt af om du bruger en mobiltelefon, iPad, bærbar computer eller stationær computer. Det reagerer på forskellige interaktioner, såsom svævetilstand for brugere med en mus og klikhændelser til berøringsskærme, og ændrer layoutet, så det passer til den tilgængelige skærm.

At have et responsivt websted er vigtigt, ikke kun så dine besøgende får den bedst mulige oplevelse, det påvirker også din søgemaskineplacering. I 2015 begyndte Google at inkludere, hvordan mobil- et websted er i sin placeringsalgoritme for mobiltelefoner. Du kan bruge deres mobilvenlige testværktøj til at kontrollere dine websider.

Mobil designudfordringer

De fleste tablets kan vise ikke -responsive websider uden problemer, men mobiltelefoner har flere udfordringer:

• Skærmform – de fleste smartphone-brugere holder deres telefoner lodret i stående tilstand. Dette betyder, at skærmen er højere end den er bred, det modsatte af en stationær computer eller bærbar computer.
• Skærm størrelse – smartphones har meget små skærme sammenlignet med stationære computere, så designere skal gøre siderne enklere. Forskellige modeller har forskellige skærmstørrelser, men som en tommelfingerregel sigter du mod 340 px som en maksimal bredde for dit mobile portrætdesign.
• Brugerinteraktioner – mobiltelefoner har ikke en mus, så effekter, der vises ” på pegefelt eller “ved sløring” fungerer ikke.
• Navigation – de fleste websteder har tendens til at have en topnavigationslinje i fuld bredde, der slet ikke fungerer på en smartphone i stående tilstand.
• Lavere båndbredde – det afhænger af, om du befinder dig midt i en by eller på landet, men mobile brugere på en mobilforbindelse (forbindelse til internettet ved hjælp af “data”) kan have lavere internethastigheder. Det kan være en god idé at udskifte baggrundsvideoen på fuld skærm på mobilversionen af dit websted.

Responsiv til redning

Responsivt design møder disse udfordringer ved at lade designere skræddersy deres websider til forskellige enheder. Der er to hovedkoncepter, som vi bruger:

• Flydende layout – disse websider skaleres glat fra en desktopcomputers størrelse ned til en mobil browser. Dette er teknisk mere kompliceret, fordi det kræver, at siden ser godt ud i enhver tænkelig størrelse
• Flere layouts – dette er en enklere version, hvor forskellige designs oprettes til de mest almindelige skærmstørrelser, f.eks. store stationære computere, mindre bærbare computere og iPads og mobile enheder i stående tilstand. Der kan være en mellemstørrelse for iPads i portrættilstand.

Et punkt at huske på er, at bare fordi du har skærmplads til rådighed, behøver du ikke bruge det. Design, som stræk for at være i fuld bredde i hver skærmstørrelse kan blive ulæselige på meget brede skærme. Det er bedst at sigte mod en maksimal bredde, der fungerer for designet, for eksempel kan en 1300 px bred side læses i to kolonner, men er omtrent lige så bred som de fleste mennesker kan komfortabelt læse en enkelt kolonne med tekst. Vi har lettere ved at følge tekst, der ombrydes i mindre blokke.

Der er ingen fold

Det er vigtigt ikke at få fastlagt præcist, hvordan et webstedsdesign ser ud alene. computer. Du skal overveje, hvordan det vil se ud på andre enheder og andre menneskers computere.

Hvilke browsere dine besøgende bruger, hvor mange værktøjslinjer og bogmærker de har, hvis de har zoomet på deres skærm i, orienteringen af deres tablet eller telefon og hvilken type skærm de har, vil alle påvirke en sides farve, layout og flow.

Når skærmbilleder var af samme størrelse, brugte folk beskrivelsen af nederste kant på skærmen som “fold” og havde til formål at vise det vigtigste indhold over dette, så besøgende ikke skulle rulle ned. Der er ikke længere en fold, eller mere præcist er der mange fold, så det er vigtigt for nøglebeskeder og opfordringer til handling, der skal vises tydeligt øverst på en side. Du skal ikke bekymre dig om at rulle! Rulning er fint på en mobil eller tablet, fordi det er let at gøre på en berøringsskærm. En lang side på en desktop-side kan være trættende at rulle med en mus, men lidt rulning er fint.

Ændring af mode og brugbarhed

Siden skiftet fra browsing på større skærme til mobiltelefoner, den renere, mere grundlæggende stil, der fungerer bedre på mobiltelefoner, er begyndt at informere webstedsdesign generelt. Designs til større skærme er også blevet fladere og mere enkle.Dels er det sådan, at mobile versioner af websteder ikke ser en verden bortset fra det samme websted på andre enheder, men det er også en mode inden for webstedsdesign.

Er disse aktuelle designtendenser, der gør websteder mindre lette at bruge? En interessant ny undersøgelse antyder, at de kan være.

For at forstå, hvad de enkelte elementer på en side er beregnet til, og hvorfor du har brug for dem, skal du læse vores anatomi på en webside.

Vores lydhør design

Vi foretrækker flere layouts af omkostningsårsager. Vores lydhøre hjemmesider findes typisk i tre størrelser, beskrevet nedenfor med Cornwall Healthy Schools som et eksempel.

Store stationære computere

Skrivebordslayoutet er 1200 px bredt og passer derfor til computerskærme på computere (typisk 1366 px x 768 px eller større) såvel som til større bærbare computere. Designet sidder midt på siden med hvidt mellemrum til venstre og højre.

Laptops og iPads

iPad-layoutet er 970 px bredt, hvilket passer fint på en iPad-skærm i liggende retning med lidt hvidt rum til venstre og højre. Dette design passer også til mindre bærbare computere og ældre computere med en skærmstørrelse på 1024 px ved 768 px. Det vises også til smartphones i liggende retning.

Dette layout har nøjagtig den samme funktionalitet som desktop-layoutet, men alt er nedskaleret for at passe til en mindre skærm.

Mobile enheder

Mobillayoutet er designet til at passe iPhones og andre smartphones i stående tilstand med en bredde på 340 pixel. Som du kan se, er der nogle layoutforskelle, og funktionaliteten er ofte forenklet for at give brugerne mulighed for at interagere med hjemmesiden ved hjælp af deres fingre – knapper er normalt større. Hjemmesiden har ofte en pop op-hamburgernavigation, der erstatter hovednavigationslinjen øverst – skønt denne ikke “t.

Oversigt

Så i resumé er der ikke t et svar på spørgsmålet “hvilken størrelse skal min hjemmeside have?” – det afhænger af dine besøgende! Det er meget vigtigt at skræddersy størrelsen på skærmen, så den passer til de enheder, dine besøgende har.

For mere information om at få mest muligt ud af dit websted, kontakt os.