CategoryFFUniverse

Nya funktioner till våra guider

Alla våra guider har idag uppdateras till version 1.6 av vårt egna WordPress theme. Det är inte en helt ny design, men mycket är förbättrat eller nytt. I denna version har vi fått med nästan hundra små (och några stora) förbättringar – synliga och osynliga. Här är de du säkert kommer ha mest glädje av:

Bättre på mobil

Vi har rent generellt jobbat ganska hårt på att FFU ska se snyggare ut på mobil och mindre skärmar. Detta var inte alltid helt optimalt förut, till exempel gick hela guiden in i mobil-läge på relativt stora skärmar, vilket är lite onödigt. Vi har nu fixat och jobbat på detta mer genomtänkt. Vår helt omdesignade mobilmeny är en stor del av detta (mer om den senare)! Dessutom, går du in på våra bildgallerier så kommer du kunna njuta av fullt stöd för att gå mellan bilderna genom att swipa med fingret.

Bättre guide-navigator

Vi har små länkar för att komma till nästa (eller förra) del i guiden. Detta är väldigt praktiskt och uppskattat, men funktionen har saknat det där lilla extra. Nu går vi hårt ut och introducerar en uppdaterad sådan navigator. Vi lyfter fram vad de olika delarna heter, så att du bättre vet vart du är på väg. För att lyfta fram det vanligaste man vill göra när man kommit till botten av en sida så har vi lagt in en stor och tydlig knapp för nästa sida i guiden. En liten detalj som underlättar mycket för den som spelar samtidigt som denne läser våra guider. Självklart är mobilstödet för denna navigator väldigt bra.

Ny mall: innehållsförteckning

Våra guiders guider (wow, kan man säga så? – men jag menar alltså själva FF7-guiden som tar dig genom spelets story) har haft lite bristande översikt på alla de delar/kapitel de består av. Vilken del ska man börja på? Vart hittar jag information om boss X? Vart kan jag läsa om grotta Y? Det ordnar vi genom att helt omarbeta hur vi gör översikten på en guide – möt vår nya innehållsförteckning! Med snygga bilder och tydliga rutor kan man snabbt få sig en översikt av allt innehåll. Bilderna matchar så klart innehållet. Under varje kapitel (vi ska nu pröva kalla detta för “kapitel” mer konsekvent) visas korta “taggar” som representerar allt det stora just detta kapitel tar upp, men utan att spoila för mycket. Du har nu den perfekta översikten direkt på guidens startsida! Just nu är detta bara introducerat på nya FF7-guiden, men kommer till fler guider framöver.

Syskonnavigering

En egen liten navigator för att lätt navigera till nästa (eller förra) sidan + tillbaka till översikten. Aktiverad på alla bossar och karaktärer. Fungerar i stort sett exakt som guide-navigatorn beskriven tidigare. Självklart med utmärkt mobilstöd. Vi hoppas detta ska göra det lättare för dig att komma igenom flera bossar på en gång, samt få klickat dig runt ännu mer på FFU!

Omdesignad och bättre mobilmeny

Detta är möjligen en av mina personliga favoriter, en helt ny meny för mobil! Inte bara är den riktigt snygg och i sann gammal Final Fantasy-anda, den är också extra funktionell genom att den sätter sig fast på toppen av din skärm när du skrollar ner på sidan. Använd den närsomhelst för att ta fram alla sidor på en guide, så att du lätt hittar dig till nästa sak du söker. Som bonus är den helt gjord i CSS och extremt mycket snabbare än den gamla.

Stora boss-utklipp till guiderna

Guiderna kan enkelt hämta in data om en boss bara genom att redaktören länkar till bossen. Vi hade detta förut men introducerar nu en större och bättre inforuta för bossar – den visar HP, svagheter, styrkor, samt kortfattade tips för att besegra bossen (självklart med en länk vidare till full beskrivning på boss-sidorna). Används än så länge bara i nya FF7-guiden. Dessutom prövar vi något ganska nytt – gul och orange färg i vår design för att bryta lite mot det blå.

Mängder av småförbättringar

Guiderna är i behov av mer rikt innehåll, så vi lägger in snyggare citat och tydligare markering av vad du ska välja i menyer eller i dialoger i spelen. Vi har också lagt in små toningar, animeringar, och grafiska uppdateringar här och där som du kanske (eller kanske inte) lägger märke till. Även jobbet för oss att skapa helt nya guider, samt underhålla existerande guider, har förbättrats enormt (för att inte nämna alla förbättringar vi gjort på kodbasen). Vill du veta mer, eller få tekniska detaljer så skrev vi om det för någon vecka sedan.

Tack för nu. Vi får se vad som väntar i nästa version, om det blir 1.7 eller om vi hoppar direkt till 2.0. Men jag har flera önskemål, bland annat bättre översikt samt sök till bossarnas sidor.

FFU2 Theme 1.6

Ett märkligt namn – “FFU2 version 1.6” – men FFU har haft två större eror – den gamla där alla sidor såg ut som de ville och var handkodade och svåra att underhålla, bestående av mest HTML och lite ASP classic (utan databas eller admin) på en FTP-server. Och så den nya där de alla körs på WordPress, har mer modern kod (HTML5, CSS3), ny server och subdomän (“guide.”), och samma snygga design överallt. Den eran kallar jag “FFU2”. Alla våra guider flyttas sakta men säkert över till detta system.

Den design vi har nu på FFU2 har redan över 7 år på nacken, men den lever och utvecklas lite hela tiden så det känns inte gammalt (över 500 ändringar har gjorts över åren). Just nu är vi på version 1.5.1, det stora nya som kom med 1.5 var att väldigt mycket kod skrevs smartare och effektivare, så våra sidor laddas fortare, något som bidragit till toppbetyg hos många tjänster online som mäter hastighet.

Nu jobbar jag på 1.6. Där tar vi tag i ett gäng gamla irritationer, utdaterad kod, repetativ kod, osmart kod, och förenklar mycket för oss själva. Samtidigt utförs flera önskningar vi haft en längre tid, speciellt ett större lyft på guiderna och bossarna.

Några highlights på det vi jobbar med:

Design och funktioner

  • Småjusteringar på designen, bland annat “transitions” och “gradients”:
  • Ny större boss-snippet (visar det viktigaste om varje boss) till guiderna, i härlig orange färg:
  • Förbättrad guidenavigator (med helt ny och tydlig “nästa”-knapp):

  • Ny “syskon-navigering” (baserad på guide-navigatorn), lagt in på alla karaktärer och bossar:
  • Ny startsida/översikt till våra guider, en “ruta” per del/kapitel, med information om innehållet:
  • “Sticky” meny för varje guide (sajt) som följer med när du scrollar på mindre skärmar:
  • Fixat “med i striden”-funktionen på bossar (hade inte funkat på länge):

Övrigt

  • Generellt bättre på mindre skärmar (allt blir inte klumpigt stort redan vid 960 pixlars bredd).
  • Uppdaterat Lightcase (för bildgallerier) från version 1.6 till 2.5 (nu med swipe-stöd på mobil).
  • Helt omskriven kod för menyn (löser flera problem vi haft).
  • Omarbetad och förbättrad JavaScript.
  • Förbättrad CSS och struktur.
  • Massa annat smått.

Du kan följa utvecklingen direkt i källkoden på Bitbucket om du vill, vi utvecklar i en egen branch (gren). Namnet “MENU2” är historiskt, jag skulle bara skriva om logiken bakom menyn för att fixa tre gamla långlivade buggar som irriterat mig … men skulle bara fixa lite till i samma släng.

Version 1.6 är precis runt hörnet och vi räknar med att bli färdiga med de sista 5-6 små förbättringarna i loppet av en vecka. När allt är på plats så släpps det över hela FFU omedelbart tack vare vårt smidiga uppsätt med git som jag skrivit om tidigare.

En ny sak som är värd att nämna, även om den inte syns, är att jag för första gången på länge har en ordentlig lokal testmiljö, något som snabbar upp utveckling och testing oerhört. Detta tack vare Local By Flywheel, ett enkelt och användarvänligt program för alla som jobbar med WordPress och behöver sätta upp lokala miljöer.

Ny framsida på FFU

För snart ett år sedan fick FFU en helt ny och uppdaterad guideväljare. Alltså sidan där du får en fin översikt över alla spel vi skriver om så att du lätt kan ta dig vidare.

Vår guideväljare

Flytten av denna sida var en del i ett väldigt omfattande projekt att flytta ut allt vi har på vår “root”-sajt (allt som ligger på www men inte är communityn eller en guide, oftast slutar URLen på “.aspx”). Allt där ska flyttas, och guideväljaren var en viktig del. Nu har vi över tid också flyttat ut många andra bitar: alla infosidor och vanliga frågor blev till “om oss”-sajten, och alla nyheter ligger nu på en egen ny sajt.

Vår gamla startsida.

Sist är då själva startsidan. Vi började med att ta bort alla nyheter och endast behålla länkar och vår Twitter feed. Men planen var att helt ändra denna sida. Och det har vi nu fått gjort.

Vår nya startsida!

Baserat på designen till guideväljaren har vi nu en helt ny startsida till FFU. Den ger dig en extremt enkel och kort välkomst, och ger dig sen fem olika vägar att gå: guider, nyheter, community, blogg, eller om oss. Allt med stora tydliga knappar, starka färger, stor text, och snygga bilder. Självklart funkar sidan perfekt på alla skärmar, även mobil.

Vi har också medvetet tagit bort navigatorn vi har överst på alla sidor – TopNav – på nya startsidan, detta för att minimera antal val en ny besökare får och antal länkar de måste ta ställning till.

Med denna flytt så återstår bara några få små delar av “root”-sajten att få flyttat. Då har vi inte längre någon ASP.NET kvar på FFU, ett stort steg i vår gigantiska migrering. Redan är 1000 sidor av guider migrerade, 1500 nyheter, och en mängd annat. Målet är på sikt att vi endast har kvar communityn på vår Windows-server och ASP classic.

Ta en titt!

Gigant-guiden för FF8 migrerad

FF8-sajten, vår största sajt att flytta sedan FF7 för nu 5 år sen. Den kom ut i feburari i år efter många månaders jobb av och på (glömde skriva denna post då …). Tror det var en period på tre-fyra månader vi jobbade på den. Originalet innehöll ett hundratal sidor med sin stora guide och många undersidor, detta förändrades till migreringen där massa förbättringar och förenklingar gjordes. Vi har nu exakt 160 sidor guide på nya FF8-sajten!

Header-bilden till sidorna fick våra fans på Facebook välja.

Flera sidor har slagits ihop, till exempel har alla vapensidor slagits ihop till en sida per karaktärs alla vapen, medan alla sidor för guiden har behållits. Allt har optimaliserats för bättre flyt för dig som läser guiden och prövar hitta fram. Vi blev också av med alla irriterande popups, och tog bort dåliga sidor, så som de med Gameshark-koder (som inte funkade).

Till detta jobb använde vi oss som vanligt av M2WP (Migrate 2 WordPress) för att läsa av alla våra gamla sidor, tvätta kod och text, strukturera om saker, och så skjuta in det i WordPress. M2WP låter oss göra stora delar av jobben med några knapptryck. Under processen noterades flera önskningar för att vi framöver ska kunna flytta våra sista stora sajter – FF10 och FF9-sajterna – utan så mycket manuellt arbete.

Borta är all gammal dålig kod, som var dålig för sökmotorer och för mobiler. Varje liten detalj har vi sett på. Gamla krångliga tabeller har förenklats eller tagits bort helt, sidor har strukturerats om med tydliga rubriker och undersidor.

För att färdigställa sidorna denna gång (innan stöd läggs in i M2WP) så gjordes stora jobb i kodredigeraren Atom på att köra regex-koder för att snabbt kunna finna mönster i den gamla koden och direkt möblera om den totalt.

Den migrerade sajten står nu för över 50% av trafiken på nya guide-servern!

Alla gamla sidor för FF8-sajten är nu borta och trafik leds till sina nya sidor automatiskt av vår dirigeringskod. Denna kod är nu dessutom extremt mycket smartare så att jag bara kan radera de gamla sidorna och så förstår den nya koden vad du var ute efter för sida och skickar dig rätt direkt. Nu för vi också statistik på hur många som “går fel”, alltså fortfarande går in på de gamla URLerna.

Nästa steg blir flera nya viktiga funktioner i M2WP så som att göra titel smartare på nya sidor (blev färdigställt för någon vecka sedan), snabbt kunna ändra block med kod via regex, samt en god del andra mindre saker. Då kan de 5 återstående sajterna flyttas lättare, men speciellt FF9 och FF10-sajterna behöver dessa förbättringar. Flytten av dem ska inte behöva ta flera månader och massa manuellt jobb.

Säker anslutning och TopNav5 beta

Säkerhet med https

Vi har nu aktiverat säker anslutning på alla våra guider, och vår nyhetssajt. Guider på den gamla servern omfattas ej av detta.

Du känner igen säker anslutning genom att adressen till hemsidan börjar på “https” och inte bara “http”. Detta säkerställer data du får av – och skickar till – oss.

TopNav5 öppen beta

I tillägg har vi också aktiverat TopNav5 på dessa sidor. “TopNav” är den översta raden med navigering som ligger på alla våra sidor, där du kan fort ta dig mellan våra spelguider och andra sajer. Den har varit under utveckling länge men tog en paus för migreringen av FF8-sajten (som visade sig vara ett oerhört omfattande jobb). Vi börjar nu med en blygsam beta-test där vi testar hur den funkar medan vi jobbar på de sista detaljerna.

Vi har några kända småproblem med nya TopNav5, och de ska vi fokusera på framöver. Vi har också några saker som ännu inte är på plats som vi kommer rulla ut med tiden, så som visning av aktuella uppdateringar och nyheter.

Självklart funkar nya TopNav5 ypperligt på din padda, mobil, laptop, eller stationära dator. Designen är så klart ett väldigt lyft och en modernisering av denna centrala navigation för hela FFU.

På sikt ska denna också rullas ut på andra sidor, så som communityn. Men det återstår många tekniska utmaningar innan det blir löst.

FFU-navigator version 5

Överst på alla våra sidor och guider ligger ett över 10 år gammalt design-element. Vår sajtnavigator. Via den kan man se om man är inloggad på communityn, man kan logga in, man kan ta sig till våra olika delar av FFU (om oss, bloggen, med mera), och man kan framförallt se en översikt på alla våra spelguider och snabbt öppna en av dem. Detta är den tredje versionen av denna navigator.

FFU-navigatorn version 3 (nuvarande per 2017)

Version 4

För ett par år sedan började jag smått designa om den (äntligen) – version 4. Dessvärre var jag tvungen att pausa det jobbet lite. Såhär såg den ut då jag la projektet på hyllan.

FFU-navigatorn version 4 (aldrig lanserad)

Och bra det pausades. För med tiden föddes en helt ny design, löst baserad på det jag kom fram till först, men extremt mycket renare och enklare – väsentligt mycket bättre. Som ni ser är version 4 ganska rörig, full av små små detaljer.

Version 5

FFU-navigatorn version 5 – utkast

Såhär ser den ut just nu, i tidigt designstadium. Version 5. Berikad med fullt stöd för mobila enheter, för listning av alla våra guider (även de som inte får plats i menyn, de visas omedelbart då man lägger muspekaren över “Fler spelguider”), och små fina animationer. Ny är också vår logo med Mog, den använder vi redan på Facebook, Twitter, och på många andra platser.

Ute är formuläret för att direkt logga in på communityn, och borta är också sista nyheter (eftersom vi inte postar så brutalt ofta). Tanken är att introducera någon form för hint likt Trello gör det för att påkalla uppmärksamheten till något nytt som hänt, men det kommer efter lansering.

Tidigare versioner har jag alltid designat i Photoshop, men denna gång “designade” jag dem från grunden direkt med CSS och HTML i Firefox Developer Edition. Detta har gjort att jag omedelbart får något testbart, som lätt kan ändras på, och ingen tid läggs i Photoshop. “Code first”!

Förhoppningsvis blir vår nya FFU-navigator färdig och lanseras i starten av 2018. Men först ska den kännas perfekt på liten som stor skärm (över 50% av våra besökare använder mobil).

FFU fyller 20 år!

Final Fantasy Universe har funnits på nätet längre än de flesta andra sajter. Den 17 november 1997 släpptes Final Fantasy VII i Sverige, och det spelet fick mig omedelbart att göra en liten hemsida om det. Den växte. Minst sagt. Idag har vi tusentals av sidor med guider, nyheter, och forumtrådar. 

För att fira detta stora jubileum så har hela detta år vigts åt att göra omfattande ändringar på sajterna. Detta är vad vi har åstadkommit de sista månaderna. Och när vi ändå är igång så tar vi en blick in i framtiden.

Ny Nyhetssajt

Ny design och ny adress. Alla gamla nyheter (nästan 1500 stycken) har också migrerats. Den gamla sajten har i princip helt tagits ner. Kvar är bara några få sidor som också ska försvinna på sikt. Dessutom kör vi inbygd kommentering vi Disqus istället för att lägga tid på nåt eget system. 

Besök vår nya nyhetssajt!

Ny “om oss”-sajt

Vi hade ett kaotiskt system förut där information relaterat till sajten i stort låg spritt överallt och man behövde klicka sig runt massor för att finna fram. Nu samlas allt under en liten egen del på FFU med en sparsmakad design.

Besök vår Om oss-sajt!

Omstrukturerad support

FFU var unika på världsbasis med att erbjuda support på många FF-spel via epost. Detta system höll dock inte i längden, det användes inte, och var tidkrävande i underhåll. Dessutom placerades viktig hjälp till spelen utanför själva guiden till spelet. Nu lägger vi istället in vanliga frågor direkt i guiderna, enkelt sökbara. Support på spelen kan man fortfarande få, men via vår Facebook. Det lilla som är kvar av dessa sidor kommer försvinna. 

Utvecklarbloggen

Vi hade denna blogg länge som startsida till guiderna. Det var förvirrande och dåligt. Nu har vi en egen plats bara för bloggen och annat tekniskt vi önskar dela. I framtiden är det tänkt att delar av FFU läggs ut som öpen källkod här. 

Ny spelväljare

Final Fantasy logoer på radFörr hade vi en väldigt välbesökt sida som listade alla guider vi har. Den var ful och sliten och låg på en ologisk adress. Denna sida är nu helt omgjord och ligger på rooten till guiderna. Där kan man få en bra överblick över alla spel vi har i ett snyggt och dessutom mobilanpassat format.

Besök vår nya guideväljare!

Smartare TopNav

I toppen på alla sidor ligger en massa länkar till våra sidor och guider. Den har behövts byggas smartare för att funka på alla våra sajter utan manuellt jobb. Nu klarar den hämta data från alla våra servrar och visa på ett identiskt sätt. Dessutom fick vi äntligen på plats en riktigt bra mobilvariant av denna meny. 

Diverse rensningar

Databaser, filer och kod har kunnat städats upp massor tack vare de stora grepp vi gjort. 

Framtiden

Vi har fortfarande några guider i det gamla formatet. De ska migreras över. Först ut blir FF8-sajten, som nästan är färdig. Efter det ska FF9, FF10 och FFX-2 guiderna följa samma resa.

Gamla startsidan ska helt göras om. Ingen info eller nyheter ska finnas kvar där. Bara en vägvisare till våra olika delar. Också FAQ-sajten ska bort, allt ska in på guiderna.

Ny TopNav är under utveckling redan nu. Ny mer modern design står i fokus. 

Ny design till guiderna står också på tapeten, och är något vi hoppas få lanserat under 2018. Där ska guiderna lyftas till nya höjder. 

Håll oss under övervakning, här händer massor! 

Ny nyhetssajt – öppen beta

Det tog lite tid men nu finns en öppen beta av vår nya nyhetssajt. Du är välkommen att testa den!

Den går under det interna kodnamnet “nyheter.” och är tänkt att helt ersätta den gamla nyhetssajten vi har haft i väldigt många år nu (typ 10 år). Detta är en del av våra 20-årsjubileumsplaner. Alla gamla nyheter kommer att migreras (detta migreringsscript blev klart idag) men alla gamla kommentarer raderas. Gamla sidor med information flyttas till “nyheter.” eller “om.”, många har redan flyttats.

Nya nyhetssajten använder WordPress som backend/redigeringsverktyg, Disqus som kommentarsystem, och ett öppet design, Sirius (ej utvecklat av oss). Nyheter får stora fina toppbilder, texten är lättläst, och det är ett lätt system att jobba i. Dessutom är det lägre tröskel för att kommentera på saker. Och självklart är det lätt att dela allt på sociala medier.

Ta gärna en titt. Vi började producera nytt material i förra veckan och har mycket nytt på gång. Och är du skrivsugen och vill hjälpa oss på en av de största och äldsta FF-sajterna på nätet så är det bara att säga till, vi söker efter bra folk just nu!

I nästa vecka kommer vi migrera över 1472 gamla nyheter till systemet. Det är allt vi skrivit under vår 20 år långa historia.

Provkör betan av vår nya nyhetssajt!

Vårt sista nyhetsbrev på communityn

I dagarna har jag spammat 2000 gamla avstängda användare på FFUs community, vissa som inte varit aktiva på många många år. Anledningen är att vi firar 20 år i år och jag önskar aktivera de få som har lust att bli aktiva igen. Kanske inte primärt via communityn, men gärna via andra kanaler så som Twitter och Facebook, och våra guider.

Nej då, communityn kommer inte läggas ner, men mycket oanvänd funktionalitet kommer att pensioneras. Vissa saker har legat och skräpat i många år. Likaså användare. Allt detta ska raderas. Men några har faktiskt bara glömt oss medan livet fortsatt susa vidare. Dessa önskar vi ge en sista chans att ta upp kontakten med oss igen.

Detta är brevet jag skickade ut (och redan nu har vi fått nya följare på Twitter och fans på Facebook):

Vårt sista nyhetsbrev? | Communityn på FFUniverse.nu

Hej,

Detta är mycket troligen det enda nyhetsbrev jag skickar dig. För väldigt många år sedan – kanske över 15 år sedan till och med – registrerade du ett medlemskap på svenska Final Fantasy-gemenskapen FFUniverse.nu

Minns du inte oss? Det är ok. Jag minns inte vad jag gjorde igår, än mindre för 15 år sen. Vi har inte dött eller gått under, vi lever och skriver guider fortfarande. Bland annat för FF15, FF7-remake, FF12 remastered, och en massa annat!

I år – i november – fyller vi 20 år. Det är inte överdrivet många sajter på internet som hållit sig flytande så länge. Detta önskar vi så klart att fira stort med våra vänner.

Är du intresserad av att ta del av detta och fortfarande vara vän med oss så önskar vi att du gör något av följande (eller alla tre) för att fortsätta hålla kontakten (vi kommer inte skicka fler såna här brev):

* Följ oss på Twitter – https://twitter.com/FFUniverse_nu
* Gilla vår sida på Facebook – https://www.facebook.com/ffuniverse.nu/
* Vår community – http://www.ffuniverse.nu/community/

Och logga gärna in på communityn igen (begär glömt lösenord om du inte minns). Då ser vi att du är aktiv och vi kan ta med din användare till framtida system. Vi gör nämligen stora arbeten på sajten för att uppdatera gammal teknologi, och dessvärre ser vi att det mesta måste kastas ut och bytas ut mot något nytt. Alla inaktiva användare kommer då försvinna.

Så, om du bara blev irriterad för detta mail så behöver du inte göra nånting, det kommer inte fler. Blev du glad och vi väckte nåt gammalt gott minne hos dig – bli vän med oss igen, släpp in oss i värmen!

Med vänliga hälsningar,
Bobby Westberg – Webmaster

Ny spelväljare/guideväljare lanserad

Vi har pratat om det tidigare och haft planerna på det länge, men så plötsligt fick jag lite tid över och kunde bygga och färdigställa vår nya guideväljare (en slags karta med alla FF-spelens logos, som man kunde klicka på för att komma till det spelets guide/sajt).

I många år låg denna guideväljare som en del på nyhetssajten, på /games.aspx. Inte så logiskt eller enkelt att komma ihåg. Mer logiskt var ju så klart att ha den som en helt egen sida, och i “root” på vår nya fina femåriga guide-server, på guide.ffuniverse.nu/. Men där hade vi lagt upp vår blogg. Efter många om och men så fick vi den flyttad, och då öppnade sig möjligheterna för att skapa vår nya guideväljare.

Ny design

Den har en enkel design. En lätt svag gråblå färg i bakgrunden som tonas ut i nästan vitt med en gradient. Självklart helt gjort med CSS.

background-color: #f1f3f5; /* Måla hela sajten i denna färg */
background-image: linear-gradient(
    to bottom, /* Skapa en gradient från toppen till botten */
    #c9ced7 0px, /* Första färgen är denna, rita den fram till nästa färg (totalt 1 pixel, för att ge en liten "kant"-effekt) */
    #adb5c2 1px, /* Nästa färg kommer redan efter 1 pixel, detta är starten på gradient */
    #f1f3f5 131px /* Gör en gradient mellan förra färgen och denna på en längd av 130 pixlar */
);

Detta är kopierat från guidernas egna WordPress-theme så att man ska känna igen sig. Alla logos känner ni kanske också igen stilen på, det är också samma stil som på guiderna. En tunn vit ram runt bilden, med skugga bakom. Flera logos vi inte hade från förut var tvungna att skapas, men det var en relativt enkel jobb eftersom vi har Photoshop-mallar för det mesta av våra nya sajter.

Grid

Alla logos läggs upp i rader, tre per rad på en dator med stor skärm, och en per rad på mobil. Detta mobilstöd är också helt nytt, en liten bonus. För responsiv design använder vi ett tunnt och enkelt CSS-ramverk som heter Simple Grid, det påminner om Bootstrap men är enbart för att skapa “rutnät” på mobil och PC. Stora fördelen är att det är en fil som bara är 1 kB stor, istället för nära 100 kB på Bootstrap.

<div class="row">
  <div class="col-6 col-12-sm">
    Full rad på mobil, halv rad på PC.
  </div>
</div>

Flexbox

Eftersom alla logos ser väldigt olika ut – jämför till exempel FF2 och FF12! – så måste vi se till att alla “rutor” de placeras i blir lika höga. Detta är något som tidigare var väldigt svårt med CSS, men fick till och med ibland gå tillbaka till att använda tabeller för det, något som är semantiskt inkorrekt. Men för några år sedan kom CSS Flexbox, och nu kan man använda det fullt ut.

Man har först en box som omslutar alla småboxar, denna huvudbox ges flex-stöd.

display: flex;

Och så när jag lägger detta på en <ol> lista så förstår webbläsaren att denna är i flex-läge och ska anpassa alla innehållande boxar efter varandra. Men vad händer när huvudboxen blir för stor för att alla boxar i den ska få plats? Då säger man bara att de ska puttas ner på nästa rad med denna:

flex-wrap: wrap;

Sen ska man lägga display: flex; också på varje innehållsbox. Då kommer alla boxar (alla <li> element) bli lika breda och höga oavsett storlek på skärmen eller innehållet. Superlätt! Inte en enda linje JavaScript behövs (som förut).

En sista fin detalj är att om man vill centrera alla logos horisontalt, men vertikalt placera dem på botten, så är det också sjukt lätt nu jämfört med förut. Dessa två linjer ordar det hela.

li {
  align-items: flex-end; /* Vertikalt */
  justify-content: center; /* Horisontalt */
}

Nu är allt placerat som det ska.

Grupper

För att förenkla för besökaren så delar vi in – precis som förut – alla spelen i tre olika grupper. Den numrerade originalserien av Final Fantasy (FF7, FF8, men inte FFX-2 t.ex.), alla andra FF-spel, och så resten av Square Enix-spelen (som ej hör till FF-serien, som till exempel Chrono Trigger).

Footer

Längst ner på sidan ligger några snabblänkar till FFUs olika större sajter, samt avslutande länkar med nyttig info, så som cookies. Alla dessa länkar använder sig nu av de nya “dev.” och “om.”-servrarna.

Historik

Som referens har du här en bild på den gamla designen (skulle gissa på 10 år gammal, och inte stöd för mobil). Den kan inte längre nås eftersom jag redan ändrat på alla länkar i TopNav, i footers, och andra ställen på FFU.