Igår skrev jag lite om hur jag hade börjat göra klart min företagsida. Idag började jag med projektet mobile first, eller som jag vill uttrycka det, lilla fönstret först. Jag började med att titta runt hur andra företag har löst det med sina sajter och de visas i mobilen och det är fortfarande väldigt få sidor som är responsiva eller mobilanpassade.
Jag trodde nog att vi hade kommit lite längre, men jag hittade några exempel på sidor som fortfarande inte är anpassade efter vilken terminal jag använder.
Jag tänkte att jag skall nu utgå från det minsta fönstret det vill säga mobilen och började då med att tänka på vad är det för information som man vill ha av mig som företag. Jag tittade även på hur jag skulle vilja göra min sida enkel även via en dator.
Det jag kom fram till är att man vill enkelt kunna komma i kontakt om man kommer in via mobilen och att det skall vara enkelt att få läsa mer om vad jag kan erbjuda. Det jag gjorde då var att leta reda på hur jag kan skapa enkla genvägar och som utifrån ett användarperspektiv vara enkla att hantera.
För mig var det viktigt att man skall kunna:
- Ringa mig
- Sms:a mig
- Maila mig
- Twittra till mig
Jag hittade kortkommandon för detta:
Ringa mig
<a href=”tel://+46855920320″><img style=”border: 0px;” alt=”” src=”http://www.pinkcow.se/wp-content/uploads/2013/03/Call_Me_PinkCow.png” width=”240″ height=”90″ border=”0″ /></a>
Byt ut telefonnummer, lägg med den länk till bilden du vill ha samt bestäm den storlek som du vill ha.
Sms:a mig
<a href=”sms:+46703002727″><img style=”border: 0px;” alt=”” src=”http://www.pinkcow.se/wp-content/uploads/2013/03/Text_Me_PinkCow.png” width=”240″ height=”90″ border=”0″ /></a>
Byt ut mobilnummer, lägg med den länk till den bild du vill ha samt bestäm den storlek du vill ha.
Maila mig
<a title=”Meddelande från PinkCow.se” href=”mailto:info@pinkcow.se” target=”_blank”><img style=”border: 0px;” alt=”” src=”http://www.pinkcow.se/wp-content/uploads/2013/03/Email_Me_Pinkcow.png” width=”240″ height=”90″ border=”0″ /></a>
Bestäm vad du vill ha för rubrik på de meddelanden som du får. Fyll i den mailadress som du vill det skickat till. Lägg med den länk till den bild du vill ha samt bestäm den storlek du vill ha.
Twittra till mig
<a title=”Kontakta mig via twitter!” href=”http://twitter.com/home?status=RT:@pinkcowse%20-%3EPING!%20″ target=”_blank”><img style=”border: 0px;” alt=”” src=”http://www.pinkcow.se/wp-content/uploads/2013/03/Tweet_Me_PinkCow.png” width=”240″ height=”90″ border=”0″ /></a>
Bestäm vad du vill ha för text när du gör mouseover. Skriv sedan ihop en kort text, i mitt fall valde jag att jag vill att folk skall skicka RT till @pinkcowse och att tweetsen skall börja med PING! Konvertera den text du vill ha med en URL Encoding Coverter.
Lägg till början: href=”http://twitter.com/home?status=
Nu skall du bara lägga till den länk till den bild du vill ha samt bestämma vilken storlek den skall ha.
Som sagt jag är ingen expert men nu ser det bra ut i mobilen, på surfplattan och även i datorn.
Lycka till!
