Søgeresultat: responsivt

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.

Fremtidens platforme

For tiden bruger jeg rigtig meget af min arbejdstid på, at tale med kunder om platformsudfordringen – en udfordring der især drejer som skærmstørrelser og nye mobile enheder. For efter i mange år blot at have fortalt om emnet, er vi pludselig i en situation hvor snakken har nået beslutningstagerne og der skal handles. Hvorfor? Fordi at de mobile enheder nu er så stor del af de besøgende på mange websites, at det har direkte indflydelse på forretningen. Der er simpelthen en forretningsmæssig balance der er skiftet, og derfor tror jeg at det kommer til at gå hurtigt fra nu af. Nogen er parat til skiftet, mens andre bliver taget med bukserne nede. Langt nede.

Men inden vi kommer til hovedpointen, lidt snak om tilgange og løsningsmodeller. I min optik er der to mulige tilgange til platformsudfordringen.

Den defensive tilgang
Beskrivelse: Inden for de næste par år har vi sandsynligvis flere net-brugere fra mobile enheder end vi har fra computer-brugere. Derfor er vi nødt til at komme i gang og tilrettelægge vores formidling og services herefter. Vi vil ikke tabe vores eksisterende besøgende på gulvet.

Den offensive tilgang
Beskrivelse: Mobile enheder giver os nye muligheder for at servicere vores interessenter bedre og i nye situationer. Det ønsker vi at udnytte, og være tilstede i flere situationer og tilbyde nye muligheder.

Og tre overordnede løsningstyper;

  • Apps
  • Dedikerede mobilløsninger
  • Responsivt webdesign

Tilgange og løsningsmodeller der alle har fordele og ulemper. Fordele og ulemper som rykker sig i takt med den teknologiske udvikling, projektøkonomien for det enkelte projekt og målgrupperne man prøver at nå. Det er en kompleks ligning.

Men tilbage til det med at blive taget med bukserne nede. For min erfaring er, er det sjældent at vi overhovedet kan tale rent om fordele/ulemper ved de forskellige tilgange og løsningsmodeller. For der er oftes et eksisterende datalag at tage udgangspunkt i … hvorfor løsningerne tegner sig selv. Mere eller mindre.

Altså skal vi have fat datalaget, hvis vi skal have mulighed for at gribe udviklingen strategisk og langsigtet an. Det greb tages sjældent. Jeg ser oftere, at der laves de løsninger der er mulige i situationen og som løser en konkret udfordring. Det er for så vidt en fornuftig og pragmatisk model, som dog betyder at løsningerne bliver kortsigtede overfor en bevægelig udfordring der ikke handler om enkelte enheder. Skal vi eksempelvis snart til at tilpasse vores løsninger til såkaldte phablet? I så fald skal der styr på datagrundlaget allerede nu, da alt andet er for dyrt på den lange bane. Datagrundlaget er din service, ikke den enkelte løsning.

Ovenstående løse tanker om datagrundlaget er der egentlig ikke meget nyt i, men med platformsudfordringen bliver pointerne måske tydeligere end nogensinde før. Skal man være omstillingsparat skal man have styr og fokus på sin data, mere end på den enkelte platform. Tankerne er i øvrigt udarbejdet i arbejdsregi – Advice Digital –  hvor især min tidligere chef Bo Juni har været inspirationskilde.

Er du enig i at datagrundlaget er den egentlige udfordring, eller vrøvler jeg helt forbi? Smid meget gerne en kommentar …

Responsivt webdesign | Få et site der tilpasser sig alt

Dit website skal læses på stadigt flere skærmstørrelser, fra pc til ipad og mobil. Det gør det dyrt og besværligt at levere en god løsning. Responsivt webdesign forsøger at løse den gordiske knude.

Af Lars Wiedemann og Ask Hybel | Samdata Magasinet 2 – 2012

Et website er ikke længere bare en side, som bliver vist i et browservindue i noget nær A4-størrelse på en pc solidt placeret på skrivebordet. Mange hiver mindre udstyr op ad lommen eller tasken og går på nettet fra sofaen, busturen eller sågar toilettet. Hvad de ser på smartphonens eller tablettens mindre skærme, afhænger af, om websitet kan matche andre formater end klassisk desktop. Hvis sitet er designet responsivt, tilpasser det sig, så du bliver præsenteret for indholdet i en form, som er optimeret til netop din skærmstørrelse og –opløsning. Og indholdet er til at gå til, uanset om du bruger et almindeligt tastatur, en mus eller fingrene. Hvis ikke, risikerer du at skulle scrolle både op, ned, til højre og venstre og zoome ind og ud for at orientere dig i detaljerne på et site, der mest af alt ligner uldtøj efter kogevask.

Snart er smartphones og tablets hvermandseje
2012 er blevet kaldt smartphonens år i Danmark. Prognoserne er, at knap 6 ud af 10 danskere har en iphone eller android-telefon, før året er omme. Ipads og andre tablets er samtidig godt i gang med at vokse sig store på markedet. Effekten er tydelig. I februar registrerede de fem største nyhedsmedier i Danmark f.eks. 8 mio. unikke besøg og 64 mio. sidevisninger på deres dedikerede mobilsites. Normalt trækker Politiken, TV2, Ekstra Bladet og de andre medier ganske vist også mange besøgende til deres websites. Det gør de sådan set stadig. Men mobiltrafikken er blevet nidoblet på blot to år. Det ene øjeblik tilgår vi altså et website fra pc’en, det næste øjeblik fra smartphone eller tablet.

Nye trends kræver fleksibelt indhold
Udviklingen kræver en revolution af den måde vi udvikler på, hvis vi skal sikre en god oplevelse på de mange forskellige skærmtyper:

”Frem for at skræddersy afkoblede designs til hver af det stigende antal enheder med internetadgang, kan vi behandle dem som facetter af den samme brugeroplevelse”, forklarer ophavsmanden til begrebet responsivt design, design- og softwareudvikleren Ethan Marcotte.

Men han pointerer, at valget af løsning afhænger af business casen og organisationen bag websitet. Det kan fx være en redaktionel udfordring at udvikle indhold, som fungerer lige godt på tværs af platforme.

Flydende overgange eller faste formater
Grundlæggende består valget i fremtidens webudvikling mellem at designe et dedikeret site til hhv. desktop, laptop, smartphone, tablet og kommende generationer af gadgets eller designe et samlet fleksibelt site, som tilpasser visningen til brugerne. Men fleksibiliteten er ikke bare formalia. Det kræver skarp prioritering af funktionalitet og indhold til mobil brug, hvis det skal give mening at udvikle i et responsivt webdesign, understreger brugervenlighedseksperten Jakob Nielsen:

”Blot at bruge responsivt design til at gøre et website tilgængeligt på mobile enheder resulterer i ringe mobile brugeroplevelser”, Jakob Nielsen.

Nyhedsmedierne har indtil videre valgt dedikerede mobilsites. Gør du fx browservinduet med politiken.dk meget mindre på din laptop, får du bare vist et hjørne af sitet. Gør du det samme med jyskebank.dk, får du et resultat, som ligner et mobilsite med store, simple knapper. Log-on til netbank er øverst, dernæst kommer nyheder og i bunden diverse genveje til lån, valuta, bolig og meget mere. Rækkefølgen er et udtryk for, hvad banken gerne vil præsentere dig for.

Indhold til toilettet og kontoret
Jyske Bank er et af de indtil videre få danske eksempler på forsøg med responsivt design. Banken prøver at skabe særligt platformstilpassede indgange til det samme indhold. Indholdet er med andre ord omdrejningspunktet. De mindre formater tager med sine store touch-indbydende knapper på forsiden højde for, at tablets og smartphones som oftest betjenes med fingrene frem for en mus og et traditionelt tastatur. Udviklingen inden for især smartphones, tablets og responsivt webdesign udfordrer det, den danske internet-entreprenør, Janus Boye kalder ”desktop-mindsettet”: En mental, vanemæssig og organisatorisk barriere i udviklingen af webløsninger, der skal overvindes. Målet er at lave indhold, som kan læses lige så godt fra toilettet som fra kontoret.


\ FAKTA OM RESPONSIVT WEBSDESIGN
Responsivt webdesign tilpasser sig fx pc’ere, smartphones, tablets og på sigt andre gadgets, som fremtiden byder på. Typisk bliver den responsive løsning optimeret til tre primære ’breakpoints’: almindelig pc, tablet og smartphone. Design og indhold skalerer og tilpasses flydende mellem de definerede breakpoints for at sikre den bedst mulige brugeroplevelse på tværs af platforme. Responsive løsninger kan specialudvikles fra bunden eller tage udgangspunkt i eksisterende software, som gør det muligt at komme hurtigt i gang.

\ UDVALGTE DANSKE RESPONSIVE SITES

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)