Eksperiment: Netstationen på Mobil

Skrevet d. 20. januar 2021 kl. 19:45

Siden vi fik den nye forside til Netstationen har der været problemer med at bruge Netstationen på mobil og tablets.

Dette skyldes at den tidligere forside var opsat med en gammel (og usikker) funktion til at finde ud af om du sad på en mobil eller tablet. Når du herefter åbnede klienten (også kaldt "popup-vinduet" eller "chatvinduet"), ville forsiden sørge for at sende dig videre til en anden udgave af klienten.

Denne specielle udgave var "tilpasset" til mobil og tablet, så du kunne skrive beskeder via en tekstboks, se chathistorik i selve vinduet osv.

Ovenstående virkede dog ikke helt optimalt for alle nyere mobiler og tablets, og designet var ikke responsive (tilpasset til alle skærmstørrelser), så layout og tekststørrelser så ret forfærdeligt ud, og i mange tilfælde var umuligt at anvende uden konstant at skulle anvende zoom.

Derudover var der en del tekniske udfordringer også i forhold til at "klikke" (touch på mobil) i chatten på diverse mobiler og tablets. Chatten er nemlig 20+ år gammel og dengang havde man ikke smartphones og tablets, og der er sket meget nyt på web siden da.

PS: Der er en lille bonus i bunden af artiklen :-)

Den korte udgave

Vi har udgivet en ny version af chatvinduet i et meget bedre layout, så den også kan bruges på mobil og tablet. De nye ændringer gælder dog kun hvis du anvender chatten i portræt (vertikalt) tilstand. Du kan herunder se hvordan det så ud før (venstre) og hvordan det ser ud i dag (højre):

Nogle af de forbedringer der er lavet:

  • Hele skærmbilledet tilpasser sig nu automatisk til at fylde 100% af chattens størrelse.
  • Topbjælken tilpasser sig alt efter hvor meget plads der er til elementerne.
  • Knapperne i topbjælken ligger nu i egen dropdown menu.
  • Vennelisten er kodet helt om fra bunden af, så den virker på mobil.
  • Chatboksen ligger i midten af skærmen så tastaturet ikke dækker feltet ved fokus.
  • Højresiden ligger nu under chatten og loader lidt hurtigere.
  • Navigationen ligger i bunden af skærmen.
  • Chatloggen (eller "chathistorikken") kan vises/skjules ovenpå højresiden.
  • Generelt layout og design er optimeret - nogle af disse ændringer også på PC:
    • Knapper er større/nulstillet og nemmere at ramme på både mobil og PC.
    • Tekstfarver i topbjælken og knapperne har større kontrast (nemmere at læse).
    • Forstyrrende streger er fjernet overalt.
  • Chatvinduet i sig selv (den første fil der loader) er reduceret fra 1200+ linjers kode til blot 219 linjer. Vi har fjernet mange års gammel og forældede funktioner og scripts, der kun har været med til at gøre chatvinduet langsommere.
  • Tilføjet en ny knap til nyheder.

Her kan du se et par før- og efterbilleder af ovenstående ændringer.


Streger overalt og underlige afstande, indrykninger og højder i knapperne.
Det er også svært at læse teksten.


Streger fjernet. Knapperne er større, har samme indrykninger og er nemmere at læse med større kontrast i teksten. Der er også tilføjet en smule animation, så der er en brugervenlig visuel reaktion.



Notifikationer ligger i toppen på PC.


Notifikationer ligger i hjørnet af chatten på mobil.



Chatloggen ("Chathistorik") ligger nu i bunden ovenpå "højresiderne" og kan slås til og fra.

For nørderne

Normalt plejer vi ikke at fortælle, hvad der sker bag scenen, men da vi lancerede den nye forside, vidste vi godt på forhånd, at den gamle og mindre brugervenlige mobiludgave ikke længere ville være tilgængelig (medmindre man havde den gamle URL liggende).

Vi arbejdede derfor på den nye udgave af chatvinduet til mobil, som præsenteret i dag, og vi var klar til at udgive den nogle dage efter at vi lancerede den nye forside, men vi opdagede desværre, at der var opstået fejl og problemer på chatten, som påvirkede flere elementer i vinduet.

Vennelisten lå bag chatten

Uanset hvor meget vi prøvede at hive vennelisten ovenpå selve chatten på mobilen, ville diverse browsere ikke troværdigt "render" de forskellige lag korrekt. Dette skyldes animationerne, samt misbrug af enkelte DOM-elementer, som blev brugt til flere formål på samme tid. Vi måtte derfor bruge lidt tid på at bygge en ny og clean dropdown op fra bunden af. Ikke det helt store problem.

Herunder kan du se, hvordan det før så ud på mobilen (venstre) og PC (højre):

Og her kan du se den nye udgave, der er kodet op fra bunden af med simplere animationer, færre DOM-opdateringer for at undgå browser- og mobilproblemer. Designet er også optimeret lidt, så man kan se, hvilken bruger man peger på, samt mange andre CSS-forbedringer (nulstilling af padding, margin, opacity, :hover osv.).

Dropdowns inaktiv på mobil

Den nye menu og vennelisten lå flot og fint ovenpå chatten på mobilen, men vi opdagede hurtigt 2 kritiske fejl, der påvirkede begge dropdowns:

  1. Klikkede man på knapperne eller vennelisten, rykkede man sin bruger rundt inde på chatten bag.
  2. Dropdowns virkede slet ikke som de skulle på mobil. Uanset hvor meget vi isolerede dem fra selve chatten (DOM placering, z-index position, click/touch event handlers/interceptors osv.), så opstod der en fejl ved touch på mobil (husk at det kun er på mobil at der er dropdowns der går over chatten).

Det var lidt af et puslespil, men vi undersøgte sagen og fandt frem til at kilden til fejlen lå i selve kildekoden til chatten.

Tilbage i 2016 fik chatten en ret stor opdatering, da klienten blev konverteret fra Java til JavaScript. Man har dog ikke taget højde for alle punkter vedrørende tilgængelighed og anvendelse af chatten på mobil og tablets. Der blev lavet en lille lappeløsning, så chatten kunne bruges på mobil (og via Android-app'en) via touch (dine fingre).

Chrome og andre lignende browsere har dog ændret standarderne for touch siden 2016, da hjemmesiderne startede ud med at være supersløve og tunge på mobil. Dette har så påvirket nogle af de værktøjer og pakkefiler vi stadig anvender på Netstationen i dag, da de ikke er blevet opdateret helt tilbage fra 2013, og heller ikke længere vil blive opdateret (Google står for nogle af de værktøjer, som nu er efterladt/udfaset. Vi må derfor selv udvikle og rette på chatten, så den kan følge med på de nye standarder til web.

Den nuværende kildekode var programmeret således, at alle samtlige DOM events blev opfanget (og stoppet/blokeret) af chatten, så ingen andre elementer på hjemmesiden/vinduet fungerede, hvis musen eller touch foregik i chattens firkantede område.

Teknisk set lå alle "event listeners" på det global "window" og havde indstillingerne "useCapture" på uden at være "passive" - kombineret med event.preventDefault(); og andre blokeringer på samtlige events. Det var derfor umuligt at "komme foran" problemet med nye elementer. Ikke særlig smart.

Her kan du se oversigten over de "events", som chatten lyttede med på, og som chatten derved blokerede for resten af vinduet:

Vi har derfor været inde og skrive kildekoden om på chatten vedrørende mus og touch endnu en gang, så der ikke længere opstår denne fejl. Det krævede en del arbejde og ret store ændringer i kildekoden.

Og vi var klar til at udgive denne nye udgave i weekenden, da vi så opdagede en ny fejl på chatten.

Det er faktisk ikke unormalt, når vi arbejder med den gamle kildekode, at fixer vi én fejl, så opstår en anden. Der har været så mange forskellige kategorier af udviklere med i udviklingen af Netstationen, så det er lidt af et kaos at rydde op i fra tid til anden :-) Og det er derfor tingene kan tage lidt tid, da vi jo arbejder som frivillige og kun har et par timer om dagen til dette.

Det var nu ikke længere muligt at skifte humør, eller bruge de andre menuer på chatten. Efter at vi havde omskrevet den gamle kildekode, for at fjerne de gamle fejl, opstod en ny fejl hvor alle kliks og touch på chatten nu gik igennem alle "lag/overlays" på chatten i samme klik. Når man klikkede på menuen "Humør" dukkede de forskellige humører op i en undermenu, men i samme sekund rykkede brugeren sig også (som havde man klikket flere gange) og undermenuen lukkede med det samme. 

Ind og skrive kildekoden om igen - det krævede en hel ny custom kode til touch... Pis!

Afslutning og feedback

Vi er nu nået dertil hvor vi har rettet på de gamle fejl, oprettet et nyt layout til mobil, og er klar til at udgive det, så i kan sidde på Netstationen i skolen, på arbejdet eller ved busstoppestedet :-)

Det er derfor rigtig vigtigt for os, at i sender os feedback vedrørende den nye udgave. Dette kan være lige fra fejl i designet, fejl på chatten eller fejl til specifikke browsere og mobiler.

Vi ender nok med at skulle lave en opdatering eller to mere, før det er helt på plads, så vi håber på at i vil være med til at teste disse ændringer og endelig give os besked, hvis i har nogle kommentarer. Næste step er vores fokus på den nye version af Netstationen.

Mange tak fordi du gad læse med!

Vi plejer ikke at fortælle alt for meget, om hvad der sker fra vores side af, men det ændrer sig måske i fremtiden, så i kan få et indblik i det arbejde vi laver til daglig.

Bonus

I har måske allesammen oplevet følgende scenarie.

Man sidder i rummet X-perten og har smidt en stol under sig, for lige at blære sig lidt, og man hyggechatter med de andre på en onsdag aften. Din ven kommer ind i rummet. Du har ikke set ham længe, så du tænker, at du lige vil se hvad der står i hans profiltekst, eller se hvad han har af ting på sig.

Du højreklikker derfor på brugeren og "f#%k", brugeren flyttede sig i samme sekund og du rykker dig derfor ved en fejl. Du mister derfor din stol til en anden bruger, der snupper den bag dig hurtigt. Pis!

Vi har derfor valgt at deaktivere højreklik på tomme felter i chatten. I sammenhæng med opdatering af chatvinduet, chatten og mobiludgaven, har vi tilføjet en lille ændring, så du ikke længere kan rykke dig rundt på chatten med højreklik - og derved også undgå at afsløre, at du var ved at højreklikke på en bruger, som lige flyttede sig i samme sekund. Den kender vi allesammen også ;-)