Om sajten

lindesvard.se, design

År 2010 satte jag upp en Wordpress-sajt med hjälp av webbhotellet Loopias kom-igång-service och ett gratistema. Jag kunde i princip ingenting om Wordpress. Under våren 2013 kände jag att jag ville växla upp. Eftersom jag kunde varken html, php eller css så vände jag mig till en utvecklare. Kenth Hagström tog fram ett specialbyggt responsivt tema efter mina designskisser. Snart kom jag till insikten att jag skulle bli Kenths värsta mar­dröm om jag mejlade honom varje gång jag ville flytta en linje, ändra en marginal eller färga en knapp. För jag är ganska noga med detaljer. Inte minst vad gäller typografi. Här började en lär­process som över­gått i ett närmast maniskt intresse. Nu gör jag all css-styling själv.

Eric Lindesvärd Marknadskommunikation, om sajten
Nu har du nått min proximala utvecklingszon i kodradernas multiversum.

2018-04-08: Setup

  • Wordpress 4.9.5

Pluggar aktiverade (25) favoriter (8) nya (1)

2017-03-30: Setup

  • Wordpress 4.7.3

Pluggar släckta (1) aktiverade (28) favoriter (8) nya (14)

Kommentar: W3 Total Cache ersätter WP Super Cache. Contact Form 7 MailChimp Extension ersätter den tidigare Mailchimp-pluggen med flera buggar och usel support. 13 pluggar borttagna: Broken Link Checker, Column Short Codes, Duplicator, Google Adsense, Mailchimp, Material Design Icons, Soliloquy (slider, totalt 6 st tillägg), WP Super Cache.

2016-12-08: Setup

2016-08-17: Setup

2016-04-12: Setup

2016-03-28: Setup

Pluggar släckta aktiverade favoriter nya

Kommentar: Loco Translate ersätter avsomnade Codestyle Localization för strängar. Material Design Icons ersätter FontAwesome.

2015-01-24: Setup

  • Wordpress 4.1

Pluggar släckta aktiverade favoriter

Design: Färgschema

Baselement

body color
black, 72%

second text color
black, 54%

disabled color
black, 26%

std wrappers
black, 5%

body background
#F9F8F0

first text dark
white, 100%

second text dark
white, 70%

selection
#FFFEE0

Basnavigation

action button
#009B77

action on hover
#50B27E

action button
#2980B9

action on hover
#679FC5

Signalelement

stratocaster
#E8616C

jaffa
#ED7C34

ride cymbal
#EFC050

sand dollar
#DFCFBE

bass drum
#385273

tech talk
#6FABC1

light emerald
#4FD2AB

Design: Typografi

Jag använder root-em (rem) som enhet för textstorlekar för att inte få föräldraelement att spöka. Generellt line-height 1.5 utan enheter. Radavståndet minskas något för större textstorlekar. Läs mer i bloggposten Asymmetri, typografi och färgen på Darth Vader.

Rubriker

Ha1

News Cycle, Google Fonts, weight 400.
Läs mer om News Cycle

ABCDEFGHIJKLMNOPQRSTUVXYZÅÄÖ
abcdefghijklmnopqrstuvxyzåäö
123456789&!?

News Cycle, Google Fonts, weight 400.
Prova News Cycle i Typecast

Flygande bäckasiner söka hwila på mjuka tuvor

News Cycle, h1, weight 700, size desktop 2.875rem/1.058, size mobile 1.625rem/1.125, black, 72%.
Läs storyn om News Gothic

Brödtexter

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Source Sans Pro, Google Fonts, sidebar p,
weight 400, size 0.938rem, black, 72%.
Läs mer om Source Sans Pro

ABCDEFGHIJKLMNOPQRSTUVXYZÅÄÖ
abcdefghijklmnopqrstuvxyzåäöABCDEFGHIJKLMNOPQRSTUVXYZÅÄÖ
abcdefghijklmnopqrstuvxyzåäö

Source Sans Pro, Google Fonts, a) weight 300, b) weight 400, size 1.188rem, black, 72%.
Prova Source Sans Pro i Typecast

Jag har valt att para klassiska rubriktypsnittet News Gothic med den modernare Source Sans Pro från Adobe för brödtexter, eftersom deras breddvärden och x-höjder är ganska lika. Det uppfattar ögat som harmoni. Dessutom är de två släkt med varann vad gäller skärningen. Titta på gemena g så ser du till exempel att båda typsnitten har slutna skålar.

Source Sans Pro, Google Fonts, article p, weight 400, size 1.188rem, black, 72%.

Gemena siffror

Ställs in med hjälp av Open Type-syntax i css-koderna. Funkar i de flesta webbläsare, inte alla.

0123456789

Ingresser

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Source Sans Pro, Google Fonts, p.inlead, weight 400, size 1.625rem, black, 72%.

Bildtexter

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Source Sans Pro, Google Fonts, p.wp-caption, weight 400, style italic, size 1.188rem, black, 72%.

Ikoner

back

forward

start

end

top

service

portfolio

process

social

success

Ikoner i svg-format som alltid behåller skärpan. Se Material Design Icons.

Avdelare

Header, footer och aside separator border, 5px solid, black, 72%. Alltid horisontell, aldrig vertikal. Logotypens storlek i headern är anpassad för att hålla samma linjevikt.

Content separator border, 1px dotted, black, 72%. Alltid horisontell, aldrig vertikal.

Table border, 1px solid, #C4C3BE. Både horisontell och vertikal.

Översikt

Element Familj Storlek Höjd Vikt Stil Justering Färg Bakgrund
meny News Cycle 1.063rem 1.375em 400 versal vänster rgba(0,0,0,.72) body
h1 News Cycle 2.875rem 1.058em 700 knipt -1px vänster rgba(0,0,0,.72) body
h1, stor News Cycle 3.5rem 1.058 400 knipt -1px centrerad rgba(0,0,0,.72) body
h2 News Cycle 2.188rem 1.125 400 normal vänster rgba(0,0,0,.72) body
h2, stor News Cycle 3.5rem 1.125 400 knipt -1px centrerad rgba(0,0,0,.72) body
h3 News Cycle 2.188rem 1.125 400 normal vänster rgba(0,0,0,.72) body
h3, sidebar News Cycle 1.063rem 1.5 400 versal vänster rgba(0,0,0,.72) body
p, brödtext Source Sans Pro 1.188rem 1.5 300 normal vänster rgba(0,0,0,.72) body
p, ingress Source Sans Pro 1.625rem 1.5 300 normal vänster rgba(0,0,0,.72) body
p, bildtext Source Sans Pro 1.188rem 1.5 300 kursiv vänster rgba(0,0,0,.72) body
p, sidebar Source Sans Pro 0.938rem 1.5 300 normal vänster rgba(0,0,0,.72) body
p, utdrag Source Sans Pro 1.625rem 1.5 300 normal centrerad white signal
länkar a Source Sans Pro följer följer 300 understruken,
1px dotted		 följer rgba(0,0,0,.72),
#2980B9 (hover),
#CCC (border)		 body
a, sidebar Source Sans Pro 1.063rem 1.5 300 normal vänster rgba(0,0,0,.72) body
Knappar Source Sans Pro 1.188rem 1.5 400 normal centrerad white button

Responsiv tabell, thead background #F1F2ED, tbody weight 400, size 0.938rem, black, 72%. Kolla html tables generator.

Design: Element

Kort

  • ELM om företaget

    h3 card headline

    Card content below image thumbnail is word trimmed to a maximum of 15 words …

  • ELM om företaget

    h3 card headline is absolute positioned and expands upwards

    With metadata

    Card wrapper uses css grid and is flexible within it’s container width …

  • ELM om företaget

    h3 card headline

    Card content below image thumbnail is word trimmed to a maximum of 15 words …

Knappar

Om sajten, swipe

Sajten, knappar
Olika knapptyper.

Faktaruta, standard

  • List item 1
  • List item 2
  • List item 3

Faktaruta med rubrik och pilar

Mer om ämnet

  • List item 1
  • List item 2
  • List item 3

Faktaruta som avrivet pappersark

Överskrift

Victor Fagerquist, Hyper Island
Namn

Sune Mathias Bach Pedersen, Hyper Island
Namn

John Elgenstierna, Hyper Island
Namn

Niklas Andersson, Hyper Island
Namn

Överskrift

John Elgenstierna, Hyper Island
Namn

Niklas Andersson, Hyper Island
Namn

Øjvind Nordbø, Hyper Island
Namn

Thomas Palmbäck
Namn

Eric Lindesvärd
Namn

Överskrift

Andy Karlsson, webbutvecklare
Namn

Aajjad Asif, Buzzador
Namn

John Elgenstierna, Hyper Island
Namn

Eric Lindesvärd
Namn

Överskrift

Pär Thunström, Buzzador
Namn

Design: Logotyp

Eric Lindesvärd Marknadskommunikation, logotyp

Javisst är det en kontakt. En kundkontakt.

Marknads­kommu­nika­tion handlar ju om att skapa relationer. Tittar du en gång till visar symbolen också en vit och en svart bokstav. Det kan tolkas som den mystiska konflikt idélös­ningar ofta hämtar sin positiva energi från. Och så är det initialerna förstås.

Eric Lindesvärd Marknadskommunikation, logotyp
Eric Lindesvärd Marknadskommunikation, logotyp
Eric Lindesvärd Marknadskommunikation, logotyp
Eric Lindesvärd Marknadskommunikation, logotyp
Eric Lindesvärd Marknadskommunikation, logotyp

ELM, logotyp. Enkla, monokroma symboler har sina fördelar. A) Hög läsbarhet även i små storlekar och på långt håll, B) kan tilldelas valfri färg och ändå behålla sin karaktär och C) kan skäras ut i folie eller andra material och även blindpräglas.

Lärprocessen

Lära sig själv tar tid. Mycket har jag förstås att tacka kundprojekt och dialog med olika utvecklare för. Men det har också varit hundratals timmar av sökningar och nätläsning. Bland annat på w3schools.com, css-tricks.com och stackoverflow.com. Jag har också tömt närmaste Press Stop-butik på magasin med titlar innehållande de magiska orden Wordpress och Google.

Första skissen
Sajten, 2013.
Wordpresstemat Eric Lindesvärd
Sajten, 2015.
Eric Lindesvärd Marknadskommunikation, sajten 2017
Sajten, 2017.

Learn HTML and CSS

Bland annat den här boken var till stor hjälp.

Efter fem år som passionerad självstudent på området kan jag relativt obehindrat koda selectors, properties och values i css3, och grundläggande elements i html, för att formge webbsidor och få dem att bete sig som jag vill.

© 2010–2022, Eric Lindesvärd Marknadskommunikation (ELM). Alla ovan nämnda varu­märken och deras egen­domar tillhör sina res­pek­tive ägare. Läs mer om registrering av personuppgifter och samtycke. Webbplatsen skyddas av reCaptcha v3 med följande integritetspolicy och villkor. Foto: Niklas Palmklint och Unsplash. Hittar du inte vad du söker? Se sajtkarta.