Logga in
 |
En layout som anpassas efter den enhet som används för att visa webbplatsen kallas för mobil eller responsive layout. De webbplatser som byggs idag måste vara anpassade för visning i olika enheter som dator, surfplatta och smartphone mm.
Du kan kolla hur din egen webbplats ser ut i olika enheter och olika storlekar på bildskärmar hos Responsinator.com »
Den här guiden visar hur du bygger en responsiv layout och använder CSS för att anpassa dina sidor till den enhet de visas på.
En mobil webbplats är inte detsamma som en responsive webbplats, men det gemensamma för båda är att de är anpassade för visning på små bildskärmar som smartphones etc.
En mobil version av en webbplats innebär att du har en extra version av webbplatsen som används för visning på smartphones. Den mobila hemsidan skickar besökaren vidare till en mobil webbplats. Du kan även få frågan om du vill stanna på den mobila sidan eller besöka den vanliga webbpatsen.
En mobil version av webbplatsen använder en annan URL än den vanliga webbplatsen. Du kan se på adressen vilken version som används, tex "m.dromvavaren.se" istället för den vanliga adressen "dromvavaren.se".
Om du använder en mobil version måste du uppdatera sidornas innehåll i två olika webbplatser, till skillnad från en responsiv version som använder en och samma webbplats.
En responsiv webbplats innebär att en version av webbplatsen används, men att denna anpassas till olika enheter som tex smartphone, surfplatta och dator/pc/mac.
Fördelen med den responsiva versionen är att du inte behöver uppdatera sidinnehållet i två olika webbplatser som i den mobila versionen.
Du kan anpassa din webbplats så att långa innehållsrika texter inte visas i smartphones, utan bara en kort sammanfattning. Om du har en responsiv webbplats går det att dölja artikelinnehåll och bara visa den kortare inledningen eller sammanfattningen på smartphone om du föredrar det. Det behövs alltså inte någon mobil version för detta, du kan använda samma webbplats och visa eller dölja den information du vill.
Google rekommenderar användning av responsiv webbdesign för att underlätta SEO (Sökmotoroptimering). Läs deras Mobile SEO Overview här »
En responsiv webbplats har en och samma URL (adress) vilket gör det enklare för Google att söka igenom, indexera och sortera sidornas innehåll.
Den här guiden visar hur du bygger en responsiv layout och använder CSS för att anpassa dina sidor till den enhet de visas på.
Du kan se hur exemplet ovan ser ut i olika enheter och olika storlekar på bildskärmar hos Responsinator.com »
Du kan se hur exemplet ovan ser ut i olika enheter och olika storlekar på bildskärmar hos Responsinator.com »
När den responsiva meny-knappen klickas så expanderas menyn:
Du kan se hur exemplet ovan ser ut i olika enheter och olika storlekar på bildskärmar hos Responsinator.com »
Klicka på ikonen nedan för att läsa hela guiden med kod och beskrivningar!
|
OBS! Om du vill du läsa hela guiden måste du vara WDS medlem!
Du kan beställa tjänsten WDS medlem här »
Är du redan WDS medlem?
Klicka på ikonen "WDS medlem" högst upp för att läsa hela guiden!
skriv ut »