Responsive design er et relativt nyt udtryk i webdesign. Den blev kun udarbejdet for tre år siden i maj 2010, da webdesigneren Ethan Marcotte brugte udtrykket i hans artikel for en liste fra hinanden.
I dag er der endda en mini debat om, hvorvidt lydhør design er her for at blive, eller om det bare er et blik i panden. Kun tiden vil fortælle, men for nu er det klart, at lydhør design stræber efter at gøre brugeroplevelsen så behagelig som muligt.
Responsive design er en webdesign filosofi, der fokuserer på at skabe websteder, der giver brugerne en forbedret oplevelse. Dette omfatter funktioner som ubesværet navigation og læsning, og et minimum af resortering af browsere, rulning og panorering. Alt dette foregår på tværs af en række forskellige enheder, fra desktops til smartphones.
Da denne webdesign tilgang er stadig i en fledgling tilstand, kan du ikke være helt klar over, hvad responsivt design handler om. Er det mere om problemfrit at vise indhold på tværs af flere platforme, eller handler det primært om at hjælpe virksomheder med at opbygge mere attraktive websteder for at øge deres salg gennem en bedre brugeroplevelse?
Mashable er allerede gået ud på en lem og hedder 2013 året med lydhør design. Mens det stadig er at se, er nogle grundlæggende aspekter af lydhørt design standarder, der aldrig vil gå væk. Her er de vigtigste lydhørige designfakta at gøre sig bekendt med.
Du ville blive tilgivet for at tro, at lydhør design og mobil design er ens og samme - men de er ikke. Sikker, lydhør design skaber hjemmesider, så de begge reagerer på en browsers størrelse og er mobilvenlige, men lydhørt design er virkelig hele webdesign. Problemet med at henvise til denne webdesign tilgang som mobil design er, at det er iboende begrænsende, hvilket gør en disservice til selve tilgangen.
De mest effektive lydhøre websites kan ses som de var meningen at være på tværs af en række beslutninger. Dette omfatter alt fra de sædvanlige 1024 × 768 pixels til 1920 × 1080 skærme og alt imellem. Steder som disse ser også flot ud på tabletter (både nethinden og standard skærme) samt på smartphones. Hvis en webdesigner ser på lydhør design udelukkende gennem mobilens sammenhæng, så mister han potentielt en bredere brugeroplevelse.
Samtidig er mobil et rigtigt godt udgangspunkt for den hele lydhørige designdiskussion. Det har været normen at begynde med en mobilordning og derefter udvide dette design til yderligere størrelser, da en lydhør hjemmeside udvikles. Mange designere mener, at det er enklere at dyrke visuelle billeder end at minimere dem.
Hvis der er en regel, som webdesignere burde følge, er det, at billedkvalitet er en hel del mere vital end det faktiske antal billeder. Årsagen er, at et billed af lav kvalitet simpelthen ikke ser attraktiv ud i nogen størrelse. Tiden det tager et websted at indlæse et billede er næsten lige så vigtigt som størrelsen. Mobilbrugere vil være enige med dette, fordi de har begrænset båndbredde, hvormed man kan kæmpe.
Hvad er en webdesigner at gøre? Du skal bare nå en smart balance mellem belastningstid og kvalitet. Dette omfatter skalering af billeder med CSS højde- og breddeegenskaber, styring uden at ilægge billeder i fuld størrelse og optimere billeder til internettet. Før du uploader, anbefales det at beskære billeder og gemme hvert billede med den mindste størrelse, så længe den stadig har skarp visuel kvalitet.
Tjek ud Sony USAs hjemmeside . Bemærk, hvordan alle billederne er super skarpe i kvalitet, uanset hvilken størrelse de er. Når du har besøgt webstedet eller opdateret hjemmesiden, skal du også bemærke, hvor hurtigt billederne indlæses. Du behøver ikke vente mere end et sekund, for alt at komme i fokus ekstremt skarpt.
Designere har mange valg, når de indarbejder billeder i en lydhør indstilling. De kan kun bruge et par billeder; mindske brugen af billeder inden for mobile størrelsesordninger; tillade billeder at maske sig i mobile omgivelser eller udnytte forskellige filstørrelser og versioner. Disse valg vil fungere effektivt, selv om nogle udviklere er imod at skjule billeder, fordi brugeren stadig skal indlæse billederne på trods af at de er usynlige.
Type skal ikke være en størrelse passer til alle. En form for skrifttype, der ser appellerende til øjet på dit skrivebord, kan være forfærdeligt på din smartphone. Typografi skal følge de samme regler som andre aspekter af responsivt design.
Det vigtigste aspekt af responsiv typografi er linjelængden. For en let læsbarhed bør typen optimeres ud fra skærmens bredde. Tommelfingerregelen, for stationære websites, er, at mellem 50 og 75 tegn er en linje ideel; For mobile enheder er der kun mellem 35 og 50 tegn.
Type skal også let læses lodret. Masser af websteder bruger et linjeområde, der op til 140 procent af skærmens punktstørrelse for større tekstblokke. Hvis skærmen er mindre, skal der tilføjes mere plads.
Selv det specifikke skrifttype, der anvendes, er signifikant. Fancy skrifttyper og nyheds skrifttyper har mulighed for at se visuelt tiltalende på større skærme, men de er svært at læse, hvis punktstørrelsen er lille. Disse slags skrifttyper skulle have masser af plads mellem dem. Når du arbejder med mindre størrelser, er det nemmest at bruge normale sans serif stilarter og lige slag.
På Hardboiled Web Design s websted , kan du se mange af disse principper følges, hvilket giver god respons. Bemærk, hvordan dens linjelængde på tekst på et skrivebord - i gennemsnit større end den ideelle anbefaling på 50 til 75 tegn - består af et skrifttype, der er rent og let at læse. Derudover er linjepladsen også større end punktstørrelsen af skrifttypen. På mobilenheder er webstedets lydhørhed endnu bedre: På et iPhone 5-display var antallet af tegn pr. Linje ca. 67, hvilket er lidt over den ideelle regel på mellem 35 og 50 tegn.
Når det kommer til brugeroplevelsen - hvilket er en af de vigtigste faktorer, som webdesignere bør tænke over - er navigationen lige øverst på prioriteterne. Navigation skal være glat og effektiv for at sikre en behagelig brugeroplevelse.
Effektiv responsivt design skal sikre dette ved at være ekstra opmærksom på den specifikke bredde af en given browser. Et websted, der bruger lydhurtigt design, vil udforme sit navigationssted på forskellige områder, alt afhængigt af browserens bredde. Et af de bedste eksempler på dette er Food Sense S navigation.
Det ville være en fejltagelse for lydhørt design at scalere sidens navigation til større proportioner på enheder med større skærme.
Så nu, når du hører webdesignere, der taler om lydhørt design, ved du, at det ikke kun handler om at få et websted til at se godt ud og løbe glat på mindre mobile skærme. Du ved, at denne design tilgang er baseret på princippet om at gøre hjemmesider af alle størrelser giver den mest optimale oplevelse for brugeren - uanset hvad de bruger til at se hjemmesiden.
Responsivt design er stadig et relativt nyt koncept, i hvert fald til de fleste mennesker, der bare ser hjemmesider på internettet. Derfor kan så mange mennesker stadig ikke være enige om, hvad der gør responsivt design ... lydhørt design. Handler det om at se alt korrekt på mobile skærme? Er det bare om belastningstider og billeder af høj kvalitet, der vil glæde øjet? Handler det om et rent design og letlæsbare skrifttyper?
Det er alt dette og mere. Det er bare fundamentet for denne webdesign-tilgang, men lydhørt design udvikler sig stadig og ændrer sig, så chancerne er gode, at yderligere elementer vil blive overvejet. I sidste ende handler det om at forbedre brugeroplevelsen, fordi ingen ønsker at håndtere et websted, der er langsomt, sløret, svært at læse, rod eller svært at navigere.
Er lydhør design bare en trend? Hvad er de vigtigste aspekter af lydhør design? Lad os vide dine tanker i kommentarerne.