Confirmshaming: Den mörka sidan

Confirmshaming är en väldigt aggressiv typ av marknadsföring, där den huvudsakliga idén verkar vara att piska fungerar bättre än morot när det kommer till att påverka användares beteende på nätet.

Confirmshaming går ut på att använda webbdesign och innehåll på webben på negativa sätt, t.ex. via korta texter som skuldbelägger, skämmer ut eller helt enkelt är otrevliga mot besökarna på webbplatsen. Ibland förstärks effekterna av dessa texter genom att medvetet göra det svårt för besökare att tacka nej till ett erbjudande eller stänga en popupruta.

Även om antal klick och andra mätvärden kan öka genom att använda dessa manipulativa mönster, anser vi att confirmshaming i grunden är mobbning och inte bör användas.

Läs en mer utförlig artikel om fenomentet på vår blogg.

Stäng

Från idé till app

Lyssna på avsnittet om du vill veta vilka de vanligaste fallgroparna är, och hur man bäst undviker att begå de vanligaste misstagen när man försöker förverkliga sin app idé.

Lyssna på avsnittet här (på engelska): How to go from a great idea to a reliable application

Boagworld Show är en av de äldsta och mest välkända podcastsändningarna inom webbdesign, UI och UX. När det stod klart att säsong 18 öppnades för allmänheten beslutade vi oss omedelbart för att bidra.

Stäng

Säker med SSL

Har du lagt märke till att endel webbadresser börjar med ”https” och inte bara ”http”? Det extra ”s” på slutet står för Secure, och indikerar att webbplatsen har ett SSl certifikat installerat.

Google annonserade 2016 att Chrome framöver skulle visa en varning på webbsidor som hanterar inloggningar och betalningsinformation om de saknade SSL certifikat.

WordPress har också börjat röra sig mot SSL under 2017, vilket för många ytterligare ökar anledningen att skaffa ett extra ”s” på slutet av ”http”.

Läs mer om SSL på vår blogg.

Stäng

Checklista för att Publicera bilder online

• Kontrollera att du har rätt att använda bilden!
• Välj en rimlig bildstorlek. Anpassa bildens storlek till hur mycket plats den kommer att uppta på skärmen.
• Välj rätt bildformat baserat på bildens motiv.
• Komprimera bilden innan du publicerar den på nätet.

Läs mer om att publicera bilder online på vär blogg: Guide till att publicera bilder på webben

Stäng

Välja Rätt Typsnitt

Om du inte redan har sett Saturday Night Live-sketchen där Ryan Gosling freakar ut över valet av typsnittet Papyrus på en filmaffisch, har du något att se fram emot. Bortsett från Papyrus, besök även den här webbsidan, innan du bestämmer dig för att använda ett annat (ö)känt typsnitt, Comic Sans.

Guide för att välja ett typsnitt:

• Se till att typsnittet matchar innehållet i texten den ska användas för. Om typsnittet är tänkt att användas till en serietidning, för all del, använda Comic Sans om du måste.
• Se till att välja ett typsnitt som är lättläst i kontexten det används. Fetstil och dekorativa typsnitt används oftare till rubriker. För längre textavsnitt är det bättre att använda typsnitt som är designade för läsbarhet snarare än för ren estetik.
• Begränsa inte urvalet till de typsnitt som råkar finnas förinstallerade på datorn. Det finns miljontals av typsnitt att välja mellan, och några är till och med gratis att använda.
• Typsnitt, precis som andra designade produkter, påverkas av stämningar och influenser. När du försöker hitta matchande typsnitt är ett tips att leta efter typsnitt som representerar ungefär samma historiska period. Tänk på det som att försöka hitta en matchande outfit - man vill i allmänhet inte ha på sig en Hawaiiskjorta från 1980-talet tillsammans med ett par pluderhosor från 1500-talet.

Stäng

Vad är Progressiva Webb Appar

Progressive Web Apps (PWAs) kan bäst beskrivas som en blandning mellan native appar och webbapplikationer.

PWAs kan utnyttja vissa av de funktioner som tidigare bara varit tillgängliga för native appar, och viktigast av allt - de kan fungera utan att vara anslutna till Internet.

PWAs kan programmeras med hjälp av samma teknik som används för att bygga vanliga webbsidor, vilket gör dem kostnadseffektiva jämfört med att skapa flera olika native appar för olika plattformar.

Med det sagt, är den stora nackdelen att tekniken ännu inte är tillgänglig i sin helhet i alla webbläsare.

I Edge och Safari finns i skrivande stund (slutet av 2017) delar av den mest avgörande tekniken tillgänglig först om man aktivt går in i webbläsaren och ändrar på inställningarna.

Stäng

Senaste nytt

Teknik och IT är branscher i snabb och ständig förändring. Ett enkelt sätt att hålla sig uppdaterad med det senaste är att prenumerera på kurerade nyhetsbrev, som skickar de senaste och hetaste nyheterna direkt till din inbox.

Några tips på nyhetsbrev:

• Sidebar: 5 länkar varje dag om webbteknik, UI, UX och digital design
• Smashing Magazine: artiklar om webbdesign, UI, UX och front-end utveckling. Tidningen i sig är en av de mest respektabla och väletablerade publikationerna inom webbranschen, och nyhetsbrevet håller samma höga kvalitet.
• Codrops: länkar till de mest populära artiklarna inom branschen, och belyser ämnen som trendar för tillfället. Trots att de alltid erbjuder ett gratis typsnitt eller gratis ikoner med varje nyhetsbrev, är fokus mer på teknik än design.
• Versioning: en blandning av teknik, design och businessorienterade artiklar som fokuserar på de senaste händelserna inom webbranschen.

Stäng

iPhone X orsakar Designdebatt

När Apple släppte nya iPhone X, orsakade den lilla fliken i toppen på skärmen stora diskussioner och upprördhet bland designers.

Anledningen var att fliken knuffade runt på webbsidans innehåll när användare surfade. Detta ledde till frågan om huruvida utvecklare skulle ta hänsyn till fliken och skriva speciell kod för att hantera webbsidors beteende på iPhone X, eller om själva idén att skapa specifik kod för specifika plattformar var bakåtsträvande.

Om du har unnat dig en ny iPhone X och vill dölja den problematiska fliken, är vårt tips att ladda ner en skärmsläckare för att dölja den – i alla fall tills du behöver ett samtalsämne.

Läs mer om designdebatten:

• ‘Notch’ crazy, iPhone X mad: What designers think of iPhone X
• The iPhone X Notch is All About Branding

Stäng

Vad är AMP

AMP står för ”Accelerated Mobile Pages” och är ett nytt format för mobila webbsidor, framtaget av Google. Du har kanske sett ”AMP” bredvid en liten ikon föreställande en blixt i Googlesökningar (på mobilen) som indikerar att det är en länk till en AMP sida.

Google prioriterar AMP-webbplatser så att de hamnar högre upp i sökresultaten.

AMPs anhängare hävdar att tekniken bakom webbplatserna gör dem mycket snabbare på mobiler. Det leder i sin tur till nöjdare besökare, och att företag har större möjligheter att tjäna pengar p.g.a. kortare laddningstider och minskad avvisningsfrekvens.

AMP kritiker menar att Google får för stor kontroll över vilka webbplatser sökresultaten visar, samt menar att det finns oklarheter runt var exakt AMP-sidorna egentligen hostas.

Bilda din egen uppfattning (artiklarna är på engelska):

• www.ampproject.org
• AMPersand av Ethan Marcotte
• The meaning of AMP av Jeremy Keith
• Distributed and syndicated content: what’s wrong with this picture? av Hadley Beeman, W3C
• Embrace AMP or AMP wins av Dennis Forbes

Stäng

Firefox Quantum & Send

Mozilla Firefox utmanar Google Chorme med den senaste versionen av Firefox Quantum, som är imponerande snabb.

Firefox utvecklarverktyg anses redan vara det bästa sättet att inspektera den nya CSS tekniken Grid, och enligt ryktet planeras ytterligare ansträngningar för att förbättra övriga delar av utvecklarverktygen under 2018.

Som grädde på moset har Firefox lanserat en ny tjänst, Send, som skapar en säker, privat och krypterad nedladdningslänk till filer som t.ex. är för stora för att skickas via epost.

Tjänsten är ett pilotexperiement, och ska fungera i alla moderna webbläsare.

Stäng

GDPR

General Data Protection Regulation är en ny lag för alla EU nationer som träder i kraft 25 maj, 2018. Syftet med lagen är att ge ett bättre skydd för medborgarnas privata data. Företag och organisationer som inte uppfyller den nya lagstiftningens krav riskerar avsevärda böter.

De nya reglerna för hantering av privata datauppgifter berör både hur uppgifterna förvaras, säkerhetsrutiner och information till medborgare. Medborgare ska kunna kräva att få veta vilka uppgifter som lagras, varför de lagras och även att uppgifterna raderas.

TL;DR

En ny, omfattande lag som berör alla EU nationer och innebär en hel del extraarbete för alla företag och organisationer som hanterar någon form av användardata.

Stäng

Animationer på Webben

Det finns många sätt att lägga till rörelse till webbsidor:

• Animerad GIF: en bild som fungerar som en liten videoslinga. Nackdelen är att slingan ska hållas kort, och bildens bredd och höjd inte alltför stora för att inge göra filen för tung. Rörelserna i .gif bilder riskerar ofta att bli lite ryckiga eftersom man gärna vill spara in på antalet bildrutor för att få en lättare fil. Animerade .gif bilder används ofta i reklammail, som signaturer på forum och flitigt på sociala medier.
• Video: förutom att bädda in klipp från YouTube eller Vimeo, kan man också använda videoklipp som ligger på ens egen hosting. För ett tag sedan blev stora videobakgrunder populära på många landningssiter. Kom bara ihåg att hålla koll på videofilmernas filstorlek. För bästa resultat i olika webbläsare, se till att ladda upp de olika filformat som behövs.
• Animationer med hjälp av CSS kod: fungerar i moderna webbläsare, och är vanligt för att lägga till rörelse på exempelvis texter, bilder, menyer, knappar och länkar. Speciellt användbart för små animationer som ska uppmärksamma speciella händelser.
• Animationer med hjälp av canvas samt SVG och javascriptanimationer: Med hjälp av dessa tekniker är det möjligt att skapa mer komplexa animationer. Se exempel på animerade OS ringar. Kompatibilitet med olika webbläsare beror på vilken teknik som används.

Stäng

Style Guides
& Designmönster

Style Guides (fritt översatt ”stilmallar”) eller designmönster är samlade regler för hur en design ska se ut och användas. Reglerna hjälper designers och utvecklare att skapa konsekventa och enhetliga webbsidor och produkter. Reglerna är också ett stöd för att hålla ihop företagets/organisationens branding.

Svårigheten att inte avvika från den förutbestämda designen växer med projektets storlek. Att skapa den här typen av dokumentation är därför viktigare för större webbapplikationer eller varumärken, som också har resurser att ta utmaningen på allvar.

Några exempel på större organisationsers Style Guides / designmönster:

• Audi
• BBC
• Mailchimp
• Salesforce
• Yelp

Stäng

Tillgänglighet

Tillgänglighet på webben handlar om att göra innehåll åtkomligt för människor med olika typer av funktionshinder. De kanske mest uppenbara handikappen när det kommer till att tillgodogöra sig webbinnehåll är olika typer av synskador. Färgblindhet, nedsatt syn och blindhet måste beaktas. Färger och kontraster måste justeras för att göra innehållet enklare att se, och speciell kod måste läggas till för att göra webbplatsen ännu bättre för skärmläsare.

De växande möjligheterna att lägga till animationer och rörelse till webbsidor - som de populära parallaxeffekterna - kan orsaka problem för personer som lätt blir åksjuka. Sidor med den typen av effekter bör därför ha ett sätt att tillgodogöra sig innehållet utan effekter.

Besökare kan även ha dyslexi, eller ha funktionshinder som begränsar deras kognitiva färdigheter. Det är därför viktigt att inte använda alltför komplicerat språk eller för långa avsnitt på webbplatser där delar av besökarna förväntas ha dessa funktionshinder.

Besökare kan också ha motoriska svårigheter, så att de har svårt för att fylla i formulär eller flytta muspekaren.

Ju fler människor som behöver kunna använda en webbplats, desto högre blir kraven på tillgänglighet. De hårdaste kraven placeras oftast på offentliga webbplatser som måste vara tillgängliga för alla medborgare.

Stäng

Podcasts

Multitaska som ett proffs och håll dig uppdaterad med vårt urval av nybörjarvänliga, webbfokuserade podcasts*:

• Boagworld Show: tar upp både marketing, UX och affärsrelaterade tips relevanta för både frilansare och större byråer. En av de allra första webbfokuserade sändningarna, som fortfarande prdoucerar avsnitt om aktuella ämnen. En lättsmält podcast som vi även har medverkat på.
• CTRL+CLICK CAST: tar upp ämnen som är relevanta för såväl byråer som för deras kunder. Exempel på ämnen är branding, Google Analytics och underhåll av webbsiter.
• Syntax: teknikorienterad podcast med fokus på ämnen relevanta för utvecklare och det senaste inom webbutveckling.

För den intresserade finns det många fler högkvalitativa podcasts som fokuserar på olika discipliner inom webbranschen. Däremot förutsätter de flesta av dessa att lyssnaren redan har grundliga förkunskaper inom ämnet.

*Alla podcasts är på engelska.

Stäng

Performance

Performance är ett begrepp inom webbindustrin som betyder hur snabbt webbplatser laddas ner och visas i en webbläsare. Snabbare webbsiter har visat sig göra användare mer positiva till webbplatsen i och med att de erbjuder en bättre användarupplevelse.

Hur snabbt en sida laddas spelar också roll för sk. avvisningsrate (”bounce rate”), som innebär att besökare lämnar webbsidan nästan omedelbart. I det här sammanhanget då beroende på att sidan laddas för långsamt.

Det säger sig självt att besökare som inte befinner sig på webbplatsen inte kommer att göra något köp. Om webbplatsen istället laddar riktigt snabbt, minskar risken för att användare ska tappas p.g.a. laddningstiden och då ökar också chansen att de genomför ett köp. Det kan förefalla trivialt och simpelt, men för e-handelsföretag är detta livsviktigt, och för ingenjörer har performance vuxit till ett kompetensområde i sig.

Flera fallstudier har gjorts på ämnet, till exempel av e-handelsgiganten Wal-Mart. Se slides från en presentation av Cliff Crocker, dåvarande Senior Engineering Manager på Wal-Mart.

Stäng

Upplevd Performance

Upplevd performance är hur snabb besökare tycker att din webbsida är, vilket kan skilja sig från hur snabb sidan är i realiteten. Eftersom det är användaren som avgör när laddningstiden av en webbsida är för lång, är den upplevda laddningstiden egentligen den som spelar roll.

Några knep för att behålla användarens intresse medan de väntar (effektivare än musik i telefonkön):

• Laddningsanimationer, spinners eller progress bars hjälper till att berätta för användaren att en kort väntetid är normalt, och att inget har blivit fel.
• Använd bilder som visar en hel, men suddig version av den riktiga bilden medans den laddas in. Även om bilden är suddig tills all data har laddats in, ger det en bättre användarupplevelse eftersom det förbereder användaren på slutresultatet. För att uppnå detta med JPEG bilder, använd progressivt format.
• Visa sk. placeholders under laddningen: När sidan laddas, visa en indikation på vilken typ av innehåll som kommer att finnas, och var på sidan innehållet kommer att dyka upp. Exempel är de grå boxarna som representerar bilder och text på Facebook om sidan laddas via en långsam uppkoppling.

Stäng

Ovanför The Fold

Ovanför ”the fold” (vecket) är en grafisk designterm, och syftar på det område av en webbsida som syns utan att användaren behöver scrolla nedåt. En generell regel har varit att placera det viktigaste innehållet i detta område, så att det är tillgängligt så lätt och snabbt som möjligt.

Med olika skärmstorlekar, orienteringar (landskaps- eller porträttmode på mobiler och läsplattor) blir det allt svårare att förutspå vilket område som kommer att befinna sig ovanför ”the fold”.

Användbarhetsexperter har dock kommit fram till att det finns betydligt fler saker som bestämmer om en ”call to action” knapp blir klickad än om den befinner sig i området ovanför ”the fold” eller inte*.

TL;DR: Att placera viktigt innehåll i det område som ev. kommer att vara ovanför ”the fold” på vissa skärmar behöver inte innebära någon automatisk förbättring av hur mycket användare interagerar med eller lägger märke till innehållet. Anledningen är att det finns många andra UI och UX aspekter som också påverkar och som man bör ta hänsyn till.

*Joe Leech: “How to Design with Science Without Losing the Magic” på SmashingConf, Barcelona 2017, runt 5.40

Stäng

SEO Myter

H1 taggar

En potentiell kund begärde att det inte skulle finnas mer än en h1-tapp på varje HTML sida, eftersom han hört att det annars skulle vara dåligt för SEO.

Sedan lanseringen av HTML5 i slutet av 2014 är det rekommenderade sättet att ha en h1-tagg per sektion (som artikel, aside o.s.v.), inte per sida.

Faktum är att det är viktigare för sökmotorer att sidan innehåller relevant och användbar information som tillgodoser besökarens behov, än exakt vilken tagg som används.

Ju fler desto bättre?

Ju fler gånger ett sökord förekommer på en webbsite, innebär inte att SEO nödvändigtvis påverkas positivt. Att repetera sökord på en webbsida bara för att, eller posta duplikerat innehåll kan faktiskt genomskådas av sökmotorer och påverka SEO rankingen negativt.

Plats 1 på Google

Att nå topplaceringar i sökrankningar är inte något som man åstadkommer över en natt. Webbplatsens trovärdighet måste byggas upp genom att publicera relevant, användbart innehåll runt dina sökord, samt genom att få andra (relevanta) webbplatser att länka till ditt (relevanta) innehåll.

Vikten av Metataggar

Metataggar står i huvudsektionen på webbsidor. De används för att berätta vad webbsidan handlar om i listan med sökresultat. På så sätt är de viktiga för att få folk att snabbt förstå vad din webbplats innehåller. Däremot används inte metataggar i rankningsalgoritmen*.

*Läs artikeln Google Does Not Use Keywords Meta Tag

Stäng

Skillnaden mellan Raster & Vektor

Att bilder kan ha olika filformat känner nog många redan till, men på webben är det särskilt viktigt om bildfilerna är sk. raster eller vektorgrafik.

Exempel på rasterbilder kan vara fotografier (.png, .jpg), medan vektorgrafik generellt sett används för mindre och enklare bilder, som logotyper eller ikoner (.svg).

Det som gör vektorgrafik så användbart på webben är att de kan visas i vilken storlek som helst utan att bli oskarpa. En egenskap som får ökad betydelse i takt med det ökande antalet högupplösta skärmar.

För att få en rasterbild att se lika skarp ut på en högupplöst skärm som på en vanlig skärm, måste själva bilden vara större. Större bilder innebär större filstorlekar vilket i sin tur leder till längre laddningstider och i förlängningen finns det risk för att användare blir missnöjda.

Stäng

Skillnaden mellan UI & UX

UI står för User Interface (användargränssnitt). UX står för User Experince (användarupplevelse). Eftersom dessa discipliner ofta är sammanflätade och har stor inverkan på varandra kan skillnaderna mellan dem bli otydliga.

Ett enkelt och tydligt exempel på vad UI och UX är och gör beskrivs nedan av Jennifer Aldrich, UX och Innehållsstrateg på InVision:

And then my kiddo asked, "What's the difference between UX and UI?" #ux #design #ui pic.twitter.com/p2st4sG7NB

— Jennifer Aldrich (@jma245) 4 mars 2014

UI är sättet att interagera med appen / webbplatsen / produkten. UX beskriver användarens upplevelse att hantera appen / webbplatsen / produkten via dess UI (användargränssnitt).

Stäng

Följ strömmen

Att följa influencers på sociala medier är ett sätt att hålla sig uppdaterad.

För tillfället verkar Twitter vara den vanligaste professionella sociala mediekanalen för personer i webbranschen. Här är några förslag på webb celebriteter, huvudsakligen från front-end området, att följa på twitter. Medan det självklart finns många andra anmärkningsvärda personer som också är värda att följa, försökte vi hålla listan ganska kort.

• Rachel Andrew: webbutvecklare, entreprenör, Chefredaktör på Smashing Magazine, CSS Grid expert
• Wes Bos: webbutvecklare, online instruktör, podcaster
• Chris Coyier: entreprenör, webbutvecklare, podcaster
• Sarah Drasner: Senior utvecklare på Microsoft, VUE, SVG och animations expert
• Brad Frost: webbdesigner/utvecklare, har utvecklat sk. atomiska designmönster
• Scott Jehl: webbdesigner/utvecklare, performance expert
• Addy Osmani: utvecklare av Google Chrome
• Heydon Pickering: tillgänglighetsexpert
• Jen Simmons: webbdesigner/utvecklare, webbförespråkare på Mozilla, medlem av CSS Working Group, CSS layout expert
• Sara Soueidan: frilansande front-end UI/UX utvecklare, SVG expert
• Jeffrey Zeldman: entreprenör, förläggare, en institution i webbranschen

Stäng

Designverktyg

Pixelperfekta designmockups i Photoshop är påväg att försvinna. Ny teknik som högupplösta skärmar, responsiva webbsiter och animationer banar väg för nya möjligheter och nya arbetssätt.

Vilket som kommer att bli nästa dominerande digitala designverktyg återstår fortfarande att se. Några av de mest intressanta alternativen listas nedan:

• Sketch: ett program för att skapa vektorgrafik, och kanske den största konkurrenten till Adobe Illustrator. Sketch har lösningar för några av de vanligaste problemen för webbdesigners, och har tack vare sin engångslicens ett relativt billigt pris. Den stora nackdelen är att Sketch bara fungerar på Mac datorer, vilket försvårar samarbete med personer som använder andra operativsystem.
• Figma: Designverktyg för UI, tillgängligt både som webbapp i webbläsaren, och som program för Mac, Windows och Linux. Utöver designfunktionalitet finns även funktioner för att samarbeta, importera grafiskt material och att skapa prototyper. Gratis att testa en begränsad version, annars ett månadsabonnemang.
• InVision Studio: marknadsförs som “världens mest kraftfulla digitala verktyg”, och från förhandsvisningarna ser det ut som att det kan komma att stämma. InVision köpte tidigare företaget bakom webbappen Macaw, som var lik Figma. Med all funktionalitet och resurser som redan finns hos InVision är förväntningarna på Studio skyhöga. Funktionalitet för samarbete, animation, prototying och responsiv design är bara några av funktionerna webbappen Studio förväntas innehålla.
• Adobe XD: designprogram för UI, byggt för att komplettera Photoshop och Illustrator. Har tills nyligen varit i betaversion. Adobe lägger kontinuerligt till nya funktioner. Ett alternativ till Sketch för PC användare, även om mer avancerade grafiska program (som Illustrator/Photoshop) förmodligen fortfarande behövs för att skapa alla delar i en fullständig desing. Kanske är det en medveten strategi, eftersom programmet säljs som en del av Adobe CC.

Stäng

AI, VR & AR Framtidens Webb

Artificial Intelligence, AI

AI används för att kartlägga och förutspå användares beteende, som chattbottar och för att ta fram bättre sökresultat.

Ett positivt exempel på hur AI kan användas är rescam.org. Vidarebefordra scammail till me@rescam.org för att hålla bedragarna sysselsatta i oändliga, meningslösa konversationer med en bot.

Virtual Reality, VR

VR på webben möjliggörs via ett VR headset och en modern webbrowser som kan använda WebVR API. Utvecklingen av WebVR sker i samarbete mellan de ledande företagen inom området. Eftersom VR upplevelsen blir rikare och mer omfattande än 2D, ställer det höga krav på UI och UX, och på att hänsyn tas till olika typer av styrenheter, headset och plattformar.

Augmented Reality, AR

Förstärkt verklighet är en blandning av digitala element och den verkliga världen. Ett exempel är då Pokémonfigurer verkar dyka upp i vardagsrummet när man spelar Pokémon Go på mobilen. Med hjälp av ett antal javascriptbibliotek (som a-frame, AR.js och three.js), är det möjligt att skapa den här typen av upplevelser med webbteknologier.

Stäng

Unna dig

Enbart jobb är inget bra recept för lycka, det är däremot följande:

Red Onion Signaturchoklad
utan lök

1 kopp mjölk (inte lättmjölk)
2 teskedar socker
2 teskedar kakao
4 cl Xanté konjak & päronlikör
en nypa socker till grädden
en generös klick vispad grädde
minimarshmallows

Strö en nypa socker i grädden och vispa tills den fått lagom hård konsistens.

Värm mjölken på spis (inga genvägar via microvågsugn), och tillsätt socker och kakao under omrörning för att förhindra att blandningen bränner. Häll konjaken i en kopp, och tillsätt mjölkblandningen.

Klicka i vispad grädde, och strö över minimarshmallows. Ev. extra toppings kan adderas, till exempel riven vit eller mörk choklad, kakaopuder eller choklad och/eller kolasås.

Stäng