Asymmetri, typografi och färgen på Darth Vader

Det var ett tag sen jag uppdaterade sajtloggen. Eller sloggen, som den också kallas. Om du är en regelbunden besökare har du nog lagt märke till en del förändringar. Vissa syns, andra inte. Här är en sloggpost om detaljerna.

Vad är sajtloggen?


Struktur

Exakt, struktur. Det är lätt att tala om för andra hur dom ska göra. Själv har en ingen ordning alls. Tills nu. Tjänstesidorna har fått egna landningssidor. Tidigare låg tjänsterna på en enda sida, vilket är kass ur SEO-synpunkt. Sidorna på sajten bör (i stort sett alltid) betraktas som enskilda landningssidor och handla om ett ämne i taget.

Nya tillägg

Leadin

Tidigare skrev jag om nya tillägget Leadin som är gratisversionen av Hubspot. Givetvis med begränsad funktionalitet. Men imponerande bra.

Om du är bekant med begreppet marketing automation så vet du att det börjar med att bilda sig en bättre uppfattning om vad besökarna intresserar sig för på sajten. Leadin visar dig det, under förutsättning att besökaren fyller i sin mejladress i ett formulär. Det fina är att det inte spelar så stor roll vilket formulär det är. Skriptet triggar på html-taggarna <input[type="email"]> och <submit>.

Den här funktionen är ett bra exempel på något du inte alls ser. Men det gör jag. Med hänsyn till vad du intresserat dig för på sajten väljer jag varsamt vilken Mailchimplista jag placerar dig i. Om du fyllt i något av formulären. Det är fortfarande en förutsättning. Sen är det upp till mig att inte missbruka förtroendet du gav mig när du lämnade din mejladress.

Gallery Factory

Tillägget Gallery Factory är bara för att kunna göra bra bildkompositioner. Egentligen är jag inte så förtjust i den här typen av galleri-tillägg. Det finns en ziljard av dem. De slöar ner och stökar till. De tillför inte affärsdrivande verksamheter särskilt mycket. Men efter allt gott jag hört om pluggen så ville jag testa premiumversionen. Och den är bra. Enkel med shortcodes och många bra inställningar.

Exempel på responsiv sex-kolumnig bildkomposition (desktop) med Gallery Factory. Asymmetrisk designprincip.

Contact Form 7 Mailchimp Extension

Tillägget Contact Form 7 Mailchimp Extension gör att du kan använda Contact Form 7, som är ett av de mest använda Wordpress-tilläggen nånsin, för att skicka mejladresser till en Mailchimplista. Du kan också göra en <input type="checkbox"> för att användaren själv ska kunna välja om den vill prenumerera på mejllistan eller inte. Se resultatet här.

Justerad typografi

Vikt

Jag hade tidigare en vikt på brödtexten som var ganska tunn. (font-weight: 300;) Det motsvarar »light« i typsnittsfamiljen. Nu har jag gått över till »normal« vilket funkar mycket bättre om jag använder -webkit-font-smoothing: antialiased;<body>-taggen som gör renderingen mjukare.

Kantutjämning (antialiasing)

Det finns massor av olika preferenser och praktikaliteter när det gäller antialiasing. Men jag tycker det funkar bra i Chrome och Safari som de flesta använder. Explorer och Firefox tycks inte heller uppvisa några problem.

Radavstånd

Typografi är känsliga saker. Färg, nyans, vikt och radavstånd samspelar på ett ibland oväntat sätt. De gamla grundreglerna gäller fortfarande, åtminstone i min värld, men ögat måste ha utslagsröst. När vikten ändrades en aning så kompenserade jag det med att öka radavståndet från line-height: 1.375; till line-height: 1.5;. En liten justering som gör all skillnad i världen.

Det finns lite olika åsikter om det här med egendomen line-height. Ska den skrivas med eller utan enheter? Det går ju att använda em, rem (root em), px, % och fler därtill. Men enhetslösa radavstånd är nog det bästa alternativet trots allt. Det kan du nörda ner i här.

Större marginaler

Har också gett rubriktaggarna <h1>, <h2> och <h3> större marginaler både uppåt och neråt. Vertikal luft är en bristvara i webbvärlden. Det är skönt när det går att andas mellan raderna.

Storlekar

Visuell design är inte bara färg och form. Också kontrast. Om skillnaden mellan stort och smått är för liten ser det ut som om webbsidan inte riktigt har bestämt sig för vad den vill. Därför har jag dragit lite på stora rubriker, just för att uppnå en större kontrastverkan. Startsidan är ett exempel.

Annars är storlekarna i stort sett samma. Utom i mobilen, där jag tack vare den ökade vikten kunnat gå ner en aning i storlek. Det är bättre på många sätt. Läsbarheten är lika bra men avstavningsproblemen blir färre. Det här känner du till om du har koll på typografi. Om inte finns det många bra resurser på nätet. Fonts.com är en av dem.

Asymmetrisk designprincip

Centrerade texter funkar bra om det rör sig om 1–3 rader. Fyra rader är ett gränsfall, sen ballar det ur fullständigt. Knoppen får verkligen anstränga sig för att läsa.

Centrering kan se bra ut på breda desktop-skärmar med ovanstående villkor uppfyllt. Mycket lockande. Däremot i mobilen blir det förr eller senare problem. Garanterat. Du måste med andra ord bestämma dig för vilken designprincipen är. I alla fall om du vill undvika en massa extra kod i dina media-queries. Det kan bli rätt rörigt till slut.

Det är också en av anledningarna till att webbsajter ska designas från mobilen och upp. Inte från desktop och ner.

Symmetrisk och asymmetrisk designprincip
Skillnaden mellan symmetrisk och asymmetrisk designprincip. Foto: digitalmediaacademy.org

Eftersom jag har ett gammalt 960-grid, där utfallande bilder inte är att tänka på, så måste jag maximera det genom att använda kanterna fullt ut. Då ser vänsterställda texter och horisontella linjer bäst ut. Det som kallas för asymmetrisk designprincip. Tidigare hade jag en blandning av symmetrisk (centrerade rubriker) och asymmetrisk design. Till viss del har jag det fortfarande. Men jag kommer att gå över helt till asymmetriskt.

Interaction Design Foundation har publicerat en fördjupning om de klassiska principerna här.

Färger

Jag är en stor fan av Material Design. En av sakerna jag lärt mig där är fördelarna med opacitet på texter och rubriker istället för vanliga heltäckande färger. Så här är rekommendationerna.

Text Bakgrund Grundfärg Fyllningsgrad Färgkod
Primär Ljus Svart 87 % rgba(0,0,0,.87)
Sekundär Ljus Svart 54 % rgba(0,0,0,.54)
Hintar och hjälp Ljus Svart 38 % rgba(0,0,0,.38)
Primär Mörk Vit 100 % rgba(255,255,255,1)
Sekundär Mörk Vit 70 % rgba(255,255,255,.7)
Hintar och hjälp Mörk Vit 50 % rgba(255,255,255,.5)

Huvudregel: Kör du ett ljust tema på sajten väljer du de övre tre alternativen. Med ett mörkt tema väljer du de undre tre.

Jag har nu följt rekommendationerna ovan men justerat procentsatserna något. Opaciteten gör att texten blir läsbar oavsett vilken bakgrund den hamnar på. Kör du en vanlig heltäckande grå nyans på texten så kan den se lite märklig ut om den hamnar på exempelvis en röd platta eller ovanpå en bild. Då måste färgen kodas om just där. Till slut står du där med en vildvuxen uppsättning av undantag större än regeln.

Här ser du ett exempel:

Färgkod #464646
Heltäckande

Färgkod rgba(0,0,0,.72)
Med opacitet

Färgkod #464646
Heltäckande

Färgkod rgba(0,0,0,.72)
Med opacitet

Hej SVG-grafik

Vad är SVG?

SVG står för Scalable Vector Graphics. Om du brukar hänga med Adobe Illustrator på dagarna så är det ett känt begrepp. Wordpress importerar inte SVG-filer direkt från kartongen, men det är lätt att ändra på. Fördelen är att ikoner, piktogram och annan typisk vektorgrafik blir knivskarp i alla storlekar även på en webbsida. Dessutom väger filerna mindre än png-formatet vilket betyder att de laddar snabbare. Bara fördelar med andra ord.

Proceduren

När jag behöver en ikon brukar jag börja med att bildsöka efter rätt typ av figur. När jag hittat en som passar, vilket i de flesta fall är just en png-fil, vektoriserar jag den som SVG i Illustrator. Därefter importerar jag den i Sketch och modifierar den där. Sketch är så mycket lättare att jobba med. Från Sketch exporterar jag den modifierade och ofta förenklade versionen av ikonen som SVG och importerar den i Wordpress mediebibliotek. Med flyt på det här flödet går det på tio minuter.

  1. Bildgoogla
  2. Importera till Illustrator.
  3. Bildkalkera
  4. Exportera som SVG 1.1.
  5. Importera till Sketch.
  6. Modifiera, färgsätt och ta bort onödiga element.
  7. Exportera som strippad, skön, super-SVG.
  8. Importera till Wordpress mediebibliotek.

Vidareutveckling

Nu håller jag på att experimentera med att hoppa över bildimporten och lägga SVG-koden i Wordpress-editorn direkt. Det är lång räcka med koooooordinater. Samma som visas om du öppnar en SVG-fil i en vanlig texteditor. Fördelen är då att jag kan byta färg på figuren när den hovras. Det är inte så svårt som det låter, men du måste ha bra grundkläm på html och css förstås. Här är en grymt bra tutorial från Joni Trythall.

Exempel på egen SVG-grafik med hover-effekt i samarbete med George Lucas.

Kort

För att bättre samla ihop elementen på sidorna tjänster och kundcase har jag använt kortprincipen. Jag har inte gått så långt som till Masonry, utan mallen har fasta höjder. Inte heller flexbox faktiskt fast de flesta går över till det nu. Flexbox innebär framför allt enklare kod. Men det är en enkel sida med få element så det gör ingen större skillnad i det här fallet.

Material Design har varit förlaga till korten. Skuggorna är lite mjukare än på förlagan, men principen vid hovring är densamma. Det vill säga att skuggan blir lite större och lurar ögat att tro att kortet höjer sig en aning. Samma effekt har jag lagt på samtliga knappar på sajten.

Ny knapptyp

En ny knapptyp med ikon utan bakgrundsfärg är introducerad. De visar sig lite överallt. På tjänstesidorna och på kontaktsidan framför allt. Här är en komplett dokumentation.

Nytt kontaktformulär

Kontaktformulären har fått ett enklare utseende med enbart ramar. Elementet <select> (rullgardinsmenyer) har också fått en liten pil till höger vilket förstärker intrycket av att något fälls ner vid klick eller beröring. Pilen är en background-image i SVG-format hämtad från Material Design Icons.

Elementet <input type="checkbox"> har fått en grön bakgrundsfärg i läge :checked och en timing-funktion för att växlingen ska kännas mjukare. Den vita bocken är även den hämtad från Material Design Icons.

Checkboxar och radioknappar har nu gjorts i en cross-browser-säker variant med Material Design-ikoner för både normalt läge och :checked läge. Eftersom timing-funktioner ännu inte funkar för pseudo-selektorerna :before och :after får jag helt enkelt vänta med det.

Nu har varje fält i standardformulären en synlig <label> också, istället för enbart en placeholder. Det är trots allt så det ska vara.

(Det här blogginlägget har lästs 1202 gånger.)

Tipsa ditt nätverk
Tweet about this on Twitter0Share on LinkedIn0Google+0