En webbplats kod är viktig
Det pratas mycket om AI nu i designbranschen. Och med det så pratar folk mycket om verktygen som kan göra hela processen, från design till färdig webbplats som kan ligga i produktion. Dessa har funnits ett tag men dels börjar de nu också implementera “nya AI lösningar” och då blivit populära just nu, och sen går de lite hand-i-hand med designerns dröm att ha full kontroll över slutprodukten.
Ett verktyg är Framer, där man kan skapa en webbplats “utan kod”. Framer är lite imponerande, men bara för att du kan skapa en webbplats “utan att kunna koda” så ska man kanske inte göra det.
När man kodar upp en webbplats så är det mer än att bara få den att se snygg ut. Mer än det ytliga som form, struktur och olika interaktiva funktioner så som accordions.
HTML är ett “mark-up language” och då gäller det att man använder rätt taggar för att beskriva vad saker är. Rubriker ska ha sina rubriktaggar (H1, H2, H3 osv) i rätt följd utan att man hoppar över en nivå. De olika områdena ska vara markerade rätt (header, nav, aside mfl), och det ska alltid finnas en yta som är huvudinnehållet (main).
Länkar ska vara länkar och knappar ska vara knappar. Här har många utvecklare som inte varit så insatta i HTML gjort fel under många år och kör allt med en generell “div” tag och sen med hjälp av JavaScript till exempel ändrar om funktionen så den beter sig som man vill.
Och om utvecklare har gjort fel i många år, ska nu designers komma och fortsätta att göra fel?
Men varför är det viktigt med rätt kod?
Alla använder inte vanliga webbläsare, många använder hjälpmedel så som talläsare att ta till sig information på en webbplats. Den läser upp innehållet med en röst och navigerar på sidan med hjälp av länkar, rubriker och områden. Då gäller det att HTML:en är korrekt så att den vet vad allt är, och att användaren lättare kan navigera runt och ta till sig innehållet och utföra sin uppgift. Det ger en större publik till en webbplats. Är allt bara “divs” så har den ingen chans att sortera ut innehållet på rätt sätt.
Mer problem blir det om man börjar göra interaktiva saker så som just accordions, som är en funktion som visar och döljer ett textstycke under en rubrik. Rätt vanligt förekommande under FAQ:er på webbplatser.
Dels måste koden vara korrekt så att man vet att den är klickbar, men man måste också skicka med instruktioner till exempelvis en talläsare om ytan är stängd eller öppen.
Jag såg nyss ett exempel på detta på LinkedIn, där en UI designer glatt meddelade att han gjort om en sida från ett företag, sidan innehöll accordions och han hade gjort det helt själv i Framer. Det såg bra ut om man gick in med en vanlig webbläsare och var fullt seende och inga problem med ens motorik.
Problemet var just det, tittade man på originalsidans kod så fanns det lite förbättringar, men de hade ändå fått med ARIA kod för att berätta om nått var stängt eller öppet, det fanns kod som berättade att nått var klickbart, med mera.
Tittade man på designerns Framer sida var allt “divs”. Utan någon information till talläsare.
Nu har jag inte använt Framer så mycket själv men jag tror man kan ändra sådana saker i verktyget, välja vilka taggar man ska använda mm. Men det betyder ju att den som bygger sidan måste kunna kod ändå. Så en designer som aldrig kodat kanske inte ska sitta och bygga sidor som ska ut i produktion oavsett om det om det ser fint ut. Hen måste veta vilka taggar man ska välja, och lägga på eventuell ARIA-kod där det hör hemma. Det finns mer till en webbplats än att det bara ska se fint och fungera för alla som ser, kan använda pekdon och tangentbord och inte har några problem med att röra sig. Man måste kunna kod för att skapa produktionsfärdiga webbplatser, oavsett om man skriver den själv eller låter ett verktyg skapa koden åt dig.
Tillbaka