Hallå där!

Visste du att din webbläsare är utdaterad och omodern?

Jag rekommenderar att du byter upp dig snarast för att få en säkrare, enklare, snabbare och modernare upplevelse på webben.

Välj någon av dessa webbläsare:

Jag vet, stör mig inte!

En blog om interaktionsdesign & utveckling

8 June - Responsiv layout – två metoder »

Responsiv layout – två metoder

Det finns massvis av sätt att tackla en resonsiv layout. I detta blogginlägg tänkte jag ta upp två olika vägar att gå samt deras för- och nackdelar.

Denna guide kommer att använda sig av Media Queries. Har du inte tidigare arbetat med Media Queries så har jag kommenterat min CSS i nedanstående exempel för att kort förklara hur det fungerar. Känner du att du inte alls har koll på Media Queries kan jag rekommendera den här guiden hos Smashing Magazine. Till skillnad från detta blogginlägg är denna guide väldigt djupgående.

Två enkla metoder

Jag tänkte som sagt att upp två enkla metoder och deras för och nackdelar. Den första metoden går enbart ut på att minska bredden och storlekarna på elementen, den andra metoden går ut på att ändra och omdistribuera layouten på bästa sätt.

Båda metoderna har sin grund i att sätta bredder i procent (%) för att dynamiskt skala innehållet korrekt genom att endast manipulera sitens wrapper. På så vis behöver man inte tänka så mkt på vilken bredd olika element skall få utan dessa anpassar sig efter sitt parent-element automatiskt.

Metod 1

Den första typen handar i första hand om att skala ner innerhållet utifrån webbläsarens tillgängliga bredd.

Denna metod är enklare och går snabbare att koda och kräver inte att det ska finnas wireframes och designskisser för alla olika bredder.

Nackdelen med denna metod är att innehållet troligen helt enkelt inte är anpassat för att skalas ner på detta sätt. Texterna kommer exempelvis se allt för långa ut då kolumnerna gradvis blir smalare och smalare och därmed högre och högre.

I detta exempel kan du se hur det fungerar. CSS:en är kommenterad för att enkelt se vad som händer och varför.

Metod 2

Den här metoden går ut på att istället förändra layouten utefter det tillgängliga utrymmet. Fördelen med denna metod är att man kan omdistribuera innehållet till en yta som passar bättre. Man kan även välja att helt dölja vissa delar av innehållet.

Nackdelen med denna metod är att den tar betydligt längre tid att genomföra då den kräven en noga genomtänkt struktur och wireframes och design för alla lägen. Resultatet tycker jag dock gör det värt besväret.

I detta exempel kan du se hur det fungerar. CSS:en är kommenterad för att enkelt se vad som händer och varför.

Ladda ner

Båda metoderna finns att ladda ner här. Du får använda denna kod fritt men du får gärna nämna i din kod eller med en länk på din site var du hittade den.

Adobe släpper vektyg för mobilanpassning

Adobe visar upp en preview på sitt nya verktyg Adobe Shadow som är ett hjälpmedel för att anpassa siter till mobila enheter.

Verktyget låter dig koppla upp multipla enheter mot en dator och i realtid se samma site uppdateras, ändras och modifieras utan att behöva uppdatera enheterna manuellt. Det verkar fungera riktigt smidigt.

Se klippet här

Eller kolla klippet hos Adobe här http://adobe.ly/y8TyJG

UPPDATERING:
Efter att ha testat programmet kan jag säga att det verkar väldigt användbart men än så länge är det ganska instabilt och buggigt. Men idén är grym och jag kommer lätt fortsätta använda produkten.

Mobila rendezvouspoint – en sneak peak

I helgen filade jag en del på mobilversionen av bloggen och tänkte bara posta en liten sneak peak på hur det kommer att bli

Istället för att basera de på Mobile Boilerplate som jag först funderade på är det baserat på jQuery Mobile. Än så länge finns som sagt bara ett tomt skal men för att ni ska få en uppfattning av hur det kommer att bli så postar jag en länk till temat här. Temat funkar självklart även på desktops men det är såklart med er smartphone ni bör surfa in och kika hur det ser ut :) Om ni ändå surfar in med er desktop så rekommenderar jag att minska webbläsarfönstrets bredd rejält för att få en bättre helhetsbild.

Håll till godo!

http://www.rendezvouspoint.se/mobile/

Ingresser – den enkla vägen

Det finns massor av sätt att lösa ingresser på rent tekniskt...

Men vissa sätt är smidigare än andra. Jag har ju lovat att bloggen även skall ta upp enklare guider och här kommer den första av dessa.

Det finns som sagt många sätt att lösa att ingressen ska ha egna styles exempelvis genom att ge ingresstaggen en egen klass eller att använda en helt egen tagg för ingressen. Det funkar visserligen men är inte helt smidigt.

Något i den här stilen alltså:

<p class=ingress">Detta är min ingress</p>
<h6>Detta är min ingress (och hur ofta använder man h6-taggen egentligen?)</h6>

Det går även att lösa med exempelvis jQuery. Det finns dock problem med alla ovanstående. De första två lösningar kräver att användaren aktivt väljer att markera sin kod med antingen en klass eller med en annan tagg eller att det finns en backendfunktion som slänger på detta i koden. Lösning nummer två är dessutom inte semantiskt korrekt eftersom en ingress inte är en rubrik (och kommer troligen inte bli semantiskt korrekt vilken tagg man än väljer).

Nej, bort med halvdana lösningar. Det finns ett enklare sätt som både är semantiskt och dessutom sköter sig självt helt automagiskt. Alla siter har förhoppningsvis en väl genomtänkt layout. Det innebär att det alltid ska se likadant ut och användaren ska inte vare sig medvetet eller omedvetet kunna kringå detta. Om vi tar den här bloggen som exempel så ser ni att ingressen alltid kommer direkt efter rubriken. Bra! Då har vi en alltid återkommande kodstruktur. Första paragrafen efter rubriken ska alltså alltid vara formaterad som ingress.

Det löser vi således enklast med denna enkla CSS:

h1 + p {font: normal italic 22px/1.2 georgia,serif}

Ovanstående kod fungerar helt enkelt så att första p-taggen direkt efter en h1 blir 22pixlar stor, kursiv, 1.2 linjehöjd georgia i normalvikt. Alla nästkommande p-taggar förblir opåverkade.

Motsvarande lösning på mina kategorisidor och arkivsidor blir då likadan fast med h2-taggar istället:

h2 + p {font: normal italic 22px/1.2 georgia,serif}

Denna teknik går att applicera på mängder av scenarier exempelvis listmenyer där alla li-taggar ska ha en border i botten utom den sista. Enkelt! Istället för att sätta en border i botten sätter man en border i toppen och slänger dit följade CSS:

ul li{border:0;}
li + li{border-top:1px solid #000;}

Violá! Resultatet är att alla li-taggar ser ut att ha en border i botten utom den sista fast det egentligen är så att alla har en border i toppen utom den första.

Smidigt va? Och så vitt jag vet stöds denna enkla teknik av alla webbläsare, inkl IE6 (hör och häpna). De enklaste lösningarna är oftast de bästa :)

Mobile boilerplate – mall för mobilanpassade siter

Förra veckan gjorde jag några mindre uppdateringar för att bättre anpassa bloggen till lägre upplösningar och mobila enheter.

Nästa steg blir att göra en helt mobilanpassad version. Då sprang jag behändigt nog på en mobilversion av HTML5 Boilerplate och tänkte ge mig i kast med att testa just denna template för att göra mobilanpassningen. Lite för att se det som en utvärdering och se om Boilerplate’s mobilversion är något att ha.

Vid ett första ögonkast ser det i alla fall ut att kunna vara smidigt så nu skall jag sätta mig in i dokumentationen och om allt verkar OK så kommer det snart komma en mobile.rendezvouspoint.se.

Stay tuned!

Rendezvouspoint goes adaptive…

Som utlovat är nu bloggen bättre anpassad för mobila enheter och lägre upplösningar

Media Queries

Jag har ännu inte fixat CSS för alla tänkarbara enheter och upplösningar men siten borde nu funka bättre vanligaste mobila enheterna i alla fall. Jag ska även försöka få tag i en iPad och se hur det ser ut där.

För att se resultatet kan du antingen surfa in med en smartphone eller bara krympa webbläsarfönstret på bredden. Hojta gärna till om ni hittar några konstigheter som borde fixas.

Mvh
Robban

Rally Interactive har fattat grejen…

En kollega till mig sprang på den här betaversionen av Rally Interactive's portfolio och jag kände mig tvungen att skriva om den.

Byrån bakom siten har lyckats på de flesta plan för vad jag anser en modern portfolio bör vara. Sidan är modern, snygg, adaptiv för olika enheter och lättanvänd.

Det som sticker ut vid första anblicken är inte bara de triangelformade figurer som visar upp byråns olika projekt utan även den i mina ögon unika hovereffekt de lagt på dessa. Dessutom den flashiga onclickfunktionen som döljer antal views, likes och kommentarer på Dribbble.com samt länk till en screenshot, också på Dribbble.

Rally Interactive

Det är inte bara det att dom fått till detta på ett enkelt och intuitvt sätt, det flyter dessutom på fantastiskt bra. Tekniken som används är canvas och javascript och sidan är dessutom adaptiv.

För er som inte känner att ni har riktig koll på vad adaptiv innebär så testa att ändra webbläsarfönstrets storlek eller surfa in på siten med läsplattan eller mobilen. Sidan anpassar sig helt enkelt efter enhetens upplösning vilket blir vanligare och vanligare på siter idag (det är för övrigt nästa steg i utvecklingen av rendezvouspoint.se också).

Även undersidorna laddas in på ett ganska unikt sätt utan att kännas segt eller störande vilken den här typen av effekter ofta blir. Icke att förglömma att de små förhandstittar som visas upp i portfolion ser riktigt bra ut!

Sidan fungerar i moderna webbläsare och faktiskt även i IE9. Användare av äldre versioner av IE göre sig icke besvär.

Snyggt jobbat Rally Interactive säger jag!

Conversion Jam – Konferens om konvertingsoptimering

Idag har jag och mina kollegor på Atrox Creative spenderat eftermiddagen på Conversion Jam – Sveriges första konferens om konverteringsoptimering. Totalt 6 talare varav tre stora internationella namn.

Först ut var Micheal Summers från Michael Summers Consulting, Eye-trackingexpert från USA. Han höll ett inspirerande och informativt föredrag om do’s och dont’s inom e-commerce. Många värdefulla tips och en del tankeställare där han tog upp de 10 vanligaste misstagen som begås i webbshoplösningar.

John Ekman på Conversionista som anordnat hela Conversion Jam höll ett föredrag om vad e-tailers lärt sig av retailers. Svaret var Absolutely Nothing! Något han visar genom enkla jämförelser med fysiska butiker. Roligt och lättfattligt.

Jim Hudson från Paypal US med stor erfarenhet av psykologiska studier av hur vi beter oss när vi handlar på nätet visade att upplevelsen styr vårt uppfattning av tid och hur stor vikt tiden är för en bra e-commeceupplevelse. Hur man fokuserar på det kunden är intresserad av vid rätt tidpunkt, något som ändras hela tiden under vistelsen på siten samt hur man lockar till merköp på rätt sätt. Något de flesta siter gör på fel sätt i dagsläget.

Sist ut var André Morys – Web Arts Germany visade hur man med nogrann A och B-testning och med relativt enkla medel kan boosta konverteringen på vilken typ av produkt som helst. Oavsett om det handlar om Appleprodukter med stort ha-begär eller pinsamma halväckliga svettabsorberande “bindor” för armhålorna.

På det stora hela en informativ och tankvärd eftermiddag och jag kommer gärna tillbaka nästa år.

Här kan ni se hela programmet.

Advanced Custom Fields löser många problem i WordPress

Sällan har jag som utvecklare blivit så glad sedan jag upptäckte pluginet Advanced Custom Fields till Wordpress...

Denna plugg löser nämligen en mängd problem som kan dyka upp när man utvecklar en site. Hur många gånger har ni stött på att en site behöver ett gäng redigerbara “puffar” utplacerade på olika ställen på en site? Oavsett vilken plattform man arbetar med stöter man förr eller senare på detta problem. Troligen förr.

I wordpress finns en mängd olika lösningar på detta men jag har hitills inte stött på någon som är så mångsidig som Advcanced Custom Fields. Denna plugin ger dig inte bara möjlighet att bestämma var dessa puffar skall ligga och på vilka sidor den får finnas utan även detaljstyra dess innehåll.

Exempelvis kan du skapa en instans av pluggen som heter “kontaktpuff”. Där kan du definiera upp att den kan innehålla ett textfält för rubrik, en bild, ett till textfält för en e-postlänk och tills sist en WYSIWYG-editor för valfritt content. Sedan kan du bestämma att denna instans får finnas på alla sidor med mallen “default-page” alla poster i kategorin “support” och användartypen “redaktör”.

Börjar ni se potentialen? Det kommer mera. Förutom att det går att lägga in fler fälttyper, fler typer av regler av var och hur varje instans får användas och dessutom kombinera dessa med varandra så finns det även stöd för Custom Taxonomies.

Som en extra bonus finns även en repeaterfunktion. Denna kostar visserligen $25 men är väl värd pengarna. Repeaterfunktionen lägger nämligen till så att man kan loopa ut fälten och enkelt lägga till eller ta bort rader direkt i adminpanelen i WordPress. Denna stöder även drag-and-drop så man enkelt kan sortera om datat. En stor fördel men denna funktion är att det går att separera innehållet från HTML:en. På så vis kan man ge kunder tillgång att att uppdatera avancerade layouter och ändå vara 100% säker på att det alltid renderas korrekt.

Ett bra exempel på detta är exempelvis en kontaktsida med bilder och kontaktuppgifter till alla medarbetare på ett företag. Det kan vara ganska pyssligt att administrera men när allting ligger i en uppstyrd loop med förbestämda fält som inte kan innehålla något annat än de dom var skapta för (t.ex. en bild eller en text) så blir det hela plötsligt väldigt enkelt. När det dessutom bara krävs ett knapptryck för att lägga till eller ta bort rader i loopen och att omsortering sker genom drag-and drop så tror jag både leverantörer och slutanvändare jublar första gången dom arbetar med Advanced Custom Fields.

Tycker du detta verkar komplicerat? Lugn, det är egentligen väldigt enkelt. Både att sätta upp för dig som administratör och för slutanvändaren som ska uppdatera siten. Så istället för att båda parter lägger ner onödigt mycket tid med att sitta i supportsamtal så installera Advanced Custom Fields och börja upptäck dess potential!

Advanced Custom Fields är utvecklat av Elliot Condon och kan hämtas gratis här http://plugins.elliotcondon.com/advanced-custom-fields/

En ny blog har sett dagens ljus…

Tanken på att starta en blog har legat över mig i åratal. Först nu har jag äntligen fått ut tummen...

Idén är att jag skall blogga om mitt arbete. Vad arbetar jag med då? Frontendutvecklare är min officiella titel och det i första hand kommer återspeglas i den här bloggen. Jag kommer blogga om allting som rör mitt jobb och lite till. Ämnen som ligger mig nära om hjärtat är exempelvis CSS3, HTML5, Javascript och dylika tekniker. Därför kommer jag skriva om detta både på en mycket grundläggande nivå men även för den mer insatte.

Det kan handla om alltifrån nya teknologier till smarta eller snygga lösningar men även guider till hur man löser frontendrelaterade problem som ofta dyker upp i vardagen. Det kommer även bli en och annan artikel relaterat till WordPress eftersom jag mer och mer kommit att gilla detta underbara CMS. Jag ser mig fortfarande som en nybörjare inom WordPressutveckling men trots det knackade jag ihop den här bloggen på mindre än en dag. Lättanvänt eller vad?

Hur som helst, välkommen hit, kom snart igen. Jag kommer börja fylla bloggen i så snabb takt jag orkar med! Läs gärna mer om mig här

mvh
Robban