Et JQuery-plugin til optimal brug af skærmrum
Optimering af, hvordan plads bruges på en skærm, er en vigtig komponent i et godt webdesign, og især et lydhørt design.
Der er en række måder at henvende sig til denne slags udfordring, og en af de mest populære er auto-arrangement af elementer inden for en forældrebeholder. Det er effektivt, og når det er godt udført, skaber et layout, der både er visuelt tiltalende og funktionelt optimalt.
Hvis du designer et lydhørt websted, vil du næsten helt sikkert finde behovet for at omarrangere indhold på en dynamisk måde baseret på skærmens størrelse på brugerens enhed. Automatisk arrangering af indhold giver mening, da det minimerer den tid, der bruges til at tilpasse breakpoints for hver side og hvert element.
Websteder med konstant skiftende indhold (som blogs eller online-butikker) kan især drage fordel af auto-arrangement. Ønsker du virkelig at gå ind i koden til din kundes websted og justere breakpoints og layout, hvis de pludselig beslutter at begynde at skrive længere eller kortere blogindlæg?
Gør alt dette fra bunden er tidskrævende og ud over evnerne hos de fleste designere, der ikke også er udviklere. I stedet er det fornuftigt at bruge et allerede eksisterende plugin eller en ramme.
JavaScript (herunder jQuery og andre biblioteker) er den mest almindelige måde at oprette denne form for layout på, sandsynligvis på grund af sin brede krydskompatibilitet. Sådan fungerer eksisterende indsatser som vGrid, Wookmark og Murværk.
Freetile.js er et nyt jQuery-plugin, der muliggør denne slags dynamisk, organiseret, lydhørt layout. Det er blevet brugt som motoren bag Assemblage and Assemblage Plus i næsten to år, og er nu endelig tilgængelig som et uafhængigt open source-projekt.
Det adskiller sig fra eksisterende indsats i dette rum af nogle få grunde. Det gør det muligt at bruge alle størrelseselementer uden behov for et kolonne i fast størrelse. Dette frigør dig fra at skulle angive en kolonnebredde, der passer til dine elementer. Og du kan tilpasse algoritmen, som evaluerer mulige indføringspositioner for hvert element, så du kan udtrykke præferencer som justering og nærhed.
Den har en smart animationsrutine, der gør det nemt at skelne mellem hvilke elementer der skal animeres, og som ikke bør. Angivelse af animationen inden for koden er også let.
Anvendelse af Freetile.js er nem at bruge. Selvom du ikke er dygtig i JavaScript, bør du kunne regne ud dens brug ret hurtigt.
Freetile.js er licenseret under BSD License, og er tilgængelig via GitHub.
Har du brugt Freetile.js? Hvad byggede du? Del dine erfaringer i kommentarerne.