Optimalisering av hvordan plass brukes på en skjerm er en nøkkelkomponent i god webdesign, og spesielt av responsiv design.

Det finnes en rekke måter å nærme seg denne typen utfordring, og en av de mest populære er auto-arrangement av elementer i en foreldrebeholder. Den er effektiv, og når den er godt utført, skaper en layout som er både visuelt tiltalende og funksjonelt optimal.

Hvis du designer et responsivt nettsted, vil du nesten sikkert finne behovet for å omorganisere innhold på en dynamisk måte, basert på skjermstørrelsen til brukerens enhet. Automatisk arrangering av innhold er fornuftig, da det minimerer tiden til å tilpasse bruddpunkter for hver side og hvert element.

Nettsteder med stadig skiftende innhold (som blogger eller nettbutikker) kan spesielt dra nytte av auto-arrangement. Trenger du virkelig å gå inn i koden for kundens nettsted og justere breakpoints og layout hvis de plutselig bestemmer seg for å begynne å skrive lengre eller kortere blogginnlegg?

Å gjøre alt dette fra grunnen er tidskrevende og utover evnen til de fleste designere som ikke er utviklere. I stedet er det fornuftig å bruke et eksisterende plugin eller rammeverk.

JavaScript (inkludert jQuery og andre biblioteker) er den vanligste måten å opprette denne typen layout, sannsynligvis på grunn av sin brede krysskompatibilitet. Slik fungerer eksisterende arbeid som vGrid, Wookmark og Masonry.

Freetile.js er et nylig jQuery-plugin som gjør det mulig for denne typen dynamisk, organisert, responsivt layout. Den har blitt brukt som motor bak Assemblage and Assemblage Plus i nesten to år, og er nå endelig tilgjengelig som et uavhengig open source-prosjekt.

freetile.js

Det er forskjellig fra eksisterende innsats i dette rommet av noen grunner. Det tillater at alle størrelseselementer brukes uten behov for et kolonnestørrelse i fast størrelse. Dette frigjør deg fra å måtte spesifisere en kolonnebredde som passer til elementene dine. Og du kan tilpasse algoritmen som evaluerer mulige innføringsposisjoner for hvert element, slik at du kan uttrykke preferanser som justering og nærhet.

Den har en smart animasjonsrutine som gjør det enkelt å skille mellom hvilke elementer som skal animeres og som ikke skal. Det er enkelt å spesifisere animasjonen i koden.

Bruk av Freetile.js er enkelt å bruke. Selv om du ikke er dyktig i JavaScript, bør du kunne regne ut bruken ganske raskt.

Freetile.js er lisensiert under BSD-lisensen, og er tilgjengelig via GitHub.

Har du brukt Freetile.js? Hva har du bygget? Del dine erfaringer i kommentarene.