När du utformar din webbplats är det viktigt att se till att den ser bra ut på vilken enhet som helst, oavsett skärmstorlek och form. Responsiva webbplatser är utformade för att se bra ut på alla typer av moderna enheter som datorer, telefoner, surfplattor, TV -apparater, bärbara och till och med bildskärmar. För att göra en webbplats lyhörd måste du ändra din CSS- och HTML -kod för att automatiskt ändra storlek på dess element beroende på specifika förhållanden. Denna wikiHow lär dig hur du planerar och implementerar grundläggande responsiv webbdesign.
Steg
Metod 1 av 3: Planning Responsive Design
Steg 1. Ta reda på hur din publik använder din webbplats
Idag gör de flesta som surfar på webben det från mobiltelefoner och surfplattor. För att en webbplats ska vara responsiv måste du se till att den visas korrekt oavsett var den visas. Om tid och pengar är avgörande, fokusera på de typer av enheter som är mest populära bland dina användare (om denna information finns tillgänglig) och hur de använder din webbplats. Ta reda på med din analysprogramvara eller någon annan form av forskning:
- Vilka typer av enheter använder de oftast för att se webbplatsen, med särskild uppmärksamhet åt mobiltelefoner/surfplattor/datormärken och skärm-/upplösningsstorlekar.
- Vilka webbläsare är mest populära bland dina användare. När det gäller global statistik är Google Chrome den mest populära webbläsaren i världen, men Safari är en nära tvåa.
- Hur dina besökare använder din webbplats, till exempel hur mycket tid de lägger på att titta på den, var de tittar på den och vilket innehåll som är mest populärt. Detta kan hjälpa dig att avgöra vilken typ av innehåll som är viktigt att inkludera och som kan utelämnas.
Steg 2. Designa olika layouter för olika enheter
Du kan använda en kombination av CSS och JavaScript för att upptäcka en användares enhet, liksom dess funktioner (oavsett om den stöder Java, Flash, etc.) och visa en viss version av din webbplats i enlighet därmed. CSS -mediafrågor är särskilt användbara för att bestämma enhetens storlek/upplösning.
Steg 3. Redogör för olika typer av interaktioner
Din besökare kan interagera med din webbplats med en mus, ett tangentbord, en pekskärm eller till och med en skärmläsare för synskadade. Med tanke på detta bör din webbplats svara på musklick, tangentbordstangenter (Tab, Enter, Return, etc.,) och fingertryck på skärmen.
Hover-over-effekter fungerar inte med någonting förutom en mus. I stället för att använda dessa effekter kan du kräva att besökaren klickar på en knapp eller ikon för att visa det som tidigare visades på en muspekare
Steg 4. Överväg att använda ett Content Management System (CMS)
Ett enkelt sätt att säkerställa att din webbdesign är lyhörd är att använda ett CMS med ett förbyggt responsivt tema. Genom att använda ett CMS som Joomla, Drupal eller Wordpress kan du se till att din webbplats ser bra ut på alla enheter utan att behöva koda de responsiva elementen själv. Kontakta din webbhotellleverantör för att se vilka CMS -verktyg som är tillgängliga med din tjänst.
Steg 5. Använd onlineverktyg för att testa din webbplats
Nu när responsiv webbdesign har ökat i popularitet finns det en mängd gratis verktyg du kan använda för att testa din webbplats. Om du redan har kodat din webbplats kan du använda dessa verktyg för att testa hur den ser ut under olika förhållanden så att du vet var du behöver förbättra responsen:
- Mobilvänligt test från Google: Låter dig veta om din webbplats fungerar lika bra på mobila enheter som på datorskärmar.
- resizeMyBrowser: Låter dig se din webbplats i olika upplösningar.
- Ansvarare: Visar din webbplats på olika enhetsskärmar i olika layouter (i sidled eller höger uppåt).
Metod 2 av 3: Gör sidlayouten responsiv
Steg 1. Överväg en gratis responsiv stilarkram
Ett ramverk är en förskriven uppsättning HTML, CSS och/eller JavaScript som du kan använda som ett skelett för din webbplats. Ramverk är alla testade och optimerade för att fungera med alla webbläsare, så allt du behöver göra är att infoga ditt innehåll, lägga till dina media och färginställningar och publicera din webbplats. Några populära ramar är:
- Bootstrap
- Skelett
- fundament
Steg 2. Ställ in visningsporten med en metatagg
Om du inte använder ett ramverk vill du börja med den viktigaste aspekten av kodning av en responsiv webbplats: Viewport. Viewporten är den del av webbplatsen som är synlig för användaren. Nyckeln till att din webbplats ska visas korrekt oavsett skärmstorlek är att skala visningsportens storlek i META -taggen. För att göra det, inkludera den här taggen högst upp på varje sida på webbplatsen:
Steg 3. Ange textstorleken i förhållande till visningsområdet
När din visningsport är inställd skalas texten på din sida så att den passar skärmen. Teckensnitt kan dock visas för stora eller för små om deras storlekar inte anges i förhållande till visningsporten. Du kan göra detta genom att definiera teckensnittsstorleken som en specifik procentandel av visningsporten med vw -enheten. I det här exemplet uppmanas H1 -rubrikerna att visa 10% av visningsportens bredd, oavsett storlek:
wikiHow
Steg 4. Använd mediafrågor för att visa olika stilar för olika skärmstorlekar
Mediefrågor kan du välja om vissa CSS -element ska visas beroende på skärmstorlek. Du kan ange specifikationerna för din mediefråga i din CSS -fil. I det här exemplet blir kroppens bakgrundsfärg röd om användarens skärmstorlek är 480px eller större:
wikiHow
@mediaskärm och (minbredd: 480px) {body {bakgrundsfärg: aqua; }}
Metod 3 av 3: Gör bilder responsiva
Steg 1. Använd egenskapen CSS -bredd för att skala bilder
I stället för att ställa in bildens bredd till en specifik mängd pixlar (t.ex. 500 pixlar), använd en procentsats (t.ex. 100%) så att bilden ser på bredden på sin överordnade och justerar därefter. Att ställa in en bilds bredd till 100% tvingar bilden att skala upp och ner beroende på storleken på betraktarens skärm. För att göra detta direkt:
Steg 2. Använd egenskapen maxbredd för att begränsa skalning av bildens faktiska storlek
Om du använder breddegenskapen i föregående steg för att skala en bild till 100%, kommer bilden att växa eller krympa för att passa 100% av behållaren oavsett storlek. Det betyder att om bilden är på den mindre sidan kommer den att skala upp större än den ursprungliga storleken och utseendet av mindre kvalitet. För att förhindra att detta händer, använd maxbredd för att ställa in bildens maximala skalningsstorlek till 100% (dess faktiska storlek). Här är hur:
Steg 3. Använd HTML -bildelementet för att visa olika bilder på olika skärmstorlekar
Om du vill skapa bilder i anpassad storlek som ska visas på olika skärmar kan du ange vilka foton som ska visas i din HTML-kod. Skapa bilder i olika storlekar och använd sedan den här koden som ett exempel för att ange vilken bild som ska användas på 600px- och 1500px -breddskärmar:
