Tankar om webbutveckling » HTML & CSS http://www.wedholm.net Sökmotoroptimering och webbutveckling Thu, 02 Feb 2012 21:31:39 +0000 sv-se hourly 1 http://wordpress.org/?v=3.3 Hårdbantad statisk HTML-sajt http://www.wedholm.net/hardbantad-statisk-html-sajt/ http://www.wedholm.net/hardbantad-statisk-html-sajt/#comments Fri, 17 Jun 2011 00:16:33 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=3480 Sökmotorer gillar läsbar text och ogillar att plöja igenom diverse kod. Därför har jag skapat en superslimmad sajt med så lite HTML-kod som möjligt. Det finns dock ytterligare saker att göra. T.ex. går det att korta ner alla id:n till ett tecken. Jag har dock valt att förkorta måttligt för att behålla en gnutta innebörd med dem. Mycket av vinsten görs genom att olika element ärver sina egenskaper i CSS:en. Jag har dessutom hållit nere antalet divar.

Namnet Simpleton on a Diet kommer av att jag skapade en simpel exempelsajt åt en vän. Simpel blev Simpleton i mitt huvud, och den nedbantade versionen blev ”on a diet”. Designen får användas fritt med ett enda förbehåll. Att länken till Wedholm.net längst ner lämnas orörd.

Sajten kan ses på www.wedholm.net/simpleton-on-a-diet/ och hämtas hem som rar-fil här.

Vill du inte använda just denna design så hoppas jag den kan hjälpa dig att utnyyttja CSS till sin fulla potential.

I efterhand tillagt: Upptäckte precis att simpleton betyder stolle. Det hade  jag faktiskt ingen aning om. Denna upptäckt gjordes på denna blogg som får lite oväntad länkkärlek.

]]> http://www.wedholm.net/hardbantad-statisk-html-sajt/feed/ 12 Viktig onpage-optimering http://www.wedholm.net/viktig-onpage-optimering/ http://www.wedholm.net/viktig-onpage-optimering/#comments Wed, 15 Jun 2011 21:11:12 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=3476 Det har blivit glest mellan blogginläggen den senaste tiden, men här kommer ett inlägg om några viktiga punkter vad gäller onpage SEO.

Intern länkstruktur

Den interna länkstrukturen är viktig för att sprida länkjuicen till alla sidor på webbplatsen. Är webbplatsen liten (10-15 sidor) kan man med fördel länka alla sidor från startsidan, är den stor eller medelstor (~30+ sidor) måst man hitta en bra struktur med avdelningar och underavdelningar. Att de interna länkarna innehåller optimala ankartexter är av yttersta vikt för din ranking. Detta är egenkontrollerade och gratis länkar som inte ska slösas bort. Länka också flitigt mellan texter på webbplatsen när en sida berör en annan sidas ämne, Wikipedia-metoden så att säga.

301 Redirects

Peka om sidor som bytt namn så att ingen länkjuice går till spillo. Det är också viktigt att göra ompekningar mellan IDN- och icke-IDN-domän, men även från www-variant till icke-www eller vice versa. Alla ompekningar ska ske med en s.k. 301 Permanent Redirect.

Minimera andelen kod

Håll nere andelen kod i förhållande till läsbar text så mycket det bara går. Med hjälp av CSS kan man få bort otroligt mycket onödig HTML-kod. Istället för extra divar för positionering m.m. kan man sätta margins och paddings på andra taggar och helt skippa många divar. Låt också de olika elementen ärva egenskaper från huvudelementen. Har du en div som har klassen ”left” kan du skippa många klasser på underliggande taggar. Detta genom att exempelvis skriva: div.left span eller div.left a i CSS-filen för att styla alla span och a-taggar i ”left”.

Att använda utdaterad HTML som font-taggar, hoppas jag du förstår, är strängt förbjudet om du pysslar med någon form av webbutveckling.  Detta gör att det skapas otroligt mycket onödig kod vilket kommer missgynna din SEO.

Bra innehåll

Floskelvarning, men det är faktiskt så att bra innehåll automatiskt får inlänkar. Skriver du användbara och utförliga guider så kommer andra med största sannolikhet att länka till dig.

]]> http://www.wedholm.net/viktig-onpage-optimering/feed/ 0 Markörer och Google Maps API http://www.wedholm.net/markorer-och-google-maps-api/ http://www.wedholm.net/markorer-och-google-maps-api/#comments Thu, 25 Nov 2010 23:28:36 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=2709 Efter gårdagens trixande med Google Maps API har nu den nya kartan över Lübeck gått live. Ändringarna bestod i att skapa markörer i olika färger, samt hämta alla uppgifter från en XML-fil istället för att skriva in dem direkt i Javascript-koden. Beroende på vilken kategori en plats som en markör märker ut visas de i en viss färg. Smidigt för att göra det tydligt för besökaren var t.ex. de flesta hotellen är belägna. Det går nu också att välja vilka markörer som ska visas genom att man markerar en checkbox framför varje kategori. På så sätt kan man låta besökaren rensa bort de markörer som de tycker är ointressanta.

Så här gör man markörer i olika färger

Vi börjar med den sida som kartan ska visas på. Där ska du lägga till följande mellan head-taggarna:

<script type="text/javascript" src="/includes/googlemaps.js"></script>

Sidans body-tagg ska se ut så här:

<body onload="load()" onunload="GUnload()">

Sedan skapar du en div som ska visa kartan:

<div id="map_canvas" style="width: 560px; height: 460px;"></div>

Därefter fortsätter vi med filen som jag väljer att kalla googlemaps.js som ska importeras. Detta är den kod som laddar kartan och här bestämmer du t.ex. var den ska fokusera och hur långt inzoomad den ska vara.

<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA5_z27XiV9IUwFjySmL26Twi6fo-Ki2hRGzIEzOIGoH2zKVDNT8MNja1mdng"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    var iconBlue = new GIcon();
    iconBlue.image = 'images/graphics/mm_20_blue.png';
    iconBlue.shadow = 'images/graphics/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon();
    iconRed.image = 'images/graphics/mm_20_red.png';
    iconRed.shadow = 'images/graphics/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["restaurang"] = iconBlue;
    customIcons["hotell"] = iconRed;
	var markerGroups = { "restaurang": [], "hotell": []};

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(53.86892, 10.67165), 13);
		map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());

        GDownloadUrl("includes/markerdata.xml", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
			var link = markers[i].getAttribute("link");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, type, link);
            map.addOverlay(marker);
          }
        });
      }
    }

    function createMarker(point, name, address, type, link) {
      var marker = new GMarker(point, customIcons[type]);
      markerGroups[type].push(marker);
      var html = "<p class='maptitle'>" + name + "</p><p class='mapadress'>" + address +"</p><p class='maptext'><a href='"+ link +"' class='intmap'>Läs mer om " + name + "</a></p>";
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    function toggleGroup(type) {
      for (var i = 0; i < markerGroups[type].length; i++) {
        var marker = markerGroups[type][i];
        if (marker.isHidden()) {
          marker.show();
        } else {
          marker.hide();
        }
      }
    }
    //]]>
  </script>

Slutligen kommer vi till XML-filen (markerdata.xml) som innehåller information om alla markörer.

<markers>
 <marker name="Hotel Alter Speicher" address="Beckergrube 77" lat="53.869598" lng="10.680524" type="hotell"/>
 <marker name="Historischer Weinkeller" address="Koberg 8" lat="53.87097" lng="10.69079" type="restaurang"/>
</markers>

Det ska vara det hela. Nu ska du ha en karta som visar markörer i olika färger beroende på vad du skrivit in i attributet ”type” i XML-filen.

Visa eller dölj markörer

För att visa eller dölja markörer använder vi oss av checkboxar. Denna kod placerar du förslagsvis under diven som visar kartan.

<input style="background-color: #ff0000; border: 1px solid #ffffff;" onclick="toggleGroup('hotell')" checked="checked" type="checkbox" /> Hotell <br />
<input style="background-color: #ffff00; border: 1px solid #ffffff;" onclick="toggleGroup('restaurang')" checked="checked" type="checkbox" /> Restauranger
]]> http://www.wedholm.net/markorer-och-google-maps-api/feed/ 5 Jävla skitfel! http://www.wedholm.net/javla-skitfel/ http://www.wedholm.net/javla-skitfel/#comments Thu, 25 Nov 2010 00:51:08 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=2707 Ursäkta rubriken men jag är aningen upprörd nu. Det är helt och hållet mitt fel, vilket spär på upprördheten. Jag har suttit och felsökt ett stycke kod till Google Maps i lite över en timma utan att fatta vad som var problemet.

Det visade sig dock vara otroligt simpelt! Jag hade helt enkelt missat att göra om & till &amp; i XML-filen. Var bara tvungen att skriva av mig lite irritation.

]]> http://www.wedholm.net/javla-skitfel/feed/ 6 Rundade hörn och skugga med CSS3 http://www.wedholm.net/rundade-horn-och-skugga-med-css3/ http://www.wedholm.net/rundade-horn-och-skugga-med-css3/#comments Mon, 22 Nov 2010 01:30:47 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=2684 Nu har jag kommit över en mycket bra CSS-lösning för att (en gång för alla) lösa det eviga problemet med rundade hörn i olika webbläsare.

Så här ser CSS-lösningen ut:

.box {
	-moz-border-radius: 15px; /* Firefox */
	-webkit-border-radius: 15px; /* Safari and Chrome */
	border-radius: 15px; /* Opera 10.5+, future browsers */-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
	-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
	box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
	behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

Vill man få det att funka i Internet Explorer behövs även filen ie-css3.htc som ni ser är inkluderad i CSS:en. Ladda ner den och placera den i rootkatalogen på din webbplats. IE väljer som bekant att gå sin  egen väg och strunta i detta fall i standarder som relativa sökvägar.

Diven som ska få rundade hörn måste även ha ett högre z-index än omkringliggande element, samt ha position relative eller absolute.

Jag har under kvällen implementerat denna lösning på www.lübeck.nu och det funkar bra. Jag sparade dessutom 22kB i ren kod på hela sajten. Med min förra lösning bestod varje ruta av 3 st divar. Hoppas ni också har nytta av det. Måste dessutom ge cred till Kratz (som jag f.ö. hittade genom Snurra) och fetchak.com/ie-css3.

]]> http://www.wedholm.net/rundade-horn-och-skugga-med-css3/feed/ 10 Full koll på XHTML http://www.wedholm.net/full-koll-pa-xhtml/ http://www.wedholm.net/full-koll-pa-xhtml/#comments Mon, 15 Nov 2010 02:24:04 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=2650 Nu har jag bestämt mig för att få full koll på XHTML, eXtensible HyperText Markup Language. Jag har sedan tidigare känt mig ganska säker på hur man skriver korrekt XHTML. Det handlar mycket om att stänga, och att inte nästla, taggar om vartannat. Ungefär som att skriva korrekt HTML utan slarv. Det skiljer sig dock från vanlig HTML eftersom man i XHTML även måste stänga tomma element, t.ex. <img src=”bild.jpg” />.

Jag lyckades utan större problem koda om en av mina webbplatsmallar till XHTML. Efter en stund kom jag ju på att man inte kan använda ”target blank” i XHTML Strict, vilket gjorde att jag tog den enkla vägen och körde på Transitional. Det här med target blank har ju även inom HTML Strict varit borttaget sedan länge, men jag tycker det är ett så användbart attribut att jag vill fortsätta använda det. Alternativet är t.ex. att gå omvägen och lösa det med Javascript, men det är varken en fin eller smidig lösning enligt mig.

Kort om XHTML

  • Stäng alla element, även de tomma. <br />
  • Nästla inte elementen. <p><b></b></p>
  • Använd bara gemener i HTML-koden. <body>
  • Använd inte gamla HTML-element, t ex <font>
]]> http://www.wedholm.net/full-koll-pa-xhtml/feed/ 5 Kolla upp sajtens laddningstid http://www.wedholm.net/kolla-upp-sajtens-laddningstid/ http://www.wedholm.net/kolla-upp-sajtens-laddningstid/#comments Wed, 12 May 2010 01:20:28 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=2048 Det ryktas om att Google börjar straffa sajter som tar lång tid att ladda. Detta tror jag att Google redan gör, men inte genom att mäta laddningstiden. Om en sajt tar lång tid att ladda ökar risken att användarna inte orkar vänta, och klickar sig tillbaka till sökresultatet. Detta tolkar Google i sin tur som en avvisning (bounce), och ett tecken på att din sajt inte var relevant för den aktuella sökningen.

Websiteoptimization.com har en bra tjänst som mäter laddningstiden på din sajt vid olika uppkopplingshastigheter. Här får du också en utförlig rapport om de faktorer som påverkar sidans laddningstid, samt tips på hur du åtgärdar detta och inom vilka gränser du ska hålla dig.

Detta område av sökmotoroptimeringen är nog det jag tycker är svårast. Det handlar om att banta ner olika delar av innehållet på sidan. Många gånger är det saker man inte vill ta bort eftersom det försämrar för besökaren på andra områden. Det kan t.ex. vara färre antal bilder som dessutom är av sämre kvalitet (mer komprimerade). Tack och lov använder jag inte mycket Javascript på mina sajter, bortsett från annonser och statistik.

]]> http://www.wedholm.net/kolla-upp-sajtens-laddningstid/feed/ 0 Anpassning till Internet Explorer http://www.wedholm.net/anpassning-till-internet-explorer/ http://www.wedholm.net/anpassning-till-internet-explorer/#comments Tue, 27 Apr 2010 17:24:01 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=1963 Nu har jag tagit mig i kragen och äntligen fixat till Bilsemester.net och Lübeck.nu så att dessa ser ut som de ska i Internet Explorer och Firefox.  detta gäller i varje fall version 7 av Internet Explorer, de övriga orkar jag inte kolla upp just nu. i Firefox var problemet störst, men enklars att åtgärda. Där handlade det om en höjd på menyn som inte var tillräckligt tydligt definerad. det gjorde att innehåller hoppade ner och lade sig under en kolumn med en Adsense-enhet. Anpassningen till IE (7) var lite pilligare. Där var jag tvungen att göra en en separat CSS-fil som köra om användaren kommer via IE. Detta sköts via ett lite ASP-kod som känner av vilken webbläsare som används. Åtgärderna för att få sajterna att fungera i IE handlade om att på många ställen helt ange nya mått på olika DIV:ar.

Nu när detta arbete  äntligen är gjort hoppas jag på ökade intäkter från sajterna. Besökarna som använder IE kunde nämligen inte se högerkolumnen med annonser direkt, eftersom den tidigare hoppade ner och lade sig längst ner på sidan. Firefox-användarna däremot såg tidigare bara Annonser i en smal kolumn överst på sajten. Detta kan ju faktiskt ha gjort att de klickade på annonser oftare. Detta kan påverka intäkterna lite eftersom 22% av besökarna använde Firefox. Andelen för Internet Explorer är 68%.

]]> http://www.wedholm.net/anpassning-till-internet-explorer/feed/ 0 Styla dina HTML-formulär http://www.wedholm.net/styla-dina-html-formular/ http://www.wedholm.net/styla-dina-html-formular/#comments Mon, 01 Mar 2010 19:43:58 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=1787 Hittade nyss några bra blogginlägg som visar hur man gör s.k. ”inline form labels” eller på ren svenska, rubriker i formulärfälten.

www.zurb.com/playground/inline-form-labels
www.alistapart.com/articles/makingcompactformsmoreaccessible

]]> http://www.wedholm.net/styla-dina-html-formular/feed/ 0 Korrekta rubriktaggar http://www.wedholm.net/korrekta-rubrik-taggar/ http://www.wedholm.net/korrekta-rubrik-taggar/#comments Tue, 12 Jan 2010 22:08:23 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=1619 Jag har säkert gått igenom detta tidigare, men det tål att upprepas. Ett vanligt och onödigt riskabelt sätt att hantera rubrik-taggarna är att fylla dessa med ytterligare HTML-taggar. Det handlar främst om att länka texten inom rubriktaggen, eller att placera en IMG-tagg innanför <h1></h1>. Enligt min vetskap är det enda som ska finnas inom rubrik-taggarna (gäller samtliga; h1, h2, h3 osv.) är läsbar text. ASP- eller PHP-kod är såklert undantagen om denna endast är till för att generera läsbar text.

Länkar i rubriker

Jag har stött på fall där personer försökt öka värdet på en länktext genom att placera hela länken inom en rubriktagg. Som bekant värderas ju sökord i rubriker mer än när de enbart förekommer i brödtexten. Den enkla, och smått ogenomtänkta slutsatsen som dragits är att rubriktaggen på något magiskt sätt skulle öka värdet på sökorden. Jag är medveten om att WordPress länkar rubriker hej vilt, så är det även på denna blogg. Jag är ganska säker på att det inte uppskattas av Google om det görs i syfte att öka sökordens värdering. Om det sker någon bestraffning kan jag inte säga säkert, troligtvis inte, då miljontals WordPressbloggar skulle göra sig förtjänta av smisk. Mer troligt är nog att Google inte gör någon skillnad på dessa länkar överhuvudtaget. Det som däremot händer är att text/kod-ration på din sajt försämras. Onödigt mycket kod är inte bra! Om du bygger dina sajter från grunden, eller om det inte är för mycket jobb med att ändra befintlig design, vill jag bestämt avråda från ”onaturliga” ingrepp i rubriktaggarna.

Bilder i rubriker

Det förekommer även att img-taggar läggs inom rubriktaggarna (h1 osv.). Detta beror nog till största del på bristande HTML/CSS-kunskaper hos hemsidesnickaren. Vill man exempelvis ha en bakgrundsbild på rubriken ska man använda CSS till detta. H1 {background-image: url(bild.jpg) no-repeat;}

Det finns dock fall då orsaken inte är bristande kunskaper, utan ett försök att få vissa bilder att ranka bättre på Google’s bildsök. Inte att rekommendera! Kör på som vanligt med relevanta ALT- och TITLE-attribut istället.

Fler diskussioner om länkar i rubriktaggar

webmasterworld.com/search_engine_promotion/3155486.htm

]]> http://www.wedholm.net/korrekta-rubrik-taggar/feed/ 2 Anpassning till olika webbläsare http://www.wedholm.net/anpassning-till-olika-webblasare/ http://www.wedholm.net/anpassning-till-olika-webblasare/#comments Fri, 18 Dec 2009 13:48:21 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=1508 Nu har jag spenderat någon timma på att anpassa designerna till resesajterna till Firefox och Internet Explorer. Jag uppmärksammades på detta problem av en vänlig läsare och attackerade problemet direkt. När det däller dessa designer har jag slarvat en aning och struntat i att kontrollera hur de ser ut i andra webbläsare än Opera.

Ett problem återstår dock, jag får inte bakgrundsfärgerna att bli rätt i Firefox. Body-bakgrunden ska vara grå, men innehållsdelens bakgrund ska vara vit. Trots att jag gett div:en ”content” background: #FFFFFF; så funkar det inte. Body-bakgrunden används på hela sidan.

De andra felen i Firefox som bestod av felpositionerade div:ar löstes lätt i CSS:en, och påverkade inte heller designens utseende i Opera. När det kommer till fel i Internet Explorer tvingas man (ta mig fan) alltid skapa en <!–[if IE 7]> där man får ge div:arna helt ny bredd, marginal, padding m.m. Fel som uppstår i Firefox och Opera beror ofta på att man slarvat med att ange olika mått. Rättar man till, så funkar det sedan ofta i båda webbläsarna.

]]> http://www.wedholm.net/anpassning-till-olika-webblasare/feed/ 0 Popup-fönster på sajten http://www.wedholm.net/popup-fonster-pa-sajten/ http://www.wedholm.net/popup-fonster-pa-sajten/#comments Mon, 07 Dec 2009 21:48:22 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=1439 Det var länge sedan jag använde mig av popup-fönster på mina webbplatser. Anledningarna till att jag övergett dem är flera. Det är dels ur SEO-synpunkt, men även av användarvänlighetsskäl.

Popup och SEO

Jag börjar med att förklara på vilket sätt sökmotoroptimeringen blir lidande av popup-fönster. Detta gäller under förutsättning att det är viktigt innehåll i popup:en som måste indexeras av Google. Jag tar ett exempel från WN där det handlade om en receptsajt som visar alla recept i ett popup-fönster. I det fallet kommer en väldigt stor del av sajtens innehåll att ligga i olika popup-fönster.

Popup-fönstren använder sig oftast av JavaScript för att öppna det aktuella innehållet i ett nytt fönster. Google kan inte följa JavaScript (osäker på hur  det funkar nu för tiden, men det är helt klart bättre med rena HTML-länkar) på samma sätt som om fönstren skulle länkas med <a href=”"> som vanligt. Måste du använda JavaScript så bör länken se ut så här:

<a href="recept.asp?id=123" onclick="window.open(this.href,'recept_window');re turn false;">Spaghetti och köttfärssås</a>

Då följer Google href-länken till innehållet och kan indexera det.

Problemet är dock inte löst i och med detta. Google har innehållet men kan få  problem när de ska länka direkt till recepten från sökresultatet. Ofta dyker samma problem upp som för i stort sett alla frame-baserade webbplatser. Sajten i sin helhet visas inte, utan besökaren ser bara innehållet på  recept.asp?id=123. Menyer, rubrik och kolumner försvinner och man tvingas ofta göra en länk under varje recept, något i stil med ”Ser du inte hela sajten? Klicka här!”.

Pop-up och användarvänlighet

Ur ett användarvänlighetsperspektiv kan popup-fönster vara både en bra och dålig lösning. Saker som jag tycker popup-fönster kan lämpa sig bra för är små korta notiser eller bekräftelser. Detta är innehåll som sökmotorer inte nödvändigtvis måste indexera. Meddelandena kan handla om att uppmuntra besökarna att bli medlem, eller bekräfta att ett meddelande har skickats.

Åter till receptexemplet. Om en så stor och viktig del av innehållet på sajten ligger i en popup finns risken att många besökare inte kommer åt innehållet. Många webbläsare nu för tiden har s.k. ”popup blockers” som hindrar dessa att automatiskt poppa upp på skärmen. Istället visas (t.ex. i Opera) ett litet meddelande i nederkant att ett pop-up har blockerats, och att man måste klicka på det meddelandet för att visa popup-fönstret. Många besökare har inte stenkoll på tekniken och upplever det som att sajten inte fungerar korrekt. Risken är då stor att du förlorar dessa besökare som inte hittar det de söker.

Ytterligare ett problem, som är både en SEO- och användarvänlighetsfråga handlar om djuplänkar till din sajt. Om ditt viktiga innehåll, recepten i detta fall, ligger i en pop-up så blir det svårare för andra att länka direkt till innehållet (s.k. djuplänkning). Användare som samtidigt driver bloggar kan uppleva det svårt att tipsa andra om intressanta recept. Dessutom förlorar du länkkraft i och med de uteblivna länkarna till din sajt.

Alternativ till JavaScript-popup

Lightbox är ett alternativ till de klassiska popup:erna i JavaScript. Det bygger istället på HTML/CSS och skapar ett lager ovanför sajten där nytt innehåll visas. Jag har dock inte satt mig in hur detta påverkar sökmotoroptimeringen, men spontant känns det som en mycket bättre lösning.

huddletogether.com/projects/lightbox

]]> http://www.wedholm.net/popup-fonster-pa-sajten/feed/ 0 Google SERP och HTML-ankare, forts. http://www.wedholm.net/google-serp-och-html-ankare-forts/ http://www.wedholm.net/google-serp-och-html-ankare-forts/#comments Fri, 23 Oct 2009 03:28:57 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=1292 Nu har jag fått mitt test av HTML-ankare indexerat och här ser ni hur det ser ut. En riktigt bra, och framförallt användarvänlig funktion tycker jag.

Sidan med hela innehållet är fortfarande huvudrubrik, men en extra länk har lagts till ”Hoppa till kapitel”. Därefter följer den vanliga korta sammanfattningen som visar i vilken kontext sökordet finns.

]]> http://www.wedholm.net/google-serp-och-html-ankare-forts/feed/ 0 Namngivna HTML-ankare och Google http://www.wedholm.net/namngivna-html-ankare-och-google/ http://www.wedholm.net/namngivna-html-ankare-och-google/#comments Sun, 18 Oct 2009 23:45:16 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=1251 Den 25 september meddelade Google att det nu är möjligt för sökarna att komma direkt till den del av målsidan som handlar om det de sökte efter. Om du sätter namngivna ankare (<a name=”introduktion”></a>) i början av de olika kapitlen/sektionerna på sidorna, så kan Google välja att länka besökarna direkt till det aktuella stycket.

För att öka chansen att Google väljer att djuplänka till dessa ankarnamn bör du lägga upp en innehållsförteckning eller liknande som länkar till dem. Det verkar alltså fungera på samma sätt som att få alla sajtens sidor indexerade genom att länka till dem. Sidan bör också vara välstrukturerad och tydligt indelad i kapitel/sektioner.

Min fråga är dock hur Google värderar dessa aningen annorlunda URL:er.
http://www.doman.se/sida.html#kapitel

http://www.doman.se/sida.html

Dessa två URL:er leder ju till samma sida, med skillnaden att den översta säger åt webbläsaren att hoppa ner till <a name=”kapitel”>. Kommer dessa indexeras, värderas och rankas som om de vore två separata sidor?

Jag är lite nyfiken på att testa hur detta fungerar. Jag ser inga nackdelar, det underlättar ju för besökarna att smidigt kunna klicka sig ner till det stycke/kapitel de vill läsa. Om sedan Google väljer att länka direkt dit så är det bara positivt. Det kan göra att besökarna inte återvänder till sökresultatet för att de inte hittar till informationen de vill åt.

http://googleblog…jump-to-information-you-want-right-from.html
http://googleweb…using-named-anchors-to-identify.html

]]> http://www.wedholm.net/namngivna-html-ankare-och-google/feed/ 1 Klickbar logga med CSS http://www.wedholm.net/klickbar-logga-med-css/ http://www.wedholm.net/klickbar-logga-med-css/#comments Mon, 05 Oct 2009 21:10:02 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=1143 Här tänkte jag förklara hur man gör hela området för logon/rubriken klickbar. Det går ut på att placera en A-tagg inuti den DIV som innehåller bakgrundsbilden. A-taggen stylas sedan så att den fyller upp hela denna DIV. Vill du ändra storleken på det klickbara området så ändrar du bara på procentsatserna för höjd och bredd. För att ändra positionen kan du lägga till en margin-top och/eller en margin-left med önskat antal pixlar.

HTML
<div class=”title”>
<a href=”index.asp”></a>
</div>

CSS
.title {
width: 800px;
height: 200px;
background: url(rubrikbild.jpg) no-repeat;
}
.title a {
display: block;
height: 100%;
width: 100%;
}

]]> http://www.wedholm.net/klickbar-logga-med-css/feed/ 0 Skriv till Access-databas med ASP http://www.wedholm.net/skriv-till-access-databas-med-asp/ http://www.wedholm.net/skriv-till-access-databas-med-asp/#comments Sat, 05 Sep 2009 19:36:58 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=1006 Tänkte nu göra en liten guide till hur man enkelt skriver information från ett formulär till en Access-databas i ASP. I detta exempel är det en kommentarfunktion från en av mina sajter som får agera exempel. Först börjar vi med att skapa formuläret i HTML, ni får ursäkta den omoderna tabellösningen utan CSS jag använder här. För att göra det snyggare föreslår jag att du sätter en class på alla input och bilder för att styla dem i en extern CSS-fil.

<table width=”550″ align=”left” border=”0″>
<form method=”post” action=”?do=spara”>
<tr>
<td colspan=”3″ width=”550″><b>Rubrik:</b> (max 45 tecken)<br><input maxlength=”45″ name=”rubrik”></td>
</tr>
<tr>
<td colspan=”3″ width=”550″><b>Text:</b><br><textarea name=”comment”></textarea></td>
</tr>
<tr>
<td width=”245″ valign=”top”><b>Namn:</b><br><input value=”" name=”namn”></td>
<td width=”245″ valign=”top”><b>Hemsida:</b><br><input value=”http://www.” name=”hemsida” ></td>
</tr>
<tr>
<td width=”275″ valign=”top”><b>E-post:</b><br><input value=”" name=”epost”>
</td>
<td width=”275″ valign=”top”><b>Spamskydd:</b><br><img src=”grafik/kod2.jpg”><input value=”" name=”spamprot”></td>
</tr>
<tr>
<td colspan=”3″ width=”550″>
<input type=”submit” value=”Posta kommentar”>
</td>
</tr>
</form>
</table>

När formulärt är färdigt ska vi skriva ASP-koden som hämtar informationen från formuläret, lägger dem i variabler och sedan matar in dem på rätt plats i databasen. Ursäkta att koden är lite slarvigt skriven med en blandning av engelska och svenska.

<%
 If Request.Querystring(”do”) = ”spara” Then
 Set Conn = Server.CreateObject(”ADODB.Connection”)
 Conn.Open ”Provider=Microsoft.Jet.OLEDB.4.0;Data Source=” &Server.MapPath(”databas\db.mdb”)spamprotection = Request.Form(”spamprot”)

If spamprotection = ”34$LkT” Then
 SQL = ”Insert Into comments (title,comment,datum,namn,hemsida,epost) Values(‘” & Request.Form(”rubrik”) & ”‘,’” & Request.Form(”comment”) & ”‘,’” & date & ”‘,’” & Request.Form(”namn”) & ”‘,’” & Request.Form(”hemsida”) & ”‘,’” & Request.Form(”epost”) & ”‘)”
 Conn.Execute(SQL)
 RecSet.Close
 Conn.Close
 Set RecSet = Nothing
 Set Conn = Nothing
 Response.Redirect ”kommentarer.asp”
 Else
 Response.Redirect ”kommentarer.asp”
 End If
 End If
 %>

]]> http://www.wedholm.net/skriv-till-access-databas-med-asp/feed/ 0 Teckenkodning http://www.wedholm.net/teckenkodning/ http://www.wedholm.net/teckenkodning/#comments Wed, 03 Jun 2009 02:24:40 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=832 Om du inte gör en korrekt inställning av vilken teckenkodning som ska användas på din sajt kan det bli problem att visa rätt tecken för många av dina besökare. Du har kanske stött på problem på din egen sajt eller någon annans du besökt. Att t.ex. å, ä och ö inte skrivs ut korrekt utan ersätts med andra tecken.

För det första ska du bestämma dig för vilken teckenkodning du vill använda, och använda enbart denna på hela din sajt. Just nu föredrar jag UTF-8 och då lägger du till följande kod mellan HEAD-taggarna.

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>

Utöver detta kan du behöva konvertera dina HTML-filer i den texteditor eller HTML-editor du använder och därefter spara filen på nytt. I Notepad++ som jag använder görs detta enkelt genom att du väljer ”Format” i menyn och sedan ”Convert to UTF-8″. Om du kommer skapa ytterligare filer kan det även vara bra att välja denna teckenkodning som standard för nya dokument.

]]> http://www.wedholm.net/teckenkodning/feed/ 0 Ge de sociala sajterna vad de förtjänar http://www.wedholm.net/ge-de-sociala-sajterna-vad-de-fortjanar/ http://www.wedholm.net/ge-de-sociala-sajterna-vad-de-fortjanar/#comments Tue, 02 Jun 2009 02:09:40 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=824 Sociala nätverk i form av communities och bokmärkessajter är väldigt populära just nu. De sägs vara det nya sättet för såväl enskilda webmasters som företag ätt marknadsföra sin verksamhet på webben. Många av dessa sajter bygger i stor utsträckning på att andra aktörer på webben länkar till dem genom t.ex. röstknappar eller knappar som låter folk (vanliga användare) lägga till din sajt bland sina bokmärken på den aktuella tjänsten.

Dessa tjänster kan öka din sajts popularitet, det ifrågasätter jag inte. Har du bra innehåll som intresserar många så mycket att de vill tipsa andra om det så kommer fler att få reda på din sajt genom dessa personer. Det jag sätter mig emot är deras flitiga användande av NoFollow på länkarna till alla dessa sajter som utgör deras levebröd. Jag uppmanar er att göra som mig när ni länkar till dessa tjänster. Använder de NoFollow i länken till mig, så använder jag det i min länk till dem. Vill de inte dela med sig av sin länkkraft, så delar inte jag med mig av min.

Så här ser en länk med NoFollow ut:
<a href=”http://www.footbook.com” rel=”nofollow”>Footbook</a>

Om du skapar och publicerarlänkar genom en bloggtjänst så brukar man kunna välja HTML-läge när man skriver sitt inlägg. Välj då detta HTML-läge och leta reda på länken, skriv sen dit det fetmarkerade på motsvarande plats.

]]> http://www.wedholm.net/ge-de-sociala-sajterna-vad-de-fortjanar/feed/ 1 Teckenkodning UTF-8 http://www.wedholm.net/teckenkodning-utf-8/ http://www.wedholm.net/teckenkodning-utf-8/#comments Fri, 10 Apr 2009 04:10:43 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=675 Teckenkodningen UTF-8 har blivit den vanligaste och blir ännu mer populär. Det är viktigt att man deklarerar vilken teckenkodning som används mellan head-taggarna i HTML-filen. Lägg in följande meta-tagg för att deklarera att du använder UTF-8:

<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type”>

Sedan är det viktigt att du sparar dina filer i denna teckenkodning. I Notepad++ kan du t.ex. välja teckenkodning genom att klicka på ”Format” i menyn och välja bland UTF-8 m.fl.

]]> http://www.wedholm.net/teckenkodning-utf-8/feed/ 0 Rambaserad design http://www.wedholm.net/rambaserad-design/ http://www.wedholm.net/rambaserad-design/#comments Sun, 08 Mar 2009 00:06:22 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=350 Det finns några fördelar med en sida som är uppbyggd på olika frames. Dessa gör det möjligt för dig att ha t.ex menyn och logotypen synlig hela tiden för besökarna., vilket i många fall ger en lättnavigerad sida.

Nackdelarna med denna typ av design är dock ganska många. Den största nackdelen är enligt mig att det är i stort sett omöjligt att djuplänka till ditt innehåll och samtidigt göra så att meny och logga syns när man går in via den länken. I en frame-design består index.html av en uppsättning FRAMESET-taggar som bestämmer hur stora de olika områdena ska vara samt vilket innehåll som ska visas när de anropas från index.html (startsidan). Den enda sidan besökaren ser i adressfältet är dindomän.se/index.html. Detta gör att besökare som vill lägga till en specifik sida på din sajt bland sina bokmärken alltid kommer skapa ett bokmärke till startsidan.

Ytterligare ett problem med rambaserad sida är att besökare som hittar den via Google ofta kommer till en undersida som egentligen ska visas i innehållsdelen på din sajt. Om länken på Google pekar mot dindomän.se/produkter.html så kommer besökaren in på produktsidan men ser inte loggan och menyn på din sajt, vilket gör det svårt att fortsätta navigera runt på den. Det finns dock sätt att komma runt detta, så att de övriga delarna ändå visas om man kommer in via ”fel” sida.

Mitt råd är att om du har en rambaserad webbplats så bör du anlita någon som kan göra en ny webbplats utan ramar åt dig, om du inte kan göra det själv såklart. Om du har en inte allt för stor webbplats så skulle jag kunna ta på mig jobbet mot en liten peng.

]]> http://www.wedholm.net/rambaserad-design/feed/ 0 CSS-tips http://www.wedholm.net/css-tips/ http://www.wedholm.net/css-tips/#comments Sat, 07 Mar 2009 23:44:15 +0000 Kristoffer Wedholm http://www.wedholm.net/?p=346 Nu är det på tiden att ge lite grundläggande webbutvecklingstips och jag tänkte berätta om en ganska grundläggande och enkel sak man kan göra med CSS. Det var inte så länge sedan jag började göra på det här sättet. Tidigare satte jag alltid class på länkar och bilder m.m.

Om du t.ex har en div som heter row och vill styla alla länkar och all text i denna kan du skapa en form av underegenskaper till denna.

.row {width: 400px; float: left;}
.row p {text-align: left; font-family: Tahoma, Arial; font-size: 8pt;}
.row a:link {text-decoration: none; color: #000000;}
.row a:visited {text-decoration: none; color: #000000;}
.row a:link {text-decoration: underline; color: #000000;}

Det är smidigt om du vet att allt som ska finnas i elementet ska ha samma egenskaper. Då slipper du skriva ut samma class på alla p-taggarna och kan helt enkelt nöja dig med <p>Text</p>.

]]> http://www.wedholm.net/css-tips/feed/ 0 En hel webbplats på en ASP/HTML-sida http://www.wedholm.net/en-hel-webbplats-pa-en-asphtml-sida/ http://www.wedholm.net/en-hel-webbplats-pa-en-asphtml-sida/#comments Wed, 22 Oct 2008 02:08:50 +0000 Kristoffer Wedholm http://blogg.wedholm.net/2008/10/22/en-hel-webbplats-pa-en-asphtml-sida/ Av någon anledning har jag fortsatt att bygga hemsidor på fler ASP-sidor. En av anledningarna är att om sidan blir väldigt stor och innehållsrik. Då kan det vara bra att dela upp det på fler sidor bara för att slippa en fil på 10000 rader.

Har du däremot en mindre sida, men ca: fem underavdelningar så tycker jag det är en klar fördel att bara köra QueryString’s på index.asp. Du bygger helt enkelt upp sidan i sektioner (som vanligt) och låter helt enkelt innehållsytan bytas ut beroende på vilken avdelning som ska visas.

Säg att du har dessa menyval på din webbplats: Startsidan, Om mig och Mina bilder. Vanligsvis skulle du länka dessa avdelningar till filer (t.ex ommig.html). När vi använder QueryString’s kan vi välja vad på indexsidan som ska visas beroende på vad vi anropar, trots att alla ”sidor” ligger i samma fil.

Du har en innehålls-div på sidan som visar ”Välkommen till min hemsida” eller liknande på startsidan. Jag ska försöka mig på ett kodexempel nu:

<div class=”column_middle”>
<%If Request.Querystring(”page”) = ”” Then%>
<div class=”middle_content”>
<H1>Välkommen</H1>
<p>…Till min hemsida</p>
</div>
<%End If%>
</div>

<div class=”column_middle”>
<%If Request.Querystring(”page”) = ”minabilder” Then%>
<div class=”middle_content”>
<H1>Mina bilder</H1>
<img src=”bild.jpg” mce_src=”bild.jpg”>
</div>
<%End If%>
</div>

<div class=”column_middle”>
<%If Request.Querystring(”page”) = ”ommig” Then%>
<div class=”middle_content”>
<H1>Om mig</H1>
<p>Jag heter Örjan</p>
</div>
<%End If%>
</div>

Istället för att länka till olika HTML-sidor så kan vi nu säga till sidan att visa en specifik QueryString.
<a href=”index.asp”>Startsidan</a>
<a href=”index.asp?page=ommig”>Om mig</a>
<a href=”index.asp?page=minabilder”>Mina bilder</a>
Startsidan vill vi ju ha direkt under index.asp för att besökarna ska komma dit när de skriver in din URL i webbläsaren. Lämnar vi detta tomt (If Request.Querystring(”page”) = ”ommig” Then) så kommer det vara den If-satsen som visas som default.

Självklart kan du använda samma If-QueryString på fler ställen på sidan. Om du t.ex vill att något speciellt ska visas i högerkolumnen när besökaren är inne på en viss avdelning.

Hoppas jag inte har lyckats vara för svårbegriplig.

]]> http://www.wedholm.net/en-hel-webbplats-pa-en-asphtml-sida/feed/ 0 Webbdesignskola: Del 2 http://www.wedholm.net/webbdesignskola-del-2/ http://www.wedholm.net/webbdesignskola-del-2/#comments Wed, 27 Aug 2008 12:45:02 +0000 Kristoffer Wedholm http://blogg.wedholm.net/2008/08/27/webbdesignskola-del-2/ Nu tänkte jag gå igenom hur du använda CSS (Cascading Style Sheet) för att designa din hemsida. Det finns flera fördelar med att använda en stilmall. Den första är att du samlar alla inställningar i en fil och därmed inte behäver göra samma ändring i alla enskilda HTML-filer. Dessutom är det mycket bättre ur optimeringssynpunkt att separera struktur och innehåll från design.

Här är ett exempel på hur en CSS-fil kan se ut, jag använder mig av de klasser jag deklarerade i HTML-filen från del 1 i denna lilla skola. Exemplen blir ganska otydliga eftersom det inte går att skriva kod så bra i bloggtexten.

BODY {
background-color: #FFFFFF;
margin-top: 0px; Gör att en eventuell automatisk marginal i överkant försvinner
margin-bottom: 0px; Samma som ovan  men i nederkant
text-align: center; /*Innehållet centreras*/
}

.main {width: 800px; Yttre DIV:ens bredd i pixlar
background-color: #FFFFFF; Bakgrundsfärg
border: 1px solid; Ram 1 pixel bred och heldragen linje, andra alternativ är ”dotted” och ”dashed”
border-color: #000000;} Ramens färg

.left_column {
float: left; DIV:en lägger sig så långt till vänster  som möjligt, i detta fall till vänster i main-diven
width: 190px;
margin-left: 10px; Bredden+vänstermarginal=200 pixlar
border: 1px dotted;
border-color: #000000;
background-color: #FFFFFF;} Kan skippas om du vill ha samma färg som i main-div:en

.right_column {
float: left; DIV:en lägger sig så långt till vänster  som möjligt, i detta fall direkt till höger om left_column eftersom den står skriven tidigare i HTML-filen
width: 580px;
margin-left: 10px; Bredden+vänstermarginal+högermarginal=600 pixlar
margin-right: 10px; Summan av alla mått blir då 800 pixlar som är bredden på main-diven 
border: 1px dotted;
border-color: #000000;
background-color: #FFFFFF;}

Nu är sidan grovt uppstrukturerad, det som saknas är innehålls-divar som vi lägger i de kolumner vi skapat. Det går jag igenom i nästa del.

 

]]> http://www.wedholm.net/webbdesignskola-del-2/feed/ 0 Webbdesignskola: Del 1 http://www.wedholm.net/webbdesignskola-del-1/ http://www.wedholm.net/webbdesignskola-del-1/#comments Tue, 26 Aug 2008 20:42:12 +0000 Kristoffer Wedholm http://blogg.wedholm.net/2008/08/26/webbdesignskola-del-1/ I denna del tänkte jag förklara hur den grundläggande strukturen av ett HTML-dokument ska/kan se ut. Jag kommer även beröra hur du kan strukturera upp din webbplats innehåll med hjälp av DIV:ar. Här kommer ett exempel på hur alla dina HTML-dokument i grunden ska/kan se ut:

<html>
<head>
<meta name=”title” content=”Hemsidans namn samt mycket kortfattad information/nyckelord”></meta>
<meta name=”description” content=”Beskrivning av webbplatsen”>
<meta name=”keywords” content=”Nyckelord separerade med mellanslag”>
<meta name=”robots” CONTENT=”all, index, follow”>
<meta name=”GOOGLEBOT” content=”all, index, follow”>
<meta name=”revisit-after” CONTENT=”2 days”>
<meta name=”copyright” content=”T.ex ditt namn eller webbplatsens domän”>
<meta name=”distribution” content=”Global”>
<meta name=”language” content=”sv”>
<link href=”style.css” type=”text/css” rel=”stylesheet”>

<title>Din sida – En sida om bla bla</title> 
</head>

<body>
     Här kommer sidans innehåll läggas
</body>
</html> 

Det enda som ska vara unikt för vare enskild HTML-sida är <title>-taggen. Gör en ny för varje avdelning eller liknande som beskriver den aktuella avdelningen på ett bra och sammanfattat sätt. Helst så kortfattat som t.ex ”Dinsida.se – Information” eller ”Dinsida.se – Kontakt”.

Här nedan går jag in lite kort på hur du kan strukturera upp innehållet på din webbplats med hjälp av DIV:ar. Jag hoppar direkt in mellan <body>-taggarna i detta exempel.

<body>
<div class=”main”> DIV:en main påbörjas
        <div class=”left_column”> DIV:en main påbörjas
        </div> DIV:en left_column avslutas

        <div class=”right_column”> DIV:en right_column påbörjas
        </div> DIV:en right_column avslutas
</div> DIV:en main avslutas
</body> 

Genom att tilldela dessa DIV:ar ett ”class-namn” kan vi ge dem alla de egenskaper vi vill i en separat CSS-fil. Det är en mall eller instruktion till webbläsaren för hur informationen ska presenteras. Men det går jag igenom i nästa del.

]]> http://www.wedholm.net/webbdesignskola-del-1/feed/ 0