Så gör du en webbplats mobilanpassad

För att göra en webbplats mobilanpassad lägger du till en viewport-metatagg, bygger layouten mobile-first med flexibla bredder och använder CSS-brytpunkter för att ordna om den på större skärmar: staplar kolumner, fäller ihop menyn och skalar bilder så att de passar. Kontrollera sedan varje sida i telefonbredd för sidledes scroll, för liten text och knappar som är för små att trycka på. På en AI-byggd sajt löser ofta en tydlig prompt och en genomgång i en förhandsvisning i telefonstorlek de flesta problemen.

Vad responsiv design egentligen är

En responsiv sajt använder en uppsättning sidor och URL:er som anpassar sig till skärmen. I stället för en separat ”m.”-sajt ändrar CSS layouten vid vissa bredder, kallade brytpunkter. Byggstenarna:

• Viewport-metataggen säger åt mobilwebbläsare att använda enhetens verkliga bredd.
• Flytande layouter använder procent, flexbox och grid i stället för fasta pixelbredder.
• Mediafrågor (eller ramverksklasser som Tailwinds md:) ändrar layouten över en viss bredd.
• Flexibla medier: bilder och videor som krymper för att passa sin behållare.

Det spelar roll eftersom mycket av din trafik sannolikt kommer från telefoner, och eftersom Google indexerar mobilversionen av dina sidor. Om innehåll eller länkar bara finns på datorn kanske Google inte ser dem heller.

Alternativ och avvägningar

Mobile-first är oftast enklare: en enkolumnslayout är den lättaste, och att lägga till kolumner när utrymmet växer är mindre arbete än att ta bort dem.

Delarna som oftast går sönder

Viewport-taggen

Om en sida ser ut som en liten datorsajt på en telefon saknas viewport-taggen:

<meta name="viewport" content="width=device-width, initial-scale=1">

Lägg inte till maximum-scale=1 eller user-scalable=no. Att blockera zoom med två fingrar gör sajten svårare att använda för personer med nedsatt syn.

Fasta bredder och sidledes scroll

Den vanligaste responsiva buggen är något som är bredare än skärmen: en fast width: 1200px-behållare, en bred tabell, en lång URL eller ett kodblock, en bild utan max-width: 100%. Hela sidan scrollar då åt sidan. Använd max-width i stället för width, låt texten radbrytas och ge breda saker sitt eget scrollområde.

Navigation

Fem länkar i datorns meny får sällan plats i en telefon. Det vanliga svaret är en menyknapp som öppnar en panel. Behåll de två eller tre viktigaste åtgärderna synliga, till exempel ”Boka”, ”Varukorg”, ”Logga in”, och se till att menyn fungerar med tangentbord och enkelt stängs.

Text och klickytor

• Brödtext runt 16 px är ett rimligt minimum på telefoner. Inmatningsfält med mindre text får iPhone att zooma in när man trycker på dem.
• Gör knappar och länkar lätta att träffa. WCAG 2.2 AA sätter ett golv på 24 gånger 24 CSS-pixlar (eller tillräckligt med avstånd); runt 44 pixlar är bekvämare för tummar.
• Lämna utrymme mellan intilliggande länkar så att folk inte träffar fel.

Tabeller och data

Breda tabeller är den svåraste delen av en responsiv app. Alternativ, i prioritetsordning: visa färre kolumner på telefoner, gör om varje rad till ett kort, eller lägg tabellen i en horisontellt scrollbar behållare med första kolumnen fastlåst. Välj efter vad folk behöver jämföra.

Bilder och medier

Använd max-width: 100% och height: auto, servera mindre filer till små skärmar med srcset och sätt bredd och höjd för att undvika layouthopp. Inbäddade videor och kartor behöver en responsiv wrapper så att de behåller sitt bildförhållande. Mindre bilder gör också sidorna snabbare, se hur du gör din webbplats snabbare.

Formulär

Stapla etiketter ovanför fälten, gör fälten fullbredd och använd rätt indatatyper (type="email", type="tel", inputmode="numeric") så att telefoner visar rätt tangentbord. Lägg skicka-knappen där en tumme når den, och håll den synlig när tangentbordet öppnas.

Interaktioner som bara fungerar med mus

Telefoner har ingen hover. Verktygstips, rullgardinsmenyer och förhandsvisningar som bara visas vid hover är osynliga för användare som använder touch. Gör dem fungerande vid tryck också.

Prompter som fungerar

För en ny byggnation, säg det direkt:

Bygg detta mobile-first. En kolumn på telefoner, två kolumner från surfplattebredd, full layout på dator. Ingen sidledes scroll vid 320 px bredd, brödtext minst 16 px, klickytor minst 44 px, en menyknapp på små skärmar och tabeller som blir kort på telefoner.

För en befintlig sida, beskriv vad du ser:

På telefoner scrollar /pricing-sidan åt sidan och de tre priskorten är ihopklämda bredvid varandra. Stapla korten vertikalt under 768 px, låt jämförelsetabellen scrolla horisontellt i sin egen behållare med funktionskolumnen fastlåst, och behåll datorlayouten oförändrad.

Kontrollera varje sida vid 375 px bredd. Lista allt som flödar över, överlappar, är text mindre än 16 px eller klickytor mindre än 44 px, eller bara fungerar med hover, och åtgärda sedan varje punkt.

Steg för steg

1. Bekräfta viewport-taggen i sidans head.
2. Testa vid 320–375 px bredd i webbläsarens enhetsläge eller en förhandsvisning i telefonstorlek. Scrolla varje sida från topp till botten.
3. Åtgärda sidledes scroll först. Hitta elementet som är för brett; allt annat är svårt att bedöma tills det är borta.
4. Ordna navigationen: menyknapp, viktiga åtgärder synliga.
5. Kontrollera text, klickytor och formulär i varje nyckelflöde: registrering, sökning, utcheckning, kontakt.
6. Hantera tabeller och medier: kort eller scrollbehållare, responsiva bilder och inbäddningar.
7. Kontrollera mellanstorlekarna. Dra bredden långsamt från telefon till dator; layouter brukar gå sönder runt surfplattebredd.
8. Testa på en riktig telefon. Emulatorer missar saker som att skärmtangentbordet täcker en knapp, notcher och hur snabb sajten känns på mobildata.

Vanliga misstag

• Att bara testa en telefonstorlek. Kontrollera en liten telefon, en stor telefon och en surfplatta.
• Att gömma innehåll på mobilen för att få det att passa. Google indexerar mobilversionen, och användare på telefon vill ha samma information.
• Att stänga av zoom i viewport-taggen.
• Bilder i datorstorlek på telefoner, som kostar laddningstid och data.
• Fasta element som staplas: en fastlåst header, en cookie-banner och en chattbubbla kan täcka halva telefonskärmen.
• Popup-fönster som inte går att stänga på en liten skärm, eftersom stängknappen ligger utanför skärmen.

Mobilchecklista

• Viewport-metataggen finns; zoom inte inaktiverad
• Ingen sidledes scroll vid 320 px på någon sida
• Brödtext ca 16 px; inmatningsfält zoomar inte
• Klickytor tillräckligt stora och med avstånd
• Menyn fungerar på telefoner och med tangentbord
• Tabeller läsbara på telefoner (kort, färre kolumner eller scrollbehållare)
• Bilder och inbäddningar skalar; rätt stora filer serveras
• Formulär använder rätt indatatyper; skicka-knappen går att nå
• Inget viktigt är beroende av hover
• Testad på minst en riktig telefon

Responsiv layout är också en del av tillgänglighet: WCAG kräver att innehållet fungerar vid 320 px bredd och vid 200 % zoom. Om du bygger en app som människor använder dagligen på telefonen går hur du bygger en mobilvänlig webbapp längre, inklusive installerbara PWA:er.

Responsiv design på Mythex

Mythex bygger responsiva webbappar, och på Pro kan de paketeras som Android- och iPhone-appar. I arbetsytan klickar du på telefonikonen ovanför förhandsvisningen (Switch to Mobile) för att se din app i en ram i telefonstorlek, och drar i ramens kant för att prova andra bredder (Förhandsvisning och kod). Dokumentationen har en kort startprompt för att åtgärda layout på små skärmar i prompter för mobilanpassning. Kontrollera även på en riktig telefon: öppna den publicerade URL:en, eller dela en förhandsvisningslänk och öppna den på telefonen.

Frågor