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.

Håll till godo!

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

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 :)

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!

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

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.

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!

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.

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/

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