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

CategoryFFUniverse

Sista ändringar på TopNav4

Nu har jag sovit på saken flera nätter och sen återkommit till designutkastet jag gjorde till en framtida ny TopNav. Och flera saker har fått ändrats. Det gav ett lite för grötigt intryck och det känns inte bra.

För att friska upp era minnen så såg det ut såhär förra veckan:

topnav-skiss-(2015-08-19)

Flera detaljer i denna skiss är så klart bara test, så det är svårt att komma undan denna gröt. Men en del kan göras, och har nu gjorts. Detta är det senaste utkastet, en med “Fler spelguider”-menyn utvecklad och en utan.

topnav-skiss-(2015-08-25)---expanded topnav-skiss-(2015-08-25)

Den grå bakgrunden runt bilden på Noctis (och hela bilden med Noctis) är bara platshållare för mig för att jag ska se hur brett jag designar i förhållande till hur bred sajten är idag. Likaså de pixelmått jag lagt nere i högra hörnet.

Den största sak jag tagit tag i nu är “menyn” med sociala media-knappar/länkar. Den gjorde allt grötigt där under Community-menyn (som expanderar vid klick och visar login-formuläret). Den ligger nu till höger på sidan av menyn med alla spelguider. Inte helt perfekt, men i vartfall bättre. Föredrar att kunna ha en beskrivande text till alla ikoner, men det får inte plats nu, men vi får se om jag kommer på nån ny bätte lösning.

Dessutom böt jag plats på länkarna till andra avdelningar på FFU (startsidan med spelnyheter, samt vår FAQ med supportfunktion) och den så kallade “News tickern”. Det känns bättre att ha sajtlänkarna närmare logon, samtidigt får nyhets-tickern en väldigt central placering, och det känns som det funkar mycket bättre än jag trodde först.

Annars så har dessa saker ändrats:

  • Sub-titel till FFU är nu skrivet i vitt.
  • Länkarna till “Community” och “Guider” är borttagna, möjligt de ska visas till höger om de andra sajtlänkarna när man har väldigt stor skärm.
  • Nyhetstickern visar en uppdatering från en av guide-sajterna.
  • Ljusare skugga (och svart istället för blå) på “Fler spelguider”-dropdownen, dessutom är den mindre 3D och skuggig.
  • I Community-boxen så är all text nu grå och länkar orange, gillade hur det funkade med den mörkgrå bakgrunden.
  • Community-boxen är nu lite mörkare, och den övre färgade ramen lite ljusare.
  • Mer luft generellt i Community-boxen (som också blivit större).
  • Vertikal skiljelinje mellan alla FF-spel och de andra länkarna.
  • FFXVI borttaget från spelmenyn, det var ändå bara en test. När det spelet blir aktuellt så får “Bravely Default” och “Chrono Trigger” (allt som inte tillhör grundserien i FF-serien) stryka på foten. Hoppas bygga automatik på detta.

Ny TopNav lämnar skiss-stadiet

Jag skissar alltid med vanlig blyerts, eller bläckpenna, på helt vanligt papper när jag håller på med webbdesign. Idéer föds på sömnlösa nätter, oftast. De kladdas sen ner på papper, i en oerhörd mängd olika varianter. Där testar jag vad som känns som att det funkar.

Efter mycket skissande över lång tid går jag till Photoshop och börjar sätta upp det hela. Ibland skippas detta steg om det går att designa allt direkt med HTML och CSS istället. I Photoshop så får jag fram saker från skisserna som kanske bara varit med dem som små handskrivna kommentarer – detaljer, färger, med mera. Här märker jag hur saker får plats, luft, och liknande.

Även i Photoshop så går jag över min “skiss”/design flera gånger och gör om saker. Det gäller att inte vara rädd att bara kasta något man inte är helt nöjd med. Bättre det och börja om än att fastna i ett spår som bara är halvbra.

Vår TopNav, navigationsmenyn i topp på alla FFUs sidor med alla FF-spelen, får sig nu en runda. Det blir i så fall den fjärde i ordningen. Här är tre skärmdumpar från designprocessen än så länge. Det återstår så klart flera rundor till. Se hur designen ändras dag för dag.

Det ligger extremt många tankar bakom rätt många av detaljerna i designen. Kanske förklarar mer i en kommande bloggpost. Om inte annat då det börjar närma sig lansering (lång lång väg kvar än, räkna med upp emot ett år).

För 3 dagar sen:

Första rundan i Photoshop. Ett snabbt och litet rörigt upplägg på vad jag hade tänkt få plats med (märkte fort att det blev trångt). Här testar jag också en hel del idéer och känner in om de funkar eller ej. Många såna “försök” tas bort under designprocessen.

topnav-skiss-(2015-08-16)

För 1 dag sen:

Testar en meny för sociala media och har jobbat lite mer på en förbättrad Community-meny (mer lik mina pappersskisser). Fortfarande inte nöjd. Flera saker känns lite fel.

topnav-skiss-(2015-08-18)

Idag:

Gjort en pixlad backgrundsbild, som varit tanken ända sen skisserna. Förbättrat och jobbat mer på Community-menyn (alla delar av den: inloggad och utloggad). Dessutom gjort menyn med sociala länkar mindre synlig, men fortfarande inte nöjd med den. Ändra också “nyhets-tickern” mer röd-gul än grön-gul. Pilen ned på vald sajt är mindre spetsig. Och jag började snabbskissa på en dropdown-meny för alla spel som inte får plats i den horisontella menyn … inte direkt nöjd med den heller. Så det blir nog flera ändringar i nästa rundan.

topnav-skiss-(2015-08-19)

Uppdatering i TopNav – FFXV-sajt lanserad

Högst upp på alla sidor har vi vår guide-navigator, tekniskt döpt till “TopNav”. Alla sidor har den och vi den tar man sig snabbt runt mellan våra guider, till våra nyheter, eller loggar in på Communityn.

bg_gamelist

Idag gjordes en av de största omorganiseringarna på den sedan starten. Tidigare i år la vi till “XIV” men som man inte kan klicka på eftersom vi inte har någon sajt för FF14 … än. Och gamle goda “III” blev äntligen klickbart då vi för första gången fick upp en sajt om spelet.

Denna gång la vi till en ny sajt också. Final Fantasy XV som är ett väldigt hett ämne just nu över hela spelvärlden. För att få plats med ett helt nytt spel där uppe så måste vi ta bort något av de gamla länkarna. Därför valde jag att ta bort länken till FFCC (Crystal Chronicles). När den var borta så tänkte jag att det mer aktuella spelet Bravely Default borde få plats där uppe också, så jag böt in den mot länken till Advent Children-sajten.

bg_gamelist_2

I en framtid så kommer vi att designa om hela denna del. Den är lite jobbig att underhålla och krånglig att ändra på. Det går mycket lättare nu än för några år sedan då jag utfört flera större underhållsjobb bakom kulisserna. Men det är inte att undvika att detta är ett element på sajten som har lite för många år på nacken.

Nya vapenlistor

Då jag för lite över två år sedan flyttat färdigt FF7-sajten till vår nya design och nya system så var jag inte helt nöjd med alla sidor. Många sidor hade fått flera förbättringar, men en perfektionist blir aldrig nöjd. Speciellt våra sidor med gamla listor såg väldigt gamla och tråkiga ut, stela. Samtidigt är det lite utmattande jobbigt att sitta i timme efter timme och bara ändra små små saker i texter. Man tröttnar, och man vill bara lansera sajten och gå vidare.

Så jag lanserade sajten. Och istället så har jag lite då och då efter det jobbat med dessa förbättringar. Ett exempel är vår långa sida med information om allas vapen. Där har egentligen allas vapen bara listats i en lång lång lista (lite dumt ja). Nummer ett så är denna lista extremt tråkig. Sen så får inte allt plats, det är sneda linjer, text försvinner, etc. Se nedan.

Screen Shot 2015-07-30 at 14.22.33

Så det jag gjorde var att pröva göra om en sådan tråkig lista till en mer modern tabell med lite bättre struktur och ordning. Det fick bli Clouds vapenlista jag gjorde om. Men det var så tidskrävande (men mest sjukt tråkigt och enformigt jobb) att jag nöjde mig med den. Listan för Clouds vapen såg så ut som detta:

Screen Shot 2015-07-31 at 09.56.43

Detta var till lanseringen. Jag var inte helt säker på om jag ville göra om alla listor till att se ut som den för Cloud. Så jag väntade. Till nu. Flera andra uppdateringar på sajten ledde mig till att komma på en ny idé på upplägg, lite mer som Materia-sidorna där varje materia får sin egen stora rubrik (som kan sökas på mycket lättare) samtidigt som viktig info som “Vart hittar jag detta vapen” får mer fokus och mer plats. I en tabell så har man extremt begränsat med plats att jobba på. Så det ledde mig till att pröva detta upplägg, denna gång på Red XIIIs vapenlista.

Screen Shot 2015-07-30 at 14.22.15

Vad tror ni? Känns Reds upplägg som det bästa? Mer plats för information om vart man köper vapnet, vad det kostar, och framförallt – hur hittar jag detta vapen? Fördelen med en tabell är helt klart att du får överblick på en sekund, men du får väldigt tunt med info. Skulle vi gå för att göra om alla listor till Reds upplägg så skulle nog hela vapen-sidan behöva styckas upp så att alla karaktärer får sin egen undersida, för bättre ordning och för att slippa en sju mil lång sida med text.

Nya Cookie-regler

Lagar tillkommer, försvinner, och förändras kontinuerligt. En som funnits länge är den att någonstans på sin webbsida – alla webbsidor, stora som små – informera om cookies (webbkakor, små textfiler som lagrar information). Så vi har haft en sån enkel liten sida med information, och detaljer om hur man kan stänga av cookies på sin dator om man så önskar.

Numera har denna lag skärpts och man måste meddela på alla sidor där man använder Cookies. Besökaren måste mer aktivt säga att detta är OK. Vi använder Cookies överallt, det är svårt att ens kunna ha en webbsida numera utan att behöva Cookies.

Vi är helt beroende av Cookies för marknadsföring (annonser) på de få ställen såna finns, vi är också helt beroende av det för att kunna få ut statistik om besök på sajten. Dessutom är Communityn helt beroende av att Cookies är tillåtet och inte stängs av under användning.

För att följa lagändringen så har jag nu lagt upp en informationsruta på Communityns alla sidor, alla våra moderna Guide-sajter, och så småningom även på Nyhetssajtens alla sidor. Denna ruta har genererats via ett verktyg som heter “Cookie Consent“. Det kan starkt rekommenderas för att spara dig mycket tid om du hamnar i samma sits som mig!

De sajter hos oss som ännu inte har denna information är de gamla guide-sajterna (FF8-sajten, FF10-sajten, med flera). Det kommer uppdateringar dit så småningom.

Två nya superbra funktioner

I vårt WordPress-Theme (version 1.5) av FFU så har vi ett flertal olika mallar att välja på för våra sidor. Alla med lite olika funktionalitet.

Jag har nu programmerat två helt nya mallar, bägge med en varsin funktion som jag tror avsevärt kommer underlätta det för besökarens jakt på information. Än så länge är det bara vår FF7-guide som aktiverat dessa nya mallar, men möjligheten finns att använda dem på alla våra spelguider som körs i WordPress.

Automagisk innehålls-meny

Den första är ganska enkel i sin funktionalitet, men var oerhört tidskrävande att göra manuellt. För att inte tala om oerhört lätt att göra fel!

De sidor med denna funktion aktiverad får en meny genererad automatiskt av koden. Den ser till att markera upp alla rubriker på sidan med ett litet “ankare” och sedan skapa en meny precis innan den allra första sidorubriken. Denna meny innehåller så namnen på alla rubriker på sidan, t.ex. “Clouds Omnislash”. Klickar man på den så scrollar man smidigt ner till just denna text.

minimenu

Det har aldrig varit enklare att hitta till rätt innehåll på FFU än nu!

Automagiskt innehålls-filter

När du står inne på en av sidorna med massa text på så blir det fort svårt att hitta till rätt information. Tänk dig alla Materia-sidorna. Hur ska du hitta den materia du är ute efter? Jo, du scrollar sakta ner för sidan och läser igenom alla rubriker. Men oftast vet du ju exakt vad du söker. Ja, de smarta har listat ut att alla webbläsare har en inbyggd sökfunktion som de använder. Men den träffar ju på precis all text på sidan.

Så vi byggde en egen filter/sökfunktion! Denna kunde man omöjligt ha lagt upp själv som skribent.

Överst på sidan kommer en sökruta upp. Bara skriv så filtrerar vi bort allt som inte matchar i realtid. Skriver du in “Plu” så visas bara materior som innehåller “plu” någonstans i titeln.

before-filter

Precis under sökrutan finns också en smidig meny med snabblänkar och också den filtreras samtidigt som du söker. Så du ser alltid vad det är du får träff på, och du kan enkelt bara klicka på något för att hoppa vidare.

after-filter

Glöm dock inte att klicka på “Rensa filtret” för att visa alla materior som dolts efter ett sök.

Bägge dessa funktioner är i testfasen, och det återstår lite jobb med dem på mobil-versionen av sajten. Men testa dem gärna och kom med dina synpunkter! Filter-funktion finns bara på Independet Materia-sidan, medan den automagiska menyn finns på nästan alla sidor där den behövdes, till exempel på sidan som visar hur man får alla karaktärers bästa limit breaks.

FFUs första WordPress-theme borta

Nu har den sista sajten flyttats bort från vårt gamla WordPress theme. Det var inte någon direkt skillnad i design, utan mer i hur det tekniskt var uppbyggt. Att flytta FF7-sajten var det största jobbet, många saker behövdes göras manuellt, t.ex. lägga in all karaktärsdata på nytt.

Men nu är det gjort och vi kan då äntligen radera ytterligare en TopNav-fil som vi har allt för många av.

Säg till om du skulle hitta något som ser konstigt ut på FF7-sajten efter flytten. Väldigt mycket var som sagt tvunget att ändras manuellt, och med 160+ sidor så är det lätt att missa nåt.

Nästa steg är att fysiskt radera detta Theme från servern. Måste bara uppdatera lite sökvägar till bilder som fortfarande används.

Gilgamesh nergång

Gilgamesh kan vara det system på FFU ingen har hört om. Vårt egna CMS (publiceringssystem för att skapa hemsidor med menyer, sidor, etc). Det byggdes för många år sen av mig för att jag skulle slippa lägga upp alla nya sajter manuellt. Ni vet, skapa en ny fil, lägg in lite html-kod, lägga upp lite text, kolla länkar, och så ladda upp på servern med FTP. I Gilgamesh lagrades allt i en databas, så man bara skrev in massa data i olika formulär för att skapa helt nya sajter, sidor, och menyer. Genialt!

Men det blev aldrig färdigt. Inte ens i närheten av. Vi körde ut FF12 och FF13-sajterna i systemet. De funkade. Men det var fortfarande rätt hopplöst att jobba i. Man kunde inte jobba på en sida i smyg, som ett utkast, utan allt publicerades direkt man sparade nåt. Och väldigt få tekniska saker var annat än manuellt jobb, som att sen publicera sajten. Skulle man göra sidor med tabeller och/eller bilder så var man tvungen att knacka ren html-kod.

Nu igår så tog jag ner detta system från FFU, för gott. Det har tjänat sitt syfte. De två sajterna som låg publicerade i systemet har sen länge flyttats till WordPress. Och de sajter som var på gång var få till antalet och all den datan har jag sparat undan.

Här får ni några bilder på systemet för att se lite hur det såg ut. Kan ju vara kul för … kanske nån i vartfall ;P

Shoppens nergång

När jag postade om vår lilla helt osynliga uppdatering av TopNav för några månader sedan så gick kanske en liten liten detalj förbi alla. Se på bilderna här igen:

Screen Shot 2015-02-18 at 10.05.22 Screen Shot 2015-02-18 at 10.01.59Ser du nåt som skiljer de två åt (den nedersta bilden är den gamla TopNav)?

De vita länkarna mot botten av menyn är våra sajter/delar av FFU som inte hör till något av spelen. Alltså Nyhetssajten, Communityn, och Support finns där. Och här ligger ändringen. Den tredje länken gick från att heta “FF-shop” till att bli “Final Fantasy”. Man klickar på den för att få en lista på alla Final Fantasy-spel vi har guider om. Där visas de alla med logo för enkel översikt.

Men vart tog vår shop vägen? Utan buller och brak så har den faktiskt lagts ner. Det var en rätt död del av FFU som hade stora visioner i starten men som aldrig fick någon uppmärksamhet från oss trots att besökare önskade liv i den. Då den fortsatte ligga inaktiv i många år, och inga planer finns på att återuppliva den, så valde jag att helt enkelt bara ta bort den helt. Klippa bort den döda kvisten från trädet.

Dessutom har FFU mer aktivt nu börjat ta bort alla annonser på sajten. De tar plats och stör samtidigt som de ger nästan ingenting alls ekonomiskt. Så då kan vi lika gärna ta bort dem och samtidigt förbättra upplevelsen för besökarna. Och detta med annonserna var tidigare en stor del av shoppen, man kunde handla på t.ex. CDON och få poäng i communityn för detta.

Du kan fortfarande komma till shoppen om du hittar en gammal länk, eller om du minns adressen. Men även denna möjlighet kommer att tas bort då alla filer kommer att raderas i en snar framtid.

WordPress-sajternas “nya” TopNav

TopNav är den lilla sidnavigeringen som ligger i toppen på alla sidor över hela FFU. Den har sett likadan ut i många år. Men nu har jag skrivit om koden till den, från grunden.

Här följer två jämförande bilder mellan den gamla versionen och den nya.

Före:
Screen Shot 2015-02-18 at 10.01.59

Efter:
Screen Shot 2015-02-18 at 10.05.22

Såg du någon skillnad? Nej, inte jag heller. Det är ingen skillnad. Designen är identiskt. Enda mikroskopiska skillnaderna man kan se är att text man skriver i login-formuläret fått lite marginal till vänster, ikonerna har justerat sina placeringar lite i samma formulär, och “FF-shop” har blivit “Final Fantasy”. Men annars är allt identiskt.

Vår förra TopNav var gjord som en iframe. Detta är en dålig teknik, den är speciellt dålig för sökmotoroptimalisering och sidan laddar lite saktare när sådant används. Så steg ett var att göra koden direkt på sidan och inte använda en iframe alls.

Inte heller var HTML-koden direkt semantiskt korrekt, eller direkt SEO-vänlig. Helt enkelt var koden väldigt ful. CSS:en var också väldigt dålig, upprepade väldigt många saker, och gjorde massa onödigt. Därför har bägge dessa skrivits om totalt från grunden. Samma utseende men så extremt mycket bättre (och modern kod istället för stenålderskod).

Sen så var den inte heller något mobilvänlig alls. Detta har också ändrats så att man kan få TopNav (utan login-funktionen dock) även på sin mobil. Ett stort lyft för våra mobilanvändare som behöver ta sig mellan våra olika spelguider.

Den nya lösningen är skriven in i vårt nya WordPress theme – “FFU2 – v1.5“. Trots att detta theme är byggt i PHP så använder faktiskt inte nya TopNav någon PHP alls. Jag tänkte lite långsiktigt och har skrivit koden så att allt baserar sig på bara JavaScript istället. Detta JavaScript anropar en fil på Windows-servern. Denna fil är skriven i klassisk ASP mest för att mycket kod redan fanns till detta och för att det är enda sättet att kunna kommunicera med Communityn som är helt lagad i det språket.

JavaScriptet börjar alla sidvisningar med att sända en fråga via Ajax till Windows-servern. Detta funkar vanligen inte, men genom att tillämpa CORS-principer så funkar allt nu fint. Windows-servern svarar med en JSON-fil som innehåller all data som behövs. Där står senaste nyheten vi har, om du är inloggad, och lite annan sån data. Dessutom – och detta är helt nytt – skickar vi med info om den senaste uppdateringen som gjorts på någon av våra guider. Så nu kan vi visa inte bara senaste nyheterna utan också senaste guide-uppdateringarna.

Denna JSON-fils data cachas också lokalt så att den genereras max en gång var 15 minut. Cachningen är global också, inte per besökare.

En annan liten fin detalj är att TopNav förut gjorde många http-request på grund av alla de små ikonerna, till communityns inloggnings-formulär bland annat. Detta är nu löst genom att jag slagit ihop alla ikoner till en enda “tilemap”-fil som istället får placera ut ikonerna genom att flytta på en bakgrundsbild och sedan “klippa bort” de ikoner som faller utanför.

Många roliga tekniker insprängda i en enda liten “modul” med andra ord. Nu återstår bara att byta ut alla Windows-sajternas gamla TopNav-kod med denna nya. Sen kommer jag hata TopNav lite mindre ;P

Och ja, FF-shoppen är nerlagd. Jag ska komma med mer info om det sen, men det var på tiden att klippa bort den döda grenen från FFUs träd.