Mobilanpassade sajter på N.nu (responsive)
Vi på N.nu jobbar just nu febrilt med att mobilanpassa existerande mallar på N.nu.
På vår nya plattform för mallar här så kan du se vilka som är responsiva och vi börjar givetvis med de som är mest populära.
Även om just din hemsida inte är responsiv ännu så innebär det inte att den inte kan ses på mobiler. Alla hemsidor på N.nu fungerar bra att titta på i mobilen, dock är det nödvändigt att behöva zooma om den inte är responsiva. Detta är vanligtvis inget problem.
Gällande Google så har de börjat att ranka responsiva sajter lite bättre och då för de som söker på Google i mobilen. Alla de som säger att sajter som inte är mobilanpassade straffas i Google har alltså fel för sig - det stämmer inte.
För dig som använder egen mall
Obs! Detta är för dig som kan, ingen support kan erbjudas.
Se till att använda rätt meta viewport i head:
<meta name="viewport" content="width=device-width, initial-scale=1">
Lägg följande precis efter <body> för att göra navigeringsmenyn responsive:
##responsive_navigation##
Använd sedan CSS mediaqueries i slutet av din CSS-fil för att anpassa resten av sajten.
Vi rekommenderar att jobba med @media (max-width: 992px) {} (tablets) samt med @media (max-width: 767px) {} för mobiler.
Ett exempel är följande för mallen twentyeleven som används på example.n.nu.
@media (max-width: 800px) {
/* Simplify the basic layout */
#content {
margin: 0 7.6%;
width: auto;
}
#secondary {
float: none;
margin: 0 7.6%;
width: auto;
}
/* Make sure embeds fit their containers */
embed,
object {
max-width: 100%;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
body {
padding: 0 .5em;
}
}
/* Added by Jim, 8 may 2015 */
@media (max-width: 992px) {
body{font-size: 130%;padding:0 5px;}
#access ul {font-size: 15px;}
#page{margin:5px;}
blockquote{margin:0;}
ul,ol {margin-left:30px;}
.widget-area,.widget-area h4, .widget-area ul a {font-size:18px;}
ul li, ol li {margin-bottom:20px !important;}
.widget-area h4 {margin-top:30px;}
}
@media (max-width: 767px) {
img {max-width:100%;float:none !important;}
}
Hur du gör för att ta bort mobilanpassning (responsive)
Om din mall på N.nu har uppgraderats till att bli responsive men du av någon anledning vill ta bort detta så gör följande:
Gå till egen mall och radera följande 2 rader:
<meta name="viewport" content="width=device-width, initial-scale=1">
##responsive_navigation##