Techreier

Responsivt design

Tilpasning til din skjerm

Responsivt design er en tilnærming til webdesign og utvikling som har som mål å lage nettsider og applikasjoner som gir en optimal brukeropplevelse på tvers av et bredt spekter av enheter og skjermstørrelser. Det som er viktigst for meg er at den samme kodebasen enkelt kan tilpasses til ulike enheter uten for mye innsats. Et arvehierarki fra topp HTML nivå med CSS og ned til hver enkelt GUI element er nøkkelen for dette. Alt kan tilpasses med enkle endringer fra CSS topp nivå. Jeg har forenklet GUI med design basert på en kolonne uavhengig av skjermstørrelse. Dette gjelder tekst og input felter med fortekst. NB! jeg har noen tabeller med flere kolonner, der noen kolonner i noen tilfeller kan gjemmes i noen tilfeller på små skjermer.

Funksjonaliten i denne web appen er utviklet for å kunne velge font størrelse basert på visningsområde (ViewPort). Bakgrunnsfargen på denne siden endres til hvit for liten størrelse, grå for medium størrelse. Fontstørrelsen minsker sammen med bakgrunnsfargen (liten og medium er satt til det samme). Litt informasjon om din enhet inkludert dimensjoner og endringer i visningsområde er vist her.

Endre størrelse på vinduet for å teste.

Innstillingene endres etterhvert. Jeg ønsker å tilpasse nettstedet til ulike enheter. Jeg foretrekker å ikke gjøre det agressivt, fordi det kan være forvirrende med mange endringer i font størrelser når vinduet endrer størrelse.

Informasjonen er funnet med Javascript. Ikke noe lagres noe sted.

Din enhet med skjerm og font