vi hör alla detta ord ”lyhörd” i webbdesign domän mycket nuförtiden. Människor rekommenderar starkt och går ga-ga över vikten av att använda responsiv design. Men nybörjare inom professionell blogging och webmastering tar ofta lite tid att få tag på allt detta surr om vad som är en lyhörd webbplats och hur man utvecklar en.
människor skapar ofta sina webbplatser teman baserat på en bildfil (t.ex. PSD). Medan alla Webbdesigner börjar som en bild, bör man vara mycket försiktig med att deras design överensstämmer med principerna om lyhördhet och är mobilvänliga. Låt oss ta ett dopp i ämnet och ta reda på allt om denna fråga.
Tja, responsen på en webbplats hänvisar till dess förmåga att justera skärmen enligt den enhet den ses på. Borta är de dagar då de flesta människor brukade använda stationära datorer –nu finns det ALLA typer av enheter där ute. Stationära datorer, bärbara datorer, netbooks, tabletter, mini tabletter, e-bok läsare, smartphones och inte så smarta telefoner! Phew! För många att inte oroa sig för!
alla dessa enheter har sina egna specifika skärmstorlekar och upplösningar. En” styv ” webbplats kommer inte att kunna anpassa sig till (eller låt oss säga, svara på) de olika skärmstorlekarna. Utseende horisontell rullningslist i webbläsaren är en av de mest märkbara tecken på att webbplatsen inte är lyhörd.
däremot kommer webbplats med ett responsivt tema att kunna anpassa sig och se till att innehållet är lättläst av vilken skärmstorlek som helst.
inte riktigt. Ett responsivt tema kommer att justera visningen med det primära målet att innehållet på webbplatsen kan användas av besökaren. För att uppnå detta mål kan Webbplatsen dölja några av dess tillbehörskomponenter (som sidofält) och ändra storlek på andra komponenter (t.ex. bilder, teckensnitt etc.)
det är ganska lätt att veta hur lyhörd är din webbplats tema. Öppna den bara på olika storlekar av datorskärmar och mobiltelefonskärmar. Om du ser din webbplats okej och allt innehåll är läsbart är din webbplats lyhörd. Om du inte har olika typer av enheter för att testa din webbplats kan du också använda online-test för lyhördhet.
det allmänna svaret är att ja det är mycket viktigt. Men innan du fattar ett beslut att göra en makeover av din webbplats för att omvandla den till en lyhörd –bör du titta på dina webbtrafikdata. Från dessa data kan du försöka hitta hur mycket trafik din webbplats tar emot från mobila enheter. Vanligtvis är webbplatser utformade för att användas på skrivbord / bärbar dator –men om du får betydande trafik från enheter som surfplattor / mobiltelefoner –bör du se hur din webbplats ser ut på sådana enheter.
för närvarande får asiatiska webbplatser i genomsnitt 27% av sin trafik från mobila enheter. Denna procentandel skulle vara mycket högre för webbplatser i områden som Europa och Amerika eftersom mobila enheter är relativt mycket mer populära.
du kommer att bli förvånad över att lyhördhet lätt kan uppnås med endast CSS. Med nuvarande CSS-standarder kan du stilisera din webbplats för olika skärmtyper. Det betyder att du kan ha separata CSS-regler för olika skärmstorlekar. Till exempel:
@media skärm och (max-bredd: 320px) {
.primär-sidebar { display: ingen } / / dölj sidofältet när skärmstorleken är 320px eller mindre
}
@media skärm och (min bredd: 1024px) {
body { font-size: 12px } //ange teckenstorlek för skärmstorlekar större än 1024px
}
sådana anpassade CSS-regler kommer att styra utseendet på din webbplats beroende på det tillgängliga utrymmet på skärmen.
om du väljer att gå för responsiv design för din webbplats eller blogg, kan du förvänta dig att ha följande fördelar:
- trafiken kommer att öka på din webbplats eftersom användare av mobila enheter kommer att kunna använda den och kan besluta att återvända för ny information. Om mobila användare inte kan använda en webbplats innehåll-de kommer inte tillbaka!
- om du använder annonser på din webbplats för att tjäna pengar på nätet –dina intäkter kan öka eftersom en lyhörd webbplats kommer att kunna fint visa annonser på mobila enheter också.
- du behöver inte utveckla olika versioner av din webbplats eller blogg för olika plattformar. Detta sparar också tid på underhåll eftersom fler versioner kräver mer underhållstid.
- om du utvecklar mer än en version för olika typer av enheter riskerar du att Google indexerar dubbla webbadresser. Olika webbadresser som pekar på samma innehåll kallas dubbla webbadresser. Google lägger ett tungt straff på dubbla webbadresser och tror att innehållet också är duplicerat. Responsiv webbdesign skyddar dig från ett sådant straff.
- du behöver inte oroa dig för korrekt agentdetektering eftersom samma webbplats fungerar för alla webbläsaragenter.
- URL-delning på webbplatser för sociala medier blir enklare eftersom varje sida på din webbplats bara har en URL associerad med den.
det finns inga signifikanta nackdelar med responsiv design förutom att de extra CSS-reglerna kan öka storleken på CSS-filen och som ett resultat kommer nedladdningstiden att öka. Men med snabbare internet blir tillgängligt över hela världen-Jag tror inte att detta utgör något verkligt problem.
i responsiv design används inte olika bilder för olika skärmstorlekar. Istället ändras samma bild genom CSS för att passa på enhetens skärm. Så, mobila enheter måste också ladda ner samma högupplösta bilder som serveras på skrivbordsanslutningar.
nu vet vi att den responsiva designen kan lägga lite extra börda på mobil internetanslutning, det är viktigt att du kan testa hur snabbt din nuvarande (responsiva eller icke-responsiva) design fungerar. Det bästa onlineverktyget för att testa detta är PageSpeed från Google. Detta verktyg kan göra din webbplats både på stationära och mobila enheter.
de flesta av Googles webbplatser är nu lyhörda. Till exempel använder Chromebook-webbplatsen responsiv design. Men Google är ett banbrytande företag med allt som är relaterat till Internet. När fler och fler andra företag inser vikten av responsiv design, flyttar webbplatser till detta nya paradigm. Titta på webbplatserna för Wendys restaurangkedja, inkommande marknadsföringsföretag HubSpot och tidningen Boston Globe för att få lite inspiration.
Ja, Det finns många stora webbplatser som ännu inte har anammat responsiv design. Exempel är CNN och BBC. Dessa är massiva webbplatser och en fullständig redesign för att införliva lyhördhet kan kräva betydande investeringar. Det kan vara anledningen till att dessa mediehus ännu inte svarar.
Nej, det är inte riktigt dyrt. Om du äger en webbplats/blogg baserad på WordPress finns det många responsiva teman tillgängliga. Standardtemat för WordPress (dvs. TwentyThirteen) är också utformat för att vara lyhörd. De flesta av de gratis teman som erbjuds av WordPress och Blogger är lyhörda. Men om du använder ett tema från tredje part-måste du kontrollera dess lyhördhet.