business

Mobile first – But don´t fuck up the desktop!

Anders Tufvesson 12 maj 2016

Jag reser en del med tåg. Tillräckligt för att komma upp i svart nivå på mitt SJ Prio och jag är inte speciellt drabbad av tågtrafikens problem med förseningar. Jag har heller inte tyckt att gamla sj.se varit krånglig eller svår att använda. Jag tycker den var relativt överskådlig och lättanvänd. Jag bokar 95% av alla mina resor på min Macbook Pro som är kopplad till en Asus 21:10-skärm. En väldigt bred skärm som är större än en laptop på höjden också. Jag har med andra ord ganska mycket utrymme.

Hur disponerar nya sj.se min skärm? Så här:

sj.se - startsida

Men snälla designers som gjort det här. Om jag flyttar bak min stol 5 meter och tar av glasögonen så ser jag fortfarande väldigt tydligt. Vad hade det varit för fel att slippa scrolla för att se de sista fälten? Jag förstår att jag måste scrolla när jag sitter på min iPhone, men när det gäller desktop/laptop/dator så är jag FETTRÖTT på den nya trenden där vi skall scrolla för att se det vi behöver få se. När vi analyserar sajter med verktyg som Hotjar är det väldigt tydligt att alla inte scrollar. Det är inte ett invant beteende. Långt ifrån alla surfar på sin mobil och above the fold är inte en bara en gammal tidningsreferens. Det är viktigt även för dagens moderna webbplatser.

En annan sak på sj.se är att när jag skriver ut mitt kvitto för resan för reseräkningen blir den på fyra (4!!!!) A4-sidor mot en (1)  förut. Ja, men hallå! Hur är det möjligt? Skall vi behöva tänka ”Paper first”?

I flera år har det bara pratats om ”mobile first” på alla stora internetkonferenser. Vilket är helt rätt, för att förut var det ett problem att webbplatserna inte anpassades till mobilen. Nu skulle jag vilja lägga till ”Mobile first – But don´t fuck up the desktop!”. Vi måste tänka rätt i alla storlekar på skärm.

Och sj.se är inte de enda som gör detta. Norwegian är där också (och flera andra). När jag som användare kommer till deras sajt skall jag välja land. Jag har tolv (12) val. Tror ni att Norwegian har fått plats med det på min skärm utan att scroll?

Norwegian

Om jag bor i Frankrike, Polen Nederländerna eller ett annat land är det scroll som gäller.

Nu är det dags att tänka om när det gäller scroll och hamburgermenyn på desktop. Vi har till exempel gjort ett test att ha endast hamburger-meny i desktopläge på ninetech.com. Längd på besök och antal sidor per besök har gått ned. Du får en sajt som är betydligt sämre överskådlighet på. Det är lite som att du sätter dig i en ny bil och förvånat konstaterar att pedalerna är borta. När du frågar försäljaren vart pedalerna är får du tillbaka att du måste klicka på spaken till höger om ratten först. Då dyker pedalerna upp. Smart va?

Jag vill gärna ha mitt desktopläge så jag får överblick. Jag vill att vi använder utrymmet och att det är supertydligt vart vi är i strukturen på sajten och vilka valmöjligheter jag har. Och när jag ändå håller på att gnälla. Gör inte webbplatser där jag inte kan bokmärka eller skicka/dela en sida för att hela webbplatsen är en jättescroll.

Det är dags att ge sig ut på konferenser och skrika: Mobile first – But don´t fuck up the desktop!

 

Etiketter:

12 maj 2016 |

3 Kommentarer

  1. Kommentar av Candie den 20 maj 2016 kl: 0:07
    Candie skriver:

    This is way more helpful than annihtyg else I’ve looked at.

  2. Kommentar av Kaycee den 20 maj 2016 kl: 0:12
    Kaycee skriver:

    Keep it coming, wrretis, this is good stuff.

  3. Kommentar av Anna den 29 juni 2016 kl: 8:59
    Anna skriver:

    Du har verkligen helt rätt, varför ska man behöva scrolla hela tiden på en desktop, det går lättare och smidigare om allt var på en skärm.

Tyck till! :)

Lite praktik på Ninetech

Sofia Håkansson 17 maj 2013

Tjena!

Nej det är inte Sofia utan praktikanten William. Jag fick i uppdrag att göra ett blogginlägg för att jag ska få prova wordpress också, så tänkte skriva lite om vad jag har gjort här.

Men för det första så vill jag säga att det har det varit jättetrevligt och roligt att praktisera här på Ninetech!

Jag har skapat ett bildspel av några av bilderna från Kroatien. Och jag har även skapat dom som en HTML slide show input med Bootstrap och prettyPhoto.

bootstrap-img

Det var första gången jag använde Bootstrap och prettyPhoto så det var lite roligt att testa hur dom funkar. Båda bildspelen gick bra att göra (inputen är inte färdig än). Och det andra bildspelet gjorde jag i PowerPoint.

pretty_photo_lightbox(WHY DOESN’T THIS PICTURE RESIZE??)

Och så har jag jobbat med engelska översättningar till Ninetechs hemsida (så ni vet vem ni ska klaga på om det är konstigt, hehe :P), vilket var ett sätt att utforska och prova EPiServer. EPiServer verkar som ett bra verktyg och lätt verktyg att utveckla sidor med.

Nej nu ska jag göra något annat, See Ya!

/William

Etiketter:, , ,

17 maj 2013 |

1 kommentar

  1. Kommentar av Thaddeus Parks den 03 juni 2013 kl: 3:18
    Thaddeus Parks skriver:

    Och så har jag jobbat med engelska översättningar till Ninetechs hemsida (så ni vet vem ni ska klaga på om det är konstigt, hehe ), vilket var ett sätt att utforska och prova EPiServer. EPiServer verkar som ett bra verktyg och lätt verktyg att utveckla sidor med.

Tyck till! :)

Ibland är innovation bättre än revolution

Mattias Norell 30 maj 2012

Jag fick min första dator, en Apple Macintosh IIvi, när jag var 15 år. Utan att överdriva kan jag säga att detta förändrade mitt liv. Inte så mycket för att vi nu hade en dator hemma utan för att det var just den datorn, en Apple Macintosh IIvi.

På den här tiden hade ingen av mina vänner en Appledator. De hade, citat, ”riktiga datorer”, slutcitat. Deras datorer använde MS-DOS eller, om de hade en riktig bra dator, Windows 3.1. När de sa ”riktig dator” menade de en dator som det fanns spel till, en vara som det på den tiden fanns ytterst få av till Apples datorer. De få spel som fanns krävde mycket bättre datorer än den jag hade för handen på hjärtat, Apple Macintosh IIvi var ingen snabb dator. Där emot hade den öppnat dörren till en helt ny värld för mig. Jag var inte speciellt imponerad av många av de spel mina vänner hade så att det inte gick att spela på den gjorde inte så mycket (jag hade min Playstation) utan jag började utforska hur den fungerade. Vad det egentligen var som fick en dator att starta och fungera. Detta ledde i sin tur till att jag började lära mig bygga webbsidor, gick vidare till att förstå hur databaser fungerade och slutligen lärde mig programmera både för webben och andra plattformar.

Nu för tiden går det att köpa en bra dator för några tusen. Det skulle gå att uttrycka det på ett annat sätt: dagens 15-åringar behöver i stor utsträckning inte tänka så mycket på själva datorn utan kan spela sina spel, lyssna på sin musik och sedan uppdatera sin Facebook-status om något som är världsnyheter för dem utan att bry sig om datorn klarar av det. På sätt och vis har datorernas otroliga utveckling skjutit sig själv i foten då även om mängden datoranvändare idag är fler än någonsin är det inte en lika stor del som sätter sig ner, lär sig hur och varför datorer fungerar som de gör. Något som över tid kan leda till problem för hela it-branschen.

Denna slutsats kom även en grupp engelsmän fram till. Antalet elever i brittiska skolor som gick datortekniska linjer sjönk och intresset för hur datorer fungerade hade bytts ut till ”hur får jag flest re-tweets på Twitter”. De bestämde sig för att ge brittiska skolbarn en liten knuff i rätt riktning. Raspberry Pi Foundation, och i förläningen resultatet Raspberry Pi, föddes.

Raspberry Pi är en dator i storleken av ett kreditkort.  Den är inte speciellt kraftfull eller användbar jämfört med dagens datorer utan den är byggd med en enda tanke, att den ska vara enkel att leka med och lära sig av. Prestandamässigt går den att jämföra med en dator från åren 1997-2000 men med trumfkortet att tack vare en potent grafikkrets kan spela upp film i full hd-kvalité samt rendera 3D-grafik i hög upplösning. Man skulle kunna säga att den, bortsett från grafikchipet, är en ganska medioker sak. En modern smartphone i stil med iPhone 4S eller Samsung Galaxy SII springer segervarv runt en Pi om man ser till processorkraft. Men, om man enbart ser till processor och ramminne har man missat poängen. Den här lilla datorn kan för dagens 14-15-åringar vara det min gamla Applebruk var för mig. En väg in på vad som i mitt fall visade sig vara helt rätt spår i livet. Den har det som behövs för att lära sig allt från att bygga webbsidor till avancerade 3D-spel. Har man dessutom elkunskaper kan man enkelt (nåja) bygga ut sin Pi med egen hårdvara. Den är kort och gott ett roligt sätt att lära sig hur en dator fungerar, inte genom att läsa hur man kan göra i en bok utan praktiskt lära sig genom att göra det själv. Att en Raspberry Pi endast kostar 35 dollar gör det förmodligen ännu enklare för skolor, föräldrar och dataintresserade att motivera ett köp. Det priset är dessutom för premiummodellen, det finns en budgetmodell för 25 dollar.


Raspberry Pi är en väldigt liten men väldigt trevlig sak.

Det är kanske inte svårt att förstå varför jag lyfter på hatten för personerna bakom Raspberry Pi-projektet och önskar att skolor även i Sverige beställer både en och tusen exemplar. Inte för att jag tror en Raspberry Pi omvänder alla landets skolungdomar till dataingenjörer men några kommer säkert upptäcka något de inte annars skulle gjort. Det är såklart inte den slutgiltiga lösningen på att få ungdomar intresserade av datorer men några skulle säkert ta det till sig och vilja lära sig mer. De andra som inte får samma aha-upplevelse kan säkert komma på något annat att använda den till.

Uppdatera sin Facebook-status till exempel.

Etiketter:,

30 maj 2012 |

1 kommentar

  1. En bit ur ”Ibland är innovation bättre än revolution” | blog.mattiasnorell.com skriver:

    […] Läs resterande inlägg på Business by web. « Säg hej till familjens nya medlem – del 3 […]

Tyck till! :)

Gör GDI+ till ett minne blott – använd WPF!

Anders Tufvesson 03 mars 2012

I var och vart annat projekt man sitter i (i alla fall när det gäller e-handel eller integration) så skall det skalas bilder. De skall ha bestämda storlekar, bestämda bredder, de ska beskäras och ramas in.

GDI+ ligger under System.Drawing vilket har en liten drawback, ända upp till senaste versionen av .NET (4.5) så skriver Micosoft så här på MSDN:
Classes within the System.Drawing namespace are not supported for use within a Windows or ASP.NET service. Attempting to use these classes from within one of these application types may produce unexpected problems, such as diminished service performance and run-time exceptions. For a supported alternative, see Windows Imaging Components.
GDI+ ligger säkerligen på många av våra webbar och i många av våra Windows-tjänster och fungerar riktigt bra, men varför chansa i fortsättningen? Dessutom kan jag tycka att resultatet av det som GDUI+ genererar inte alltid är tillfredsställande ur en kvalité. Men det finns en lösning!

Windows Imaging Components

Det finns två sätt att arbeta med Windows Imaging Components (vidare kallat WIC). Det ena är via Windows Presentation Foundation (vidare kallat WPF) och det andra är via COM. Det senare alternativet kan vara användbart där vi har problem med trust eller vi inte vill programmera i något av de språk som tillhandahålls inom ramen för .NET. Men för den här gången kommer vi fokusera på C#.

Tanken jag har med detta lilla blogginlägg är att ge er alla lite hjälp på vägen, lite kod ni kan kopiera och utgå i från i era egna projekt. Så slipper ni skriva allt från början, vilket gör en övergång ganska mycket smidigare.

Jag har fokuserat på tre olika typer av bildomskalingar.

  • En omskalning där vi håller en av sidorna konstant och låter den andra skala efter behov. Det här är det klassiska sättet att skala om bilder.
  • Där vi använder en fixerad storlek (både höjd och bredd) på resultatet och lägger in vår omskalde bild i denna, så att den får plats.
  • Samt en tredje variant där vi, likt vår förra variant, använder en fixerad storlek på bilden men den här gången så skalar vi ner bilden så att en av sidorna exakt matchar en av resultatet sidor och sedan beskär vi bort överflödet av bilden.

Klassisk omskalning

Den klassisk omskalningen är bara ”vänligt” implemneterad, med det menar jag att den alltid kommer att skala om en bild proportionellt. Den väljer alltid den skalning som blir minst om man anger båda parametrarna, annars kan man skicka in 0 (noll) på en av dem för att vara övertygad om att skalning sker med den aktuella parametern i avseende.

private BitmapFrame ResizeImage(BitmapSource input, int width, int height) {
  double newHeightRatio = (height / (double)input.PixelHeight);
  double newWidthRatio = (width / (double)input.PixelWidth);

  if (newHeightRatio <= 0 && newWidthRatio > 0)
    newHeightRatio = newWidthRatio;
  else if (newWidthRatio <= 0 && newHeightRatio > 0)
    newWidthRatio = newHeightRatio;

  var scale = Math.Min(newWidthRatio, newHeightRatio);
  if (scale > 1)
    scale = 1;
  var target = new TransformedBitmap(input, new ScaleTransform(scale, scale));
  return BitmapFrame.Create(target);
}

WPF innehåller en så kallad BitmapSource som transformerar vår bild, denna tar emot en transformationstyp och .NET tillhandahåller några standardiserade. Dessa är

  • MatrixTransform
  • RotateTransform
  • ScaleTransform
  • SkewTransform
  • TranslateTransform

Just nu kommer jag enbart att fokusera på ScaleTransform eftersom det är den som är mest intressant för mig, men här kan vi lätt modifiera koden ovan för att exempelvis rotera eller skeva en bild istället.

Det här sättet att skala bilder med WPF är det snabbaste och ger en helt godkänd bildkvalité. Vi har inte heller någon möjlighet att direkt påverka bilddjupet, resultatbilden kommer i detta fall att ha samma upplösning (DPI) som orginalet.

Det här är ressultatet av en sådan här omskalning. Jag har talat om att bilden skall vara 200 px hög.

Det inte den här metoden ger möjlighet till är att välja vilken algoritm som skall användas för omskalningen. För att kunna ange detta måste vi använda ett annat sätt när vi skalar om bilderna, och förlorar då effektivitet. Det här är en avvägning man får göra i fall till fall, dock tycker jag att den algoritm som används av exemplet ovan ger en bra bildkvalité till en bra hastighet.

public BitmapFrame Resize(BitmapFrame input, int width, int height, BitmapScalingMode salingMode, int dpi) {
  var group = new DrawingGroup();
  RenderOptions.SetBitmapScalingMode(group, scalingMode);
  group.Children.Add(new ImageDrawing(photo, new Rect(0, 0, width, height)));
  var targetVisual = new DrawingVisual();
  var targetContext = targetVisual.RenderOpen();
  targetContext.DrawDrawing(group);
  var target = new RenderTargetBitmap(width, height, dpi, dpi, PixelFormats.Default);
  targetContext.Close();
  target.Render(targetVisual);
  var targetFrame = BitmapFrame.Create(target);
  return targetFrame;
}

I exemplet ovan kan man se hur vi kan välja både skalningsmetod och djup i bilden som vi producerar. Vi använder en helt annan metodik för att skala bilderna vilken tar mer kraft från systemet.

Skala en bild och placera den i en ram

Om man alltid vill ha en fast storlek på bilderna, tillexempel till en produklista där det skulle se otroligt dumt ut om bilderna var i olika bredder eller höjder, kan man välja att lägga dem i en ”omgivande ram”. Lösningen är vanlig och gör det mycket enklare att designa webbplatser.

public BitmapFrame ResizeAndFit(BitmapSource input, int width, int height) {
  if (input.PixelWidth == width && input.PixelHeight == height)
    return BitmapFrame.Create(input);

  if (input.Format != PixelFormats.Bgra32 || input.Format != PixelFormats.Pbgra32)
  input = new FormatConvertedBitmap(input, PixelFormats.Bgra32, null, 0);

  var scale = Math.Min((double)width / input.PixelWidth, height / (double)input.PixelHeight);
  if (scale > 1)
    scale = 1;

  var x = (int)Math.Round((width - (input.PixelWidth * scale)) / 2);
  var y = (int)Math.Round((height - (input.PixelHeight * scale)) / 2);
  var scaled = new TransformedBitmap(input, new ScaleTransform(scale, scale));
  var stride = scaled.PixelWidth * (scaled.Format.BitsPerPixel / 8);
  var result = new WriteableBitmap(width, height, scaled.DpiX, scaled.DpiY, scaled.Format, null);
  var colorFrame = GetColorBitmap(width, height, Brushes.White);
  var colorFrameStride = colorFrame.PixelWidth * (colorFrame.Format.BitsPerPixel / 8);
  var colorFrameData = new byte[colorFrame.PixelHeight * colorFrameStride];
  var data = new byte[scaled.PixelHeight * stride];

  colorFrame.CopyPixels(colorFrameData, colorFrameStride, 0);
  scaled.CopyPixels(data, stride, 0);

  result.WritePixels(new Int32Rect(0, 0, width, height), colorFrameData, colorFrameStride, 0, 0);
  result.WritePixels(new Int32Rect(0, 0, scaled.PixelWidth, scaled.PixelHeight), data, stride, x, y);

  return BitmapFrame.Create(result);
}

private BitmapSource GetColorBitmap(int width, int height, Brush color) {
  var renderBitmap = new RenderTargetBitmap(size.Width, size.Height, 96, 96, PixelFormats.Pbgra32);
  var drawingVisual = new DrawingVisual();
  using (var context = drawingVisual.RenderOpen()) {
    context.DrawRectangle(color, null, new Rect(0, 0, size.Width, size.Height));
  }
  renderBitmap.Render(drawingVisual);
  return renderBitmap;
}

Den här typen av omskalning blir lite mer avancerad. Här måste vi nämligen rita ut vår omskalde bild i en ytterligare bild. Först så ser vi till att båda våra bildformat är på samma format, om vår inkommande bild inte är 32bitars RGB (Bgra32) så omvandlar vi källan till detta, exempel på andra format kan vara 16bitars RGB eller CMYK.

Efter detta skalar vi ner bilden så att den får plats i vår ram. Det vi gör är att vi räknar ut proportionell skalning i både X- och Y-led för att sedan välja den som är minst. Det kommer vara den skalfaktor vi använder för att se till att bilden får plats i vår destinationsstorlek.

Som standard är vår nya skrivbara bitmap transparent, detta fungerar mycket bra för PNG och kanske till och med är önskvärt. Det vi i så fall gör är att vi raderar våran colorFrame från koden ovan och låter inte denna skrivas till bilden. När vi skalar foton är det i de flesta fall önskvärt att spara bilderna som JPEG eftersom det tar minst plats. JPEG stödjer inte transparens och därför måste vi måla vår bakgrund i en önskad färg.

Vi kopierar sedan över vår bakgrund och därefter vår bild till vår destination och returnerar denna. Omskalningen är klar!

Det här är resultatet. Jag har talat om att jag vill ha en bild som är 500 px bred och 200 px hög, och med blå bakgrund.

Skala en bild och beskär det som inte får plats

Om du vill ha en fast bildstorlek men inte vill ha en ”ful” färgad ram kring din bild så kan det vara nog så bra att beskära bort en del av bilden. Om dina orginalbilder ligger väldigt nära dina omskalade bilder i proportioner så är detta ett utmärkt alternativ, på bilderna som jag använder blir resultatet dessvärre mycket sämre. s

public BitmapFrame ResizeAndCrop(BitmapSource input, int width, int height) {
  if (input.PixelWidth == width && input.PixelHeight == height)
    return BitmapFrame.Create(input);

  var useScaleH = (width / (double)input.PixelWidth) * input.PixelHeight;
  var newSizeH = 0;
  var newSizeW = width;
  if (useScaleH < height) {
    var newSizeH = height;
    var newSizeW = 0;
  }

  var scaled = ResizeImage(input, newSizeW, newSizeH);
  var x = ((scaled.PixelWidth - width) / 2);
  var y = ((scaled.PixelHeight -height) / 2);
  var stride = scaled.PixelWidth * (scaled.Format.BitsPerPixel / 8);
  var result = new WriteableBitmap(width, height, scaled.DpiX, scaled.DpiY, scaled.Format, null);
  var data = new byte[scaled.PixelHeight * stride];
  var copyWidth = scaled.PixelWidth - (scaled.PixelWidth - width);
  var copyHeight = scaled.PixelHeight - (scaled.PixelHeight - height);
  if (x < 0) {
    x = 0;
    copyWidth = scaled.PixelWidth;
  }
  if (y < 0) {
    y = 0;
    copyHeight=scaled.PixelHeight
  }

  scaled.CopyPixels(data, stride, 0);
  result.WritePixels(new Int32Rect(x, y, copyWidth, copyHeight), data, stride, 0, 0);

  return BitmapFrame.Create(result);
}

Det här ser mer avancerat ut än vad det är. Vi måste först räkna ut vilken sida som, när vi skalat ner bilden, kommer att vara lika stor som den nya bilden medan den andra sidan är större. När vi gjort det kan vi skala ner bilden proportionellt.

Vi skapar därefter en destinationsbild som är exakt så stor som vi vill ha den. Eftersom vår nedskalade bild är större än denna måste vi räkna ut en ram som skall användas för att beskära bilden. Det gör vi genom att räkna ut hur mycket som ”hänger över” i bredd- och höjdled. Vi centrerar bilden genom att dela dessa värden i hälften och koperar nu över de pixlar som ligger inom ramen till vår destinationsbild.

Viktigt att notera här är att om orginalbilden är mindre än destinationsbilden så kommer vi bara kopiera över bilden till det övre vänstra hörnet. Det är för att vi inte vill sträcka ut bilden och förstöra den. Det bästa är inte använda denna metod vid sådana bilder, utan i stället lösa det problemet på annat sätt, exempelvis genom att lägga en ram kring den.


Det här är resultatet. Jag har talat om att bilden skall vara 500 px bred och 200 px hög. Min orginalbild är stående och denna liggande, därför förlorar vi mycket av bilden. Två bildformat som ligger nära varandra i proportioner resulterar

Avkoda och koda bilder från disk/ström.

För att allt det här ska fungera behöver du också några småsaker, exempelvis en bild-decoder och en bild encoder. Självklart finn detta inbyggt och är inte direkt rocket-sience. Här kommer lite exempel:

Stream orginalImage = null; //Load stream from image-file or like.
var orginalImageDecoder = BitmapDecoder.Create(
                                    orginalImage,
                                    BitmapCreateOptions.PreservePixelFormat,
                                    BitmapCacheOption.None);
BitmapSource source = orginalImageDecoder.Frames[0];

När du skall spara dina omskalade bilder kan du göra det i sex format som Microsoft tillhandahåller. Dessa är

  • BmpBitmapEncoder
  • GifBitmapEncoder
  • JpegBitmapEncoder
  • PngBitmapEncoder
  • TiffBitmapEncoder
  • WmpBitmapEncoder

alla dessa format används på samma sätt som nedan. JpegBitmapEncoder har dessutom möjlighet att sätta kvalité för kompressionen.

Stream resizedImage = null; //Init a writable stream for the destination
BitmapFrame resizedImageFrame = null; //Frame from one of the resize algorithms above.
var targetEncoder = new JpegBitmapEncoder(){
    QualityLevel = 85;
};
targetEncoder.Frames.Add(resizedImageFrame);
targetEncoder.Save(resizedImage);

Jag hoppas att det här har väckt dina tankar lite kring att kanske använda WPF för att göra din bildmanipulering i framtiden.

Etiketter:, , , , , , , , , , , , , , ,

03 mars 2012 |

0 Kommentar

   Inga kommentarer än... Bli den första!

Tyck till! :)

I love New York – ett nytt grepp

Anders Tufvesson 17 maj 2011

I mitten på 70-talet var New Yorks rykte inte på topp. Hög brottslighet gjorde att staden behövde marknadsföra sig utifrån ett turistperspektiv. De hyrde in en reklambyrå som gjorde en kampanj men också den grafiske designern Milton Glaser. Det var Milton som kom på den numera klassiska bilden:

Troligen fick Milton inspiration av en kampanj som kom redan 1969 och hette Virgina is for lovers. Hur som helst är det idag en av de mest kopierade logotyperna i världen. Men alla kopior tillför inte något nytt förutom möjligen den svenska staden Hjo som lite fyndigt för till det med ”I live Hjo” som leker lite med det svenska och engelska språket. Men i genren turiststadslogotyper har inte mycket hänt sedan 70-talet. Tills nu.

Amsterdam har nämligen fått till det. Dessutom på ett sätt som inte går att kopiera. I varje fall i de fall där stadens namn inte börjar på am. Vad har då Amsterdam gjort? Jo, det här:

17 maj 2011 |

6 Kommentarer

  1. Kommentar av Anders den 18 maj 2011 kl: 13:35
    Anders skriver:

    I Istanbul kör man också en variant: http://www.tish-o.com.tr/shops/He-istanbul_ljplbvftyisoawvcytpwnnbjrlhxpaqa2761274_52690

  2. Kommentar av Anders Tufvesson den 18 maj 2011 kl: 14:42
    Anders Tufvesson skriver:

    Kul! Bra att det finns städer som bryter sig loss från I <3-konceptet.

  3. Kommentar av Lars Falkman den 18 maj 2011 kl: 15:24
    Lars Falkman skriver:

    Copenhagen med OPEN som en knapp mitt i loggan. Open for you. Hmmm – rimmar illa med den främlingsfientlighet som grasserar i Danmark.

  4. Kommentar av Lars Falkman den 18 maj 2011 kl: 15:25
    Lars Falkman skriver:

    http://www.opencopenhagen.com/

  5. Kommentar av Anders Tufvesson den 18 maj 2011 kl: 18:27
    Anders Tufvesson skriver:

    Klingar lite falskt…

  6. Pingback av Amsterdam – bortglömd weekendresa « Business by web den 06 augusti 2011 kl: 8:59
    Amsterdam – bortglömd weekendresa « Business by web skriver:

    […] Rom och Berlin fram. Men en pärla som ofta glöms bort är Amsterdam. Deras smarta sätt att göra turistlogotypen har vi redan skrivit om här på Business by web. Nu vill vi slå ett slag för staden med alla […]

Tyck till! :)

Färjestad – Brynäs hade 5531 åskådare!

Anders Tufvesson 09 mars 2011

Jag har tidigare bloggat om att det är de små detaljerna som kommer bli viktigare och viktigare för en webbplatsägare. Ibland är det tyvärr stora detaljer. I måndags försökte jag köpa 3 biljetter till Färjestad – Brynäs på Löfbergs Lila Arena via ticnet.se. Det var min fru, min dotter och hennes kusin som ville gå. Jag letade därför billiga sittplatsbiljetter. Observera att bilderna nedan inte är den match jag skriver om utan nästa hemmamatch. Funktionen är ändå samma.

Jag valde en biljett till ordinarie pris och två ungdomsbiljetter. Ticnet kommunicerade så här:

Allting var frid och fröjd. 395 kronor och Tufvesson klickade glatt på ”Bekräfta”. Nästa steg gjorde mig lite ställd. Vad vill Ticnet att jag skall göra nu? Jag skall lägga till att jag har provat på en Mac, tre stycken Pc med olika webbläsare och får samma resultat. Jag kom hit:

Mina biljetter står i den grå rutan, men priset är för en ordinarie vuxenbiljett med serviceavgift. Mina biljetter skulle kosta 395 kronor plus serviceavgift. Det största problemet är ändå hur jag skall gå vidare i processen. Här tog det stopp. Färjestads BK missade sin chans att få 5534 betalande besökare här. Hur många fler har de missat på grund av det här?

09 mars 2011 |

1 kommentar

  1. Vad skall du tänka på när du e-handlar – del 1? « Business by web skriver:

    […] som gör att köpet inte går igenom. Se exempelvis en tidagare bloggpost där jag försökte köpa biljetter till en Färestadsmatch. Det kan vara att varan du har beställt inte kommer, att varan är sönder, att det är fel vara […]

Tyck till! :)