Hur man skapar en mobil webbplats med MoFuse

MoFuse är en tjänst som låter dig konvertera i princip alla webbplatser med ett RSS-flöde till en mobil webbplats värd MoFuse. Du kan anpassa designen, konfigurera din egen domän och till och med lägga till annonsering till mobilversionen av din webbplats. Det här är ett bra alternativ om du inte känner dig bekväm med att vara värd för din mobila webbplats själv. Och det bästa är att MoFuse stöder både traditionella mobiltelefoner och iPhone, vilket är riktigt coolt.

Komma igång

Det är faktiskt väldigt enkelt att få din webbplatsinställning med MoFuse. Fyll bara i webbadressen till din blogg (eller vad som helst), och låt MoFuse upptäcka det, på framsidan. För vårt exempel lägger jag till en mobilversion till min egen webbplats, och sedan anpassar jag det något.

I det andra steget måste du välja en webbadress för din mobilwebbplats, värd under mofuse.com-domänen. Mine är tdhedengren.mofuse.mobi "> tdhedengren.mofuse.mobi, som kommer att fungera när jag har slutat konfigurera min mobila webbplats. Du får också välja en kategori för din mobila webbplats och spela med en dummyversion om du kommer.

Om du inte har använt MoFuse tidigare kommer du att bli uppmanad att ställa in ett användarkonto också. Om du har, bör du dock göra installationsprocessen från MoFuse Dashboard (det vill säga du måste logga in först, klicka på Starta en mobil webbplats i vänstra menyn). Det är i grunden detsamma, men det är ingen oro.

Inte särskilt svårt, var det?

Anpassa mobilwebbplatsen

Om du är nöjd med standardutseendet på din mobila webbplats kan du hoppa över anpassningen. Jag uppmuntrar dig åtminstone att ändra färgerna för att matcha din nuvarande design och eventuellt lägga till en logotyp om du har en. Så här ser min mobila webbplats ut som standard:

Det ser anständigt nog, men inget spektakulärt. Jag vill också bära mitt varumärke med mig till mobilskärmarna, så låt oss göra det lite mer tdhedengren.com, ska vi? Först och främst logga in på MoFuse Dashboard och klicka på den webbplats du vill redigera. Börja med färger, klicka på Design / Färger i den högra kolumnmenyn inom. Detta tar oss till en rakt framsida där du kan redigera bakgrund, rubriktext, rubrikbakgrund, text och länkfärg genom att ange HEX-värden i rutorna eller bara klicka på dem för att välja den färg du vill ha från paletten.

Du kan hitta dina färger i din CSS-fil. Jag redigerade gruvan för att gå med stilen på tdhedengren.com, klickade på Spara-knappen och klickade sedan på länken Ladda upp logotypen, som också är tillgänglig till höger men kallad din logotyp istället.

Min logotyp är enkel. Jag skapade en bredd på 200 pixlar, men lagt till lite extra blankutrymme i filen till toppen, eftersom jag vill undvika att det "träffar" topprubriken, där min mobila webbplats heter. Du kommer nog att vilja spela lite med det, men jag gick med 10 pixlar extra blankutrymme över min faktiska logotyp.

Ladda upp logotypen och gå tillbaka till sidan Design / Färger. Nu har du alternativ för huvudbakgrundsfärg bakom logotypen, logotypinriktning och naturligtvis om du vill visa det alls. Redigera följaktligen, använd länken "Uppdatera förhandsgranskning" i fönstret förhandsgranskning under de faktiska inställningarna och klicka på Spara när du är klar. Nu ser det ut så här:

Tweaking och Monetizing

Vi är ganska bra att gå nu, men jag skulle vilja tweak min sida lite mer. Med min mobila webbplats vald (dvs klickad) i MoFuse Dashboard, klickar jag på Redigera hemsida i den högra kolumnen. Det här låter mig skriva lite att lägga till under rubriken på min mobila webbplats, eller till och med på varje mobil sida ska jag vilja. Du får en enkel WYISWYG-redaktör att spela med. Tänk på att mycket text kommer att trycka ned länkarna till det faktiska innehållet, så håll det kort. Jag gick precis med min vanliga fras-fras "designer, författare, bloggare" på framsidan.

Du kan till och med lägga till nya sidor, exklusiva till din mobila webbplats. Klicka bara på Lägg till en ny sida i den högra kolumnen, och du får något som liknar sidan Redigera hemsida. Det finns en massa mer eller mindre intressanta add-ons för att du ska integrera, leka om du vill. Jag gillar särskilt QR-koden, som kanske inte fungerar över hela världen. Det är i grund och botten en bild som du kan skriva ut eller vad som helst, och när någon tar en bild av den med sin mobilkamera, riktas de till din mobilplats. Tjusig!

Du kanske vill lägga till en 57x57 pixel webclip ikon för iPhone och iPod touch. Klicka på iPhone-inställningar i den högra kolumnen, en liten bit och ge en URL till ikonfilen. Du kan också slå på och av iPhone-versionen av din mobila webbplats här, men varför du vill ha den bort är bortom mig.

En av de mer intressanta är Monetize-alternativet. Det här låter dig bädda in annonser på din mobila webbplats, bara genom att ange några detaljer för antingen Google Adsense eller AdMob. Då är du bra att gå. Mobila annonser kommer förmodligen inte att vara en stor hitter för dig, men det kan ändå vara något. För mig själv tar jag av det, min sida handlar inte om annonsdollar, och även om det var, brukar jag titta på mobila webbplatser som ett sätt att förlänga varumärket och förhoppningsvis få en trogen besökare på den traditionella webbplats också.

<

Slutligen kanske du vill omdirigera besökare med hjälp av mobila enheter till din mobila webbplats automatiskt. Klicka på Automatisk omdirigering till höger och hämta PHP-koden för att klistra in den enligt anvisningarna. Men denna kod är experimentell, men så långt jag kan berätta det borde det inte skada eller sakta ner din webbplats mycket. Tester med det fungerade också, men använd självklart på egen risk.

Ställa in din egen domän

Jag är inte nöjd med att ha tdhedengren.mofuse.mobi som min mobiladress. Det är för länge, och det fungerar inte riktigt underverk för mitt varumärke. Jag vill att m.tdhedengren.com ska leda till mobilplatsen, vilket är något av en standardlösning för traditionella webbplatser som har en mobilversion: Sätt den på en underdomän, helst m (kort) men mobil är ganska vanligt också.

Du behöver tillgång till DNS-poster för att dra av den här, vilket innebär att du förmodligen kommer att vara värd för din egen webbplats (även om vissa kreativa omdirigeringar kan lösa detta också). Att hantera DNS-poster är inte något de flesta av oss gör, så du kanske vill prata med ditt webbhotell om detta. Kom ihåg att screwing up DNS betyder att din webbplats inte kommer att fungera, och jag pratar inte bara om din mobila, din huvudwebbplats kan påverkas också. Fortsätt med försiktighet!

Eftersom jag är en galning, ska jag ge det en gå ändå. Först och främst, låt oss klicka på Anpassad domän i högra menyn högst upp. Allt du behöver göra är att ange din anpassade domän, min är m.tdhedengren.com och klicka på Spara. Detta kommer inte att peka på den aktuella domänen till MoFuse och din mobila webbplats, men det kommer att låta MoFuse veta att det borde förvänta sig det.

Låt oss nu peka på underdomänen, m.tdhedengren.com, till mobilplatsen. Det här är när det blir farligt, eftersom du måste göra en DNS-post för underdomänen. Vad du vill lägga till är en CNAME-post för m, som pekar på din MoFuse-adress, min är tdhedengren.mofuse.mobi. Olika DNS-chefer ser och arbetar på olika sätt, och min nuvarande värd behövde mig att skicka in en supportbiljett för att göra CNAME-posten. En annan värd som jag har tillgång till har dock en DNS-chef som ser ut så här:

Vänligen notera m CNAME pakten.mofuse.mobi del, vilken är m.pakten.se underdomän som pekar på pakten.mofuse.mobi.

Spara och vänta sedan. Det tar upp till 48 timmar för en DNS-post att gå igenom hela världen, men du kommer noga att se resultatet snabbare än det.

Om du inte vill lura med DNS kan du göra en omdirigering av underdomän till din MoFuse-URL. Det skulle innebära att alla som använder din underdomän skulle skickas till din MoFuse-URL, vilket är nästan lika bra. De flesta webhosts erbjuder omdirigeringar av underdomäner så här, så det borde inte vara ett problem att installera. Du kan också använda PHP-skriptet som nämns ovan för att kontrollera vilken typ av enhet som besöker din webbplats och tjäna mobilversionen när det är lämpligt så

Välkommen till mobilwebben!

  • Prenumerera på NETTUTS RSS-flödet för fler dagliga webbutvecklingstoppar och artiklar.