Tagget med: Webdesign

Responsive Facebook Comments / Tablets

For et lille år siden skiftede jeg om til responsivt design her på sitet, hvilket samtidigt betød at jeg skiftede fra Facebook Comments tilbage til WordPress’ medfødte kommentarsystem. Alene fordi jeg havde problemer med at få kommentarsporet fra Facebook til at skalere flydende og korrekt på tablets – eksempel på problemet kan ses på feltet.dk og kstud.dk. Et ærgerligt skift af kommentarspor, da WordPress’ eget system i udgangspunktet er lukket omkring sig selv og ikke har social sharing. Problemet har jeg nu fået løst … 2 minutter med en koder og lidt basic CSS. Tilføj den tydeligevis vigtige kode til dit stylesheet og du er kørende.

[php]
.fb-comments.fb_iframe_widget span {width: 100% !important; display: block !important; } .fb-comments.fb_iframe_widget { display: block !important;} .fb-comments.fb_iframe_widget iframe { width: 100% !important;}
[/php]

Ovenstående rettelse er mest af akademisk interesse, for jeg ændrer foreløbig intet herinde. Men smid altid gerne en kommentar.

Tak til clausjnsn for kode.

Responsive webdesign

Responsive webdesign var et af de store buzzwords sidste år, og intet tyder på at det bliver mindre i 2012. Da jeg fandt ud af, at dette site har hele 45% af sine besøgende fra enten iPad eller iPhones, så tænkte jeg at det var på tide at få leget lidt med teknikken. Mit pragmatiske webgen skal “røre” for at lære, også selvom jeg ikke just selv er koder. Jeg fandt et minimalistisk wp-tema opbygget med responsive design, uploadede det og var så jeg klar på en ny platforme. Næsten.

For der er en del man skal tilrette, når går fra faste skabeloner til responsive design. Først og fremmest, så handler det om at holde ens løsning så simpel som mulig. Og sørge for selv at have styr på den del af koden der skal kunne skalere frit, for ikke alle gratis/eksterne produkter klarer sig lige godt. Eksempelvis fandt jeg ud af at mit kommentarsystem fra Facebook, ikke kunne skalere frit i Firefox. Altså måtte det ud. Herudover har jeg en lille sort topbjælke og et par eksterne links i min menu til anbefalinger og cv – indhold optimeret til høj skærmopløsning. Derfor blev de dele skrevet ud af koden, under en vis skærmstørrelse. Det betyder selvfølgelig, at ikke alle besøgende ser den samme hjemmeside, det afhænger af den skærmstørrelse man benytter. Det er et valg jeg har taget, men det er ikke nødvendigvis et brugervenligt valg. Fordelen for mig er dog, at jeg på denne måde alene skal redigere mit site ét sted fra.

En anden ting man skal vende sig til når man arbejder responsivt er, i opsætningen af ens indhold. Normalt har man faste størrelser at forholde sig til, men pludselig skal billeder/tekst/videoer kunne skalere op og ned i størrelse. Det betød helt konkret, at jeg skulle ind og omskrive alle der steder hvor der var embeddet kode i mit indhold. Forden er så nu, at det er gjort. Finder jeg et andet responsivt tema på sigt, så er indholdet parat. Indhold opsættes altså ikke til en bestemt størrelse skabelon – det er FANTASTISK. Ikke mere pixelknepperi.

Hvis du stadig er lidt i tvivl om hvad responsitvt design er, så tag fat i hjørnet af din browser og se hvordan min hjemmeside ændrer udseende når skærmstørrelsen bliver mindre.

Og vil jeg så anbefale responsivt design, nja njo … måske. Det kommer som altid an på løsningen.

Lidt inspiration (det er godt)