Jeg har brugt min fritid den sidste uge eller to på at lege rundt med responsivt CSS design for denne hjemmeside, og ændre den måde hvorpå den – nu meget gamle side – fungerer. Jeg ville have det til at virke for mindre (især mobil-) skærme på en enkel og logisk måde, men også på en måde hvor jeg ikke skulle til at omskrive hver enkelt side på webstedet.
Jeg snublede over CSS-biblioteket Pure CSS mens jeg ledte efter løsninger til nogle af de design-ændringer jeg forsøgte at lave, og besluttede mig for at bruge det. Mit gamle layout brugte tabeller til alt – en lettere forældet metode allerede da jeg startede med hjemmesiden i sin tid – og det har irriteret mig i årevis. Nu er alt i CSS, og virker på enkle responsive måder med forskellige vinduesstørrelser. En sammenligning af det gamle og det nye sidelayout for forsiden af webstedet:
Jeg har lavet masser af ændringer til hjemmesiden, men jeg vil lige prøve at opliste de vigtigste af dem her:
- Jeg plejede at have et søgefelt i bunden af hver side, som viste søgeresultaterne inde på siden ved blot at udvide højden af siden med resultaterne. Dette er nu blevet ændret til et mindre søgefelt i den øverste menu (i hvert fald for store skærmstørrelser – mere om det i et øjeblik), der fører til en destinationsside med Google-resultater som en pop-up i stedet for.
- Alle ikoner er blevet ændret fra små PNG-filer til egentlig vektorgrafik, gennem forskellige CSS definerede skrifttyper. Hjemmesiden Fontello, hvor du kan oprette din egen font pakke til brug for netop dette, var en enorm hjælp.
- Jeg har tilføjet standardknapper til social deling, som ændrer indholdet af de faktiske knapper afhængigt af den bruger der ser siden. Disse knapper er skabt og hostet via AddThis – de fleste typiske internetbrugere genkender sikkert deres “plus”-ikon. Disse knapper skjuler sig automatisk for mindre skærmstørrelser, for ikke at være i vejen.
Den nye responsive menu er også en del af Pure CSS biblioteket. Jeg har haft en masse sjov at få den til at reagere på forskellige skærmstørrelser, således at en lille telefonskærm stadig vil være i stand til at se alle top-menu punkterne, mens mere information kan blive vist på større skærme. De tre forskellige funktionsmåder i menuen kan ses nedenfor:
Den nye menu, der ændrer sig alt efter størrelsen af vinduet
Når skærmen bliver mindre, er det først beskrivelses-teksten der forsvinder fra ikonerne. Derefter er det de sociale netværks-links, oversættelse-links og søgelinjen der forsvinder, de to sidstnævnte fusionerende i den øverste menu som nye ikoner.
Til sidst sørgede jeg for at under-menuen (og hoved-menuen, hvis en skærm bliver ekstremt lille) kan rulle til siden på en måde som giver mening med en touch-skærm, og såmænd også på en PC hvis man har lyst til at scrolle til siden. Jeg forsøger stadig at finde ud af en måde at overlejre en lille pil i siderne af undermenuen når denne mulighed er i aktion, men indtil videre har jeg ikke fundet en løsning.
