www.nitzdesign.se

4 augusti, 2011
av Joacim Nitz
0 kommentarer

Mobila webbsidor

Detta inlägg kommer uppdateras kontinuerligt med mer detaljer.

En mobil webbsida är en helt vanlig webbsida som är optimerad för just mobila enheter som t.ex. telefoner och touchpads.

Det finns många sätt att optimera en webbsida för mobila enheter. Och när man kombinerar dessa så kan användaren få en riktigt trevlig upplevelse när den besöker en webbsida med sin mobila enhet.

Nedan ser ni exempel på webbsidor som är anpassade för mobila enheter bla. Twitter, Smartränta och Smartbudget.


Det som är viktigt att tänka på är ofta skärmupplösningen, enhetens prestanda, hastigheten på uppkoppling och hur användaren matar in information d.v.s. om det är touch eller tangentbord.

En annan mycket viktig aspekt är närvaron. D.v.s. när används den mobila webbsidan och vad vill användaren kunna genomföra. Om dessa skiljer sig mycket från den icke mobila webbsidan så kan det vara en idé att helt enkelt bygga en helt separat webbsida för ändamålet.

Här följer en lista med saker man kan göra för att optimera en webbsida för mobila enheter.

Anpassa utseendet på webbsidan med CSS

Med hjälp av “Media querys” så kan man anpassa utseendet på en webbsida utifrån enhetens specifikationer som t.ex. skärmens upplösning. Ett exempel skulle kunna vara att alla enheter med lägre upplösning än 480 pixlar på bredden ska använda CSS-filen lowresolution.css och alla med högre ska använda default.css.

Lite beroende på om sidan är helt anpassad för mobila enheter eller om man endast anpassat den med CSS för att fungera ”bättre” på mobila enheter. (se nästa punkt) så finns det lite olika saker man bör se över. Ofta handlar det om att skala upp texten, visa allt i en kolumn, öka kontrasten etc.

Skicka vidare användaren till en helt anpassad webbsida

Genom att se vilken webbläsare och/eller enhet användaren har så skickar man användaren vidare till en helt annan webbsida. Dessa mobila webbsidor brukar ligga under en subbdomän t.ex mobil.domänensnamn.se.

Frameworks

Med hjälp av framworks som t.ex jquerymobile.com så kan man efterlikna det mycket populära apparna som finns på t.ex Iphone, Androdi och Windows Mobile. Dessa ramverk är helt anpassade för mobiler. Implementerar man ett ramverk som detta innebär det dock att man måste bygga om sidan helt från grunden. Se punkten ovan.

Optimera bilder, CSS, Javascript och HTML

En ganska självklar punkt kan tyckas. Men man kan nästan alltid optimera mer. Numera kan man ofta återskapa saker man tidigare gjort med bilder med hjälp av CSS. Det gäller runda hörn, toningar, skuggor etc. Gå igenom alla dina CSS filer och rensa upp onödiga saker. Snygga till din HTML och rensa bort onödiga element. Bilderna på din mobila webbsida kan säkert komprimeras mer utan att det syns på en mobil enhet. Du kanske t.o.m. kan utesluta en del bilder.

Lyxa till det för iPhone-användare

Det finns en hel del roliga saker man kan göra för att upplevelsen ska bli ännu roligare för iPhone-användare. Här är en lista med de vanligaste sakerna.

  • Snygg genvägsikon för skrivbordet
  • Bilder för retinaskärm (iPhone4)
  • Skala bort webbläsaren/Fullskärmsläge
  • Skala sidan 1:1 och ta bort möjligheten att zooma
  • En startup-skärm. När man laddar webbsidan via genvägsikonen så kan man visa en bild under tiden sidan laddas.

2 augusti, 2011
av Joacim Nitz
0 kommentarer

Vem ska jag lyssna på?

När man jobbar med grafisk design och webbutveckling vill man ofta ha feedback från användare eller andra likasinnade i ett relativt tidigt skede. Det är ett enkelt och snabbt sätt att veta om man tänker och gör rätt, eller om man bara vill få ännu mer motivation. Det kan handla om enklare saker som val av färger eller mer komplexa ämnen som användargränssnitt.

I mitten av 90-talet använda jag mig mycket av forum där jag kunde ställa frågor och föra en dialog. Även diskussioner på IRC (mIRC) var ett bra forum för att få feedback. Problemet med dessa kanaler/forum var ofta att man inte visste något om de som svarade på frågorna. Och svaren eller kritiken kunde vara lysande eller helt katastrof.

Idag ser det helt annorlunda ut. Antalet forum har vuxit och det finns mycket mer specifikt inriktade forum som t.ex Stackoverflow som är fyllt av grymt duktiga personer. Men även där möter man på problemet ibland.

Här är Twitter ett ypperligt komplement till de tidigare nämnda forumen. På Twitter kan man själv välja vilken kompetens som ska finnas i flödet och man kan nästan alltid ta reda på både vem det är som svara och dess kompetens.

Detta leder mig till i mitt tycke en mycket viktigt aspekt kring ämnet.

”Undvika att lyssna på folk som inte själva levererar.”

Förstå mig rätt. Jag älskar kritik och om någon rätta mig så är jag den första att ge efter. Men om jag inte vet att personen själv kan leverera så faller allt ganska platt.

2 augusti, 2011
av Joacim Nitz
2 kommentarer

Ta vara på fördelarna med att vara ett litet företag

Tänk igenom vilka fördelar ni har mot era konkurrenter och framförallt, vilka fördelar har ni jämfört med ett stort företag? Här är några exempel där större företag ofta lider.

Snabbhet

Stora företag är inte lika snabba i vändningen. Det ska tas beslut, många resurser ska blandas in, möten ska planeras. När ett möte (äntligen) är slut så ska nästa möte planeras in. Allt detta sker fram och tillbaka – ofta innan något ens har påbörjats.

Motivation

Motivation och ett brinnande intresse finns inte alltid hos de anställda i ett stort företag. Självklart finns det undantag. Detta är en de absolut viktigaste sakerna som skiljer ett litet företag från ett stort. Ett exempel på att skapa mer delaktighet och öka motivationen i ett företag är optioner. Men även mindre saker som fester, bra arbetsmiljö och personlig feedback ökar motivationen.

Grundidén

När ett företag växer blir det svårare med tiden att hålla sig till grundidén. Ofta vill man bredda sig och hitta nya inkomstkällor, nya ben att stå på helt enkelt. Detta är på gott och ont och kräver en fin avvägning. Jag tror på ”Keep it simple” och att hålla sig till det man är absolut bäst på.

Personligt

Personligt är ett ord som jag ofta tror försvinner allt eftersom företaget växer. Om något inte är personligt tappar det ofta värde. Det kan handla om allt från kundbemötande, värderingar och vart företaget är på väg.

Dyrare att misslyckas

Större företag må ha mer resurser att prova nya saker med. Men samtidigt blir det enorma kostnader om de misslyckas. Som litet bolag kan man ofta ganska enkelt prova nya saker utan att det kostar en förmögenhet.

”With great power, comes great responsibility. – Spindelmannens farbror Ben :) ”

Stora företag har mycket regler och policies. Vilket ofta hindrar utvecklingen. Utnyttja det!

29 juli, 2011
av Joacim Nitz
0 kommentarer

Att skapa en ikon till en iPhone-app

Jag har de senaste dagarna jobbat med att ta fram en ikon till en iPhoneapplikation som jag och två vänner utvecklar. Mer information om applikationen kommer senare. Vi hoppas att vi kan lansera den inom en månad.

Applikationen är både till iPhone och iPad, vilket gör att det krävs många olika storlekar på ikonen. Detta samtidigt som den ska vara intressant, snygg och förhoppningsvis berätta något om vad det handlar om.

Jag läser just nu en mycket intressant bok som heter ”Iphone App Entrepreneur” som finns i PDF format. Där hittar ni mycket intressant och bra information för alla som utvecklar iPhoneappar.

Ikonen.

Vi har kommit fram till en ikon som vi tycker är snygg. Den säger också en del om vad det handlar om. Tyvärr blir ikonen lite plottrig när man minskar ner den även om det är gjort i vektor. Vi är lite oeniga om vi ska ha likadan bild på alla storlekarna, eller om vi ska ha en in-zoomad variant när man ser de mindre ikonerna.

Vad har ni för åsikter? Lämna gärna en kommentar om vad ni tycker och tänker.

Värt att veta: Första bilden är 114x114px och används på retinaskärm, alltså iPhone4. Den andra är 72x72px och visas på iPad. 3:e 57x57px och visas på Ädre iPhone. Sen är det ikoner för sökresultaten.

22 juli, 2011
av Joacim Nitz
0 kommentarer

Falsk marknadsföring och dålig webb

Senaste tiden har jag irriterat mig på hur företag marknadsför sig och hur dåliga resebolagen är på att visa korrekta priser och erbjudanden på resor. För mig som konsument handlar det inte bara om pengarna. Det är ofta frustrerande och tidsödande att surfa runt bland alla dessa webbsidor.

Resebolagens erbjudanden

Här är en av mina absoluta favoriter just nu. Denna sommar (2011) har jag flera gånger funderat på att boka en resa till värmen. Allt jag ville var att hitta en ”sistaminuten” inkl hotell till Spanien, Italien eller Portugal.

Jag tänker inte dra specifika ”cases” för varje enskilt resebolag. (jag hade en idé om att spela in en film när jag söker runt, men den skulle bli för lång och tråkig)

Som ni säkert förstår handlar det främst om de stora resebolagens webbsidor. Bland annat Ving, Apollo och Fritidsresor. Men jag tror problemet är ganska generellt bland alla resebolagens webbsidor.

Det första jag gör är att Googla efter ”sistaminuten”. Självklart ser jag massa köpt reklam från alla de stora resebolagen. Högst upp ser jag t.ex. texten ”Sista minuten fr. 998:- – Se erbjudanden. | Fritidsresor.se”

Klickar jag på den kommer jag till en lång lista med resor. Högst upp möts jag av en resa för ca 6000 kronor. Jaha, tänker jag och klickar på sortera efter bästa pris. Det jag ser då är en resa för 1998 kronor. Men tyvärr avgår den ”2011-08-16”, vilket är efter min semester, så jag vet inte om jag skulle klassa det som sista minuten? (det är idag 2011-07-21)

Därefter går jag vidare till destination.se där man presentera av mängder av fina erbjudanden från alla de stora resebolagen. När jag hittar intressanta resor så slussas jag vidare till resebolagen vilket är ok.

Tyvärr möts jag hela tiden av texterna:

”Hotell-/flygalternativet du har valt är slutsålt.”

Det går tyvärr inte att boka vald resa till hotell Ospecificerat Boende, XXX”

Bilderna nedan talar nog sitt tydliga språk

Tydligen var man tvungen att åka 2 personer på denna resa.

Vilket trevligt pris, även om jag inte vill dit. Låt oss se vad priset slutar på…

Ahh, resan finns inte kvar. Vilken tur att jag erbjuds en resa för endast 12.000 /per person!

I vissa fall presenteras jag istället av resor för över 50.000 kronor.Det som också är riktigt irriterande är att priserna alltid baseras på att man är två personer, vilket jag inte är. Att företagen (vilka det nu är) dessutom lägger på massa extrakostnader när man väl hittat något intressant är sjukt irriterande.

Dessutom tycker jag rent generellt att alla dessa resebolags webbsidor är röriga, sega och ofta ganska fula. Detta gäller framförallt när man möts av deras registreringsformulär. Helt plötsligt känns det som man har rest tillbaka 10 år i tiden.

Deals/Erbjudanden

Jag har många gånger nämnt problemen med dessa tjänster på Twitter. Iden är faktiskt riktigt bra och jag gillar upplägget som t.ex Campadre har. Men tyvärr finns det många saker som irriterar mig.

Varje dag får man ett e-postmeddelande med nya erbjudande, vilket är bra. Men hur kul är det att klicka sig vidare till en sida där det står slutsålt bara någon timme efter att man fått mailet. Oftast är det lockvaror, dvs. produkter som säljs till riktigt bra priser som är slutsålda. Medans resterande produkter ofta inte i närheten lika intressanta.

  • Lockvaror – Som exempel kunde man köpa en Ipad till riktigt bra pris. Men det handlade om ett fåtal som självklart var slutsålt långt innan jag fick mitt mail. (alla får ju inte det där mailet samtidigt)
  • Storlekar – När det gäller kläder och skor så finns inte alltid alla storlekar. Alla har inte skostorlek 41/42/43.
  • Priserna – Gör man en snabbsökning på t.ex. prisjakt kan man ofta hitta produkterna till lägre priser.
  • Leveranstider – Ofta måste man vänta upp till en månad innan man får produkten. Hur kul är det om man beställer något som man tänkt använda under sommaren?

Vad är slutsatsen?

Jo, det finns mycket som kan bli bättre på nätet. Ofta handlar det om samarbeten som inte alltid är optimalt genomfört. Jag kan tänka mig att många av dessa bolag sitter med gamla system och inte alltid bästa kompetensen när det gäller gränssnitt.

När det gäller reklam/länkar om erbjudanden som inte stämmer eller inte är aktuella så vill jag kalla det falsk marknadsföring!

Tyvärr tror jag att många tröttnar på att leta efter bra priser och helt enkelt köper första bästa resan eller produkten som är långt över det som företaget gjorde reklam för. Man varken orkar eller har tid att klicka runt bland alla dessa skitsidor.

Denna typ av marknadsföring är självklart ingen nyhet och används i alla branscher. Men det blir extra tydligt och frustrerade när man bara vill komma till avslut och resa iväg.

17 juli, 2011
av Joacim Nitz
0 kommentarer

Media center wallpaper

Jag köpte lite nya delar till mitt media center (HTPC) när moderkortet gick sönder. Då var jag självklart även tvungen att uppdatera min bakgrundsbild (wallpaper) i Windows. Annars skulle det inte kännas som att de var nytt. :)

Jag satte ihop en bild i Photoshop som jag tycker blev okey. Finns kanske fler där ute som tycker det så jag tänkte dela med mig av bilden.

Eftersom skivomslagen är personliga så kan ni även ladda ner PSD filen om ni vill ändra dessa. Hur ni gör det får ni lista ut själva ;)

Ni hittar bilden i full storlek här.

PSD filen hittar ni här.

Hoppas ni gillar det.

UPPDATERING 2011-08-25

Nu när jag har köpt mig en Ipad så skapade jag även ett wallpaper utifrån ovanstående tema.


Ladda ner det genom att klicka på bilden nedan.

UPPDATERING 2011-10-14

Var ju tvungen att fixa bakgrund till min Iphone också.





Ladda ner här.

14 juli, 2011
av Joacim Nitz
0 kommentarer

Programmen jag använder

Jag får ofta frågan vilka program jag använder i mitt dagliga arbete. Så här följer en lista med program som jag användare både privat och på jobbet.

Självklart är det inte programmen som avgör hur bra slutresultatet blir. Men ett bra program underlättar och effektiviserar arbetet.

  • Windows
    • Utveckling
      • Visual Studio
      • Notepad ++
      • Ultra Edit
      • Navicat for MySQL
      • Tortoise SVN
    • Grafisk design
      • Adobe
        • Adobe Photoshop
        • Adobe Illustrator
        • Adobe Indesign
        • Adobe Acrobat Professional
    • Webbläsare
      • Google Chrome
      • Mozilla Firefox
      • Safari
      • Opera
      • Internet Explorer
    • Microsoft Office
      • Word
      • Powerpoint
      • Excel
      • Outlook
    • Övriga program

Men OSX då?

Många av programmen jag nämnar här ovan finns självklart till OSX och om något saknas så finns det oftast minst lika bra alternativ. Men eftersom jag själv inte använder min Mac Book AIR till annat än surfa, skriva, cloud tjänster som t.ex Google Docs etc tänker jag inte lista något här.

Men jag hittade denna länk med mycket intressanta program för OSX.

http://37signals.com

14 juli, 2011
av Joacim Nitz
0 kommentarer

Just do it! (Get things done!)

Mycket snack och liten verkstad – ett klassikt uttryck som man stöter på allt för ofta.

Visst är det bra att prata igenom projektet/idéen innan man börjar att lägga ned tid på det. Men min uppfattning är att för varje timme som går minskar chansen att förverkliga idén och du kommer aldrig att se ett resultat om du inte kör igång. Allt måste inte stämma och vara hundra procent genomtänkt när man sätter igång ett projekt.

Något som jag fått erfara flera gånger vid uppstarten av ett projekt är problemet med fördelningen av arbetsuppgifterna. Ofta blir uppgifter som programmering och design tungt belastade från start. Framförallt programmering då det ofta är en av de tyngsta uppgifterna genom hela projektet.

Därför är det viktigt att alla i gruppen hjälper till med omkringliggande uppgifter för att öka motivation.

Här är en lista med arbetsuppgifter som inte är så yrkesrellaterad och som kan utföras med lite sunt förnuft.

  • Marknadsföring
    • Twitter
    • Facebook
    • Forum
    • Kontakta eventuella samarbetspartners
    • Reklam
    • Hitta nya säljkanaler
    • Etc…
  • Kolla upp konkurrenter
  • Se över texter, gärna utifrån ett SEO-perspektiv
  • Budgetplan
  • Dokumentera
  • Planera framtiden
  • Sköta kundsupport
  • Lägga upp en projektplan

5 juli, 2011
av Joacim Nitz
9 kommentarer

Hur lyckas man skapa en bra banner/annons?

Jag har alltid fascineras över hur sjukt många fula banners och reklamannonser som finns på nätet. Jag personligen kan inte förstå hur det kan gå runt eller ger något resultat. Ofta handlar det också om att bygga ett varumärke och då kanske inte resultatet är så viktigt. Men som liten aktör måste man försöka räkna hem det, om än +/- 0.

Vi på Smartbudget letar hela tiden efter nya vägar att marknadsföra oss. Bl.a. har vi flera samarbeten med t.ex. SEB, Kraftum och Mobiletail.

Vi syns även ibland på Aftonbladet via SEB:s reklamsida. Under bara ett par timmar kan det generera flera hundra registreringar vilket är galet bra. Självklart är SEB eller vilken annan bank som helst den perfekta avsändaren för vår tjänst.

Frågan är hur vi ska lyckas med detta utan en avsändare som t.ex SEB.

Vad jag däremot vet är att vi har en hög konverteringsgrad när användaren väl besöker vår startsida. Någonstans runt 30-35% väljer att registrera sig, vilket är extremt kul. Vi vet också att vi har en bra tjänst och många nöjda användare. Så det känns inte som vi ska försöka tvinga på något dåligt som det i många fall handlar om.

Tyvärr har jag ganska lite erfarenhet av vad som är en bra banner. Kanske är det de där Flash-animerade bilderna eller de där sjukt fula illgröna gif-bilderna med 128 färger? Självklart handlar det om mycket mer än utseendet. Allt från budskap, vart den placerad och i vilket sammanhang den visas.

I vilket fall som helst så ska jag skapa lite reklammaterial till ett annonsnätverk. (skulle kunna skriva ett långt inlägg om ”att hitta ett annonsnätverk” en vacker dag, för det är ju lite roligt bara det)

Jag frågade på Twitter om lite feedback och lovade då att återkomma med några exempel som jag har gjort.

Nedan hittar ni banners som jag har gjort. Jag har inte lagt ner mer än några timmar på dessa och vill egentligen bara höra era åsikter, idéer och tankar kring banners och det jag snabbt skissat ihop.

Frågor som jag gärna vill ha svar på.

  • Ska det vara strikt/konkret och seriöst eller roligare och mer lättsamt?
  • Tror ni animationer/Flash är något att ens tänka på?
  • Är det viktigt för oss att ha med logotypen? Vi vill ha besökare, inte bygga varumärke?
  • Går budskapet fram?
  • Vad tror ni om enklare vit ”text”-varianter? Nästan lite Adwords över dem?

Alla idéer och tips är välkomna. Jag är helt ny på detta.

Bild 1

Bild 2

Bild 3

Bild 4

Bild 5

Bild 6

Bild 7

Bild 8

Bilder nedan är uppladdat 2011-07-10.

Bild 9

Bild 10

Bild 11

Bild 12

Bild 13

4 juli, 2011
av Joacim Nitz
0 kommentarer

Mobil webbsida

En mobil webbsida är egentligen en helt vanlig webbsida som är optimerad för just mobila enheter som t.ex. telefoner och surfplattor.

Det finns många sätt att optimera en webbsida för mobila enheter och när man kombinerar dessa så kan användaren få en riktigt trevlig upplevelse när han eller hon besöker en webbsida med sin mobila enhet.

Det som är viktigt att tänka på klientsidan är t.ex. skärmupplösningen, enhetens prestanda, hastigheten på uppkoppling och hur användaren matar in information, d.v.s. om det är touchscreen eller med tangenter/fysiska knappar.

En annan mycket viktig aspekt är närvaron. Dvs när används den mobila webbsidan och vad vill användaren kunna genomföra. Om dessa skiljer sig mycket från den icke mobila webbsidan så kan det vara en ide att helt enkelt bygga en helt separat webbsida för ändamålet.

Mobilanpassad webbsida

Här följer 3 exempel på vad man kan göra för att optimera en webbsida för mobila enheter

  • Anpassa utseendet på befintlig webbsida med CSS – Med hjälp av ”Media queries” så kan man anpassa utseendet på sin webbsida med CSS. Ett exempel är att man utifrån upplösningen bestämmer hur saker och ting ska se ut. (Denna webbsida är anpassa för mobila webbsidor med Media queries. Prova att förminska ner webbläsarfönstret till mindre än 460 pixlar.)
  • Skicka vidare användaren till en helt anpassad webbsida – Genom att ta reda på vilken webbläsare och enhet användaren har så skickar man vidare denne till en helt annan webbsida. Dessa mobila webbsidor brukar ligga under en subbdomän t.ex mobil.domänensnamn.se.
  • Frameworks – Med hjälp av frameworks som t.ex. Jquerymobile kan man försöka efterlikna de mycket populära apparna som finns på t.ex IPhone, Android och Windows Mobile 7.