Responsiv design är en relativt ny term i webbdesign. Det var bara mynt för tre år sedan i maj 2010, när webbdesignern Ethan Marcotte använde termen i hans artikel för en lista bortsett från.
Idag finns det till och med en mini-debatt om huruvida lyhörd design är här för att stanna eller om det bara är en blixt i pannan. Bara tiden kommer att berätta, men för nu är det tydligt att lyhörd design strävar efter att göra användarupplevelsen så bekväm som möjligt.
Responsive design är en webbdesignfilosofi som fokuserar på att skapa webbplatser som ger användarna en förbättrad visningsupplevelse. Detta inkluderar funktioner som enkel navigering och läsning, och ett minimum av resortering av webbläsare, rullning och panorering. Allt detta sker över en rad olika enheter, från skrivbord till smartphones.
Eftersom det här webdesign-metoden fortfarande är i ett spännande tillstånd, kanske du inte är helt klar över vad lyhörd design handlar om. Handlar det om att se innehåll på flera plattformar sömlöst, eller handlar det huvudsakligen om att hjälpa företag att bygga mer attraktiva webbplatser för att öka sin försäljning genom en bättre användarupplevelse?
Mashable har redan gått ut på en lem och kallad 2013 året av lyhörd design. Medan det återstår att se, är några grundläggande aspekter av lyhörd design standarder som aldrig kommer att gå iväg. Här är de viktigaste responsiva designfakta att bekanta dig med.
Du skulle bli förlåtad för att tänka på att den lyhörda designen och den mobila designen är en och samma - men de är inte. Visst, lyhörd design skapar webbplatser så att de båda svarar på en webbläsares storlek och är mobilvänliga, men lyhörd design är verkligen hel webbdesign. Problemet med att hänvisa till detta webbdesign-tillvägagångssätt som mobil design är att det är inneboende att begränsa, vilket gör en missnöje till tillvägagångssättet i sig.
De mest effektiva mottagliga webbplatser kan ses som de var avsedda att vara, över en rad resolutioner. Detta inkluderar allt från de vanliga 1024 × 768 pixlarna till 1920 × 1080-skärmarna och allt däremellan. Webbplatser som dessa ser också bra ut på tabletter (både näthinnor och standarddisplayer), liksom på smartphones. Om en webbdesigner tittar på lyhörd design uteslutande via mobilens sammanhang, kan han eventuellt sakna en bredare användarupplevelse.
Samtidigt är mobil en riktig lämplig utgångspunkt för hela den responsiva designdiskussionen. Det har varit normen att börja med ett mobilt system och expandera sedan denna design till ytterligare storlekar, eftersom en responsiv webbplats utvecklas. Massor av designers tycker att det är enklare att växa visuella snarare än att minimera dem.
Om det finns en regel som webbdesigners borde följa är det att bildkvaliteten är mycket viktigare än det faktiska antalet bilder. Anledningen är att en lågkvalitativ bild helt enkelt inte ser attraktiv ut i någon storlek. Den tid det tar en plats att ladda en bild är nästan lika viktig som storleken. Mobila användare kommer att hålla med det här eftersom de har begränsad bandbredd som man kan strida mot.
Vad är en webbdesigner att göra? Helt enkelt nå en smart balans mellan laddningstid och kvalitet. Detta inkluderar skalningsbilder med CSS-höjd- och breddegenskaper, styrning utan att ladda bilder i full storlek och optimera bilder för Internet. Innan du laddar upp, rekommenderas det att skära några bilder och spara varje bild så liten som möjligt, så länge den fortfarande har skarp visuell kvalitet.
Checka ut Sony USAs webbplats . Observera hur alla bilderna är super skarpa i kvalitet, oavsett vilken storlek de är. När du väl har besökt webbplatsen eller uppdaterar hemsidan, notera också hur snabbt bilderna laddas. Du behöver inte vänta mer än en sekund för att allting ska komma i fokus extremt skarpt.
Designers har många val när man integrerar bilder i en lyhörd inställning. De kan bara använda några bilder; minska användningen av bilder inom mobilstorlekssystem; tillåta bilder att maskera sig i mobila omgivningar; eller använd olika filstorlekar och versioner. Dessa val kommer att fungera effektivt, även om vissa utvecklare är emot att dölja bilder, eftersom användaren fortfarande måste ladda bilderna trots att de är osynliga.
Typen ska inte vara en storlek som passar alla. En typ av teckensnitt som ser till att du tittar på ditt skrivbord kan vara skrämmande på din smartphone. Typografi måste följa samma regler som andra aspekter av responsiv design.
Den viktigaste aspekten av responsiv typografi är linjelängden. För smidig läsbarhet borde typen optimeras baserat på skärmens bredd. Tumregeln, för stationära webbplatser, är att mellan 50 och 75 tecken är en linje idealisk; För mobila enheter är det bara mellan 35 och 50 tecken.
Typ måste också lätt läsas vertikalt. Massor av webbplatser använder ett linjeplats som upp till 140 procent av skärmens punktstorlek för större textblock. Om skärmen är mindre bör mer utrymme läggas till.
Även den specifika typsnitt som används är signifikant. Fancy teckensnitt och nyhetstycken har möjlighet att se visuellt tilltalande på större skärmar, men de är svåra att läsa om punktstorleken är liten. Dessa typer av teckensnitt ska ha mycket utrymme mellan dem. När du arbetar med mindre storlekar är det lättast att använda normal sans serif stilar och jämn slag.
På Hardboiled Web Design s webbplats , du kan se att många av dessa principer följs, vilket ger god respons. Observera hur dess längd på text på ett skrivbord - i genomsnitt större än den idealiska rekommendationen om 50 till 75 tecken - består av en typsnitt som är ren och lätt att läsa. Dessutom är linjeplatsen också större än punktstorleken på teckensnittet. På mobila enheter fungerar webbplatsens responsivitet ännu bättre: På en iPhone 5-skärm var antalet tecken per rad ungefär 67, vilket ligger bara över den ideala regeln mellan 35 och 50 tecken.
När det gäller användarupplevelsen - vilket är en av de viktigaste faktorerna som webbdesigners bör tänka på - är navigering högst upp på prioriteringarna. Navigering måste vara smidig och effektiv för att säkerställa en bekväm användarupplevelse.
Effektiv responsiv design måste säkerställa detta genom att vara extra uppmärksam på den specifika bredden på en viss webbläsare. En webbplats som använder lyhörda designbrunnar lägger ut sin sidnavigering i olika områden, allt beroende på webbläsarens bredd. Ett av de bästa exemplen på detta är Food Sense S sidnavigering.
Det skulle vara ett misstag för en responsiv design för att skala sidnavigeringen till större proportioner på enheter med större skärmar.
Så nu när du hör webbdesigners som pratar om lyhörd design, vet du att det inte bara handlar om att göra en webbplats ser bra ut och går smidigt på mindre, mobila skärmar. Du vet att denna designmetod är baserad på principen att skapa webbplatser av alla storlekar ger den mest optimala upplevelsen till användaren - oavsett vad de använder för att visa webbplatsen.
Responsiv design är fortfarande ett relativt nytt koncept, åtminstone för de flesta som bara tittar på webbplatser på internet. Därför kan så många människor fortfarande inte komma överens om vad som gör en responsiv design ... mottaglig design. Handlar det om att se allt ordentligt på mobila skärmar? Handlar det bara om laddningstider och högkvalitativa bilder som glädjer ögat? Handlar det om en ren design och lättlästa teckensnitt?
Det är allt detta och mer. Det är bara grunden för detta webbdesign, men den lyhörda designen utvecklas fortfarande och förändras, så chansen är bra att ytterligare element kommer att övervägas. I slutändan handlar det om att förbättra användarupplevelsen, eftersom ingen vill hantera en webbplats som är långsam, suddig, svår att läsa, rörig eller svår att navigera.
Är responsiv design bara en trend? Vilka är de viktigaste aspekterna av responsiv design? Låt oss veta dina tankar i kommentarerna.