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

AuthorBobby

FFU – 20 år på nätet – planerna

FFUniverse firar i sluten av november smått otroliga 20 år på internet. Vi har funnits längre än de flesta sajter där ute. Vi har hållit på utan stopp sedan 1997. Ganska imponerande för en liten guide som började när en 16-årig Örebroare la upp för att hjälpa andra som spelade Final Fantasy VII.

Det är några månader till vi fyller år, men hela detta år har vi starkt fokuserat på att göra väldigt stora grepp på baksidan, i våra interna system. Tråkiga men viktiga grepp för att kunna överleva 20 år till. Mycket gammal teknologi har sakta men säkert bytts ut. Jobbet började egentligen redan med 15-årsjubileumet och den nya FF7-sajten i 2013.

Vi började med en sajt åt gången. De togs ner från Windows-servern, där de låg som statiska “.asp”-filer (eller ASP.NET), med all text “hårdkodad” som HTML. Alla ändringar behövdes göras direkt i filerna av någon webbutvecklare. Väldigt bökigt, så oerhört många ändringar blev inte ens gjorde. Väl nere från Windows-servern så la vi upp dem på en egen sajt i WordPress, alla med samma design, menysystem och funktionalitet. Detta underlättade massivt för oss, och det ser man på att vi nu kan uppdatera dessa guider lätt och ofta med nytt material! Sedan dess har vi flyttat över 16 FF-sajter! Det återstår nu bara 5 sajter, varav en (Sword of Mana) inte kommer att flyttas.

Tidigare i år flyttades FFVI-sajten, nu jobbar vi på FFVIII-sajten, och resten av året hoppas vi på att få gjort något med de sista stora: FFIX och FFX-sajterna. Vi ska dessutom göra ännu större ansträngningar för att helt få bort gammal teknologi.

Den största boven på vår server just nu är den gamla nyhetssajten. Så idéen här är att helt få den bort och sätta upp en ny sajt på “nyheter.ffuniverse.nu”, också den i WordPress. Där ska vi så klart importera alla gamla nyheter, men också tillföra en massa nytt som bättre kommenteringssystem (via Disqus), bättre möjligheter att dela intressanta saker, bland annat. Efter det ska det mesta av nyhetssajten som idag ligger på “www.ffuniverse.nu” (root) tas bort. Där ska i stället ett slags FFU-nav växa upp, en vägvisare vidare in på våra sajter.

När det är gjort så kommer vi också flytta denna blogg bort från root på “guide.ffuniverse.nu” och ge den en egen subdomän, för ordningens skull. Den kommer hamna på antingen “blogg.” eller “dev.”, jag tror mest på det sistnämnda för då passar det fint att samla lite annat där. Då lämnas “guide.”-serverns root-sida öppen för att helt ersätta gamla “/games.aspx” (sidan som visar alla spelens logos). Vi får då en mer logisk struktur, där på root av guide-servern väljer du vilken guide du vill titta i.

Det ska också ändras lite i strategin. FFU var tidigt en av få som erbjöd support på epost på de flesta FF-spelen. Något vi erbjöd gratis. Detta har i princip ersatts av forum, Facebook, och liknande. Så vi kommer att lägga ner denna funktionalitet, och därmed mycket av FAQ-delen av FFU. Vi flyttar all kontakt in på Facebook, och alla spelens “Vanliga Frågor” ska flyttas in på respektive sajt (detta har vi redan sett på alla guide-sajterna, t.ex. på FF7-sajten). Det är mer logiskt att ha det tillsammans med resten av guide-innhållet, och sökmotorer förstår det bättre. Det är troligt FAQ-delen återuppstår på “faq.” för att också innehålla lite annan hjälp-info runt sajterna, men vi får se.

För att allt detta ska funka har vi tvingats utveckla många saker ni inte ser. Vårt migreringsverktyg “Migrate 2 WordPress”, och vår nya smarta TopNav (som ser identisk ut men är omskriven från grunden). Utan dessa två viktiga verktyg hade vår modernisering inte varit möjlig. Och självklart fortsätter vi skruva på dessa verktyg framöver, efter behov.

Många väldigt stora ändringar, helt klart. Men de behövs för att på riktig modernisera ett åldrande FFU som minst sagt har lidit hårt av gamla krämpor. Och ja, allt detta är planlagt att rullas ut fram till och runt 20-årsjubileumet!

Följ oss på Twitter, gilla oss på Facebook, och bli med på vår resa till nästa generations FFU!

Snabbare hemsida med CSS istället för bilder

De sista par veckorna har jag jobbat sakta men säkert med att plocka ut några bakgrundsbilder i från vår design och ersätta dem med endast några få linjer text (CSS).

Bakgrundsbilderna är oftast små, så de tar inte tid per styck (eller tillsammans) att ladda ner. Men webben fungerar i bakgrunden i stort sett på samma sätt som när den för många år sedan först slog igenom. Saker går i en och samma “lina”, så när du kommer in på FFU så får du första själva koden och texten till sidan, sedan kommer alla bilder som står för själva grafiken, och de skickas till din dator en och en. När vi då har runt 30 bilder för olika grafiska element i vår design så springer tiden fort iväg. Millisekunder blir till sekunder. Och sånt märkt. Speciellt på mobil med dålig täckning, t.ex. när du åker tunnelbana eller står ute i en skog (varför du nu ska surfa på FFU när du är i en skog låter jag vara osagt).

Med CSS (CSS3 för att vara specifik) kan man lätt göra väldigt många effekter idag som för 10 år sedan bara kunde göras i t.ex. Photoshop och läggas upp som bilder (jpg, png, gif). Slutresultatet är inte visuellt annorlunda, man får i princip exakt samma resultat, men det krävs ingen extra nerladdning för filen och sidan kan ritas upp för besökaren lite snabbare.

Dessa veckor har jag fokuserat på bakgrundsgrafik som jag tidigare gjort i Photoshop och som innehåller gradienter av färger, och/eller linjer (vertikalt eller horisontalt) för att ge skugg/ljus-effekter på linjerna. I nästan 10 fall av bilder har jag kunnat bytt ut bilderna mot en linje CSS vardera. Med linear-gradients i CSS kan vi åstadkomma ganska häftiga effekter, enkelt. Och för att ändra i effekten behöver man bara ändra i denna kod, man slipper alltså helt att starta upp några bildhanteringsprogram eller liknande.

Gradient färg

Denna lilla fina gradient ligger bakom inloggningsformuläret till Communityn uppe i TopNav. Den designades för snart 10 år sedan, som en bakgrundsbild. Denna onödiga nerladdning har jag nu tagit bort och ersatt med denna rad kod i CSS istället:

background-image: linear-gradient(to bottom, #c5d1d9, #74899a);

Genom att bara säga att bakgrundsbilden är en så kallad linjär gradient, som går från toppen ner till botten (top bottom) samt de färger som ska användas, så klarar din dator och webbläsare att blixtsnabbt måla upp gradienten. Allt utan att ladda ner en endaste bild.

Detta är alltså gjort på flera ställen i TopNav och vårt FFU-tema till WordPress. Genom detta laddas sidorna lite snabbare, och det gillar inte bara sökmotorer som Google, utan även du och jag som använder sidorna.

Ett mer komplicerat exempel är en dubbla sidoram vi har i vår “footer” runt våra populäraste guider. Den ser ut så här idag (och fram till nu var denna grafiska “effekt” uppnådd med en bakgrundsbild):

Koden för dessa linjer (en tunn vit tillsammans med en tunn svart linje till vänster, och samma upplägg till höger – alla med en genomskinlighet på 75%) är lite mer komplex än den tidigare vi såg.

background: linear-gradient(
     to right,
     hsla(1,1%,100%,0.15) 0px,
     hsla(1,1%,100%,0.15) 1px,
     hsla(1,1%,1%,0.15) 1px,
     hsla(1,1%,1%,0.15) 2px,
     transparent 2px,
     transparent 179px,
     hsla(1,1%,100%,0.15) 179px,
     hsla(1,1%,100%,0.15) 180px,
     hsla(1,1%,1%,0.15) 180px,
     hsla(1,1%,1%,0.15) 181px
);

Här definierar jag upp att de genomskinliga färgerna bara ska vara en pixel breda, först vit, sen svart, sen genomskinligt i merparten av bilden, för att så göra två nya linjer. Inte kanske det första man hade förväntat sig uppnå med linjära gradienter, men såhär kan man göra många kul effekter på sin webbsida. Utan bilder!

Och, man ser ingen skillnad på resultatet. Här är två bilder, en från före uppdatering (med bakgrundsbilder) och en från efter (med bara CSS-kod):

* Bakgrunden som kommer fram till höger om login-formuläret har inte med denna ändring att göra.

Här är hela 3 bakgrundsbilder ersatta av CSS.

Första version av plugin laddar in TopNav

Jag skrev tidigare om att vi bygger på ett litet WordPress-plugin som ska förenkla några delar på FFUs WP-sidor (alla spelguiderna ligger där). Vi har ju flera themes och olika sajter (denna blogg är en av den), och det är mycket kod vi önskar köra på alla dessa. Fram till nu har vi gjort copy+paste på all denna kod, men det är slut nu när vi har ett smidigt plugin alla sajter får använda istället. Detta plugin är nu redo att testas ut live, i sitt första utförande.

Genom att ladda upp och aktivera detta plugin så får en sajt automagiskt FFUs “TopNav” insatt på toppen av sidan (förutsatt att man lagt in en WP-hook för FFU topnav). Och detta är den moderna versionen av TopNav som utvecklades med vårt FFU-Theme 1.5 för nåt år sen. Med massa förbättringar under ytan! Bättre HTML5-kod, CSS3 och JavaScript som hämtar JSON med data från Windows-servern (för att kunna se om du är inloggad på communityn eller ej). Rätt komplicerade saker och väldigt mycket att tänka på för att få allt detta till. Bara det att hämta JSON från Windows-servern krävde massor av jobb på grund av CORS – Cross-site origin (man får egentligen inte hämta filer från andra servrar, så lite nya regler behövdes programmeras).

Detta är nu tagit steget längre, TopNav som nu hämtas in ser likadan ut som förut- men går du ner på surfplatta eller mobil så får du nu en helt ny design och upplevelse! Vi har en drastiskt förbättrad TopNav för små skärmar. FFUs logo visas och en knapp för att glida in en meny med alla våra guider och spelsajter. Du kan enkelt scrolla runt i denna meny, eller stänga den. Sista nyheterna ser man också hela tiden. Ju mindre skärmyta man har, ju mer plockar vi bort från TopNav, utan att ta bort viktig funktionalitet. Dessutom droppade jag helt jQuery och skrev om all JavaScript (200 linjer) till vanlig äkta “vanilla” JavaScript.

Såhär ser TopNav nu ut, med finare blå bakgrundsfärg (förut tråkigt vit). Logo och stor tydlig knapp för att visa alla våra andra sajter. Skulle du ha ännu mindre skärm så kapar vi bort “niverse”-delen av logons text.

Såhär ser det ut på läsplattor. Har man större skärm får man den gamla vanliga TopNaven.

När man klickar på “+ fler guider” så animerar vi snyggt in menyn från höger sida. Självklart med CSS transitions. Scrolla ner för att se hela listan. Eller stäng den med X uppe till höger.

Längst ner i menyn ligger en mer tydlig “Fler spel”-länk (vi har inte alla våra guider i TopNav). Och underst ligger våra andra sajter. Lätt att komma sig överallt, även på mobil!

Hoppas detta gillas och förbättrar upplevelsen för våra besökare! Detta är bara ett litet smakprov, ett öppet beta-test. Fler förbättringar på TopNav, och vårt plugin, är på väg! Det är trots allt FFUs 20:e år på nätet i år!

PS. Det är bara de sidor vi har på WordPress som får denna nya TopNav. Så communityn, nyhetssajterna, med flera, får den inte.

Vi jobbar på eget WordPress-plugin

En stor styrka med WordPress är deras många plugin. Man kan enkelt installera en massa färdig funktionalitet på sin sajt istället för att slippa bygga allt själv. Detta är smart och något som hjälpt FFU mycket. Funktioner som jag tidigare lagt massor av timmar på för att bygga installeras med ett klick.

Men de har inte allt, och mycket de har är dessutom dåligt, eller inte exakt som just du vill ha det. Så därför kan man också bygga egna plugins.

FFU har redan ett eget WordPress theme (all design). I det ligger också massa funktionalitet som hör mer generellt till FFU och inte till just detta theme. Denna funktionalitet flyttar jag nu över till ett eget plugin som vi utvecklar på Bitbucket privat. Fördelen med denna separering är att vi nu kan jobba med flera olika themes (som denna sida) men ändå dela alla FFU funktioner via detta plugin.

Just nu är vårt plugin inte ens i alpha-version. Jag har efter många timmar och mycket frustration lyckats få upp grunden. Det var inte helt lätt, och php bjuder på en del rörig kod ibland. Men nuvarande version av pluginet klarar att lägga in FFUs Topnav med allt av html, CSS och Javascript som behövs. Detta öppnar så klart för att kunna introducera Topnav enkelt även på denna sida. Det enda som behövs är en ny så kallad “hook” som Topnav kan fästs sig till. Den lägger man enkelt in i sitt theme. Mer än så är det inte. Enorm skillnad från förut!

Vidare ska detta plugin få kod för att krysspublicera till uppdateringsdatabasen (rätt komplex kod som nu ligger i våra themes), kod för att lägga in Playstation-knappikoner i text (också komplex theme-kod idag), och en massa annat intressant på baksidan.

Som du säkert räknat ut kommer detta plugin fortsätta vara privat och inte delas. Det ger ingen mening utanför FFUs värld.

Kommer hålla er uppdaterade om hur det går, och eventuellt dela lite tips eller kod.

Nytt lanseringsflyt med Git

I alla år har jag jobbat med webbsidor på det mest grundläggande sättet när det kommer till att få ändringar ut “live”. Jag har öppnat ett FTP-program, oftast Filezilla, och så laddat upp filerna på servern. En efter en. Detta funkar ganska bra när man jobbar med en hemsida från bara en dator, och bara en person. Så fort nån av dessa parametrar ökar så kommer problemen. Man börjar skriva över varandras ändringar, eller sina egna.

För cirka ett halvår sedan moderniserade jag sättet jag får ut ändringar på genom att introducera Git på servern. Git är ett versionskontrollsystem, den har koll på ändringar i alla filer och sparar historik på allt. Det som är extra fint är att man oftast också har någonstans online där filerna lagras i tillägg mot lokala hårddisken. När man så slår upp en ny dator så säger man bara “Hämta hem de sista ändringarna från servern” och du vet att du alltid har rätt filer.

$ git pull origin master

Vi använder ett privat konto på Bitbucket för våra projekt. Men har också jobbat en god del med Github och öppna projekt (öppen källkod). Det passar dock bättre med ett privat konto för just FFU =)

En stor bonus med Git-kontrollerad uppdatering av filer – förutom det att det gör det superenkelt för mig att jobba på sajten från flera olika datorer – är hur jag får ut filer på FFU. Jag kan nu ändra massor av filer i massa olika mappar lokalt, testa det till perfektion, och så istället för att ladda upp en och en fil (där jag garanterat kommer glömma minst en viktig fil) bara går in på servern och säger “hämta alla ändringar från Bitbucket” och boom – alla ändrade filer hämtas ner i en smäll.

$ git pull origin master

Hur smidigt som helst! Jag har inte använt ett FTP-program sedan dess. Och utan detta nya sätt att jobba hade jag inte utfört de stora strukturella ändringarna jag fått gjort på Communityn i det sista (endast rensning/flyttning/namnbyten på filer). Där var det snack om över 50 ändringar i 40+ filer, det hade tagit år och dar med FTP att hantera, men nu bara ett kommande med Git.

En sjuttifemte bonus med Git är att jag nu har megakontroll på alla filer över hela sajten. Genom att bara fråga Git “Är några filer ändrade” så skannar den hela disken och svarar snabbt med “nej” eller en lista på ändrade filer. Jag har nu kontroll på om några skräpfiler eller “hacks” smyger sig in på servern (vi har haft stora problem med det tidigare).

$ git status

Det är allt. Det kommandot berättar exakt vad som ändrats och inte ändrats. Kan inte förstå hur jag överlevde med att jobba på det gamla sättet =S

Höststädning och ny 404-sida

Jag tänkte ta upp två FFU-problem som blivit löst denna höst. Mängder av skräpande filer (vissa hackade) och totalt värdelös felsida.

FFU har länge (sedan runt 2004) haft felsidor. Alltså sidor som fångar upp besökare som klickar på gamla länkar eller skriver fel adress. Dessa fick bara mer och mer trafik, mest på grund av bilder som tagits bort. Men de funkade långt ifrån 100%, var röriga att använda och programmera, koden var dålig. Dessutom loggade de överdrivet många fel – den sidan stod som FFUs populäraste sida! En enda röra helt enkelt.

Nu har detta blivit mycket bättre. Vi har utvecklat en helt ny felsida för status 404 (sidan finns inte). Lite fräschare design, bättre hjälptexter, och andra finesser.

Vad tycks?

Denna nya felsida är mycket smartare (och snyggare). Den slår inte vilt omkring sig, och alla fel registreras bättre. Detta har gett oss möjlighet att storstäda på servern. Sajter som vi förut flyttat från windows-servern till guide-servern har legat kvar med sina gamla filer. Inne i dem låg nämligen all redirect-kod. Som mest i över två år har filer legat och skräpat såhär. Vissa till och med hackade, vilket så klart gav oss massa bekymmer. Nu är de äntligen raderade. Istället hanteras redirects i serverns web.config som permanenta redirects (det smartaste sättet att hantera gamla länkar på). Web.config är en serverfil som analyserar varje besök – “Vilken sida är du på väg til? Jaha den ja, den har vi flyttat, jag skickar dig till ny adress istället.”. Och med tiden går fler och fler på rätt sida direkt istället för till de gamla. 404-sidan registrerar också de få som ännu är vilsna så att de manuellt kan hanteras.

Hundratals mappar och filer har raderats från servern i denna process. FFU har aldrig vägt så lite. Efter detta har vi sett statistiken för besök på 404-sidan i princip nå noll efter detta införst, 404-sidan är inte längre en av FFUs mest besökta sidor.

Sajterna på Windows-servern vi kunnat helt radera är: 1, 2, 4, 5, 11, 12, 13, Kingdom Hearts, Chrono Trigger, Crystal Chronicles, och Tactics Advance. Dessa finns nu bara på guide-servern i WordPress. Ljusår lättare att administrera.

Som bonus betyder också färre filer på disk att vi har mindre att hålla kontroll på, och generella fel är lättare att identifiera.

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

TopNav, uppdatering 10 september

Ytterligare en runda med TopNav. Just nu småskruvar jag mest på detaljer sedan sist.

Gick in i Community-menyerna och jobbade mer med dem. Gjorde knapparna för att logga in skarpare blå, så att de syns ännu bättre (och piggar upp sajten med mer färger). Och så gjorde jag så att all text blir grå och länkar orange med ett ljusare streck under. Jag testar nu två varianter av fält att skriva i, ett vitt med inre skugga och ett som bara är ljusgrått utan effekter. Tror jag gillar det sistnämnda bäst. Också nytt är den lite mörkare bakgrundsfärgen på slutet som ramar in sekundär info, här länk till att bli medlem om man inte är det.

comlist

Det är också ändrat så att skuggan blir mer enhetlig. Istället för en tonande skugga så är där nu en fem pixlar tjock skugga. En genomskinlig ram helt enkelt. Det används på andra elementer i TopNav i samma “styrka” så det matchar in lite bättre. Även om det just här ser lite grötigt ut, men ska jobba på det.

Testar också en variant av logon som skriver ut hela sajtens namn, och Final Fantasy för att betona det. Jag gillar tanken bakom detta, att fokusera hårdare på Final Fantasy. Men det ser lite rörigt ut med de romerska siffrorna nedanför som nästan smälter ihop med logon. Detta upplevde jag inte på den förra som var mindre och använde färger på ett annat sätt.

Även newstickern är lite ändrad. Den har fått en svag toning jag testar, får se om den får överleva. Och så har det lagts till en “Se fler xxx” i botten så att man kan komma vidare och få en bättre översikt om man önskar av uppdateringar, nyheter, eller vad det nu skrivs ut här uppe. Tanken är att klickar man på krysset ovanför så faller rutan ner och en ny glider in ovanifrån med näst sista händelsen. Detta fortsätter upp till 3-5 olika saker och efter det försvinner rutan helt, men något bör läggas under … kanske Fat Chocobo?

Så sist en skiss med nya “Mer på FFU”-menyn utvecklad. Den påminner en del om “Fler spelguider”-menyn, medvetet. Men utan pilen och en smalare horisontell linje. Denna ska lägga sig direkt över länken “Mer på FFU” när man klickar/svävar och bara kort och gott lista alla hörn och kanter på FFU.

sitelistUtöver det, inga fler ändringar än en liten skugga ned från TopNav på header-bilder på alla sajter. Och till vänster testar jag eventuellt ny bakgrund bakom headers (även om det inte tillhör TopNav-projektet) med grå bakgrund. Tänker mig att kanske använda samma stil i kommande omdesign av footern på FFU (som ska bli lite enklare än den är nu).

TopNav4 – tidig september-version

Såhär såg “TopNav4” ut för lite över en vecka sen:
topnav-skiss-(2015-08-25)Nu har jag gått en runda till på den. En av de största skillnaderna är kanske att den nu fått bli ännu lite högre. Det överst partiet (det med blå bakgrund) har växt från 90 pixlars höjd till 120 pixlar. Det kändes bara för trångt där uppe, och jag behövde mer utrymme oavsett.

Detta är så den ser ut just nu:

topnav-skiss-(2015-09-04)Fokus är att få menyn med alla FF-spel så ren som möjligt. Nu är det bara spel från originalserien där. Sedan en liten skiljelinje och så spinoffs, just nu bara FFX-2. Efter det en “Fler spelguider”-meny som listar alla andra guider vi har (det är väldigt många).

Sociala länkarmenyn fick flytta upp igen, men nu lite ändrad. Den är nu mer ren, ingen text, bara ikoner, och mer luft. Samtidigt la jag in kära Cactuar där. Det är dels än fin färgklick, en känd FF-symbol, och något som drar ögonen tills sig. Den får nya besökare att lättare upptäcka Communityn, de sociala länkarna, och “Fler spelguider”-menyn.

Med allt detta extra utrymme kunde jag ge mer luft runt logon, sajtlänkarna, nyhetsboxen, och under communityn (men där klämde jag nu in social-menyn). Sajtlänkarna har också ändrats lite. Det står nu bara “Nyheter”, kort och gott. Och under “Mer på FFU” med en pil. Detta är inte designat än men jag tänker mig en liten drop down där jag kan lista länkar till FAQ, extra länk till Communityns startsida, Sök, Blogg, och liknande. Det är en del som kan behöva få plats där uppe men som bara grötar till det om det ska skrivas ut, så det får lämpas in i en utfällbar meny helt enkelt.

Bytte också “sajtbakgrund” under TopNav för att testa med en ljus sajt istället och se hur det passar. Tycker det funkar riktigt bra. Här är ett exempel med “Fler spelguider”-menyn utfälld (den har jag också jobbat en del på):

topnav-skiss-(2015-09-04)2