Tekniker i Responsive Web Design
Vi har pratat mycket om responsiv design här på Webdesigner Depot, och delade många värdefulla resurser. Idag delar vi en annan värdefull resurs: I slutet av den här artikeln finns detaljer för att få rabatt på Chris Converses responsiva designkurs på MightyDeals.
Med CSS3-mediafrågor kan vi dynamiskt ändra design och layout på en webbsida för att kunna leverera en optimal användarupplevelse från en enda uppsättning HTML- och CSS-markup.
Tekniken i den här artikeln förklarar hur vi kan utnyttja denna kraftfulla förmåga hos CSS för att även ändra bilder, ändra navigeringen på handhållna enheter och ställa in standard CSS för kompatibilitet med äldre webbläsare.
Skapa olika bilder
När du ändrar din design för olika enheter, överväg att skapa flera versioner av din grafik. Detta kan i hög grad påverka hastigheten där din design laddas på mindre skärmar och ger dig möjlighet att anpassa varje version av din grafik.
Exemplet nedan visar de olika storlekarna, och beskärningsalternativen, förutom de varierande mängderna av kompression som tillämpas på varje uppsättning bilder. Eftersom många små skärmaggregat har skärmar med högre upplösning är den extra komprimeringen obunden, och filstorleken är betydligt mindre.
Dra fördel av det faktum att du kan byta dina bilder dynamiskt och anpassa storleken och beskärningen av dina bilder för varje skärmstorlek. I exemplet ovan visar sidobalkbilden för den stora skärmstorleken närmare detaljer i det glasmålningsfönster, medan de mindre bilderna visar mer kontext för fönstret.
Tilldela bilder till HTML-element
![]()
Genom att tilldela bilder till ett elements bakgrund kan vi ändra den refererade grafiska filen, förutom att kunna ändra behållarens dimensioner och positionsegenskaper.
Byt den globala navigeringen på handhållna enheter
När du tittar på webbsidor på större skärmar ligger den förväntade platsen för navigeringen längst upp eller på vänster sida av skärmen. Med tanke på större skärmar kan vi se innehåll utöver navigeringen, hindrar den här användarupplevelsen inte användaren från att hämta innehållet. På handhållna enheter kan navigeringen dock ta upp hela fastighetsskärmen om den visas högst upp. Detta kan också leda användaren att tro att de måste göra ett annat navigeringsval istället för att inse innehållet ligger längre ner på sidan.
För handhållna enheter visas global navigering efter innehållet, så en användare kan svepa uppåt genom innehållet och presenteras sedan med ytterligare navigeringsalternativ. Utmaningen här är att flytta navigeringen med CSS utan att behöva ändra HTML.
Figuren ovan visar att navigeringsmarkeringen placeras efter huvudinnehållet. Detta gör det möjligt för oss att hålla det naturliga flödet av innehåll för handhållna enheter och omplacera navigationen på större skärmar. Detta uppnås genom att ställa absolut positioneringsegenskaper på navigeringsbehållaren när den ses på större skärmar och ta bort positionsegenskaperna på små skärmar.
Förutom att ändra navigationspositionen kan vi också ändra stilen också. Standard ankarkoder återställs på små skärmar för att återspegla utseendet på mobilknappar som vanligen används på handhållna enheter. Figuren nedan visar den dramatiska omvandlingen vår CSS-fil kan ha på våra navigeringslänkar.
Använd storskärms-CSS som standard för äldre webbläsare
För att hålla bakåtkompatibilitet med äldre webbläsare, behåll de stora skärmreglerna utan några mediafrågor. Detta kommer att säkerställa att tidigare versioner av webbläsare som saknar stöd för mediafrågor fortfarande kan "se" en uppsättning CSS-regler.
När mediasökningsvillkoren uppfylls av användarens skärmstorlek, reglerar reglerna som definieras i frågan reglerna utanför sökfrågor för storskärmsenheter. Detta ger dig lite inbyggd bakåtkompatibilitet för webbläsare som stöder CSS-baserade layouter, men inte CSS3-mediafrågor.
Lär dig att skapa en lyhörd webbdesign
Följ med Chris Converse när han lär dig att skapa ovanstående webbdesign steg för steg. Det vanliga priset för kursen Skapa Responsive Web Design är $ 150, men för en begränsad tid kan du få kursen via Mighty Deals för endast $ 39 !