index
bilder
body
länkar
visited
div-taggen
class
hover
menyer
dreamweaver
dreamweaver extensions
flash
gratis html editorer
gratis templates
css3
responsiv design
Böcker om stylesheets
waybackmachine
är du nyfiken på hur din eller andra webbsidor såg ut förr? Prova waybackmachine>>>
Responsiv webdesign
När du tittar på vilka typer av utrustning människor använder för att besöka din sida upptäcker du snart att över två tredjedelar använder någon typ av mobila enheter för att besöka sidan. Det kan vara tablets, ipads och smartphones. Den äldre designen eller stylesheets tog inte hänsyn till dessa mindre skärmarna. På 90 talet hade vi skärmar med endast 640x480 i upplösning men på de nyare samsung och iPhone går de ända ner till 320 pixels breda skärmar. Detta ger dig arbete för att få din sida att godtas av google och andra sökmotorer. Jag skall samla några tekniker här och hoppas få ihop ett bibliotek av användbara tekniker för att få ordning på din responsiva design.
Det enklaste sättet att anpassa sidan är ju annars att använda några av våra open source applikationer idag som bloggar, drupal och joomla eller liknande. Dessa är ju redan från början gjorda för att anpassa sig efter skärmen.
Om du, exempelvis öppnar wordpress-bloggen bredbandsbloggen.se>>> först med en "normal" dator och sedan med din smartphone ser du att menyn och sidan anpassar sig efter skärmen på din enhet. Likadant med en drupal som göteborgshumor.se
Har du redan en sida och vill anpssa den för mobila enheter finns det några saker att göra. Antingen att du läser av vad besökaren använder och sedan skickar besökaren till en sida som redan är anpassad för mobila enheter eller att du, helt enkelt, kodar ett par meta taggar i din header för att anpassa sidan.
Ett av de enklare är att använda meta taggen <meta name=viewport content="width=device-width, initial-scale=1"> vilken gör att din sida blir inte större än skärmen. Brukar fungera men ibland blir du tvungen till ytterligare åtgärder som att använda boot strap: <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">.
Om nu inte viewport ovanför fungerar har jag hittat ett annat trick som brukar fungera och det är att lägga : @-ms-viewport{ width: device-width; } antingen i headern eller ditt stylesheet. Prova först med viewport som du ser ovanför och om inte fungerar så at den sista istället.
Här länkar du till ett styleheet som ligger på maxcdn.bootstrapcdn.com . Detta stylesheet är nog det mest populära idag att användas för responsiv webdesign. Läs mer om detta verktyg på https://www.w3schools.com/bootstrap
Andra knep kan vara att försöka hålla bilderna innanför fönstret. Ett sätt kan vara att i din stylesheet använda
img { max-width: 100%; height: auto; } vilket gör att bilderna aldrig fyller utanför skärmen utan försöker hålla sig inom ramarna.
Något annat som developers.google.com/pagespeed/ kommer att klaga på är att bilderna tar lång tid att ladda. Använder du bootstrap ovanför brukar det hjälpa mycket om du använder class="img-responsive" i img-taggen. Ett annat knep du kan använda är att tala om för webbläsaren hur ofta du uppdaterar bilderna. Utnyttja cachelagring i webbläsare. Detta gör du genom att lägga till ett par rader i din .htaccess. .htaccess ligger i roten av din webbplats. I samma mapp som din index-fil eller den sidan som öppnas först då någon skriver ditt domännamn i webbläsaren. På många av mina sidor fungerar :
##gzip javascript o text##
# MOD_DEFLATE
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
## SLUT KOMPRIMERING, START CACHING##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## SLUT CACHING ##
Och detta på grund av att jag använder apache som server. Vad dessa raderna gör är att de komprimerar xml, html, css och andra typer av filer på sidan. Sedan har jag även lagt till några rader som talar om att jpg filerna(bild-filerna) uppdateras först om ett år(access 1 year) så att webbläsaren inte behöver läsa in bildfilerna på nytt varje gång den öppnar sidan. .htaccess är en skrivskyddad fil så om du skall uppdatera den är du tvungen att ta bort den htaccess som ligger på webservern för att sedan kunna skicka upp den nya.
Det finns ett par hemsidor på nätet du kan använda för att undersöka hur din sida ser ut på olika enheter som iphone, ipad o.s.v. Denna sida går lite utanför på en iphone när du ser sidan i potraitmode(skärmen vertikalt). Jag har dock lyckats klämma in menyerna i toppen genom att använda divs. Du kan läsa mer på googlewebmastercentrals
Du hittar även mycket nyttigt på developers.google.com och testmysite.withgoogle.com
Page Speed insights kollar hur din sida ser ut på mobilen. Denna är ganska sträng och du skall vara nöjd om du lyckas klara 80/100 på mobil. Kan ge lite ledtrådar i vilket fall.
quirktools har en sida där du kan jämföra hur din sida ser ut på olika enheter som smartphones, ipads, datorer och mycket annat. Kan vara ett bra verktyg under tiden du försöker anpassa skärmen.
gtmetrix.com är ett gammalt verktyg som fungerar även idag.
När det gäller bloggar har du ett alldeles utmärkt verktyg att använda som heter P3 Plugin performer som ger dig ett diagram vad som gör bloggen seg. Jag ser den populära jetpack plugin som många använder idag ger en väldigt långsam blogg. Har du den inte under verktyg installerar du tillägget genom att "lägga till nytt" under tillägg.
Jag har lagt några fler nyttiga verktyg på sidorna om sök motor optimering. Se mer här>>>