Detta är den första riktiga tablet-produkten av sitt slag och mer kommer. Användare kommer onekligen att surfa på den och stor chans är att de hamnar på din hemsida. Hur ser din hemsida ut i iPad?

Omskalning och liten yta

Upplösningen på en iPad är 1024×768 (landscape-mode) och 768×1024 (portrait mode) på 132PPI (pixels per inch). iPaden kommer automatiskt att skala om din hemsida så att den passar den lilla ytan och dra ut innehållet så att det fyller skärmen. Detta är inga problem då det är en proportionell omskalning oavsett hur du håller den.

Problemet var att Grafix Studio hade inga marginaler på sidorna vilket resulterade att det såg väldigt hoptryckt ut på sidorna. Ingen luft med andra ord.

En minimal faktor att åtgärda, men för det tränade ögat kan det vara irriterande. Vill lägga till lite luft på sidorna så att designen syns mer i sin helhet.

Lösningen, två olika CSS-filer

Detta löser man smidigt genom att använda två olika CSS-filer, en för landscape mode och en annan för portrait mode, beroende på hur du håller din iPad. Såhär ser koden ut:

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css">
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>

För Grafix Studio blev lösningen att öka padding på sidorna med 10px; Då blev resultatet såhär:

En rätt minimal aspekt för slutanvändaren, men irriterande för de mer insatta webb-användarna, som i slutändan är de som besöker min hemsida.

Observera att det nu är luft längs sidorna, vilket det inte var förut. Någon vidareutveckling för att anpassa hemsidan till iPad har jag ännu inte funderat. Än så länge så finns det ingen ny standard för att designa ”touch”-hemsidor. Detta är något vi alla kommer att komma fram till desto mer tablets som dyker upp och sätter standarden för hur man ska visa hemsidor på den lilla roterande ytan.

Har du ingen iPad för att testa din hemsida. Testa då denna User Agent Switcher för FireFox som simulerar en iPad.

Fler inlägg om Design

• Därför misstags en webbdesigner för att vara en webbutvecklare
• 5 konkreta tips till en säljande design
• Vad kostar en hemsida?
• Dagens publiceringsverktyg i två grupper
• WordPress VS CushyCMS
• Webbdesigner eller Front End Developer?
• Designa utanför din stil
• Gratis CMS

För inte så länge sedan satt jag med två kundjobb som skiljde sig rätt avsevärt i krav och villkor. Det ena jobbet krävde att sidan skulle validera, den andra inte. Denna typ av krav beror oftast på kundens kunskap om hemsidor m.m., men det var en så kallad ”eye-opener” för mig och gav mig inspiration till att skriva 5 anledningar till att strunta i om din hemsida validerar eller ej.

1. Du tjänar pengar på din hemsida genom annonser

En sida med mycket trafik brukar ofta innehålla en hel del reklam, i form av annonser. Annonser brukar ofta hämtas från utomstående tjänster och innehålla trackingkoder. Dessa trackingkoder validerar inte i HTML. Man kan alltid gömma koden med hjälp av URL-förkortare, men det kan vara mycket jobb om man har många annonser och ett väl utarbetat annonssystem på sin hemsida.

2. Du vill ha runda hörn på dina boxar, utan att använda bilder och hacks

CSS3 ger dig möjligheten till att ge din hemsidas boxar rundade hörn. En väldigt trevlig egenskap där du slipper använda bilder. Detta validerar inte då det är CSS3 och den rådande standarden idag är CSS2.1. Såhär ser följande deklaration ut för runda hörn:

<div style="background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;"></div>

…vilket ger dig boxar som ser ut såhär:

Internet Explorer 6, 7 och 8 användare, tyvärr…Ni kan inte se de rundade hörnen…

3. Du vill lägga till en skuggeffekt på dina texter

Den utmärkta egenskapen text-shadow finns i CSS3 och låter dig lägga en skugga på dina rubriker, länkar och paragrafer. Inte detta heller validerar, vilket är synd. Man kan åstadkomma väldigt många fina effekter med denna egenskapen. Egenskapen text-shadow ser ut som följande:

text-shadow: 2px 2px 2px #000;

…och åstadkommer följande:

Användare av Webkit (Safari 3+), Opera 9.5, Firefox 3.1 bör se skuggeffekten.

4. Du vill även ha en skuggningseffekt på dina boxar

Förutom att lägga skugga på dina texter så har du även möjligheten att skugga dina boxar, som du möjligtvis också lagt rundade hörn på! Effekten heter box-shadow och följer samma princip som text-shadow. Följande effekt uppnås:

box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px;

..och resultater blir följande:

5. Du vill börja jobba med transparenta/genomskingliga objekt på din hemsida, utan .png bilder.

Egenskapen kallas opacitet vilket säger vilken grad av genomskinlighet ditt objekt har. Två olika typer av opcaitet finns, den ena styrs genom RGBA och den andra genom Opacity.

Webkit, Gecko och Opera stödjer Opacity, medans Webkit och FireFox 3 stödjer RGBA. Såhär deklarerar du för opacitet:

background-color: rgb(0,0,255); opacity: 0.5;

…och resultater blir följande:

Koden för effekten ser ut som följande:

<div style="padding:10px; background-color: rgb(120,230,45); opacity: 0.5;"> <p>Transparent box</p></div>
<div style="margin:-10px 0 0 0; padding:10px; background-color: rgb(230,120,45); opacity: 0.5;"> <p>Box som är transparent, notera färgskiftningen i höjden. De smälter in i varandra.</p></div>

När du förlitar dig på validering så begränsar du dig en del. Detta innebär inte att du alltid ska strunta i validering, det finns en del anledningar till att försöka få sin sida att validera. Mer om det i ett framtida inlägg, där jag ska skriva anledningar till varför du ska validera.

Har du några roliga exempel på sidor som använder mycket CSS3 och kanske även en del HTML 5?

Fler inlägg om Design

• iPad – en revolution för webbdesign?
• Därför misstags en webbdesigner för att vara en webbutvecklare
• 5 konkreta tips till en säljande design
• Vad kostar en hemsida?
• Dagens publiceringsverktyg i två grupper
• WordPress VS CushyCMS
• Webbdesigner eller Front End Developer?
• Designa utanför din stil
• Gratis CMS

För att lyckas sälja någorlunda hyfsat så finns där några trick som många använder sig av. Vi går igenom vad du bör titta på, tänka på och göra för att din vara ska köpas flera gånger om.

Följ trender

Observera startsidan och scrolla längre ner. Här ser du thumbnails på den senast uppladdade grafiken och du har även möjligheten att sortera efter de mest populära varorna. Ta först en titt på de senaste varorna och se om du finns något mönster. Är där flera sorters knappar som dyker upp i samma motiv? Är det ovanligt många personer som laddar upp grafik i säsongens tema?

Klickar du istället in dig på de populäraste varorna kommer så är det inte svårt att se ett mönster . Bland de populäraste varorna regerar trenderna som ofta håller sig i ett par månader innan en ny trend dyker upp. Dessa trender styrs av köparna, men skapas av kreatörerna.

Fortsätt med trenderna, men var unik

Det är riskfyllt att försöka vara unik om du vill sälja. Vill du vara unik så bör du vara väldigt säker på att din vara ska slå igenom, då du säkerligen kommer att spendera åtskilliga timmar på att få det se så bra ut som möjligt.

Att fortsätta med trenderna och ändå vara unik innebär att du försöker särskilja dig från mängden och lägga din egen klang i det hela. Se det som en naturlig process och en sorts evolution i marknadsplatsen. Saker blir bättre genom utveckling, inte en radikal föränding. Samma princip bör du applicera på dina grafiska varor.

Ett bra exempel är pristabeller. I ett antal månader var det pristabeller som gällde på Graphic River. Pristabeller av den typen som du ser på Basecamp florerade och alla gjorde sina egna varianter. En naturlig utveckling här var att kreatörerna började skapa pristabeller i paket, olika färgvarianter och även att inkludera banderoller och annan tillhörande grafik.

Gör en snygg förhandsvisning

Snyggt och ögonfångande ska det alltid vara, vare sig det är roligt eller tråkigt. När du ska sälja grafik på Graphic River har du alltid möjligheten att skapa en separat bild som fungerar som en Preview till din faktiska fil/grafik. Här ska du tänka ren marknadsföring och annonsering, utan att glömma själva varan du säljer.

Även om din vara inte är något jätteunikt och supersnyggt så kan det vara användbart. Problemet med oss människor är att vi inte är avtrubbade för snygg och kreativ annonsering. Gör detta till din fördel och skapa en snygg förhandsvisning av din grafik när du ska ladda upp den.

Fler inlägg om Design

• Bygg dina hemsidor snabbt!
• IE6 – Du är snart bortglömd
• Hemsidor som säljs från Blocket
• Dagens publiceringsverktyg i två grupper
• WordPress VS CushyCMS
• Webbdesigner eller Front End Developer?
• Designa utanför din stil
• Gratis CMS

Du får bl.a svar på frågor som:

• Vad gör en webbdesigner?
• ;Lönestatistik
• Utbildningsmöjligheter
• Skillnader mellan en anställning och eget företagande
• Viktiga extrakunskaper att lära dig

Bokens ursprung kommer från att det helt enkelt saknas konkret information om vad en webbdesigner gör och jobbar med dagligen. Definitionen av en webbdesigner är också lite oklar och med denna boken vill jag klargöra en del saker som exempelvis arbetsysslor, lön, arbetsplatsen m.m.

Vi går igenom projektet och hur jag tänkte mig att allt skulle resultera:

Ämnet: Webbdesigner

Boken är som sagt tänkt att ge information om yrket webbdesigner. Surfar du runt på nätet idag så finns där alldeles för lite information om vad en webbdesigner faktiskt gör och det enda som dyker upp är HTML och CSS-skolor i samband med webbdesigners som ska skryta om hur duktiga de är m.m. För personen som vill veta vad en webbdesigner gör blir det svårt att sålla informationen.

Ingenstans hittar du rent konkret vad en webbdesigner gör på en arbetsplats, hur det är att vara en anställd webbdesigner eller att vara en webbdesigner som har ett eget företag. Detta tillsammans med information om var man kan utbilda sig och vad man bör ha för kunskaper är nödvändigt att veta innan man gör valet och ska bli en webbdesigner.

Innehållet

Boken är väldigt liten och kompakt, en dryga 22 sidor och tanken är att jag på lång sikt ska utöka den och fylla den med verkliga exempel och intervjuer från andra svenska webbdesigners som har något att tillägga i boken. Trots en väldigt kort bok så är den omfattande och låter dig verkligen få veta hur man blir en grym webbdesigner och svarar även på frågan ”vad gör en webbdesigner”.

Domänet

På lång sikt vill jag att sidan ska ranka högt på flertalet relevanta sökord. Ordet webbdesigner ska givetvis vara med och det blev www.bliwebbdesigner.se. Jag hoppas att detta tillsammans med några kraftfulla inlänkar ger mig det resultat jag önskar.

Betallösningen

SMS-betalning med hjälp av Telenor Mobilstart är vad jag använder mig av just nu. PayPal ska också användas men deras lösning kräver lite mer kodknackande för att vara säkert. Här behöver jag konsultation för att skapa betallösningen.

Telenor Mobilstart tar 1/3 av summan vilket är rätt kraftigt. Däremot så finns där inga månadsavgifter eller liknande och är därför helt OK enligt mig.

Hemsidan

Design och formgivning är en extremt viktig faktoroch det måste vara snyggt och säljande för att ge resultat. Jag följde den grafiska profilen här på Grafix Studio och skaffade även en ny version av min maskot som håller i e-boken, stolt och glad! Designen är inbjudande och modern och kan stå för sig själv ett tag framöver.

Om boken går någorlunda bra kommer jag att skriva en annan nischad bok. Det kommer nog dröja ett tag innan jag ser resultat, om jag ser några alls. Trots chansen att inte få försäljningar så vill jag tro att jag positionerar mig bättre som en expert i ämnet genom att ge ut en informativ e-bok om mitt yrke, så att folk får läsa lite om vad jag faktiskt sysslar med om det nu skulle vara oklart.

Om du driver en egen blogg och är intresserad av att recensera boken för din webbplats, skicka ett brev till mig så får du ett gratis exemplar av boken att läsa.

Det finns olika tekniker för att snabba upp ditt arbete med att bygga hemsidor och jag tänkte dela med mig av några som jag själv utövar.

Kör på din egen stil

Det är rätt vanligt att man ibland känner för en förändring. Man blir trött på att göra hemsidor på samma sätt, även om hemsidorna inte liknar varandra. Bygger du en hemsida så designar du de förmodligen på ”ditt sätt” och du kanske ofta ser hemsidor som du bedömer vara mycket snyggare än dina. Här faller många och försöker då göra något som de inte alls är vana vid. Det kan vara att göra annorlunda layouts, menyer och effekter på bakgrunder och boxar m.m.

Detta är tidskrävande, du bryter ditt flöde och förlorar tid. Istället för att försöka göra något på ett annat sätt försök att göra det naturligt. Bygg dina hemsidor som du alltid gör, utforska gärna lite med designen men jobba som du alltid gör, dvs naturligt.

Var redo med koden

När du gjort färdigt din design kan det vara en bra förberedande åtgärd att ha en del kod redo för att inte börja på noll. Hur mycket kod du har förberett beror på hur lika dina hemsidor är i struktur. Personligen använder jag mig av min preset.css som är min egen version av Eric Meyers reset.css.

Förutom att ha css-koden förberedd så kan du alltid ha en del HTML-kod redo. Personligen så har jag inte det för jag vet inte hur min hemsidas struktur kommer att se ut i slutändan, däremot vet jag vilka css-egenskaper jag använder och kan därför ha en väldigt förberedd css-fil.

Ett vanligt misstag som många gör är att hoppa fram och tillbaka mellan css och html. Big mistake, ditt arbete kommer gå mycket fortfare om du kör html-koden först, lägger upp strukturen och därefter lägger på css:en. Du ökar produktiviteten exponentiellt, garanterat.

Lär dig använda ett CMS

Du kanske tänker ”vad har ett cms med produktiviteten att göra?”. Faktum är att ett CMS på en hemsida är ett krav idag och fler har det som krav till sina hemsidor. Därför är det viktigt att du kan minst ett CMS bra och vet hur du snabbt applicerar systemet på din hemsida.

Detta är förmodligen ett av de mest tidskrävande processer om du inte vet exakt hur du ska göra innan du börjar själva appliceringen.

Hur gör du för att bygga dina hemsidor snabbare? Dela med dig.

Fler inlägg om Hemsidor och Design

• IE6 – Du är snart bortglömd
• Hemsidor som säljs från Blocket
• Dagens publiceringsverktyg i två grupper
• WordPress VS CushyCMS
• Webbdesigner eller Front End Developer?
• Designa utanför din stil
• Gratis CMS

Om du tar dig tid och jämför alla publiceringsverktyg som finns därute så kommer du ganska snabbt lägga märke till att du kan sortera de i 2 olika grupper. Dessa grupper har inga officiella namn, så låt oss kalla de för ”designvänliga publiceringsverktyg” och ”funktionsvänliga publiceringsverktyg”. Vad är skillnaden mellan dessa?

Designvänliga publiceringsverktyg

Hemsidor handlar till en stor del om design och ibland händer det att du skapar en layout som är lite mer av den komplexa typen. Designen innehåller massor av olika placeholders för text, tung grafik som är placerad på genomtänkta ytor. Det kan bli problem när även detta ska vara möjligt att uppdateras med ett publiceringsverktyg. Men det finns verktyg som är vänliga mot mer komplexa layouts.

Dessa publiceringsverktyg låter dig definiera redigerbara ytor praktiskt taget varsomhelst på layouten. Det spelar ingen roll om det är text i sidhuvudet, vänsterkolumnen eller högerkolumnen som ska uppdateras. Genom att definiera ytan tillåter du användare att redigera just det området. Denna typ av ”frihet” gör att dessa publiceringsverktyg är designvänliga.

• CushyCMS
• CMS Made Simple

Funktionsvänliga publiceringsverktyg

Om du vill fokusera på funktionalitet och dynamik så finns det även där en rad olika publiceringsverktyg att välja mellan. Verktyg som fokuserar på funktionalitet brukar inte vara designvänliga, inte riktigt på samma sätt som ovanstående ”designvänliga publiceringsverktyg”. Dock så börjar verktyg som exempelvis WordPress och Drupal med tillägg (plugins) bli allt mer vänliga mot design och mindre begränsade.

Funktionsvänliga publiceringsverktyg fokuserar på att tillhandahålla moduler och tillägg för att göra din hemsida lite mer avancerad. Tillägg för sökmotoroptimering, forum och kontaktformulär är bara ett urval av vad dessa verktyg erbjuder.

Det är upp till dig att avgöra vad som är viktigast för dig att kunna uppdatera och underhålla. Form eller funktion. Många publiceringsverktyg tillåter dig att välja teman, vilket på sätt och vis styr formen samtidigt som de erbjuder mycket funktionalitet. WordPress och Drupal är ett par exempel. CushyCMS däremot handlar bara om att editera text och bild, där möjligheterna är större att välja ut ett specifikt område i layouten och ändra på bild och text.

Vad väljer du?