Nedtælling til Milestone 1

Vi nærmer os udgivelsen af Milestone 1, så over den næste tid vil jeg vise jer hvad vi har rodet med.

I dette første blogindlæg har vi en del vi skal igennem, men fremover vil jeg forsøge at skrive kortere og hyppigere blogindlæg, hvor jeg fokuserer på mindre dele i hver.

Det er ikke kun et nyt udseende

Som bekendt, så handler Milestone 1 om for alvor at komme i gang med det responsive design.

Men, det responsive design er kun een del af det overordnede projekt, så det er ikke kun udseendet, det drejer sig om. Det er en omfattende renovering af hele spillet.

For at forklare hvad det betyder, bliver jeg nødt til at vise jer i grove træk, hvilke komponenter, der er i spil, hver gang du henter en side på sitet.

Hvis det kun var udseendet, vi opdaterede, ville arbejdet kun berøre Styles og tildels Views. Det, vi har gang i, omfatter i stedet følgende:

• Model: ændres sparsomt
• Jobs: ændres sparsomt
• Controllers: ændres i nogen grad
• Views: skrottes 100% og skiftes ud med splinternyt
• Styles: skrottes 100% og skiftes ud med splinternyt
• Scripts: skrottes 100% og skiftes ud med splinternyt

Det er altså ikke blot nyt tapet, vi klistrer ovenpå det gamle.

Det svarer til at vi river huset ned, så der kun er fundament og bærende vægge tilbage. Døre, vinduer, tag, gulv, rør, ledninger, og inventar skrottes og skiftes ud med splinternyt.

...nogle af billederne på væggene (ikoner, grafik) får dog lov at flytte ind igen, i hvert fald indtil videre.

Hvis du synes det lyder som en kæmpe omgang, så har du ret.

Er det besværet værd?

Jeg ved udmærket godt at der er mange, der er utålmodige, og vil sætte spørgsmålstegn på om det er værd at bruge så meget tid på en komplet renovering, og synes at vi ikke laver andet end at rode med teknik.

Men jeg er 100% overbevist om at det både er nødvendigt og det hele værd!

For det første, så oplever vi gang på gang, hvor meget den gamle kode er i vejen, hver gang vi gerne vil lave noget nyt og spændende.

Jeg har f.eks flere gange før talt om de fantastiske muligheder det ville give os, hver gang vi har lagt arbejde i at opgradere til nyere versioner af vores framework, hvorefter det har vist sig at vi ikke har kunnet udnytte dem 100%, fordi sitet har så meget gammel kode, som spænder ben.

For det andet, så er Virtual Manager over 20 år gammelt, og jeg har tænkt mig at det skal køre 20 år endnu (mindst!). I det perspektiv er den tid, vi bruger på renovering nu, ikke noget særligt.

Når et spil er blevet udviklet på i over 20 år, med utallige ændringer, i forskellige programmeringssprog og frameworks, og mange forskellige måder at gøre tingene på, så er det helt naturligt at der er samlet sig en masse støv i krogene, og at f.eks design er lidt af et kludetæppe.

Med denne totalrenovering får vi gjort op med det, en gang for alle, men det kræver at rigtigt meget bliver skrottet og bygget op igen.

Og, den gode nyhed er at det meste af det "kedelige" tekniske arbejde, som ikke er synligt for Jer, nu burde være overstået. I den seneste tid har vi udelukkende arbejdet med det responsive design.

Hvad har vi lavet siden sidst?

• Vi har opgraderet ALLE de frameworks, libraries og server-software, vi bruger, til absolut nyeste versioner.
• Vi har bygget et nyt teknisk skelet op fra bunden, som er 100% fri for gammel kode i de komponenter, jeg nævnte tidligere.
• Vi har sammensat et design-system, som er en drøm at arbejde med.
• Vi har en server klar til test, som er sat op og konfigureret med alt det ovenstående.
• Vi har tacklet flere af de fundamentale problemstillinger, i f.eks det overordnede layout, navigation, typografi, farver osv., som skulle være på plads inden vi overhovedet kunne begynde at re-designe en eneste side.
• Vi har re-designet et antal sider allerede.

Layout, farver, fonts og ikoner

Men lad os så komme i gang med at kigge på elementerne i det nye design.

Det er vigtigt at pointere at fokus i første omgang er på funktionaliteten. Det skal først være brugbart, og tilpasningen til skærmstørrelser skal fungere før vi begynder at bruge for meget tid på at pille i de helt små detaljer i udseendet.

Det første eksempel viser layoutet på store skærme:

På store skærme har vi lagt os tæt på den samme overordnede struktur, som i det gamle, selvom alting er omskrevet fra bunden.

Nogle af de vigtigste forskelle er:

• En ny font-stack, der udelukkende bruger fonts, som findes på folks devices, og om muligt bruger operativsystemets egen default-font. Det betyder at den font, du ser i mine screenshots, som er taget på en maskine med Ubuntu, ikke vil være den samme som du vil se, f.eks på en PC med Windows eller en Mac.
• Et nyt udseende på sidens baggrund og top-bar uden texture.
• De fleste størrelser defineret i rem i stedet for pixels. 1rem er lig med 1x din browsers standard font-størrelse, som for det meste er 16 pixels. Når vi bruger rem, så betyder det at alt på sitet automatisk tilpasser sig, hvis du f.eks har sat en større eller mindre standard font-størrelse.
• Et væsentligt bredere indholdsområde. Den maksimale bredde på området, der omfatter side-navigationen og det centrale indhold, er nu 80rem (svarer til 1280 pixels ved font-størrelse på 16px). Derudover er områdets bredde nu dynamisk, så det tilpasser sig flydende helt ned til de mindste mobilskærms-størrelser. I det gamle design er indholdsområdet fastlåst til 960 pixels, hverken mere eller mindre.
• På skærme med høj pixel-densitet bruger vi en vektor-version (SVG) af Vman-logoet. På "normale" skærme ser vektor-versionen ikke godt ud, når det bliver presset ned til så lille størrelse at det kan være i top-baren, men på højopløste skærme, såsom på mobil, kan vi bruge SVG'en, som er ultra-skarp. Mine desktop-screenshots er taget på en "normal" skærm. Prøv at lægge mærke til forskellen på logoet, når du ser mobil-screenshotsene.

Indtil videre genbruger vi de gamle ikoner. Det er muligt at vi vil forsøge at få fremskaffet et nyt sæt ikoner en gang i fremtiden.

Navigation

At tilpasse navigationen til mobil viste sig at være mere komplekst, end man skulle tro. Lad os først se på den simple del af det:

Det ser da meget simpelt ud, ikke? På store skærme har vi de 7 links i toppen (Klubhus, Hold, Træning, Marked, Social, Verden, Hjælp), som udgør hoved-navigationen.

Hver af de 7 links leder til en hoved-sektion, som er inddelt i underemner. F.eks har Marked underemnerne Søgning, Køb, Salg og Andet.

Så for at lave en mobil-navigation, lægger vi hoved-sektionerne ud i en menu, der kan åbnes med et klik på hamburger-ikonet. Menuen indeholder alle 7 hoved-sektioner, inkl. deres underemner. Man kan så åbne og lukke hver af hoved-sektionerne, og hurtigt navigere derhen, man vil. Vi sørger selvfølgelig for at den relevante hoved-sektion altid er foldet ud som standard.

De 7 hoved-sektioner og deres underemner vil vi fremover kalde for den globale navigation.

Problemet opstår når man går ind på en af de sider, som ikke ligger direkte under den globale navigation. Det er de sider, som er specifikke for een enkelt entitet, som f.eks en spiller, en klub, en liga, en cup osv. Disse sider har også side-navigation på sitet i dag, men logisk set er den helt anderledes end den globale navigation. Vi kan kalde den for den lokale navigation.

På mobil ville det ikke fungere, hvis vi forsøgte at proppe f.eks en specifik spillers navigations-links ind i foldeud-menuen, når man kigger på ham. Det dur simpelthen ikke, hvis vi ændrer indholdet i en menu, mens den er lukket. Det ville være forvirrende, og svært at opdage hvilke muligheder, man har, når man kigger på en spiller. Der var vi nødt til at finde en anden løsning, men det vil jeg fortælle om i næste blogindlæg.

På store skærme har vi valgt at bibeholde den nuværende navigations-struktur, da den egentlig fungerer udmærket.

Login-siden

Her kommer så den første redesignede side, jeg vil afsløre for Jer, og vi holder det så simpelt som muligt: Login-siden.

Der er ikke det helt store at forklare om den, men den giver et hint om den stil, vi har lagt an.

Vi har desværre ingen gudsbenådede designere iblandt os, så som programmører, må vi famle os lidt frem. Til redesignet bruger vi TailwindCSS (selvfølgelig den nye version 4) som basis, og oven på det daisyUI (version 5 beta), som indeholder en samling af færdiglavede komponenter. Det burde sikre at der er en vis sammenhæng og at de forskellige dele af siderne passer til hinanden.

I næste blogindlæg

Fremover regner jeg med at skrive væsentligt hyppigere blogindlæg op til udgivelsen af Milestone 1, og jeg skal forsøge at holde dem nogenlunde korte. I det næste indlæg kan I se frem til disse ting:

• Skarp fokus på performance i den nye version.
• Hvordan håndterer vi den lokale navigation?
• Præsentation af siderne "Klubhus -> Overblik" og "Klubprofil".
• Dark Mode!
• Notifikations-panelet og konto-menuen.