Horisontale lister

I de forrige innleggene i denne serien har jeg allerede vist hvordan horisonale list kan lages. Det er ganske enkelt: En gir <ul>-elementet en “width” (bredde) som er stor nok til at det er plass til flere <li>-elementer ved siden av hverandre, og bruker “float” (f.eks. “float:left”) for å la <li>-elementene flyte til siden og legge seg ved siden av hverandre.

CSS-en kan se slik ut:

.hor {width:400px; text-align:center; list-style:none;}
.hor li { float:left; width:80px; }

og HTML (markup) slik:

<ul class="hor">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Det gir denne enkle listen:

• Item 1
• Item 2
• Item 3
• Item 4

Stort sett brukes horisontale lister i menyer av forskjellige slag: Horisontale navigasjonsmenyer (som ofte liggen under header, men over overskriften, på toppen av siden), såkalte “breadcrumbs” som er navigasjonsmenyer i poster og innlegg, og i menyer på bunnen av nettsider.

Vi kunne bruke dem til andre ting, for eksempel til å fremstille årsakskjeder eller liknende, slik som her:

• Konflikt →
• Bomber →
• PANG

Poenget er vel at det ikke er noen spesielle grunner til å bruke <ul><li>-konstruksjoner til det. Det er like enkelt å bruker <p>- eller <span>-elementer. F.eks. kunne jeg bruke p-elementer slik:

Konflikt → Bomber → PANG

Selv om det er semantisk riktig og greit nok, er det altså ikke noe stort poeng å bruke <ul><li>-konstruksjoner til dette.

Horisontale menyer

Det virker mer riktig og fornuftig å bruke horisontale lister til meny-fnutter av forskjellige slag. Selv bruker jeg ofte lister til enkle menyer inn i poster eller tekst på nettsider. For eksempel en liste som denne:

• Del 1: Lister
• Del 2: Vertikale lister
• Del 3: Flerkolonnelister

Markup for å lage denne listen er enkel (jeg har tatt ut fil-referanser for å forenkle):

<ul class="horlist center">
<li><a href="#">Del 1: Lister</a></li>
<li><a href="#">Del 2: Vertikale lister</a></li>
<li><a href="#">Del 3: Flerkolonnelister</a></li>
</ul>

CSS-en ser slik ut:

.center { text-align:center; }
.horlist { list-style-type:none;text-align:center;
    width:95%;margin:0 auto; }
.horlist li { display:inline; }
.horlist a { padding:6px 15px; background:#EDEEFE;
    text-decoration:none; color:blue; margin:0; }
.horlist a:hover {color: red; }

Jeg definerer klasser i CSS fordi det kan tenkes at jeg vil ha to eller flere slike lister på en og samme side (om jeg brukte id – # – ville jeg bare kunne ha en per side).

Det som er å legge spesielt merke til ved CSS-en her, er at jeg “styler” linkene i listen (a-elementet) og ikke slik som er vanlig i generelle lister <li> (jeg gir a-elementet padding og background, men ikke <li>-elementet).

Denne måten å gjøre ting på er vanlig i menyer. Grunnen er at når jeg gjør det slik blir det mulig å klikke på menyen selv om en ikke holder cursor akkurat over selve linken – jeg gjør på en måte det klikkbare området større og dermed gjør jeg det lettere for brukerne å bruke menyen.

Legg også merke til at jeg bruker “display:inline” for å gjøre listen horisontal. Det vanlige er “float:left” på liste-elementene, og det er en bedre måte å gjøre det på (støttes av flere browsere). Jeg valgte å gjøre det på denne måten her bare for å vise at det kan brukes som et alternativ.

OK. Neste post i denne serien er om horisontale menyer.

©2012 blogging. All Rights Reserved.

De to foregående innleggene handlet om enkle <ul><li>-lister. Den første viste hvordan HTML og CSS for slike lister ser ut, og det andre litt om hvordan en kan pynte vertikale lister slik at de ser penere ut og skiller seg ut.

I dette innlegget ser jeg på hvordan en kan lage lister i som har flere enn en kolonne. Slike lister er egentlig verken horisontale eller vertikale – de er begge deler.

Vi tar utgangspunkt i en litt lang liste, la oss si en med 12 “items”. En slik liste ser slik ut (jeg tar ikke med alle 12 elementene her):

• Item 1
• Item 2
• …
• Item 12

Det er to måter å gjøre om denne enkle vertikale listen til en liste i flere kolonner. Begge innebærer at vi bruker en såkalt “float”. Enten kan vi bruke “float” i <ul>-elementer og lage flere vertikale lister ved siden av hverandre, eller vi kan bruke “float” i <li>-elementene og lage en liste med flere kolonner.

Flere kolonner i lister – “floating” <ul>

Ved denne metoden brekker vi opp den lange listen i flere kortere og bruker “float:left” i <ul>-elementene for å få dem til å legge seg ved siden av hverandre. HMTL-en ser slik ut:

<ul class="list1">
<li><strong>Item 1</strong></li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul class="list1">
<li><strong>Item 5</strong></li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
<ul class="list1">
<li><strong>Item 9</strong></li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul><div style="clear:both;"></div>

CSS-en som skal til for å få en liste i flere kolonner er ganske enkel:

.list1 {list-style:none; float:left; width:100px; padding-left:20px;}

Jeg bruker en <div> med “clear:both” fordi listen har “float”-elementer. Det gir følgende liste – legg merke til nummereringen av <li>-elementene:

• Item 1
• Item 2
• Item 3
• Item 4

• Item 5
• Item 6
• Item 7
• Item 8

• Item 9
• Item 10
• Item 11
• Item 12

Avstanden til venstre marg bestemmes i “padding-left” og avstanden mellom listene med “width”. Listene kan selvsagt pyntes med annen font, eventuelt kan elementene øverst gis utheves slik jeg har gjort her, og så videre. Men dette er den metoden med “floating” <ul>-elementer.

Flere kolonner i lister – “floating” <li>

Denne gangen ser HTML-koden slik ut:

<ul class="list2">
<li><strong>Item 1</strong></li>
<li><strong>Item 2</strong></li>
<li><strong>Item 3</strong></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul><div style="clear:both"></div>

Også CSS-en er litt annerledes:

.list2{ list-style:none; width:400px; }
.list2 li {float:left;width:100px;padding-left: 20px;}

Dette gir følgende liste (legge igjen merke til rekkefølgen på elementene):

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10
• Item 11
• Item 12

Når listen lages på denne måten flyter elementene over mot venstre (hver med en “width” på 100px pluss 20 px til “padding”. Stilen for “list2″ har en vidde på 400px, så etter 3 ganger 120 px, er det ikke plass til et fjerde element, og det går da til neste linje.

Om vi definerer vidden til for eksempel 490px, kan vi se hva som skjer:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10
• Item 11
• Item 12

Nå kommer en fjerde kolonne til syne, rett og slett fordi det er gjort plass til den i “list2″.

Ok. Nok for denne gang. Neste post skal handle om horisontale lister. Her er linker til artiklene om lister (i en liste):

• Del 1: Lister – innledning
• Del 2 – Vertikale lister
• Del 3 – Lister i flere kolonner

©2012 blogging. All Rights Reserved.

I forrige post hadde fokus på hvordan en laget lister – på HTML-delen – og brukte standardsymboler i listene. Denne posten dreier seg om pynting av lister med andre typer symboler.

Alternativer til bullets og firkanter

Som punktmarkører for <li>-elementer i listen er det fullt mulig å bruke bilder eller andre symboler. Bilder kan være artig og pynte opp en god del. Ulempen er imidlertid at det tar tid (“latency” pluss lastetid), og av den grunn ikke alltid er så lurt.

For å sette bilder inn som arrows kan en bruke:

<ul style="list-style-image: url(arrow.gif);">
<li> .. </li>
</ul>

Alternativt kan vi definere stilen i CSS:

<style type="text/css">
ul { list-style-image: url("/images/arrow.gif") }
</style>

og bare angi listen i HTML med <ul><li>-elementer.

Et godt alternativ til bilde er å bruke små symboler. Det finnes tusenvis av små og artige “Unicode”-symboler (se listen i linken) som er greie å bruke og som ikke øker tiden det tar å laste siden noe særlig. Her er noen eksempler på slike symboler:

• ➽ En liten pil
• ♫ Et notesymbol
• ► En pil / triangel
• ♥ Et hjerte
• ⚠ Varselskilt
• ✬ En stjerne

Symbolene ovenfor ble som du ser også vist i en liste. Slik ser HTML-en for den listen ut:

<ul style="list-style: none; line-height: 1.5em;">
<li><span style="float: left; width: 2em;">➽</span> En liten pil</li>
<li><span style="float: left; width: 2em;">♫</span> Et notesymbol</li>
<li><span style="float: left; width: 2em;">►</span> En pil / triangel</li>
<li><span style="float: left; width: 2em;">♥</span> Et hjerte</li>
<li><span style="float: left; width: 2em;">⚠</span> Varselskilt</li>
<li><span style="float: left; width: 2em;">✬</span> En stjerne</li>
</ul>

Listen er som du ser laget ved å ta ut det vanlige bullet-symbolet (“list-style: none”) og sette inn et “span” i <li>-elementene. I stedet kunne vi ha definert det hele i CSS, gitt listetypen en klasse (“class”), kanskje også gitt symbolene en farge (“color: #FFCB97;”), og på den måten spart gjentakelsene og har laget en type liste vi kunne ha brukt flere ganger uten ekstra ny kode:

<style type="text/css">
.symbol { list-style: none; line-height: 1.5em; }
.symbol span { float: left; width: 2em; color: #FFCB97; }
</style>

Nå kan vi bruke en enklere HTML-kode:

<ul class="symbol">
<li><span>➽</span> En liten pil</li>
<li><span>♫</span> Et notesymbol</li>
<li><span>►</span> En pil / triangel</li>
<li><span>♥</span> Et hjerte</li>
<li><span>⚠</span> Varselskilt</li>
<li><span>✬</span> En stjerne</li>
</ul>

Med denne koden sammen med CSS-stilen får vi:

• ➽ En liten pil
• ♫ Et notesymbol
• ► En pil / triangel
• ♥ Et hjerte
• ⚠ Varselskilt
• ✬ En stjerne

Det at symbolene kan gis den fargen vi ønsker er en annen fordel med bruk av definerte symboler i stedet for bilder – hadde vi brukt bilder av symbolene ville vi ha måttet ha et nytt bilde for å få en annen farge.

OK. Dette er nok for denne gangen. Neste post skal handle om vertikale lister med flere enn en kolonne. Her er linker til artiklene om lister (i en liste):

• Del 1: Lister – innledning
• Del 2 – Vertikale lister
• Del 3 – Lister i flere kolonner

©2012 blogging. All Rights Reserved.

Lister kan være så mangt: Handlelister, matoppskrifter, lister over ting og tang, oppramsinger, de ti beste eller værste av noe. Tusen forskjellige ting. Derfor brukes lister mye på nettsteder og i blogger. Og derfor kan det være nyttig å vite litt om hva en kan gjøre med dem og hvordan ting kan gjøres. I denne posten ser jeg på vertikale lister (lister der elementene ligger under hverandre).

La oss starte med en enkel liste og se hvordan den blir. Vi bruker html-kodene <ul> og <li>. “ul” står for “unordered list og “li” for element i listen. Hele koden ser slik ut:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Og det gir:

• Item 1
• Item 2
• Item 3

Jeg har ikke gjort noe med denne listen – ikke gitt noen stil (CSS), bare ren HTML. Måten den ser ut på skjermen på avhenger av hva som er lagt inn av stil-elementer på denne bloggen (i stilfilen med CSS-definisjoner) og av hvordan nettleseren du presenterer lister på (default-innstillingene). Utseendet vil variere fra nettsted til nettsted og fra nettleser til nettleser.

Elementene (item) har en firkant foran seg. Det er fordi bloggen har en definisjon av liste som bruker “list-style: square”. Om jeg endrer det til “list-style:circle”, altså bruker følgende HTML, ser vi at det blir annerledes:

<ul style="list-style:circle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li></ul>

• Item 1
• Item 2
• Item 3

Om jeg brukte en liste av type <ol> (ordered list) i stedet for “ul” (unordered list), med følgende HTML, får vi en nummerert liste:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

1. Item 1
2. Item 2
3. Item 3

Det er enkelt å legge underpunkter inn i en liste slik at vi får en liste med to nivåer. La oss bruke små sirkler foran underpunktene i listen og rykke listen lenger inn mot høyre. For å lage en underliste under punkt to setter jeg inn en ny <ul> der med nye <ul>-elementer. Slik ser koden ut:

<ul style="margin-left:60px">
  <li>Item 1</li>
  <li>Item 2
    <ul style="list-style:circle">
      <li>Item 2.1</li>
      <li>Item 2.2</li>
      <li>Item 2.3</li>
   </ul>
   </li>
 <li>Item 3</li></ul>

Jeg har brukt style=”margin-left:60px” i den første <ul>-en for å flytte listen mot høyre og “list-style:circle” for å bruke rundinger som markeringer i underlisten under punkt 2:

• Item 1
• Item 2
  • Item 2.1
  • Item 2.2
  • Item 2.3
• Item 3

Og det var det. I neste post er det mer om vertikale lister. Her er artiklene om lister (i en liste):

• Del 1: Lister – innledning
• Del 2 – Vertikale lister
• Del 3 – Lister i flere kolonner

©2012 blogging. All Rights Reserved.

Nede i venstre sidebar på denne bloggen finner du en teller fra Bloggurat. Den er egentlig ganske morsom, men kanskje også litt trist. Den sier at det er en ny teller og at vi må vente litt. Og det høres jo greit ut.

Problemet er bare at det ikke er slik det forholder seg. Det er en gammel teller. Den er et par år gammel. Men den sluttet å fungere som den skal da jeg tok i bruk en såkalt “cache”-plugin på denne bloggen. Det er vanlig å bruke slike plugins i WordPress-blogger, og det finnes flere typer. Jeg bruker en som heter “Hypercache”.

Det er jo litt trist at et nettsted som skal telle opp antall brukere på forskjellige blogger ikke er i stand til å telle fordi bloggen bruker en helt vanlig software. Men slik er det. Hadde bloggurat brukt et javascript – aller helst er asynkront javascript – så ville de klart det.

Så der er det – en bloggteller som ikke kan telle på blogger som forsøker å laste sidene raskt. Ja ja …

©2012 blogging. All Rights Reserved.

Det er enkelt å lage en horisontal linje med HTML:

<hr size="8px" noshade="noshade"
        style="margin: 0 auto; width: 80%; color: yellow;" />

skal for eksempel gi en pen, gul linje som er 8px tykk. Her er en slik linje, 80% bred og sentrert:

Hvordan den ser ut for deg avhenger imidlertid av hvilken browser du bruker! Og det er nettopp det som er problemet: <hr> fungerer ikke i alle browsere. Koden ovenfor gir en flott gul linje som er rundet i endene i Firefox. I de fleste browsere ser den helt ok ut. Men i Google Chrome kommer det opp en stygg, grå linje som er 8px tykk. Uten å gå i detaljer, så skyldes dette at de forskjellige browserne implementerer <hr> på svært forskjellige måter.

Derfor er det greiest å unngå å bruke <hr>. Det er ganske enkelt å lage en pen <div> som fungerer i alle browsere og som ser lik ut i dem alle. Jeg bruker

<div class="line"></div>

Jeg bruker CSS for å “style” linjen og gi den rom (padding) over og under. Fargen på linjen definerer jeg som en egen “klasse” i CSS, slik at jeg enkelt kan bytte farge om jeg vil det (her bruker jeg en forholdvis tykk linje for å illustrere, men det er enkelt å lage tynnere linjer også). Slik ser CSS for linje(ne) ut:

.line { height: 8px; line-height: 8px; font-size: 8px;
-moz-border-radius: 8px; border-radius: 8px; padding: 0;
margin: 15px auto; width:90%;}
.maroon {background:maroon;}
.lime {background:lime;}

Jeg bruker “border-radius” for å lage avrundede ender på linjene (dette fungerer i de fleste browsere – jeg har sjekket IE, Firefox,Chrome, Safari og Opera, men IE viser ikke avrundingen og har vanlige rette hjørner). Jeg bruker “margin: 15px auto” for å gi et rom på 15 pixels over og under og for å sentrere linjen.

Nå kan jeg enkelt sette inn pene linjer som fungerer i alle browsere:

<div class="line maroon"></div> , og
<div class="line lime"></div>

gir disse linjene:

Jeg har laget en liten demo-side som viser noen flere linjer (også noen litt tynnere). Ved å vise source code for demo-en kan du se koden og kopiere eller modifisere den om du ønsker det.

©2012 blogging. All Rights Reserved.

Er du opptatt av at nettsidene dine eller bloggen din skal laste raskest mulig? Det bør du være! Raskere lasting gir en bedre brukeropplevelse. Og dessuten har Google begynt å legge vekt på hastighet når de rangerer nettsider på søkeresultatsidene sine.

Etterhvert har det kommet en del gode nettsteder for måling av hastigheten på nettsider. De gir også tips som er nyttige for å øke hastigheten på sidene. De jeg bruker mest er Pingdom – som gir en del gode råd, men virker til å være “allergisk” mot amazon-annonser, WebsiteOptimalization.com – en svært god tjeneste som jeg liker godt, og WebCentric, som også er svært god. En grei måte å bruke dem på er å teste sidene før og etter endringer for å se om en har foretatt seg noe som faktisk gjør sidene raskere eller om de har blitt tregere når en legger inn noe nytt.

En annen type nyttige redskaper YSlow og PageSpeed. Begge disse er “addons” til Mozilla Firefox. Når du ber dem om det analyserer de en hvilken som helst nettside du er i ferd med å browse. De bruker litt forskjellige regelsett som de gir score til nettsider ut fra, men stort sett er det høy korrelasjon mellom resultatene. Begge to gir også nyttige råd om optimalisering og ting som kan gjøres for å gå siden til å laste raskere, og begge har gode linker videre til forskjellige siter hvor en kan lese mer og til brukbare hjelpemidler. Her er et eksempel på bruk av dem i analyse.

Google Chrome er også nyttig. Om du høyreklikker på en nettside og velger “Inspect element” og ser på “Timelines” kan du se hvordan nettsiden laser, både rekkefølgen og tiden det tar. Veldig nyttig!

©2012 blogging. All Rights Reserved.

Google legger nå vekt på hvor raskt en nettside laster. Sider som laster sent får en lavere ranking i søkemotorene enn sider som laster hurtig. Dette, sammen med det faktum at brukerne stort sett ikke liker nettsider som laster sent, burde være god grunn til å legge vekt på å få nettsider til å laste så kjapt som mulig.

Det er en lang rekke faktorer som bestemmer hvor raskt en side laster. Så mange at det er viktig å prioritere riktig når en setter i gang å jobbe med å øke hastigheten. Selve serverens hastighet er selvsagt en sentral faktor. Den skal vi se nærmere på i et senere innlegg.

En liten fil som heter ”.htaccess” og ligger i root-directoriet på serveren er kanskje det du bør gjøre noe med aller først og prioritere på topp. Denne lille filen kan brukes til å styre en lang rekke ting på serveren. Fra et hastighetsperspektiv er den viktig fordi den kan brukes til å sende filer til brukernes browsere i komprimert format – som gzip-filer – og fordi den kan stilles inn slik at sentrale filer på nettstedet lastes og oppbevares i browsernes deres – de blir cachet. Begge disse tingene påvirker hastigheten, men på litt forskjellige måter.

Komprimering

Komprimering av filer gjør at filene serveren sender over nettet til brukernes browsere blir mindre. Størrelsen kan reduseres med opptil tre fjerdedeler. Dermed kan mer sendes på kortere tid til browseren og websiden din laster raskere. Mange webhotell støtter imidlertid ikke komprimering fordi det øker CPU-bruken på serveren.

Det er to alternative kommandoer i ”.htaccess”-filen som kan brukes til dette formålet. På en Apache-server kan files se slik ut:

# compress text, html, javascript, css, xml:
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

Eventuelt, om metoden ovenfor ikke støttes på serveren din, kan du bruke:

<IfModule mod_deflate.c>
<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Du kan lese mer om “.htaccess”-filer om komprimering hos BetterExplained og AskApache.

For å sjekke om komprimeringen fungerer kan du bruke GIDZipTest – en online tjeneste for dette.

Sette cache i .htaccess

Når du setter headere som gjør at en del filer lagres midlertidig i brukerens browser øker du ikke hastigheten på siden din i for seg. Det du gjør er å sørge for at en del ting blir lagret slik at siden lagrer raskere neste gang brukeren besøker siden. Om du bruker CSS, javascripts eller bilder på flere sider på siten din, vil også neste side laste raskere enn den første siden brukeren besøker, fordi en del av elementene i siden allerede ligger lagret på brukerens PC.

Caching av filer i brukernes browsere gjøres med kommandoen ”Header set”:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

“Header set” støttes av de aller fleste Web-hotell fordi det reduserer belastningen på serverparkens båndbredde. Om du bruker Yslow fra Yahoo og sjekker siden din, vil du se at den nå bruker en brøkdel av båndbredden og dermed også laster mye raskere gang nummer to.

Hva med din server?

Problemet er at ikke alle Webhotell (Web hosting sites) gir deg tilgang til komprimering av filer. Spesielt gjelder dette dersom du bruker de rimeligste formene for Web hosting. På min site får jeg for eksempel ikke bruke ”Deflate”, så jeg må nøye meg med at sette Expires headers på filene mine.

For å finne ut hva som støttes på din server kan du sende en email til support, chatte med support om det er en mulighet, eller rett og slett prøve deg frem.

Hvordan sette opp en ”.htaccess”-fil på serveren?

Det er ikke spesielt vanskelig. Alle kan gjøre det. Omtrent slik:

1. Skriv filen med notepad eller et annet program som lar deg lagre filer i rent tekst-format.
2. Lagre filen som ”.htaccess” uten filtype (dvs. ikke ”.htaccess.txt” eller liknende)
3. Bruk et FTP-program (Dreamweaver, Filezilla, eller liknende) og last filen opp i root-directory for nettstedet ditt
4. Sjekk om nettstedet fungerer som vanlig – om ingenting kommer opp på skjermen, betyr ikke det at noe katastrofalt har skjedd, men antakelig bare at du har lagt inn en kommando i filen som serveren ikke støtter. Når jeg legger inn komprimering i min ”.htaccess”-fil på denne serveren, skjer for eksempel det. Da er det bare å endre ”.htaccess”-filen, laste den opp igjen og prøve på nytt.

Når alt fungerer og siden din er synlig, kan du sjekke om komprimeringen fungerer (dersom du har lykkes å legge inn det) og om ”cache”-ing funger ved å bruke tjenestene jeg har linket til ovenfor.

Lykke til!

©2012 blogging. All Rights Reserved.

Jeg liker fart. Ikke minst på internett. Det er nesten ikke noe som irriterer meg mer enn neesteder som laster og laser uten at noe skjer. Treige nettsteder. Ofte kommer jeg til slike etter et søk på nettet, og ofte klikker jeg meg videre før neetstedet har rukket å laste ferdig dersom det går veldig tregt. Kanskje går jeg glipp av noe veldig viktig på denne måten, men det får jeg finner meg i. Det er i alle fall bedre enn å vente og tvinne tommeltotter.

Siden jeg er glad i fart på nettet støtter jeg entusiastisk initiativet fra Google, Yahoo og andre for et raskere nett og nettsteder som laster kjappere. “Let’s make the Web faster,” sier Google. Det synes jeg er flott. Etter mitt sn gir raskere weibsider en bedre brukeropplevelse. Og forskningtyder visst også på at folk an dler mer jo rasker nettstedene de skal handler på er.

Google har også gitt webmastere og folk som eier/driver nettsteder sterke incentiver for å forbedre nettstedene sine og gjøre dem raskere. For nå som Google lanserer “instant search”, har de også gjort det klart at de tar hensyn til nettsidehastighet når de bestemmer søkemotorrangering:

You may have heard that here at Google we’re obsessed with speed, in our products and on the web. As part of that effort, today we’re including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.

Så vidt jeg kan skjønne har både vanlige internettbrukere og folk som driver nettsteder og er seriøse felles interesser med Google i denne saken: Kjappere nettsteder er bra både for brukere og for de som publiserer stoff eller driver kommersielle nettsteder.

Men det er viktig å legge merke til at Google ved å ta hensyn til nettsidehastighet gjør Search Engine Optimization (søkemotoroptimalisering – SEO) enda vanskeligere. Nå er det ikke lenger godt nok med bra stoff, gode titler og så videre – nå må også serveren og nettstedet være bra! Ingen andre enn folkene i Google vet helt hvor viktig denne fatoren er, men jeg tror den er relativt viktig og forestiller meg at den vil bli viktigere over tid.

I det siste har jeg brukt masse tid på å optimalisere server-settings, finne raske steder å hoste nettstedene mine på, optimalisere settingene for WordPress-bloggene mine og mekke med kode for å gjøre sidene raskere. Det er en ganske komplisert affære, men så vidt jeg kan se gir det ganske raskt utslag i besøkstallene. Og om du merker at dine egne tall går nedover eller ikke øker så raskt som du mener de skulle, så kan det skyldes at du ikke har gjort nok som webmaster!

Fremover har jeg tenkt å skrive en serie med posts her på denne bloggen om å øke hastigheten på nettsider generelt og WordPress-blogger spesielt. Etterhvert å ha brukt masse tid har jeg finnet en del triks som jeg mer en gjerne deler. Det er mange forskjellige forhold som spiller inn – server setup, server stabilitet, koden som brukes, WordPress konfigurering og plugins, med mer.

©2012 blogging. All Rights Reserved.

Det å lage pene bokser på en blogg eller et nettsted med flott runde hjørne var for bare kort tid siden en relativt stor jobb med en god del mekking. For å få det til måtte en lage seg fire bildefiler med fire avrundede hjørner og med de riktige fargene, og deretter måtte en konstruere en boks ut fra flere DIV-er inni hverandre og posisjonere hjørnene riktig. Det var ikke egentlig så forferdelig vanskelig, men det var tidkrevende og krevde en del pusling med kode.

Etter at CSS3 har kommet, og etter at vi nå har fått browsere som støtter deler av de nye CSS3-standardene, har dette (og mye annet) blitt langt lettere. Nå er det faktisk veldig lett å lage avrundede hjørner. Her er den grunnleggende koden for en boks med runde hjørner i CSS3 (vi må imidlertid bruke flere ganske like linjer for å støtte browsere basert på webkit og mozilla-maskinene):

.box { border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px; } 

Med bare litt ekstra kode for farge og slike ting, får vi lett boksen på høyre side. Svært enkelt faktisk – så enkelt at alle kan få dette til og ha nydelige bokser med runde hjørne på nettsidene eller bloggene sine!

Browsere som støtter CSS3 støtter også “box-shadows” og “text-shadows”. Og skyggelegging kan brukes sammen med runde hjørner om en ønsker det. Den grunnleggende koden for å få til dette er også enkel:

.box2 { box-shadow:5px -5px 10px #000;
             -webkit-box-shadow:5px -5px 10px #000;
             -moz-box-shadow:5px -5px 10px #000;
          border-radius:20px;
		-moz-border-radius:20px;
                -webkit-border-radius:20px; }

Med bare litt ekstra formattering gir denne enkle koden og boks nummer to til høyre i teksten. Rimelig greit og enkelt, ikke sant? Og pent også, synes jeg. Skygge-effekten pynter opp og fremhever boksen. (Her er en demo-side med disse to boksene og med HTML og CSS-koden.)

Du kan også gjøre hvert enkelt av hjørnene runde med webkit- og mozilla-baserte browsere:

-moz-border-radius-topleft  / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Og – om du ikke ser runde hjørner i teksten ovenfor, så er det ikke fordi det er noe galt med koden, da bruker du en broswer som ikke støtten den nye flotte CSS3-standarden, og da er det kanskje på tide at du bytter til en mer moderne browser! (Antakelig bruker du Internet Explorer, og trenger å laste ned og bruker Firefox, Opera 10.5 eller nyere, Safari eller Chrome!) Lykke til!

©2012 blogging. All Rights Reserved.