Hvordan gør man en hjemmeside mobil venlig ?

Hjemmeside skal være mobilvenlige (Responsive) og tilpasse sig mobile enheder for at give besøgende den bedste oplevelse uanset hvilke enhed, browser og skærmstørrelse de benytter.

Det er den nye standard og den er kommet for at blive og ikke mindst konkurrere el. erstatte de meter via af mobil apps der er udviklet til de store hjemmesider der i bund og grund bare giver brugeren en mobil venlig visning af hjemmesiden, ofte med nedsat funktion og irritation.

Hvordan gør man så sin hjemmeside mobil venlig ?

Alt efter hvor du er i dit projekt, hvordan det er bygget er der forskellige metoder du kan benytte og her vil jeg give dig et par idéer baseret på et par forskellige situationer som burde give dig en idé om hvor du står i forhold til en mobil venlig hjemmeside.

Koder du selv fra bunden eller har du et design du helst vil beholde ?

Så er det igang med html og css med god html markup samt css kan du lave regler for hvordan din hjemmeside skal opfører sig efter skærmstørrelse, på den måde kan din hjemmeside reagere alt efter skærmstørrelse og blive vist på en måde så det passer til skærmen.

Det du helt specifik skal kigge på er css funktionen @Media, se eksempel herunder:

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}

Ved at benytte @Media kan du sætte specifikke regler efter skærmstørrelse eksempelvis som ovenfor, hvor der refereres til en maks skærmstørrelse på 300px, det kunne også være eksempelvis min-width:480px; eller hvad der lige passer i dit tilfælde. Du kan læse mere om @Media ved blandt andet W3Schools her 

Benytter du et CMS system (WordPress, Joomla, Umbraco m.fl) ?

Så har du flere muligheder for at gøre din hjemmeside mobil venlig, der er plugins til næste alle cms / blog systemer som gør det muligt at vise din hjemmeside i et mobil app lignende version (ikke noget jeg anbefaler) men dog stadig en mulighed.

Næste mulighed er som ovenfor, dyg ned i koden og lav css efter skærmstørrelse og behold dit design.

Sidste mulighed og nok både nemmeste hurtigst er at skifte theme, design, template på din hjemmeside med en nyere og mere tidssvarende, dermed skal du ikke døjer en masse med at kode og rode rundt i css, dine besøgende bliver mødt af et nyt lækkert design og alle er glade 🙂

Udover de gratis designs du finder igennem kontrolpanelet i dit cms system kan jeg klart anbefale at købe et nyt design til din hjemmeside her (ThemeForest) hvor du kan finde designs og mange andre hjemmeside relateret ting til rimelige priser og i en kanon kvalitet til prisen.

Er du i tvivl om hvordan din hjemmeside ser ud på forskellige platforme, kan jeg anbefale at du besøger http://ami.responsivedesign.is som er en simpel service der viser din hjemmeside på forskellige enheder nemt og hurtigt.

Jeg håber at du fik svar på nogle spørgsmål, er der noget du mangler er du velkommen til at skrive en kommentar længere nede på siden…

Skriv en kommentar