För några år sedan var det relativt enkelt att designa och bygga webbplatser. Webbplatser var enklare och sågs på stationära och bärbara datorer med liten variation i skärmstorlekar. Idag med mobila enheter som tar över tittarnas tittartid kan en webbplats ses på en 4,8 tums smarttelefonskärm, en 5 "phablet, en 7-tums surfplattform eller någon storlek däremellan.
Så hur ser du till att din webbplats visas korrekt över enhetstyper och skärmstorlekar?
Lösningen föreslogs först av Ethan Marcotte, när han undersökte sätt att göra webbdesigner mottagliga, dvs ändra dem beroende på skärmstorleken. En lyhörd webbplatsdesign är en som gör smart användning av CSS för att säkerställa att webbsidor fungerar bra över ett brett spektrum av skärmstorlekar - utan att tillgripa URL-omdirigering eller dynamiskt betjäning av olika HTML- och CSS-kod, beroende på UserAgent. Det är inte en teknik eller en standard, utan snarare en uppsättning designprinciper som hjälper till att uppnå resultatet.
Under de senaste åren har många responsiva mallar, CSS-ramar och WordPress-teman spridit sig. Det är till exempel möjligt att skapa en lyhörd webbplats i WordPress utan att skriva en enda kodlinje.
Men en riktig webbdesigner är inte nöjd med att bara använda mallarna. Hon ska göra ansträngningar för att förstå elementen i lyhörd webbdesign för att kunna använda dem effektivt.
Så idag ska vi titta på de 3 grundläggande teknikerna du behöver behärska, du är en effektiv responsiv designer.
Mediefrågor kan du utforma olika layouter för olika medietyper som skärm, utskrift, TV, handhållna enheter etc. Beroende på medietyp kan du konfigurera stilen, teckensnittet och andra delar på sidan.
Införd i CSS3, mediefrågor låter en designer anpassa presentationen av innehållet för att passa ett specifikt sortiment av utmatningsenhetstyper. De består av en mediatypdeklaration och ett eller flera mediefunktionsuttryck som utvärderar till sant eller falskt.
Sortimentet av mediatyper innefattar handhållen, skärm, tv, utskrift och projektion. Mediefunktioner inkluderar, men är inte begränsade till, enhetshöjd, bredd, bildförhållande, upplösning, färgindex samt höjd, bredd i webbläsarfönstret.
Låt oss ta ett grundläggande exempel; Tänk dig att du vill att din textstorlek ska krympa på mindre enheter, som telefoner. Frågan för det skulle se ut som:
p {font-size:1em;}@media all and (max-width:400px) {p {font-size:0.8em;}}Skriftstorleken på dina stycken kommer nu att ställas till 1em, om inte webbläsarens bredd är mindre än 400px, i så fall kommer den att krympa till 0.8em.
Enligt min erfarenhet är det bästa sättet att utforma en lyhörd layout att först skapa ett standard masterns stilark med de viktigaste strukturella elementen. Därefter kan du lägga till mediafrågor för att anpassa element baserat på layouten eller andra enhetselement. Om det är mer än en handfull regler kan det vara bättre att flytta dem ut till ett separat barnblad - vilket du kan selektivt ladda senare. Så här skulle det fungera:
Denna kod kollar om enheten är en handhållen i liggande läge med enhetsbredd mindre än 720px, och om så är fallet laddar det formatet tablet_layout.css.
Observera att funktionerna bredd, höjd, min / maxbredd, min / maxhöjd alla refererar till webbläsarfönsterets bredd och höjd. Enhetsbredden och höjden styrs av enhetens bredd, enhetshöjd, min / max-enhetens bredd, min / maxhöjd . Om du vill titta upp fler exempel med hjälp av mediafrågor MDN har en bra omgång upp.
"Fluid grid" är en term som används för att beskriva en layout som kodas i relativa proportioner av de olika elementen, snarare än med fasta pixelvärden.
Traditionella CSS-layouter använde fast breddsnät för att placera elementen. Tillvägagångssättet med fast bredd fungerar inte längre idag då vi har enhetsskärmar som sträcker sig från 3 tum till några fot. I en vätskegriddesign är allt kodat med avseende på dess relativa proportion till baselementet, dvs istället för att specificera höjden och bredden för varje element; Den ges en procentuell eller relativ storlek.
Tänk dig att du har fyra kolumner. För att göra denna vätska, istället för att ange var 200 pixlar bred, måste du ange dem 0,2083% (dvs 200/960). Det är åtminstone principen. Att skapa ett helt flytande nät kräver mycket omtanke. Det är ett av de sällsynta fallen som jag hellre rekommenderar att du använder anpassade verktyg. Tiny Fluid Grid , Variabelt nät system och Vätskegränssnitt är några bra alternativ till att skriva ditt eget fluidnät från början.
Bilder anses vara flexibla när bilden görs i ursprunglig storlek, så länge HTML-behållaren stöder det, men när webbläsarfönstret krymper, skalar bilden för att passa den.
Även om resten av konstruktionen är flytande och lyhörd, kommer den inte att fungera bra om alla komponenter inte skala. Det kan bli svårt med bilder och videoklipp. En bild på 700 pixlar kommer att se bra ut på ett skrivbord, men bli huggad när den ses på en 320 pixel tablett. De flesta moderna responsiva mönster använder egenskapen CSS max bredd för att göra bildskala. (Denna metod var Först föreslagit av Richard Butler .)
img {max-width: 100%;}Dessa få linjer kommer att se till att bilden inte hakas av genom att ställa in maximal bildbredd till 100% av behållaren. Om webbläsarfönstret eller skärmen blir mindre kommer den här delen av CSS-koden att krympa bilden proportionellt. Höjden justeras automatiskt, samtidigt som bildförhållandet låses.
Du kan istället låsa bilden för att uppta en viss vertikal bildskärmsandel så här
img {max-height: 75%;}(Se till att du inte använder både maxhöjd och maxbreddsegenskaper tillsammans.)
Bildstorleken kan också kopplas till textstorleken istället för moderelementet med em , så här:
img {width: 30em;}Om bilden innehåller text kan du begränsa minsta / maximala storleken för att se till att texten är läsbar. Du kan ange det så här:
img {width: 30em;max-width: 500px;min-width: 100px;}Samma tekniker kan användas för att skala videor, till exempel:
.video embed, .video object, .video iframe { width: 100%; height: auto; }Responsiv design är vår industris framtid, men med så många olika tekniker som flyger runt är det ofta svårt att hålla koll på. Master dessa 3 enkla tekniker, och du kommer att vara 90% av vägen till att vara en lyhörd designer.
Utvalda bild / miniatyrbild, elastisk bild via Shutterstock.