Åpne alle eksterne lenker i nytt vindu/arkfane med jQuery

Skrevet av den
0

target blank1 Åpne alle eksterne lenker i nytt vindu/arkfane med jQuery

Som webredaktør har man et aldri så lite dilemma, og det er at man ønsker å holde på besøket, samtidig som man vil gi vedkommende relevante lenker. Løsningen er å legge på attributten “target” med verdien “_blank” på alle eksterne lenker. Det kan man fint gjøre om man skriver html-koden selv, og alle moderne WYSIWYG editorer gir deg det som et valg når du legger til en lenke. Men det er litt tungvindt å legge den på hver gang, og det er lett å glemme. Noen vil kanskje synes det er vanskelig å velge riktig “target” på riktig link. Hadde vært kjekt om dette bare virket…

jQuery to the rescue!
Med en liten linje kode kan vi plukke ut alle lenker på siden som begynner med http (det betyr i praksis at de går til en annen website) og sette riktig target. Da slipper webredaktøren å tenke på det. Eksterne lenker åpnes i nytt vindu (eller ny arkfane, kommer ann på innstillinger i nettleseren til den besøkende)

$(“a[href^='http']“).attr(“target”,”_blank”)

Dersom du legger denne linjen i bunnen av siden i en script-tag, så virker det, eller så må du wrappe det i en document.ready-statment.

Det var alt jeg hadde for denne gang. Og husk at “med jQuery og en god kopp kaffe er alt mulig!”

    6 steg til hvordan bygge en bra nettside

    Skrevet av den
    0

    Det kan skrives mye på temaet “hvordan bygge en bra nettside”, men jeg oppsummerer her hva jeg mener er de 6 viktigste stegene til suksess.

    post its 6 steg til hvordan bygge en bra nettside

    1. Bruk et profesjonelt webbyrå, og stol på rådene de kommer med icon smile 6 steg til hvordan bygge en bra nettside
    2. Definer en intern prosjektgruppe med et klart mandat til å ta alle beslutninger knyttet til nettsiden.
    3. Sett opp mål for nettsiden. Hva ønsker vi å oppnå? (selge mer, informere bedre, få flere medlemmer osv – vær konkret og sett opp 3-5 mål)
    4. Definer de 4-6 viktigste oppgavene nettsiden skal løse for brukeren. (bestille billetter, bli medlem, laste ned brosjyre, finne kontaktinfo, søke jobb osv) Spør folk utenfor bedriften, kunder, medlemmer osv.
      (bruk gjerne en brukerundersøkelse. Tips: www.surveymonkey.com)
    5. Sett av dedikert tid og dedikerte ressurser til å jobbe med innholdet. Du trenger ikke nødvendigvis leie inn profesjonell hjelp, men opprett skriveteam på 2-3 personer. Jobb med tekstene og sørg for å være kort og konsis. Test ut tekstene på eksterne brukere, kunder, medlemmer, venner og kjente. Ikke glem innhold når du setter opp budsjett!
    6. Ikke glem nettsiden etter at den er lansert! Sett av dedikerte ressurser til å jobbe med innhold, struktur og bruk analyse til å evaluere målene og til og ta velkvalifiserte beslutninger på alle endringer.

    Følg disse 6 stegene og du får et godt nettsted – lykke til! icon smile 6 steg til hvordan bygge en bra nettside

      display: inline-block og IE7

      Skrevet av den
      1

      Display:inline-block kan ha mange anvendelser. Poenget med inline-block er å ha tilgang til block-styling av et element som skal være inline, f.eks. width, height og margin-top. Det kan være kjekt når man har bilder inline, når man vil fremheve enkelte ord i et setning. Kanskje mer aktuelt når man vil lage en meny, eller fremstille informasjon tabularisk uten å bruke en tabell (ja, men kan bruke display:block, sette bredden, floate osv., men det er vil ofte ble renere kode med display:inline-block).

      Problemet er at IE7 støtter ikke display:inline-block (IE6 tar vi ikke hensyn til lengre…). IE8 og nyere, samt alle andre (nyere) browsere støtter det. Og nå kommer jeg til poenget med denne artikkelen: ved å sette zoom og *display:inline, så får vi til samme effekten i IE7 også.

      I eksempelet under, så har jeg lagd en enkel liste som jeg ønsker skal vises som en horisontal meny (ganske vanlig problemstilling…). Uten zoom og *display, vil IE vise dette som en ordinær liste. Med display-inline står man fritt til å sette width, height, min-width, margin osv. Alt det man trenger for å kunne lage en flott horisontal meny.

      <!doctype html>
      <html lang=”no”>
      <head>
      <title>inline-block</title>
      <meta name=”Description” content=”" />
      <style>
      li {display: inline-block;
      zoom: 1; /* For IE 7 */
      *display: inline; /* For IE 7 */
      }
      </style>
      </head>
      <body>
      <ul>
      <li><a href=”/”>Forside</a></li>
      <li><a href=”/produkter”>Produkter</a></li>
      <li><a href=”/kontakt-oss”>Kontakt oss</a></li>
      </ul>
      </body>
      </html>

        Hvorfor Facebook-feed på nettsiden din er feil

        Skrevet av den
        2

        Det siste halvannet året skal stadig flere av våre kunder ha facebook-feed på forsiden av nettsiden sin. Hvorfor det? spør jeg alltid da.

        fb feed22 Hvorfor Facebook feed på nettsiden din er feil

        Svaret er gjerne en blanding av “tja, det er jo viktig med integrasjon mot sosiale medier?” og “ja, men det må man jo?”

        Her er mine 5 argumenter på hvorfor Facebook-feed på forsiden din er feil:

        1. Det ser helt “crappy” ut. Facebook har enda tilgode å lage fine feeds. De blir trange, uoversiktlige, og gir en dårlig brukeropplevelse.
        2. Facebook skal generere besøk til nettsiden din, ikke motsatt (nødvendigvis)
        3. Sannsynligvis er du altfor dårlig til å ha matnyttig informasjon på FB siden din, så feeden din er uinteressant for besøkende av nettsiden din – de er der for å få løst en oppgave
        4. Nevnte jeg at feeden ser utrolig dårlig ut?
        5. Hvis målet ditt er å skape engasjement og få flere “likes” til FB siden din, så sørg heller for å gi et godt inntrykk på nettsiden, og hjelp brukeren til å løse oppgaver og oppnå mål. Da er tilliten bygget opp til at du kan ha en “besøk oss på Facebook” knapp godt synlig, slik at brukeren kan gå dit og poste skryt på veggen din!

        Nå snakket jeg Facebook-feed ned, men det finnes sosiale integrasjoner som kan funke:

        1. Like knapp. Bruk den på steder det er naturlig å “like”. Kontakt oss siden din vil sannsynligvis ikke få mange likes..
        2. Facebook comments. Kommentarer og diskusjon kan være bra, men vær bevisst og besvar kommentarer
        3. Del knapper. Æsj, jeg er litt lei av del knapper. Bruk det kun om du tror du har så fantastisk innhold at noen kommer til å gidde å dele det.

        Facebook Timeline for pages tvangsinnføres i dag, 30. mars – fokuser heller Facebook-energien din på å rigge pagen din, og lykke til med det icon smile Hvorfor Facebook feed på nettsiden din er feil

          Nettsidenavigasjon, første versjon er alltid feil

          Skrevet av den
          0

          wireframe Nettsidenavigasjon, første versjon er alltid feil

          Det finnes en del elementer på nettsider som vi som brukere er vant til og derfor regner med å finne på faste plasser som f.eks. menypunktet, kontakt oss. Uten å vite noe om deg så tror jeg at du kan fortelle meg hvor kontakt oss bør ligge på en nettside. Det er ikke noe noen nødvendigvis har lært deg, men erfaring tilsier at det bør ligge oppe til høyre. Det samme gjelder mange andre elementer som vi intuitivt vet hvor ligger.

          Problemene oppstår når et navigasjonselement blir for likt et annet og tvetydighet oppstår. Hvor finner du f.eks. info om ansatte hvis du ser tre navigasjonselementer: Om oss, kontakt oss og konsern. Du som bruker må da gjette deg frem og det skaper irritasjon. Det er derfor vi jobber mye med navigasjon og faktisk sier høyt og tydelig: Første versjon er alltid feil.

          Så hva gjør vi for å sikre at du som bruker ikke opplever tvetydighet og hull i navigasjonen? Vi kjører en kortprosess med vilkårlig utvalgte personer. Det deles ut kort der vi har skrevet ned sidestrukturen. En side per kort. Vi setter oss ned med dem og viser kun den overordna navigasjonen og gir en oppgave. F.eks., finn frem til årsresultatet i 2011. Brukeren må da velge mellom følgende felter i navigasjonen: Forside, produkter, tjenester, om oss, kontakt oss, selskapsinfo. Brukeren vil antageligvis fokusere på selskapsinfo og om oss og resonere seg frem til én av dem. Vi fortsetter kortprosessen og brukeren må velge videre i neste nivå og neste nivå frem til brukeren er i mål.

          I en slik prosess må ikke samme person brukes flere ganger siden vi lærer av feilene som gjøres underveis. Jobb kontinuerlig med å forbedre navigasjonen og kontroller den på denne måten frem til du ikke ser flere forbedringsområder.

          Siden nettsider har så mange forskjellige behov og brukeren forventer forskjellig type informasjon til en hver tid så er det vanskelig å lage en standard som fungerer for alle: Derfor sier vi at første versjon alltid er feil.

            Høy fluktfrekvens/
            bouncerate og hvorfor
            du bør bry deg om det

            Skrevet av den
            0

            bouncerate Høy fluktfrekvens/<br />bouncerate og hvorfor <br />du bør bry deg om det

            Stadig flere nettstedseiere bruker Google Analytics.

            Har du lagt merke til Bouncerate eller på norsk, fluktfrekvens?
            (og, før du leser videre, dette innlegget er ikke rettet mot du som er ekspert på analyse, du vet jo selvsagt alt om dette)
            Fluktfrekvens, som jeg synes er mer selvforklarende enn det engelske uttrykket, betyr kort og godt hvor stor prosentandel av besøkende til din nettside som kun ser på forsiden, og så forlater siden. Et “normalt” nettsted i dag ligger på mellom 30-60%.

            Med et annet bilde kan fluktfrekvens sammenlignes med at du får inn 100 besøkende i butikken din, og 30-60 av dem snur i døra.

            Hvorfor får du flukt fra siden din? Her er de vanligste årsakene

            1. Folk finner ikke det de var på jakt etter og går videre.
              Her er vi nådeløse. Vi bruker få sekunder på å avgjøre om nettsiden er relevant for det du for eksempel søkte etter i Google. Et typisk eksempel på en problemstilling er om du ser at du har 50% besøk til siden fra søkemotorer og en fluktfrekvens på 60%. Da er det stor sannsylighet for at de besøkende ikke har funnet siden din relevant i forhold til det de har søkt etter. Se gjerne i oversikten over søkeord de har brukt og se om de er relevant til det du tilbyr.
            2. Siden er treg.
              Tar det for lang tid å laste siden din, er sannsynligheten stor for at brukeren gir opp og klikker på “back” knappen. Les også denne artikkelen fra Digi om trege nettsider.

            Hva kan du gjøre for å få ned fluktraten?

            1. Sørg for at forsiden din er relevant og “to the point”. Tenk “top tasks” og spiss budskapet. Pass på at du ikke har FOR MYE innhold på forsiden. Vi har kunder som har redusert fluktraten fra 60% til 40% etter å ha kuttet innhold på forsiden.
            2. Pisk leverandøren din til å optimalisere sidene slik at de blir raske og laste. Her er stikkord caching og optimalisert kode.

            Så, hva er akseptabel fluktfrekvens? Det er ingen eksakt fasit, men klarer du å holde deg under 30% bør du være meget fornøyd.

              Automatisk åpne bilde-lenker i Fancybox eller liknende

              Skrevet av den
              0

              fancybox 300x289 Automatisk åpne bilde lenker i Fancybox eller liknendeAlt som “bare virker” er kjekt. I denne artikkelen, vil jeg forklare et jQuery script som gjør at noe “bare virker”.  Et vanlig fenomen, er å ha et lite bilde som skal åpne et stort bilde (et produkt bilde, et screenshot eller noe annet). Man kan selvsagt lage en egen side med det store bilde, man kan åpne det store bilde direkte i et vindu, og så kan brukeren lukke vinduet, eller trykke “Back”-knappen.  Men det er ikke særlig bra…

              Dersom man åpne det store bilde i et “modalt vindu”, kan man inkludere f.eks. en plugin som f.eks. Fancybox. Man inkluderer en javascript fil på siden, og i utgangspunktet, så skjer det ingen ting. Man må si hvor man vil trigge Fancybox, og det er her det blir litt vanskelig for vanlige webredaktører, de kan ikke trigge javascript.

              I eksemplene under har jeg et jQuery script som åpner alle lenker til bilder (jpg, png og gif) i fancybox. Dermed kan brukeren legge inn et lite bilde (eller en ren tekst lenke) til et stortbilde, og det blir automatisk åpnet i et modalt vindu, uten å forlate siden de er på. Dette er også veldig søkemotor optimalt, fordi det er en rent html-lenke, som Google og de andre kan følge og indeksere. (Jeg har pakket scriptet inn i document ready, slik at det kan plasseres hvor som helst på siden,eller i en javascript fil, og likevel virke på alle bilde-lenker.)

              Den enkle varianten:
              $(‘document’).ready(function(){
              $(“a[href$='.jpg'],a[href$='.png'],a[href$='.gif']“).fancybox();
              });

              Eller om du ønsker litt mer kontroll, så kan du ta med noen parametere:
              $(‘document’).ready(function(){
              $(“a[href$='.jpg'],a[href$='.png'],a[href$='.gif']“).fancybox({
              ‘transitionIn’    :    ’elastic’,
              ‘transitionOut’    :    ’elastic’,
              ‘speedIn’        :    600,
              ‘speedOut’        :    200,
              ‘overlayShow’    :    false,
              ‘titlePosition’: ‘inside’
              });
              });