Blickfång mobilanpassning

Wibergs Web fick i uppdrag att mobilanpassa en befintlig webbshop som heter Blickfång.se. Blickfång är en webbshop säljer lantlig, rustik och annorlunda inredning från Helsingborg. Med Wibergs Web’s expertis inom html, css och jquery var det inga problem att lösa de behov som fanns för den mobilanpassning som gjordes och en del extra justeringar utöver själva mobilanpassningen har gjorts – t.ex. att uppdatera pris i toppmenyn i realtid när man gjorde justeringar i kassan.

Blickfång – desktop

Användarperspektiv – mobilanpassning

Man kan tycka olika saker – om man ska mobilanpassa en sida eller inte… I ett användarperspektiv så kan det både bra och dåligt, men ur ett ett SEO-perspektiv så är det förkastligt att inte ha sin hemsida mobilanpassad då Google rankar (prioriterar) sidor som är mobilanpassade betydligt högre (sedan 21 april 2015) än sidor som inte är mobilanpassade.

Att mobilanpassa en hemsida

Att mobilanpassa en sida är inte speciellt svårt, det är inte speciellt svårt att skapa en hemsida och det är inte svårt att programmera . Men med detta sagt så kan det konstateras att inget är svårt om man kan det, och mobilanpassning är en av sakerna som Wibergs Web är extremt duktiga på. Att mobilanpassa en hemsida handlar väldigt grovt om att justera lite html och ändra lite css. Detta låter enkelt i teorin, men med den expertis av webben som finns i bagaget så är det inte riktigt så lätt som det låter.  I vissa fall kan det t.o.m. vara mer prisvärt/tidseffektivt att göra om hela hemsidan, men det är något som avgörs från fall till fall och givetvis något som kommuniceras med kund.

Osäker?

Har du/ni funderat på er hemsida och vad som går att göra med den? Har ni funderat på att göra en enkel, snabb lösning med en mobilanpassning? Som sagt, ibland är det relativt enkelt att göra en mobilanpassning av en sida (det beror helt enkelt på hur nuvarande sida är uppbyggd) och ibland är det onödigt komplicerat och då kan det vara mer prisvärt att göra en ny hemsida. Wibergs Web – den genuina webbyrån kommer att guida er vad det finns för alternativ. Självklart är beslutet ert i slutänden. En annan sak att fundera på : Ska ni ändå ska göra om er hemsida – varför inte satsa helhjärtat på en hemsida med en snygg unik webbdesign?

Inlägget Mobilanpassning av Blickfång dök först upp på Webbdesign och Webbutveckling i Skövde.

CSV to html är ett plugin/tillägg för WordPress som gör det möjligt att i realtid visa information från csv-filer som finns på webservern.

Varför CSV to html?

Anledningen till att pluginet skapades var att det helt enkelt inte fanns någon enkel lösning på problematiken att få ut html-tabeller från datat som visades från tillägget Visualizer plugin från flera olika csv filer. En hel hög med plugins finns för att importera csv in i WordPress men då handlar det ofast om att få datat in i i WordPress databas. Med CSV to html så presenteras data i realtid från en eller flera csv filer i en och samma tabell.

CSV to html är skapat på det sätt att det är enkelt att skapa nya identifieringsmekanismer för en csv fil. Om man går in i Excel spara som csv eller om man ska spara csv för ett ”diagram plugin” så formatteras dessa csv filer på olika sätt och därför är att det viktigt att kunna bygga ut nya identifieringsmekanismer vid behov. Html-strukturen som skapas för tabellerna är också väl genomtänkt och man kan därför med enklare css få precis den design man önskar sig.

Vem passar CSV to html för?

Har du diagram på din hemsida som hämtar datat från csv-filer på din server och du vill presentera dessa i tabellform så är CSV to html något för dig. Vill du presentera en tabell på din hemsida där du vill kunna justera tabellens data enbart genom att justera i en fil på servern så är detta plugin också absolut något för dig. Det finns kanske andra användningsområden men detta är grundtanken med pluginet.

För att se vad som faktiskt går att göra så finns det en demo-sida (engelska) här som visar i grova drag vad som går att göra med pluginet. Vill du ladda hem pluginet direkt så är det bara att ladda hem från ”plugin-sidan” (engelska), installera och aktivera och följa instruktionerna som framgår på plugin-sidan.

Har ni en idé kring ett plugin?
Kontakta Wibergs Web nu!

Inlägget CSV to html – WordPress plugin dök först upp på Webbdesign och Webbutveckling i Skövde.

Tyvärr måste jag bli lite teknisk här för att kunna förklara vad klasser i css är. Jag ska göra mitt bästa för att även den oinvigde ska förstå eller i alla fall få ett hum om vad det handlar om.

En klass är enkelt beskrivet ett sätt att sätta attribut för flera olika html-element genom att ange attribut en gång. Denna klass fungerar som en mall för olika värden.

Vad är en klass i CSS?

Om man vill att attribut som storlek på text, färg på text och radhöjd på text ska vara samma för alla rubriker,så kan man skriva så här i html:

<h2 style="font-size:14px;line-height:28px;color:#ff0000;">Rubrik1</h2>
<h2 style="font-size:14px;line-height:28px;color:#ff0000;">Rubrik2</h2>
<h2 style="font-size:14px;line-height:28px;color:#ff0000;">Rubrik3</h2>

Om man gör på ovanstående sätt och har väldigt många rubriker så det blir svårt/jobbigt att ändra då man måste ändra på alla ställen i sin html-kod där denna rubrik finns. Det går då istället att göra så här:

<!-- HTML -->
<h2 class="title">Rubrik1</h2>
<h2 class="title">Rubrik2</h2>
<h2 class="title">Rubrik3</h2>


/* CSS */
.title {font-size:14px;line-height:28px;color:#ff0000;}

.title är i det här en klass i css.

W3C är en organisation som tar fram standarder som webbläsare bör följa och införandet av klasser gjorde det möjligt att på ett enkelt ändra dessa attribut på ett och samma ställe.

Kombinera klasser i CSS

Det går också att kombinera olika klasser där man använder attributen från bägge klasserna (eller attributen från fler klasser). Vill man t.ex. ha två stycken blå titlar så skulle man kunna gör så här:

<!-- HTML -->
<h2 class="title blue">Rubrik1</h2>
<h2 class="title blue">Rubrik2</h2>
<h2 class="title">Rubrik3</h2>


Jag tror det var här förvirringen började för mig. Rent logiskt borde man kunna skriva:.title blue {color:#0000FF;}

Detta hade varit logiskt då det ser ut likadant i html som i css (.title .blue). Även om det känns mest logiskt så kommer det inte .title .blue ha någon effekt på någon av html-elementen.

Detta beror egentligen på två saker.

1. Klasser kan inte ha mellanslag i sina namn i html.
2. I css betyder mellanslag nästa nivå i det s.k. DOM-trädet. Här finns en bra förklaring på vad DOM-trädet är (engelska)

Detta betyder alltså att rubriken H2 ska inkludera klasserna: title, webdesign och webdev
<h2 class="title webdesign webdev">Rubrik1</h2>


Att kunna ändra allt på ett ställe är givetvis en stor styrka med klasser i css men ytterligare en styrka är just att det går att kombinera klasser på ett flexibelt sätt för att uppnå olika resultat. Den klass som definieras sist i css innehåller de attributen som prioriteras högst.

css:

.title {font-size:14px;line-height:28px;color:#ff0000;}
.webdesign {color:#0000ff;}
.webdev {color:#cccccc;}


Denna HTML betyder alltså att rubriken H2 ska inkludera klasserna: webdesign och webdev
<h2 class="webdesign webdev">Rubrik1</h2>


Resultatet av ovanstående HTML är att rubriken blir grå (.webdev {color:#cccccc;}). eftersom den sista regeln i css prioriteras högst. Lägg märke till att klassen title inte finns med här och textstorleken och radhöjden blir det som är satt som standard av webbläsaren du använder.

Boktips? 1MiljonBoktips

Klasser är ett förvirrande begrepp

När jag började lära mig koda css (cascade styling sheets) så måste jag erkänna att jag hade väldigt svårt att förstå hur allt hängde ihop. Det pratades bland annat om klasser och jag förstår i ärlighetens namn inte än idag varför man valde att kalla det klasser i css. Det här med mellanslag som betyder olika beroende på om det är html eller css för samma sak kändes också förvirrande. Tilläggas kan att det finns ett begrepp inom objektorientering som också heter klasser – och då är det något helt annat man pratar om som bidrar till ytterligare förvirring. Men bara man förstår grundprincipen så är det väldigt kraftfullt och absolut värt att lära sig – om man är det minsta intresserad av att bygga en hemsida.

Även om klasser i css är extremt kraftfullt och logiskt – så är allting med klasser ändå inte logiskt!? Att vara webbutvecklare kräver alltså att man är extremt logisk samtidigt som man måste kompromissa med sin logik för att nå det resultat man önskar!

Författare till detta inlägg (till denna blogg som handlar om webbdesign, webbutveckling och SEO)

Jag heter Gustav Wiberg och driver Skövdes genuina webbyrå Wibergs Web. Kontakta mig genom att klicka här.

Inlägget Klasser och css – kompromiss av logik! dök först upp på Webbdesign och Webbutveckling i Skövde.