Traktens symbolTraktens

Tips inför din webbsida

🖼 Bilder — storlek och format

Stora bilder är den vanligaste orsaken till en seg webbsida. Google straffar långsamma sidor i sökmotorn. Komprimera alltid innan du laddar upp.

Hero-bildUnder 1 MBStor bild högst upp
Övriga bilderUnder 500 KBKort, grid, galleri
Format för fotoJPGMinsta filstorlek
Format för loggaPNGGenomskinlig bakgrund
1Gå till tinyjpg.com
2Dra in dina bilder — de komprimeras automatiskt
3Ladda ner och använd de komprimerade bilderna
Öppna tinyjpg.com →
🔖 Favicon — ikonen i webbläsarfliken

Favicon är den lilla ikonen som syns i webbläsarfliken, i bokmärken och när någon sparar sidan på sin telefons hemskärm. Glöms ofta bort — men märks direkt när den saknas.

En modern webbsida behöver flera storlekar av faviconen: liten för webbläsarfliken, stor för iPhone-hemskärmen. Det låter krångligt men tar två minuter med rätt verktyg.

1Gå till favicon.io eller realfavicongenerator.net
2Ladda upp din logga i valfri storlek — så stor som möjligt
3Klicka "Generate" — du får alla storlekar i en zip-fil
4Ladda upp zip-filen till Lovable eller be din byggare lägga in den
Öppna favicon.io → Öppna realfavicongenerator.net →
📱 Mobiltest — gör det dag ett

Över 60% av besökare på gårds- och lokala sidor surfar från mobilen. Öppna sidan på din egen telefon så snart den är uppe — inte tre veckor senare. Det är mycket dyrare att laga i efterhand.

Testa även på en annan persons telefon om möjligt — Android och iPhone kan se lite olika ut.

🔤 Typsnitt — max två på hela sidan

Använd ett rubrikfont (H1, H2, H3) och ett brödtextfont. Aldrig fler. Fler typsnitt gör sidan rörig och oprofessionell — även om varje font i sig är fin.

Det är exakt det du väljer i stilverktyget. Håll dig till de valen genom hela projektet.

🎨 Logga — ladda upp rätt version

Be alltid om loggan som PNG med genomskinlig bakgrund — inte JPG. En JPG-logga har alltid en vit ruta runt sig som ser fel ut på färgade bakgrunder.

Om du bara har JPG kan du ta bort bakgrunden gratis på remove.bg på några sekunder.

Öppna remove.bg →

StilverktygVälj stil — se resultatet direkt — kopiera prompt

Företagsnamn / logga
Bakgrundstema
Ljus bakgrund Rekommenderas för gård och lokal verksamhet
Färgpaletter — snabbval
Justera färger — klicka rutan eller skriv hex
Knappstil
Knapp
Rund
Knapp
Kantig
Knapp
Pill
Typsnitt
Lora Varm och litterär. Bra för gård, hantverk och natur.
Inter Ren och modern. Lättläst i alla storlekar.
Rubriktypsnitt i praktiken
H1
Gårdsnamn
Sidans stora rubrik
H2
Sektionsrubrik
Avsnittets rubrik
H3
Underrubrik
Kortets rubrik
P
Välkommen till vår gård.
Brödtext
Lägg till i prompten
Mobilresponsiv Hamburger-meny, touch-knappar, alla skärmar
SEO-redo struktur Rätt H1-hierarki, meta-platshållare, alt-text
Tillgänglig WCAG AA kontrast, tangentbordsnavigering
Färdig Lovable-prompt
Förhandsgranskning — uppdateras direkt med dina val
En gård i Värmland
LOGGA H1
En rubrik som fångar känslan H2

Välkommen till vår gård. Här berättar vi om vad vi gör, vår passion och historia. Välkommen att besöka oss.

Se utbud →
Sida 1 H3

Beskrivning av vad man kan uppleva, besöka eller köpa. Vad gör det unikt?

Läs mer →
Foto
BOKNING H2
Vilka tar du med dig?
Se kalender →
Foto
Sida 2 H3

Butik, produkter eller upplevelse. En möjlighet att komma nära verksamheten.

Utforska →
Stämningsfoto — fullbred, ingen text
Sida 3 H3

Fördjupning om en produkt, råvara eller hantverk. Berättelsen bakom det som säljs.

Läs mer →
Foto
✦
Nyheter från gården H3

Håll dig uppdaterad om allt som händer.

Foto
Foto
Foto
Lär känna verksamheten H2

Gården är ett genuint modernt jordbruk, unikt i sitt slag. Välkommen att läsa mer om oss.

Läs om oss →