Hoe een mobiele site met MoFuse te maken

MoFuse is een service waarmee u in principe elke site met een RSS-feed kunt converteren naar een mobiele site die wordt gehost door MoFuse. U kunt het ontwerp aanpassen, uw eigen domein instellen en zelfs advertenties toevoegen aan de mobiele versie van uw site. Dit is een goede optie als u zich niet op uw gemak voelt om zelf uw mobiele site te hosten. En het beste is dat MoFuse zowel traditionele mobiele telefoons als de iPhone ondersteunt, en dat is echt gaaf.

Ermee beginnen

Het is eigenlijk heel eenvoudig om uw site-instellingen te krijgen met MoFuse. Vul gewoon de URL van je blog in (of wat dan ook) en laat MoFuse het op de voorpagina zien. Voor ons voorbeeld zal ik een mobiele versie toevoegen aan mijn eigen site, en dan zal ik het enigszins aanpassen.

In de tweede stap moet u een URL kiezen voor uw mobiele site, gehost onder het domein mofuse.com. Mine is tdhedengren.mofuse.mobi "> tdhedengren.mofuse.mobi, wat zal werken als ik klaar ben met het opzetten van mijn mobiele site. Je kunt ook een categorie kiezen voor je mobiele site en spelen met een dummy-versie als je zal.

Als u MoFuse nog niet eerder hebt gebruikt, wordt u gevraagd om ook een gebruikersaccount in te stellen. Als dat wel het geval is, moet u het installatieproces uitvoeren vanuit het MoFuse-dashboard (u moet dus eerst inloggen, klik op Een mobiele site starten in het linkermenu). Het is echter in wezen hetzelfde, dus geen zorgen.

Niet erg moeilijk, was het?

De mobiele site aanpassen

Als u tevreden bent met het standaard uiterlijk van uw mobiele site, kunt u de aanpassing overslaan, maar ik moedig u aan om ten minste de kleuren aan te passen aan uw huidige ontwerp en eventueel een logo toe te voegen als u er een heeft. Dit is hoe mijn mobiele site er standaard uitziet:

Het ziet er goed genoeg uit, maar niets spectaculairs. Ik wil mijn merk ook meenemen naar de mobiele schermen, dus laten we het een beetje meer maken, tdhedengren.com, zullen we? Meld u eerst aan op uw MoFuse-dashboard en klik op de site die u wilt bewerken. Beginnend met kleuren, klik Design / Colors in het rechterkolommenu in. Dit brengt ons naar een overzichtelijke pagina waar u achtergrond, koptekst, koptekstachtergrond, tekst en koppelingskleur kunt bewerken door HEX-waarden in de vakken in te voeren, of gewoon op klikt om de gewenste kleur uit het palet te kiezen.

U kunt uw kleuren vinden in uw CSS-bestand. Ik bewerkte de mijne om te gaan met de stijl op tdhedengren.com, klikte op de knop Opslaan en klikte vervolgens op de link Logo uploaden, die ook beschikbaar is aan de rechterkant, maar in plaats daarvan Uw logo wordt genoemd.

Mijn logo is eenvoudig. Ik heb een nieuwe met een breedte van 200 pixels gemaakt, maar er is wat extra witruimte aan toegevoegd, omdat ik wil voorkomen dat het de bovenste koptekst raakt, waar de naam van mijn mobiele site wordt weergegeven. Daar wil je waarschijnlijk een beetje mee spelen, maar ik ging met 10 pixels extra witruimte boven mijn huidige logo.

Upload uw logo en ga terug naar de pagina Ontwerp / kleuren. Nu hebt u opties voor de achtergrondkleur van de koptekst achter het logo, de uitlijning van het logo en natuurlijk als u deze helemaal wilt weergeven. Bewerk dienovereenkomstig, gebruik de "refresh preview" -link in het voorbeeld van de dummy onder de feitelijke instellingen en klik op Save als u klaar bent. Nu ziet het er zo uit:

Tweaking en Monetizing

We zijn best goed om nu verder te gaan, maar ik zou mijn site een beetje meer willen aanpassen. Met mijn mobiele site geselecteerd (dat wil zeggen geklikt) in het MoFuse-dashboard, klik ik in de rechterkolom op Homepage bewerken. Hierdoor kan ik iets schrijven om toe te voegen onder de kop van mijn mobiele site, of zelfs op elke mobiele pagina die ik zou willen. Je krijgt een eenvoudige WYISWYG-editor om mee te spelen. Houd er rekening mee dat veel tekst de koppelingen naar de daadwerkelijke inhoud onderdrukt, dus houd het kort. Ik ging gewoon met mijn standaard catch-zin 'designer, schrijver, blogger' op de voorpagina.

U kunt zelfs nieuwe pagina's toevoegen, exclusief voor uw mobiele site. Klik gewoon op Een nieuwe pagina toevoegen in de rechterkolom en u krijgt iets dat lijkt op de pagina Homepage bewerken. Er zijn een aantal meer of minder interessante add-ons die je kunt opnemen, speel rond als je wilt. Ik vind vooral de QR-code leuk, die misschien niet over de hele wereld werkt. Het is eigenlijk een afbeelding die u kunt afdrukken of wat dan ook, en wanneer iemand er een foto van maakt met hun mobiele camera, worden deze doorgestuurd naar uw mobiele site. handig!

Mogelijk wilt u een webclip-pictogram van 57 x 57 pixels toevoegen voor de iPhone en iPod touch. Klik op iPhone-instellingen in de rechterkolom, een klein beetje naar beneden, en geef een URL aan het pictogrambestand. Je kunt hier ook de iPhone-versie van je mobiele site in- en uitschakelen, maar waarom je het wilt, gaat mij te ver.

Een van de interessantere opties is de optie Inkomsten genereren. Hiermee kunt u advertenties insluiten op uw mobiele site door alleen wat gegevens in te voeren voor Google Adsense of AdMob. Dan ben je goed om te gaan. Mobiele advertenties zullen waarschijnlijk geen zware slagman voor je zijn, maar toch, het kan iets zijn. Voor mezelf laat ik het achterwege, mijn site gaat niet over ad-dollars, en zelfs als dat het geval is, kijk ik vaak naar mobiele sites als een manier om het merk te verlengen en hopelijk een trouwe bezoeker op de traditionele manier te worden. website ook.

<

Ten slotte kunt u bezoekers automatisch omleiden met mobiele apparaten naar uw mobiele site. Klik op Automatische omleiding naar rechts en haal de PHP-code op om deze volgens de instructies te plakken. Deze code is echter experimenteel, maar voor zover ik kan nagaan, zou het uw site niet veel mogen schaden of vertragen. Tests ermee werkten ook, maar gebruik het uiteraard op eigen risico.

Uw eigen domein instellen

Ik ben niet blij met tdhedengren.mofuse.mobi als mijn mobiele URL. Het is te lang en het werkt niet echt wonderen voor mijn merk. Ik wil dat m.tdhedengren.com naar de mobiele site leidt, wat een standaardoplossing is voor traditionele websites met een mobiele versie: zet het op een subdomein, bij voorkeur m (kort) maar mobiel is ook vrij gewoon.

U moet toegang hebben tot DNS-records om dit eenmalig te kunnen doen. Dit betekent dat u waarschijnlijk uw eigen site moet hosten (hoewel sommige creatieve omleidingen dit mogelijk ook kunnen oplossen). Het beheer van DNS-records is niet iets dat de meesten van ons doen, dus misschien wilt u hierover met uw webhost praten. Vergeet niet dat het verknoeien van de DNS betekent dat uw site niet zal werken, en dan heb ik het niet alleen over uw mobiele, uw hoofdsite kan ook worden beïnvloed. Ga voorzichtig verder!

Omdat ik een gek ben, zal ik het toch proberen. Laten we eerst klikken op Aangepast domein in het rechter menu bovenaan. Het enige dat u daar hoeft te doen, is uw eigen domein invoeren; de mijne is m.tdhedengren.com en klikt u op Opslaan. Dit zal het betreffende domein niet naar MoFuse en uw mobiele site verwijzen, maar het laat MoFuse weten dat het het zou verwachten.

Laten we nu het subdomein m.tdhedengren.com naar de mobiele site richten. Dit is wanneer het gevaarlijk wordt, omdat u een DNS-vermelding voor het subdomein moet maken. Wat u wilt toevoegen is een CNAME-invoer voor m, wijzend op uw MoFuse-adres, de mijne is tdhedengren.mofuse.mobi. Verschillende DNS-managers kijken en werken op verschillende manieren en mijn huidige host wilde dat ik een supportticket stuurde om het CNAME-item te maken. Een andere host waartoe ik toegang heb, heb echter een DNS-manager die er als volgt uitziet:

Let op de m CNAME pakten.mofuse.mobi deel, het subdomein m.pakten.se dat verwijst naar pakten.mofuse.mobi.

Opslaan en dan wachten. Het duurt maximaal 48 uur voordat een DNS-vermelding over de hele wereld wordt doorgenomen, hoewel het resultaat waarschijnlijk sneller zal zijn dan dat.

Als u niet met de DNS wilt knoeien, zou u een omleiding van een subdomein naar uw MoFuse-URL kunnen doen. Dat zou betekenen dat iedereen die uw subdomein gebruikt, naar uw MoFuse-URL wordt gestuurd, wat bijna net zo goed is. De meeste webhosts bieden subdomeinomleidingen op deze manier aan, dus dat zou geen probleem moeten zijn om in te stellen. U kunt ook het hierboven genoemde PHP-script gebruiken om te controleren welk type apparaat uw site bezoekt en de mobiele versie zo nodig op die manier te bedienen

Welkom bij het mobiele web!

  • Abonneer u op de NETTUTS RSS-feed voor meer dagelijkse webontwikkelingen, tuts en artikelen.