Stor fokuspuff

Det finns väldigt många olika tänkbara utföranden för Stor fokuspuff. I bilderna nedan kommer några exempel.

Modulens inställningar

Modulens totalbredd (pixlar)

Ange vilken maxbredd din modul ska ha. Ett bra utgångsvärde är 1920px, som många skärmar har som standardupplösning.

Innehållets bredd (pixlar)

Om du vill begränsa den "aktiva" ytan kan du göra det här. Lika med eller mindre än inställningen för modulens totalbredd.

Rubrik

Rubriken i din modul.

Rubrik-färg (hex)

Antingen använder man färgväljaren som ger alternativen Svart och Vit. Som utgångspunkt ska du alltid använda dessa färger på texter, för att de ska uppnå god kontrast och läsbarhet. Det går dock att välja annan färg på texten genom att använda checkboxen "Välj egen rubrikfärg" och därefter fylla i ett hexvärde. Använder du detta fält kommer det att skriva över den inställning du gjort i fältet Rubrikfärg. Säkerställ alltid att det är god kontrast mellan texten och bakgrunden.

Du kan använda verktyg som exempelvis https://webaim.org/resources/contrastchecker/ för att säkerställa kontrasten.

Rubriknivå

Ange vilken rubriknivå som ska gälla för rubriken. Var noga med detta - felaktig rubrikstruktur är en av de vanligaste tillgänglighetsbristerna.

Om din modul ligger först på din sida ska du använda H1. I övrigt ska du anpassa ditt val utifrån hur du lagt upp din sida; H2 är vanligast, men även H3 kan ibland vara rätt.

Ingress

Här skriver du den ingress eller brödtext som ska finnas i modulen.

Det finns möjlighet att använda så kallad Markdown för att göra mer "avancerad textredigering", som exempelvis punktlistor. Klicka på länken Markdown i anslutning till fältet för mer information om möjligheterna.

Om du bara ska ha ett vanligt textstycke skriver du det precis som vanligt och kan helt bortse från Markdown-grejen.

Använd formatmallen Ingress på text-paragrafer

Om du har modulen överst på sidan och har valt H1 i fältet Rubriknivå, är det nog en ingress du ska göra. Klicka i så fall i den här rutan, så blir automatiskt texten formaterad som våra ingresser. Notera att det bara är när texten verkligen är sidans ingress denna checkbox ska vara icheckad.

Text-färg (hex)

Antingen använder man färgväljaren som ger alternativen Svart och Vit. Som utgångspunkt ska du alltid använda dessa färger på texter, för att de ska uppnå god kontrast och läsbarhet. Det går dock att välja annan färg på texten genom att använda checkboxen "Välj egen textfärg" och därefter fylla i ett hexvärde. Använder du detta fält kommer det att skriva över den inställning du gjort i fältet Textfärg. Säkerställ alltid att det är god kontrast mellan texten och bakgrunden.

Du kan använda verktyg som exempelvis https://webaim.org/resources/contrastchecker/ för att säkerställa kontrasten.

Maxbredd för textelement (px)

Ange hur bred ytan där texten ligger får vara. Vad som är bäst beror mycket på hur du lagt upp din sida. Läsbarheten minskar dock om texten är för bred, så undvik att ha alltför breda texter. Nånstans runt 800px kan vara ett övred riktmärke att förhålla sig till.

Positionering av textbox

Modulen är, tekniskt sett, indelad i tre delar: vänster, mitten och höger. Här väljer du vilken av dessa ytor textboxen ska finnas inom. I de flesta fall ser dina puffar bäst ut om du använder "Mitten".

Inställningen utgår ifrån vilken del av puffen den har till sitt förfogande för texten, så "Mitten" betyder "mitt i ytan som är avsedd för text". Denna inställning är allra mest relevant när du inte använder någon bild alls i modulen, och ditt val kommer att ha stor betydelse för hur puffen ser ut.

Positionering av text

Här anger du vilken linjering texten ska ha. Vänsterställd är det vanligaste, men till exempel kan Centrerad vara relevant om du inleder en sida med denna modul och inte använder någon bild.

Bakgrundsfärg

Välj vilken bakgrundsfärg modulen ska ha. Valen är våra vanliga malmo.se-färger.

Välj egen färg

Om du klickar i denna checkbox kommer ett nytt fält att visa sig, där du ska ange en färgkod i formatet hex (t ex #8bb8e8, för vår vanliga ljusblå bakgrundsfärg). Om du klickar i denna checkbox kommer värdet du anger att skriva över inställningen i fältet Bakgrundsfärg.

Fullbredd

Om du klickar i denna checkbox kommer modulen automatiskt att fylla ut bredden på den enhet som används för att visa sidan modulen ligger på. Om man till exempel anger en maxbredd för modulen på 1000px och inte använder detta alternativ, kommer modulens innehåll alltid att ligga inom en yta som är 1000px bred - även om skärmen som används är två eller tre gånger så bred.

Rekommendationen är att generellt använda Fullbredd.

Bredd på bild

Välj hur stor bilden ska vara i relation till modulen i stort. Valen som finns är "2/3", "1/2", "1/3", "Ingen bild" och "Endast bild".

Om du väljer någon av storlekarna samspelar bilden med din text utifrån vilka inställningar du gjort för både bild och text. Om du väljer att inte ha någon bild är det inställningarna för texten som är det viktiga. Om du väljer att bara använda en bild kommer eventuella inställningar du gjort för texten inte att tas hänsyn till.

Rekommenderade bildstorlekar

Det är svårt att helt och hållet rekommendera bildstorlekar för "Stor fokuspuff", eftersom att det finns många beroenden. Men dessa storlekar kan vara en vettig utgångspunkt:

• Utfallande: 1920 x 750
• 1/3: 550 x 750
• Halvbredd: 1115 x 750
• 2/3: 1500 x 750

Positionering på bild

Här väljer du vilken sida av din text bilden ska finnas på (förstås förutsatt att du använder både text och bild). Exempelvis är det vanligt att, på landningssidor som är lite längre och flera Stora fokuspuffar finns, använda sig av ett zickzack-mönster.

Typ av bild

Det finns flera olika inställningar för vilken bild som ska användas.

"Enskild bild" innebär kort och gott att du pekar ut en bild och sen är det inte mer med det. Du kan välja att peka ut en särskild bild för mobiler, till exempel om du har ett stort motiv som funkar bra i sin helhet på desktop men vill fokusera särskilt på en särskild del på mobilen.

"Slumpad bild" innebär att du behöver peka ut en mapp där du lagt flera olika bilder. Varje gång sidan laddas kommer en slumpmässigt utvald bild i denna mapp att visas. Det är helt slumpmässigt, och kommer alltså inte att visa en av tre bilder i en mapp exakt var tredje gång.

"Bildspel" innebär att du pekar ut en mapp och att användaren kan bläddra mellan alla dessa bilder direkt på sidan.

"Ikon" innebär att du väljer en ikon från det ikonbibliotek som finns uppladdat på malmo.se. Om du väljer detta alternativ får du några nya fält för att peka ut ikonen, vilken färg ikonen ska ha (hex) samt vilken färg det ska vara på bakgrunden bakom ikonen (hex).

Länkar

Med denna kontroll skapar du de länkar som ska användas i modulen. Du behöver inte ha några länkar alls om du inte vill.

Om du har fler än en länk kan du hovra över de olika länkarna för att få upp möjligheten att ändra ordningen med hjälp av drag-and-drop. Listan, uppifrån och ner, styr i vilken ordning länkarna kommer i publicerat läge.

Vill du att länkarna ska vara på andra språk än modulen i övrigt, behöver du också ställa in språk för varje enskild länk. Har språket en annan läsriktning än språket på modulen i övrigt, ska du också ställa in Läsriktning för varje länk ("Höger till vänster" eller "Vänster till höger").

Bakgrundsfärg på länkar

Välj färg på länkknapparna. Länkarna ser generellt ut som våra fokuslänkar. I de flesta fall är svarta knappar det bästa.

Visa pilar

Välj om dina länkknappar ska avslutas med pilar. Som standard använder vi det.

Placera länkar efter varandra

Om du har ett antal länkar styr denna inställning om de ska fortsätta efter varandra på samma rad (om plats finns utifrån alla dina andra inställningar) eller om varje länk alltid ska ligga på en egen rad.

Begränsa antalet synliga länkar på små skärmar

Om du har många länkar kan du med detta fält styra hur många som får visas på små skärmar (mobiler). Om du har 6 länkar totalt och anger 3 här, kommer de tre som ligger överst i länklistan att visas medan övriga döljs på mobil.

Språkinställningar (tillgänglighet)

Språk

Du behöver bara välja språk om modulen ska vara på ett annat språk än sidan. Ska den det är det viktigt att du ställer in språket ur tillgänglighetsperspektiv.

Läsriktning

Du behöver bara ställa in läsriktning om du valt ett språk på modulen som har en annan läsriktning än språket på sidan. Det är i så fall viktigt att läsriktning ställs in ur tillgänglighetsperspektiv.