+ fler guider ×
Bli medlem
Inloggad som ...
Inloggningstid: ??

MonthOctober 2015

TopNav 4, oktober-edition

För cirka en månad sedan ändrade jag sist på TopNav. Och några nya idéer har dykt upp. Men också har flera saker fått smälta in lite mer och jag har kunnat fatta beslut som inte kändes rätt precis då jag satt med designen.

2015-10-04

Den nya logon jag testade har tagits bort, återgick till den förra, men gjorde den större. Den kändes mindre stökig, och lite gladare, mindre stel. På nåt sätt.

Dessutom så har Fat Chocobo fått komma in i värmen. Jag hade tänkt att han ska ligga bakom alla nyheter och uppdateringar (man ska kunna “kryssa ner” de man läst för att få upp nästa, upp till 3-5 stycken) och visas först då allt nytt har lästs. Men varför inte ta fram honom och alltid visa honom där uppe? Tycker han passar fint in. Rutan i sig är också lite större, inverterad gradient, och tydligare uppdelad text.

Community-rutan har fått en liten detalj ändrad. Eller två faktiskt. Knappen har gått från svag 3D-effekt till mer modern platt gradient, men i samma skarpa blå färg som förut. Rubriken gick från “Community” till “FF Community” och centrerades i fetstil ovanför knappen.

Sajtlänkarna (“Mer på FFU” och “Nyheter”) har fått permanent bakgrundsfärg för att de ska synas bättre, man missar dem så lätt annars.

“Fler Spelguider”-menyn har designats om till att likna mer på “Mer på FFU”-menyn. Ingen pratbubble-pil i toppen, bara en ren rundad ruta, med lista på sajter. I toppen en rubrik som beskriver menyn, med ett skarpt blått streck under. För att dela upp sajter i sektioner så används ett smalare ljusgrått streck än tidigare.

Här är också ett exempel på de fyra olika faser Community-menyn ska kunna vara i. Menyn kan vara minimerad eller expanderad. I designexemplet ovan är den minimerad, och användaren är inte inloggad. I följande exempel, från vänster till höger, har menyn klickats på (expanderats) så att man kan logga in. Sen är menyn minimerad men man är inloggad, och på sista exemplet är man inloggad och menyn är expanderad och visar några extra länkar. Knappar och länkar i dessa exempel är inte helt färdiga än.

2015-10-04_stages

Jag gillar kontrasterna med de mörka bakgrunderna med ljus text, och de nya skarpa färgerna av blått och orange för att kalla på uppmärksamhet (länkar, knappar), blandat med väldigt ljusa bakgrunder med svart text på.

Ny mall: FAQ dragspelsmeny

Vår gamla FAQ/Support-sajt är tänkt att med tiden flytta mer in på varje enskild guide-sajt. Detta så att man inte ska tvinga besökarna ut från guiden för att få svar på vanliga frågor. Dessutom är det bättre för sökmotoroptimalisering att man har denna info direkt på varje guide. FAQ-delen kommer dock leva kvar, möjligen i förändrad form, för att samla alla vanliga frågor för flera spel (och sajten) utan att besökaren behöver gå via guiderna. Två vägar till samma mål alltså.

Just nu är det bara vår FF7-guide som har en sådan FAQ-sida direkt på sajten. Vi håller fortfarande på och testar ut systemet för att se om det ska bli en permanent lösning för alla sajter. Och småjusteringar behövs hela tiden. Men de andra sajterna ska uppgraderas till detta nya system när vi är redo.

Men som det såg ut och funkade på FF7-sajten var extremt enkelt. Jag skapade bara en helt vanlig textsida som hette “Vanliga Frågor” och la sen in varje fråga som en undersida. Frågan var titeln, och brödtexten var svaret. En PHP-funktion listade så länkar på huvudsidan ner till alla undersidor.

Problemet med detta är två. Dels kom det extremt långa titlar på sidor in i menyn till vänster, som förstörde eller såg riktigt dåligt ut. Och dels så var det lite mer jobb eftersom man behövde första skapa den nya frågan med svaret och efter det sortera in den rätt i menyn.

Så det jag gjorde var att programmera en ny WordPress-mall i PHP med stöd av lite JavaScript. I WordPress så tog jag bort alla undersidor och flyttade istället in dem på huvudsidan, “Vanliga Frågor”, och la varje titel som en “h2”-rubrik. Min nya mall-kod analyserade denne text och gör en navigationsmeny av alla h2:or på sidan. Man kan lätt identifiera dem som dragspelsmenyer på grund av pilarna som visas i menyn före länktexten. Klickar man på en av dessa frågor så hämtas texten (svaret) automagiskt upp av JavaScript och visas direkt under, man scrollas också ned till rätt ställe på sidan på ett mjukt och smidigt sätt.

Testa gärna vår nya Vanliga Frågor-mall och säg vad ni tycker. Fler sajter följer efter en liten testrunda med mindre justeringar på koden