Du läser detta förmodligen för att du hört talas om Responsive Web Design. Det pratas mycket om det inom webbdesign och webbutveckling idag och allt fler designers och utvecklare börjar använda sig av tekniken.

Med hjälp av lite CSS3 och Media Queries kan man idag anpassa sin layout till olika upplösningar/fönsterstorlekar. Tekniken är lätthanterlig och enkel att förstå…

Men det finns olika vägar att implementera tekniken, främst vad gäller kompatibilitet med dagens moderna webbläsare. Du kan läsa mer om vilket tillvägagångssätt som passar dig här.

Hur fungerar det?

Jo, med hjälp av mediaqueries anpassa du layoutens struktur till olika upplösningar. Du ställer in min- och maxvärden och så fort en webbläsare läser sidan i angiven storlek ändras layouten..Såhär ser koden ut:

@media only screen and (max-width: 480px) {
/*DIN CSS-KOD HÄR*/
}

Koden ovan appliceras på allt under 480px;

Man kan tillämpa denna teknik på två sätt, antingen med en s.k fluid layout, eller en fixed layout. Alltså flytande boxar och element angivna i procent, eller fasta bredder angivna i pixlar/em. Vilket av dessa ska man tillämpa och varför?

Fixed vs Fluid

Fixed – din design är konstruerad efter fasta bredder rakt igenom hela designen, även vid de olika fönsterstorlekarna. Det betyder att om du testar din layout så ”hoppar” den till den nya layoutstrukturen först när du når min/max-bredden som du angivit i din mediaquery…Exempelvis så här: http://www.fork-cms.com/

Fluid däremot anpassar sig efter skärmstorleken hela tiden eftersom den är konstruerad med flytande bredder, angivna i procent. Så fort du ändrar fönsterstorlek kommer du därför att se din layout ändras konstant. Någon verklig förändring i layouten sker dock först när fönsterstorleken når angiven min/max-bredd i mediaqueryn – samma princip. Exempelvis såhär: http://themetrust.com/demos/reveal/

Vilken ska man använda och varför?

I min mening är fluid bäst att använda – eftersom den är mer framtidssäker. Att ange sin layout i procentenheter gör den framtidssäker för kommande mobil/surfplatta som möjligtvis har en annorlunda storlek på skärmen – det kan mycket väl hända…

Men jag har bestämt mig att först och främst använda fixed layouts. Detta eftersom det är både enklare och snabbare att implementera, samt att med fixed layouts har du mer frihet i designen – det måste inte vara en alldeles för simpel design. Det blir även lättare att mobilanpassa befintliga hemsidor om man går på fasta värden, för då slipper man omvalnda alla fasta px till procent!

Med en fluid layout måste man ofta hålla det enkelt – om man inte vill ha alldeles för mycket att håla reda på…I min värld har jag alltid designat efter fasta värden och det tar väldigt lång tid att omvandla en av mina designs till en fluid layout eftersom jag måste räkna fram allt i procent – vilket inte är så praktiskt att göra…

Mycket låter bra i teorin – men är en annan sak vid praktisk tillämpning…
Givetvis går det att blanda fluid och fixed-layouts. Efter lite mer erfarenhet i tillämpningen kommer jag att göra det.

För att ni ska få en överblick och förståelse för hur WordPress växer i allmänheten vill jag lista dessa företag samt vem de är och vad dem gör.

Situation STHLM

Situation Sthlms publicistiska målsättning är att skapa debatt och opinion runt frågor som rör den sociala verksamhetens målgrupp – hemlösa människor.

Tidningen har 141 000 läsare per månad och är den enda tidningen i Stockholm vars syfte är att uppmärksamma de hemlösas situation. Deras tidningsförsäljare medverkar själva i tidningen och de uppmuntrar aktivt sina försäljare att delta i deras skrivarverkstad.

Syfte med kurs: Drifta ett antal utomstående bloggar som finns i deras nätverk.

Maridea

Maridea bygger och vårdar varumärken strategiskt, tar fram koncept för effektiv marknadskommunikation och förslag på kommunikationskanaler. Rent konkret så producerar Maridea grafiska varumärkesplattformar, annonser, broschyrer, tidningar och reklam för internet och rörliga medier.

Syfte med kurs: Att sköta mindre hemsideproduktion själva istället för outsourcing.

Silviahemmet, Svenskt Demenscentrum

Svenskt demenscentrum (SDC) invigdes den 15 februari 2008. Bakom centret står Stiftelsen Stockholms läns Äldrecentrum och Stiftelsen Silviahemmet. Uppdraget kommer från Socialstyrelsen och regeringen som finansierar verksamheten. Svenskt Demenscentrum (SDC) arbetar som en sambandscentral. En kunskapsbank inom demensområdet byggs kontinuerligt upp för att samla och sprida information. SDC arbetar även aktivt för att driva på en positiv utveckling av vård och omsorg för personer med demenssjukdom.

Syfte med kurs: Att se möjligheterna vid en eventuell rekonstruktion av befintlig wordpresshemsida.

BioThema

BioThema ägnar sig helt åt luminiscens analys. De utvecklar och producerar reagenser och kit för ATP-analys och reporter-gene analys. Deras mål är att utveckla innovativa lösningar som fokuserar på sina kunders behov inom akademi och industri.

Syfte med kurs: Göra om hemsida till WordPress

Det var 4 av kursdeltagarna. För fler deltagare besök hemsidan för kurser i wordpress.

WordPress erbjuder många olika funktioner som man kan anpassa till alla möjliga behov. I det här fallet var det kursanmälningar som var topp-prioritet och en ny utmaning för Grafix Studio. Silviahemmet önskade en uppfräschning av deras befintliga design, till en mer modern och överskådlig layout med enkla möjligheter till uppdatering och underhåll.

Utöver det så önskas det vara möjligt att lägga upp kurser, med möjlighet till anmälan direkt på hemsidan. Anmälda besökare får efter registrering ett bekräftelsemail på sin anmälan och det får även Silviahemmet..

Design

Silviahemmets förra design följer en grafisk profil och denna skulle även fortsätta följa med i den nya designen. Strukturen skulle vara någorlunda lik, dock modernare och lite mer ”design” i det hela…

Resultat blev det ni nu ser på www.silviahemmet.se. Den grafiska profilen är något Grafix Studio inte är riktigt van vid att arbeta med, men det blev en rolig ny erfarenhet!

Kursanmälan

Tidigare så använde Silviahemmet en utomstående tjänst för att hantera sina kursanmälningar. Detta ville de slippa och därför blev det att anmälningarna flyttades till själva hemsida istället.

Hur går detta till?

Jo, Silviahemmet har nu möjlighet att lägga till kurser med följande egenskaper:

• Kurstitel
• Kursbeskrivning
• Registreringsdatum
• Kursdatum
• Antal platser
• Gruppregistrering

När registreringsdatum gått ut finns inte längre möjlighet till registrering via hemsidan.
När datumet för kursen gått ut, visas inte längre kursen på Silviahemmets hemsida.

Allt sker per automatik med kursanmälningsfunktionen!

Grafix Studio tackar Silviahemmet och önskar de lycka till med sina framtida kurser och den nya hemsidan!

Därför har Grafix Studio valt att köra igång med mobilanpassning av hemsidor!

Hur fungerar det?

Din hemsida anpassas till alla dagens moderna smartphones och tablets, samt en specialanpassning till iPad. Det innebär att din hemsida når alla mobila användare samtidigt som din vanliga hemsida är helt tillgänglig för dina desktop- och laptopbesökare!

Oberoende design

Tänk inte på hur din hemsida ser ut i de olika enheterna. Dina besökare ser alltid din vanliga hemsida när de surfar in genom en dekstop/laptopdator och den mobilanpassade versionen varje gång de surfar ingen genom en smartphone och/eller tablet/iPad. Detta ger dig stora möjligheter att behålla den komplexa strukturen som en vanlig hemsida tillåter, samtidigt som du kan ha det enkla och effektiva upplägget som dagens mobilanpassade hemsidor kräver!

Hur hittar man till din mobilanpassade hemsida?

Din hemsida har precis samma grundstruktur som din vanliga webbplats och finns på samma adress. Du behöver alltså ingen ny domän, tråkig subdomän eller underkatalog för att ha en mobil webbplats. mobilAnpassad.se ser till att alla dina mobila kunder kommer till den mobilanpassade versionen av din hemsida genom samma adress som dina PC/Desktop användare.

Varför en mobilanpassad webbplats?

Smartphones har speciella funktioner för att ge dig som användare den bästa möjliga upplevelsen. Information anpassas till den mindre skärmytan och fokus ligger mycket på informationen och budskapet. Mobila webbplatser är också lättare att navigera genom hjälp av touch eller en knappsats och ger direkt tillgång till den information som den traditionella ”on the go” kunden eftersträvar.

Idag finns det över 300 000 iPads och en bit över 1,8 miljoner smartphones i Sverige. Det är stor sannolikhet att flera av dem används av dina kunder!

Entreprenör…ett ord som på senare dagar tappat sin betydelse. Detta speciellt om man är i internetbranschen, där ALLA är entreprenörer. Tyvärr mina kära kollegor, det är inte så. Allt för många individer på nätet anser sig själva vara entreprenörer för att de sitter med en hemsida och för att de jobbar mot olika kunder där dem hjälper de på många olika sätt. Ärorikt må det vara, men det är fortfarande ETT företag de arbetar från och tjänar sina pengar från.

Vad är då en entreprenör?

Wikipedia definierar en entreprenör enligt följande:

En entreprenör är ett begrepp för en företagsam person, ofta i betydelsen företagsgrundare. I vidare bemärkelse används termen om en person som är drivande och arbetar hårt för att nå framgång.

Nyckelordet här är: Företagsgrundare.

Det bör då tolkas att en entreprenör är en person som startar företag, som i sin tur har en inkomst. För att kalla sig entreprenör ska man alltså ha mer än 1 företag som man tjänar pengar på.

Bara för att man utför olika tjänster och är bred i sitt utbud är man inte entreprenör. Man är bara ”händig”.

Varför kallar sig så många för entreprenörer?

Många i branschen kallar sig entreprenörer (eller internetentreprenörer) för att de har en idé eller utför olika tjänster inom sitt eget företag. För mig personligen är det felaktigt att kallar sig så eftersom de inte tjänar sina pengar från flera företag.

Det må vara så att mina tankar är lite för enkelriktade, men för att vara entreprenör ska man tjäna pengar från olika ”platser” (företag) och det ska på något sätt vara självdrivande!

Jag driver företaget Grafix Studio webbdesign och tjänar mitt leverne på att bygga och designa hemsidor, designa annonser och utbilda företag i WordPress. Är jag en entreprenör?

Svar: Nej…

När det gäller säkerhet och hastighet på din webbsida kan det vara mycket arbete för att uppnå en stabil grund. Detta är inget som jag vet särskilt mycket om, men ett tips föll ner på mig för några veckor sedan. Det är tjänsten CloudFlare, som kortfattat är ett nätverk som optimerar din hemsidas prestanda.

Alla kan använda CloudFlare

Cloudflare är gratis för den ”normala” användaren. Har du några ”vanliga” och medelstora hemsidor är denna tjänsten helt rätt för dig.

En hemsida som är kopplad till Cloudflare har i genomsnitt:

• Dubbel så snabb laddningstid
• 60% mindre bandbredd
• 65% färre anrop
• Mycket större säkerhet

Vad måste du göra för att få CloudFlare?

Du måste endast byta namnservrar till deras. Ingen hårdvara eller mjukvara måste installeras, detta är nämligen en tjänst på molnet. Ta en titt på CloudFlares olika introduktionsklippp för att få en känsla av tjänsten.

Grafix Studio ligger på Cloudflare!

Då blir det extremt mycket jobb fram tills juni sen är det återigen tyst hela sommaren! Fram tills september och här är vi nu!

3:e året för Grafix

Grafix Studio går in i sitt tredje år som egen verksamhet (på heltid) och jag anser att jag mer eller mindre är etablerad som en webbdesigner. Jag har både återkommande kunder samt nya med jämna mellanrum. Jag är nöjd med var företaget har varit de senaste två åren men under den senaste tiden har jag känt att det är en dags för en förändring.

Förändringslusten har sakta krupit fram genom att man träffat människor i branschen som man utfört en del samarbeten med. Samarbeten kommer man långt med i webbranschen!

Utökning av studions tjänster

Tack vare innovativa och driftiga människor kan studion göra en markant utökning av sina tjänster. Anledningen till detta är helt enkelt att gå ut på nya banor, erbjuda bättre tjänster och tjänster som passar sig i dagens webb och media. Tjänsterna som jag talar om är bl.a

• Hemsidor i WordPress
• Rollups
• mobilAnpassad
• Kurser i WordPress
• Apputveckling
• Restaurangappar
• StoragePlace
• Webbdesign
• Grafik

Läs mer om Grafix Studios tjänster

Målet är att vara en komplett studio för dagens moderna webb och erbjuda allt du som kund kan behöva vid en eventuellt ny hemsida, varumärkeslansering m.m.

Spännande år

Det blir ett spännande 2011/2012 för Grafix Studio nu när denna tillökning av tjänster har gjorts. Webb och media har ändrats rätt mycket sedan Grafix Studio startade och de närmsta åren framåt kommer det ske ännu mer förändringar.

Något jag ser fram emot mest är mobilanpassning av hemsidor. Det finns olika tekniker för detta och Grafix Studio kommer att ordna mobilanpassade hemsidor m.h.a WordPress. Men mer om det lite senare…

Då jobbar vi framåt mot en bättre webb för alla!

Är du en duktig designer eller en programmerare som ofta jobbar med WordPress så kanske du har märkt att vissa servrar inte hanterar php-anrop särskilt bra. Om du exempelvis viss kör flera querys på en sida kan det sega ner din sida. Även om du kör mycket specialdesign och måste knappa in tusentals rader av CSS (ja det händer) kan hemsidan segas ner. Detta kan man tack och lov enkelt åtgärda med WordPress och en del tillägg!

W3 Total Cache

Jag rekommenderar W3 Total Cache eftersom tilläget har många inbyggda funktioner i sig. Du kan t.ex.

• Ställa in dina sidors cache
• Ställa in din databas cache
• Förminska dina CSS- och Javascriptfiler
• Koppla ihop önskade namnservrar för snabbare och säkrare sida

..och lite annat smått och gott. Tillägget är i min mening mycket bättre än WP Super Cache.

W3 Total Cache

WP Smush.it

Detta tillägg gör en automatisk komprimering av dina bilder som du laddar upp via WordPress utan att tappa bildkvalité. Det är extremt bra att använda detta plugin då det i många fall kan vara bilder som drar ner på din hemsidas laddningstid.

WP Smush it

Hårdkoda simpla anrop

Är du van WordPressutvecklare så vet du vad jag talar om. Anrop som exempelvis hämtar websidans adress:

<?php bloginfo('url')?> och <?php bloginfo('template_url');?>

kan enkelt ersättas med hela sökvägen (http://www.dinadress.se/wp-content/themes/theme/). Då kommer du se omedelbara resultat vad gäller laddningstid.

Minify

Minify ingår i W3 Total Cache men är värt att nämna för sig själv. Minify är en teknik (finns många tillägg) för att reducera storleken på CSS, HTML och Javascriptfiler. Detta görs genom att bl.a ta bort radavstånd, kommenterar och annat onödigt i dina filer. Med hjälp av ett tillägg så behåller din originala css-fil sina egenskaper och det som istället används är en annan CSS-fil som tillägget genererar.

WP Minify

Har du något annat sätt att snabba upp din WordPresshemsida?

Appen är väldigt enkel i sig, men det är inte vad detta inlägg handlar om. Här pratar vi istället om att sidan ligger på det underbara publiceringsverktyget WordPress

Fokus på appen

Med appen i centrum var det viktigt att skapa en sida som är enkelt att sköta ur ett administrativt perspektiv. Startsidan skulle fungera som en samlingsportal där den viktigaste informationen presenteras, om inte minst självaste appen.

iPhonen och bildspelet styrs från WordPress där administratören enkelt byter bild. Möjligheten att lägga till text till varje bild finns, men i det här fallet vill inte restaurangappen.se ha text med i bilden. Allt handlar om appen…

Med WordPress finns även möjligheten att styra sidospalten som finns under iPhonen, där bild och text enkelt infogas genom Widgets.

Layout och Design

Tanken bakom hemsidans utseende är att hålla en enkel grafisk profil samtidigt som det ser fräscht och modernt ut. Även här handlar det om fokus på appen. Färgerna kommer främst från logotypen, som var färdigt innan Grafix Studio åtog sig jobbet med att skapa hemsidan.

För att hålla det fräscht innehåller hemsidans design mycket vitt och stora ytor. Detta är bra, inte bara för hemsidans ”fräschet” utan även för hemsidans läsbarhet. Sidan blir enkelt att scanna för en besökare och informationen tas in mycket lättare.

Grafix Studio tackar restaurangappen.se för ett effektivt jobb. Lycka till!

Något annat som även händer efter ett antal år är att dina kontakter växer. I dagens moderna företagande råder exempelvis Facebook som ett bra kommunikationsmedium för många företag. Helt plötsligt får du vänförfrågningar från personer du inte känner, men som förmodligen är intresserade av dina tjänster på något sätt…Eller?

Sanningen är att sällan är fallet så…Visserligen har jag fått jobb via Facebook men detta har varit genom min företagssida på ansiktsboken och med hjälp av annonseringar.

Nej, de flesta som dyker upp som företagskontakter på Facebok vill enbart bygga upp sitt kontaktnätverk – eller sitt eventuella kontaktnätverk. Något som de förmodligen gjort ofta på riktigt ute i den verkliga världen, men nu när Facebook finns så har detta minimerat – antar jag…

Nätverkande i praktiken

Att nätverka är att gå på olika events, exempelvis föreläsningar, seminarier, workshops m.m. Detta är populärt bland många företagare – vilket jag kan förstå.

Ett antal av dessa events har jag gått på och gett min tid. Detta utan någon särskild framgång – mer än ett par nya namn på min vänlista på Facebook.

Var är alla utvecklare

De som nätverkar letar också ofta efter samarbetspartners. Mina samarbetspartners som kompletterar mig bäst är programmerare, eftersom de kompletterar mig bra när det kommer till större jobb som jag inte kan ta själv.

Jag har inte träffat på en enda utvecklare under de få tillfällen jag har nätverkat, eller via dem som väljer att nätverka med mig via Facebook. Varför detta?

Vårt jobb är för praktiskt

Utvecklare och designer har mycket praktiskt arbete. De ska designa och programmera, bygga hemsidor och ta fram layouts. Detta tar många timmar att göra och ofta har man inte tid att sticka iväg och mingla 3-4 gånger i veckan – vilket många gör här i Malmö.

Skillnaden är att de som minglar mycket är de som har mindre praktiskt jobb – eller jobb där oförutsedda problem kan dyka upp (vilket är vanligt i webbvärlden). Dessa människor har tiden att mingla – det har inte vi webbdesigners och webbutvecklare.

Ett aktivt val att inte jaga kunder

Mitt mål har sedan Grafix Studios början varit att personer och företag ska hitta mig. Då visste jag inte exakt hur, men sökmotorsoptimering var en nyckelfaktor. Detta har jag idag uppnått och jag har en stark närvaro på webben, vilket gör att jag inte behöver nätverka lika mycket som andra gör.

Hur jag har uppnått det, samt hur DU kan uppnå detta, finns att läsa på min sida om att hitta nya kunder.

Jag har dock inget emot att besöka lite events då och då. Det är trots allt viktigt att synas som företag i sin lokala omgivning – men att regelbundet nätverka och mingla är inget för Grafix Studio. Det har jag helt enkelt inte tid för…

Vad känner du om att mingla och nätverka. Är det något som du gör regelbundet?

Fler inlägg om Frilans

• Jämförelse: Frilans i Sverige vs USA
• Varför ska man frilansa?
• En arbetsvecka utomlands
• Webbdesigner? Det har jag också VARIT
• Vi vill se ett utkast först..
• Att frilansa under en sommar
• Tar du dina designförslag hela vägen?
• Vad en webbdesigner inte bör säga
• Min väg till en frilanskarriär
• Grafix Studio flyttar ut, delvis
• Lärdomar om mitt frilansande
• Snabbt, Bra, eller Billigt
• Myter om att vara egen företagare
• Varför frilansar du?
• 9 marknadsföringstips för frilansare