AI-appar och mobilanpassning: Vad du kan kräva av verktygen

Konstruktivistisk modell i målat trä: tre benvita block står bredvid varandra i en bred rad till vänster, och till höger reser sig ett enda smalt block på högkant med en turkos fot. En smal röd stav skär diagonalt genom kompositionen. — Mobilanpassning handlar inte om att krympa innehållet, det handlar om att stapla om det.

Kort sagt

Låt inte AI:n gissa sig till mobilvyn i efterhand. Kräver du inte "responsiv design" redan i din första prompt kommer AI:n att bygga en app med fasta bredder som spricker i telefonen. Genom att minska bredden på ditt webbläsarfönster kan du testa mobilvyn direkt på datorn. När det går sönder, beskriv för modellen vad som överlappar eller hamnar utanför skärmen — inte bara "det ser konstigt ut på mobilen".

Varför det går sönder

När du ber en AI att "göra en instrumentpanel" bygger den oftast det som ser bäst ut på ytan den tror att du har. Om du inte säger något annat, utgår koden från en bred, liggande yta. Tre kolumner med diagram, knappar bredvid varandra, breda tabeller.

När den liggande ytan plötsligt blir en smal, stående yta (din telefon), finns det tre sätt gränssnittet kan reagera på:

Det krymper allt så mycket att texten inte går att läsa.
Det behåller storleken, men du måste scrolla i sidled för att se hela appen.
Det staplar kolumnerna ovanpå varandra i stället för bredvid varandra.

Sätt 3 är det rätta, och det kallas responsiv design. Men det händer inte av sig självt. Du måste beställa det.

Testa själv utan att använda telefonen

Du behöver inte plocka upp telefonen efter varje ändring för att se om AI:n gjorde rätt. Du kan simulera det direkt på datorn:

Dra in webbläsarfönstrets högra kant. Peka på kanten tills muspekaren blir en dubbelpil, håll ner och dra åt vänster så att fönstret blir smalare.

Fortsätt tills fönstret är ungefär lika brett som din telefon. Håll upp telefonen mot skärmen och jämför — det är så smalt det ska bli. Ungefär en tredjedel av en vanlig laptopskärm.

Granska resultatet. Hamnade de tre kolumnerna prydligt ovanpå varandra? Bra. Ligger knapparna i en enda rörig klump och halva texten är utanför rutan? Då har du en trasig mobilvy att rapportera.

Vanlig miss: att klaga för sent

Bygger du fem sidor och lägger in all funktionalitet innan du ens testar hur det ser ut i ett smalt fönster, blir det mycket svårare för AI:n att rätta till det efteråt. Testa fönsterbredden redan efter den första layout-prompten.

Så beställer du en responsiv app

Tricket är att be om mobilanpassning innan modellen skrivit en enda rad kod. Lägg in detta redan i din startbeskrivning:

I din startprompt

Appen måste vara helt responsiv (mobile-first).
På en datorskärm ska layouten utnyttja bredden, men på en mobiltelefon ska elementen automatiskt staplas i en kolumn, ingenting får kräva sidoscroll, och knappar måste vara stora nog att trycka på med en tumme.

När det ändå blir fel

Om appen är klar, och du drar ihop fönstret och ser att tabellen försvinner ut till höger, skriv inte "tabellen är konstig på mobilen". Beskriv mekaniken:

Reparationsprompt

När skärmen är smal (som på en telefon) trycks min tabell utanför skärmens kant så man måste scrolla i sidled.
Ändra koden så att tabellen antingen blir rullningsbar på insidan av sin egen låda, eller ändrar format så att raderna blir egna kort när skärmen är liten.

Läs mer om hur du beskriver det du ser i stället för att gissa vad som är fel i artikeln Beskriv det du ser, gissa inte.

Tre typiska mobilproblem och deras lösningar

Menyn tar upp hela rutan

På datorn är en lång meny högst upp jättebra. På mobilen täcker den allt. Beställ: "Gör om toppmenyn till en hamburgermeny när skärmen är smal."

Knapparna är för små

Muspekaren är exakt, din tumme är klumpig. Beställ: "Öka marginalerna (padding) inuti alla knappar så att de blir minst 44x44 pixlar stora och lätta att trycka på."

Modalen (popupen) går inte att stänga

En popup hamnar ibland utanför skärmkanten, och stäng-krysset försvinner. Beställ: "Se till att modalfönstret har max-width 100% och kan scrollas inuti sig självt om innehållet är för långt."

Kravet på 44 pixlar är inte en smaksak utan en tillgänglighetsfråga: träffytor som är mindre än så stänger i praktiken ute den som har darrhänta fingrar eller nedsatt finmotorik. Fler sådana prov som du kan göra själv, utan att kunna kod, finns i Tillgänglighet utan kod.

Tumregel

Dra alltid ihop fönstret efter att AI:n lagt till en ny funktion som tar plats. Det är mycket lättare för modellen att fixa en trasig vy medan den har just den funktionen färskt i minnet, än i slutet av dagen när hela appen är färdig.