Det kommer finnas länkar som står ut med en annan färg än brödtexten, det kommer finnas en bild som oftast är centrerad eller högerställd. Det kommer finnas en slags meny som står ut för att visa och hjälpa till med navigationen.

Jag har arbetat på mitt lilla WordPresstema ett tag nu och har tänkt väldigt mycket på hur vi kan ta detta ett steg längre. Att göra precis det som besökaren förväntar sig men ändå implementera det lilla extra.

Ta mina länkar till exempel, titta på texten bredvid logotypen i min header, rör musen över. En liten, liten transition är implementerad som pågår i 0.2 sekunder. Det är inte mycket men ändå något som man reagerar på, upplevelsen blir helt plötsligt något helt annat än om färgen byts direkt på det gamla vanliga hårda viset.

En annan sak är menyn, också det smyckad med lite CSS3-godis, den är till 75% klar med sina subtila effekter.

Det viktigaste är ändå att upplevelsen inte blir lidande av överanvändning av effekter, exempelvis använder jag enbart text-shadow på rubriken som har formatet för ensam bildpublicering. Tanken är att effekterna inte ska synas, de ska kännas och upplevas. Vi tillför någon slags tredje dimension till de statiska plattorna på sajten.

Nästa projekt är att få min sidebar riktigt användbar, tanken är att dynamiskt kunna få in två sidebars vilket användaren kan välja vilken av dem som ska synas. Ett slags skal vilken kan visas, döljas och flyttas dynamiskt beroende på hur och vad som är relevant. Även någon slags relevansberäkning av widgets vore trevligt att få till via en “automatisk” prio-process – även om det inte ligger längst upp på listan just nu.

Först får vi tänka att CSS3 är helt uteslutet, det fungerar sådär och vi vill ju nå de flesta besökarna av sidan, även de som inte kör senaste versionen av X webbläsare.

Först kollar vi lite på uppbyggnaden:

[php]
<h1>En rubbe</h1>
<p>Paragraf</p>
<p><a href="#" class="more-link">Läs mer</a></p>
[/php]

Vilket betyder att CSS egentligen är uteslutet, Läs mer finns inne i en <p>-tagg, men det gör paragraferna ovan också, vilket det kan finnas flera av. Detta betyder att display: inline inte kan användas på <p>.

Lösningen måste ligga i JavaScript. Detta är alltså ett litet fulhack med jQuery för att tillfredställa begäret att ha Läs mer vid sidan av texten och inte under:

[javascript]$("a.more-link").parent().css({ ‘display’: ‘inline’ }).prev(‘p’).css({ ‘display’: ‘inline’ });[/javascript]

Den snabba förklaringen är att jag väljer a.more-link, hoppar upp till dess förälder i hierarkin, sätter display inline på paragrafen. Slutligen så går jag bakåt med hjälp av .prev() för att hitta elementet ovanför Läs mer-länken och sätter display inline även här.

Quick & Dirty

För att förklara så använder jag the_content() tillsammans med en sidbrytning 99 gånger av 100 för att visa en ingress på första sidan. Alltså, the_excerpt(); fungerar inte då det bryter text samt tar bort HTML.

Efter ett tag fick jag en liten idé då kvällens uppdrag att leta efter nya och fräscha podcasts om webbdesign gick åt skogen på grund av Apples gränspolis. Mycket kunde alltså inte på ett smidigt sätt hanteras automatiskt via iTunes eftersom de inte var tillgängliga i Sverige. Här kommer då resultatet med de fyra PODcasts som jag tycker om och slaviskt lyssnar på i mina lurar.

Har ni andra bra tips, kör gärna in en kommentar nedan eller e-posta mig.

Vi börjar med webbradion, främst eftersom den är på svenska, som är en webbcast för och av webbutvecklare. Varje vecka drar städar de fram intressanta nyheter och ämnen som bör diskuteras från det stora internet och snackar lite om vad de tycker om det hela. Att de favoriserar Rails kan vi ignorera för denna gången ;)

Missa inte att kolla i deras backlogg av program också, de har alltid en intressant gäst med sig i varje episod.

ITunes

Boagworld är en mycket driven show från den lilla ön i väst vilka är sjukt drivna. Klimatet är snabbt och avslappnat med glöd. En av mina stora favoriter som snurrar i lurarna.

ITunes

ExplicitWeb är en ny cast jag börjat lyssna på, lite sämre kvalité än de andra men fortfarande roande och matnyttig information.

ITunes

CSS-tricks har istället en videocast, jobbigt att glo på medan du går men härlig på bussen. Här tipsas det mer om matnyttig och saker du direkt kan sätta igång att koda i jQuery, CSS med mera. Definitivt värt en titt!

ITunes

Förr såg den ut som nedan (via waybackmachine), vilket enligt deras historik daterar sig till Oktober 2007 vilket känns ganska logiskt med tanke på upplägg och design, den gjordes säkert tidigare dock.

Idag märkte jag av den nya versionen av DinTur. Bättre – ja, absolut, men det finns en del att önska ändå om man får vara kritisk.

Det första jag gör då någon lanserar en ny sida är att kika lite i källkoden. Detta tog mig i dag tillbaka till 2000 cirka med lite häftiga fynd.

Hur tänkte utvecklaren här? Inte nog med att tabeller ligger och skräpar utan något som helst innehåll, men här hittar du också trotjänaren <font> som hade sin storhetstid då en webbsida kunde göra i Frontpage Express som var en WYSIWYG-editor från 90-talet.

Här ser vi en kvarleva från ett gratis menyscript som kostar nästan $60 att köpa, det ska nog vara ett helt sjukt bra script om inte samma funktionalitet kan slängas ihop på en dryg timme med WordPress, lite HTML och CSS.

Nu till varför det känns som en tidig beta.

Ojoj, vad mycket utvecklaren måste göra. Nu kan nog undersidor anropas, ett mail från Anki som verkar intressant angående priser och sidor är fellänkade.

Jag kikade även lite i deras CSS-mall, men det var inte så häftigt eller nyskapande direkt. Sidan är uppbyggd av tables med hjälpa av <font> och inline-css. Likaså när jag startade validatorn, oftast spelar det ingen som helst roll om det blir lite varningar även om jag som webbdesigner strävar efter perfektion i min kod, men lite saker höjde mina ögonbryn:

…style="margin-left:9px;"><tr><form action="index.asp?id=819" method="post"><td>

Form i en TR utanför TD?

End tag for element "LI" which is not open

Hrmm, en extra LI? Kan inte det förstöra layouten i värsta fall?

Resterande sidor håller ungefär samma tempo, Vänliga URLs saknas, H1 som rubrik men <span> som underrubrik?

Vad jag i stort antar är att detta fortfarande är samma system som användes förr, vad jag kommer ihåg så används inte .asp längre utan .aspx vid .NET-utveckling. Sen att vid sökning av en resa öppnas en popup där jag igen får välja vart jag ska är lite löjligt, men det handlar mer om frustration och användbarhet än kodmässigt.

Nåväl, dags för mig att sluta gnälla och återgå till att koda vänliga, moderna och häftiga lösningar på mitt sätt.

Sen lärde sig folk, svenska fungerar ju faktiskt också och kan adoptera engelska ord med viss försvenskning. Det var då någonstans jag slutade använda Web och började med Webb istället.

Hela denna sajten handlar stort om Webbdesign, ett yrke och område, som har mycket låneord och man gärna använder den engelska motsvarigheten istället. Men Webb är Webb – med två ben.

Kul då när jag märker detta resultatet på Google när jag söker efter webbdesign Sundsvall för att forska lite hur jag ligger till idag och om jag sprungit ifatt de där inaktiva sidorna som ligger och ruvar på de högre platserna.

Google vill alltså, helt nonchalant, att webbdesign ska visas som webdesign. Hela min placering och sökord jag försöker rikta in mig på stavas med två b… Vad ger detta? Jo, jag (Cynatic) är inte helt relevant för den vanligaste sökningen som jag kan anta att användare gör.

Ska jag bryta mitt egna, lite tafatta, försök till att vara språkfacist för att blidka en sökmotor som alla använder?

Nåväl, Webbdesign eller Webdesign – det är frågan jag lämnar till er kära läsare.

Fotnot: Verkar som jag har problem att återskapa problemet just nu, men bilden tycker jag talar sitt tydliga språk ändå. Varför detta hände har jag dock ingen aning om …

Det är inte så att ni som jag följer är tråkiga, det är bara så att någon gång ibland måste man skrika till och försöka vidga sina vyer lite mer.

Känner du en som bloggar, eller följer du själv någon extremt bra blogg, som handlar om webbdesign, webbutveckling, media, internet, entreprenörskap, marknadsföring eller rent av bara nörderier – släng upp länken nedan så jag får kolla in det hela.

Tack på förhand.

Samma höjd på fyra kolumner

jQuery tillhandahåller dock en väldigt smart och snabb lösning för att fixa samma höjd på dina kolumner:

[javascript]
var highestCol = Math.max($(‘#colright’).height(),$(‘#colleft’).height());
$(‘#colright, #colleft’).height(highestCol);
[/javascript]

Vad de gör är att det helt enkelt räknar ut höjden på båda, tar den som är högst (längst?) och sätter den mindre till samma höjd.

Värt att notera är att systemet inte är dynamiskt för fem öre när handlar om dynamiska sidladdningar så som med AJAX eller annat som påverkar höjden utan att ladda om sidan. Detta på grund av att höjden sätts med .height(). Sätter man höjden med min-height eller något liknande kanske ett annat resultat infinner sig, men det är ingenting jag har kollat.

Lösningen på det fasta problemet kan också avhjälpas med att binda ett event eller en timer som kollar av höjden vilket helt plötsligt gör systemet lite krångligt. Hade själv problem med det på denna sidan när scriptet skulle samarbeta med Disqus, lösningen hette bakgrundsbild med CSS istället …

Livet som en mac-(ab)user är inte alltid lätt eftersom jag helt plötsligt har två väldigt bra alternativ till mitt förfogande, Coda och TextMate. Båda har sina fördelar och jag hade helst sett en fin symbios mellan dem.

Vi börjar med Coda

Ett relativt enkelt program som via ett sjukt snyggt och lättarbetat grafiskt gränssnitt gör arbetet väldigt trevligt. Site-funktionen är riktigt trevlig och så också är funktionerna för FTP och Subversion. Kort och gott – dessa funktioner är faktiskt guld värda.

Det jag inte gillar är att jag saknar en del från TextMate, till exempel snyggare syntax-highlight och bundles (tillägg, kommer till det senare). Själva applikationen känns också tyngre än TextMate även om tidsåtgången för att starta inte är något att ens lägga in i beräkning.

TextMate, perfekt med bundles

Ännu enklare gränssnitt än Coda, visar filerna som används och en drawer, som du kan dölja. Thats it. TextMate visar först sin storhet när du börjar upptäcka alla bundles som finns att lägga till i programmet. Bundles fungerar som tillägg som adderar funktionalitet och hjälper dig auto-komplettera (till exempel) 400 gången du ska skriva en funktions namn i ett WordPress-tema. Tips vad jag använder är WordPress, zen-coding (css/html). Notera att Zen-coding finns för Coda också.

Den stora nackdelen är interaktionen med FTP/SSH/SubVersion. Den är obefintlig och bundles som finns att ladda hem är ganska fattiga i funktion och utförande. TextMate har visserligen en Projekt-funktion, med presentationen och utformningen är inte ens i närheten så fin som i Coda.

Kombinationen Coda och TextMate

Tänk TextMate och dess UI, enkelheten med bundles och snygga teman kombinerat med Coda och dess funktioner som Sites, FTP och Subversionstöd. Där har vi min dröm, och nej – skriv nu inte att Aptana finns eftersom det var så segt att sirap kändes rappare. Känslan kommer nog före funktion, TextMate vinner på grund av att det är så snyggt men det är på målsnöret.

Vad kör du? Självklarheten Notepad++ på Windows eller Coda/TextMate på Macen?

Affärsplaner, möten och planering

Först på min agenda det senaste är att lösa och göra upp en fullständig affärsplan. Detta tar tid och är något som behöver, både för syns skull och för min egna skull, bli bra och fullständig. Jag är nu i slutskedet med bara några småredigeringar kvar innan den anses “färdig” (som om en affärsplan någonsin blir klar).

Möten här och där fyller mitt schema vilket är sjukt roligt. Jag har just nu satt mig själv på Miun Innovation vilket är en företagsinkubator där mycket hjälp, kontakter och bra människor finns att tillgå.De erbjuder även en rad med föreläsningar från intressanta människor som jag mer än gärna deltar på för att snappa upp information och utvecklas. Om två veckor ska jag också, för andra gången, delta i Kreativ24 – denna gången i Östersund.

Planer smids, egna projekt håller på att ta form, kontakter och samarbeten utformas och kunder börjar upptäcka mig och mina tjänster vilket jag uppskattar och tycker om då det alltid ger utmaningar.

Cynatic.se och Cynatic.org – framtida skillnader

Det kommer hända en hel del med denna sidan och Cynatic.se. Företaget kommer flytta till .se-adressen medan bloggen kommer stanna här på .org. Uppdelningen kommer nog knappt märkas för den som gillar min skrift men kommer vara mer påtaglig för den som söker mina tjänster.

Bloggposter kommer bli mer och mer inriktade på just webbdesign, inte som en inspirations källa, utan som en idéfabrik och bollplank med både personliga inlägg och tips&tricks.

Väl mött, och tack för tålamodet.