Comment créer un site mobile avec MoFuse

MoFuse est un service qui vous permet de convertir pratiquement n'importe quel site avec un flux RSS vers un site mobile hébergé par MoFuse. Vous pouvez personnaliser la conception, configurer votre propre domaine et même ajouter de la publicité à la version mobile de votre site. C'est une excellente option si vous ne vous sentez pas à l'aise pour héberger vous-même votre site mobile. Et le meilleur, c'est que MoFuse prend en charge les téléphones mobiles traditionnels et l'iPhone, qui est vraiment cool.

Commencer

En fait, il est très simple de configurer votre site avec MoFuse. Il vous suffit de renseigner l'URL de votre blog (ou autre) et de laisser MoFuse le détecter, sur la page d'accueil. Pour notre exemple, je vais ajouter une version mobile à mon propre site, puis je vais le personnaliser quelque peu.

Dans la deuxième étape, vous devrez choisir une URL pour votre site mobile, hébergée sous le domaine mofuse.com. Le mien est tdhedengren.mofuse.mobi "> tdhedengren.mofuse.mobi, qui fonctionnera une fois la configuration de mon site mobile terminée. Vous aurez également la possibilité de choisir une catégorie pour votre site mobile et de jouer avec une version factice si vous serez.

Si vous n'avez jamais utilisé MoFuse auparavant, vous serez également invité à configurer un compte utilisateur. Toutefois, le cas échéant, vous devez procéder à l’installation à partir du tableau de bord MoFuse (c’est-à-dire que vous devez vous connecter au préalable, cliquez sur Lancer un site mobile dans le menu de gauche). C'est fondamentalement la même chose, cependant, donc pas de soucis.

Pas très difficile, était-ce?

Personnaliser le site mobile

Si l'apparence par défaut de votre site mobile vous convient, vous pouvez ignorer la personnalisation. Toutefois, je vous encourage au moins à modifier les couleurs pour qu'elles correspondent à votre graphisme actuel, et éventuellement à ajouter un logo si vous en avez un. Voici à quoi ressemble mon site mobile par défaut:

Il semble assez décent, cependant, rien de spectaculaire. Je veux aussi porter ma marque sur les écrans mobiles, alors faisons-en un peu plus. Tdhedengren.com, allons-nous? Tout d’abord, connectez-vous à votre tableau de bord MoFuse, puis cliquez sur le site que vous souhaitez modifier. En commençant par les couleurs, cliquez sur Design / Colors dans le menu de la colonne de droite. Cela nous mènera à une page simple où vous pouvez modifier l'arrière-plan, le texte de l'en-tête, l'arrière-plan de l'en-tête, le texte et la couleur du lien en entrant des valeurs HEX dans les zones ou en cliquant simplement dessus pour choisir la couleur souhaitée dans la palette..

Vous pouvez trouver vos couleurs dans votre fichier CSS. J'ai modifié le mien pour qu'il corresponde au style sur tdhedengren.com, cliqué sur le bouton Enregistrer, puis sur le lien Télécharger le logo, qui est également disponible à droite mais appelé Votre logo à la place..

Mon logo est simple. J'ai créé un espace de 200 pixels de large, mais j'ai ajouté des espaces supplémentaires dans le fichier, car je souhaite éviter de le laisser "toucher" l'en-tête supérieur, où le nom de mon site mobile est affiché. Vous voudrez probablement jouer un peu avec cela, mais je suis allé avec 10 pixels supplémentaires d'espace au-dessus de mon logo actuel.

Téléchargez votre logo, puis revenez à la page Design / Couleurs. Vous disposez désormais d'options pour la couleur d'arrière-plan de l'en-tête derrière le logo, son alignement et, bien sûr, si vous souhaitez l'afficher. Modifiez-le en conséquence, utilisez le lien "actualiser l'aperçu" dans l'aperçu factice situé sous les paramètres actuels, puis cliquez sur Enregistrer lorsque vous avez terminé. Maintenant ça ressemble à ça:

Mise au point et monétisation

Nous sommes pratiquement prêts à partir maintenant, mais j'aimerais modifier un peu plus mon site. Mon site mobile étant sélectionné (cliquez sur) dans le tableau de bord MoFuse, je clique sur Modifier la page d'accueil dans la colonne de droite. Cela me permettra d'écrire un petit quelque chose à ajouter sous l'en-tête de mon site mobile, ou même sur chaque page mobile si je le souhaite. Vous obtenez un éditeur WYISWYG simple pour jouer. Gardez à l’esprit que beaucoup de texte enfoncera les liens vers le contenu actuel, donc restez bref. Je suis juste allé avec mon slogan standard "designer, écrivain, blogueur" sur la première page.

Vous pouvez même ajouter de nouvelles pages exclusives à votre site mobile. Cliquez simplement sur Ajouter une nouvelle page dans la colonne de droite et vous obtenez quelque chose de similaire à la page Modifier la page d'accueil. Il y a un tas d’add-ons plus ou moins intéressants à incorporer, à jouer si vous voulez. J'aime particulièrement le code QR, qui peut ne pas fonctionner dans le monde entier. Il s’agit d’une image que vous pouvez imprimer ou quoi que ce soit, et lorsque quelqu'un prend une photo avec son appareil photo mobile, il est dirigé vers votre site mobile. Chouette!

Vous voudrez peut-être ajouter une icône de clip Web de 57 x 57 pixels pour iPhone et iPod touch. Cliquez sur Paramètres de l'iPhone dans la colonne de droite, un petit peu vers le bas et indiquez une URL pour le fichier d'icônes. Vous pouvez également activer et désactiver la version iPhone de votre site mobile, mais je ne sais pas pourquoi vous voudriez qu'elle soit désactivée.

L’un des plus intéressants est l’option Monetize. Cela vous permettra d'intégrer des annonces sur votre site mobile, en entrant simplement quelques détails pour Google Adsense ou AdMob. Alors vous êtes prêt à partir. Les annonces pour mobile ne seront probablement pas un gros frappeur pour vous, mais cela pourrait quand même être quelque chose. En ce qui me concerne, mon site ne concerne pas les revenus publicitaires, et même si c’était le cas, j’ai tendance à regarder les sites mobiles comme un moyen de prolonger la marque et, espérons-le, d’attirer un visiteur fidèle sur le traditionnel. site web aussi.

<

Enfin, vous voudrez peut-être rediriger automatiquement les visiteurs utilisant des appareils mobiles vers votre site mobile. Cliquez sur Redirect automatique à droite, et récupérez le code PHP pour le coller en suivant les instructions. Cependant, ce code est expérimental, mais pour autant que je sache, il ne devrait en aucun cas nuire ou ralentir votre site. Les tests avec cela ont également fonctionné, mais utilisez à vos risques et périls, bien sûr.

Configurer votre propre domaine

Je ne suis pas content d'avoir tdhedengren.mofuse.mobi comme URL de mon mobile. C'est trop long, et ça ne fait pas vraiment de miracles pour ma marque. Je veux que m.tdhedengren.com mène au site mobile, qui est en quelque sorte une solution standard pour les sites Web traditionnels dotés d'une version mobile: placez-le sur un sous-domaine, de préférence m (court) mais mobile est assez commun aussi.

Vous devez accéder aux enregistrements DNS pour accéder à cet enregistrement, ce qui signifie que vous devrez probablement héberger votre propre site (bien que certaines redirections de créations puissent également résoudre ce problème). La plupart des gens ne gèrent pas les enregistrements DNS. Vous voudrez peut-être en parler à votre hébergeur. Rappelez-vous que le fait de gâcher le DNS signifie que votre site ne fonctionnera pas et que je ne parle pas uniquement de votre site mobile, votre site principal pourrait également être affecté.. Procéder avec prudence!

Depuis que je suis fou, je vais essayer quand même. Tout d’abord, cliquons sur Domaine personnalisé dans le menu de droite, en haut. Tout ce que vous avez à faire est de saisir votre domaine personnalisé, le mien étant m.tdhedengren.com, puis de cliquer sur Enregistrer. Cela ne signalera pas le domaine en question à MoFuse et à votre site mobile, mais permettra à MoFuse de savoir qu'il devrait s'y attendre..

Pointez maintenant le sous-domaine, m.tdhedengren.com, sur le site mobile. C'est à ce moment que cela devient dangereux, car vous devrez créer une entrée DNS pour le sous-domaine. Ce que vous voulez ajouter est une entrée CNAME pour m, pointant vers votre adresse MoFuse, la mienne étant tdhedengren.mofuse.mobi. Différents gestionnaires DNS ressemblent et fonctionnent de différentes manières, et mon hôte actuel avait besoin de moi pour envoyer un ticket de support pour effectuer l'entrée CNAME. Cependant, un autre hôte auquel j'ai accès a un gestionnaire DNS ressemblant à ceci:

S'il vous plaît noter le m CNAME pakten.mofuse.mobi partie, qui est le sous-domaine m.pakten.se pointant vers pakten.mofuse.mobi.

Enregistrez et attendez. Cela prendra jusqu'à 48 heures pour qu'une entrée DNS passe à travers le monde, bien que vous obtiendrez probablement un résultat plus rapide que cela..

Si vous ne voulez pas manipuler le DNS, vous pouvez effectuer une redirection de sous-domaine vers votre URL MoFuse. Cela signifierait que toute personne utilisant votre sous-domaine serait envoyée à votre URL MoFuse, ce qui est presque aussi bon. La plupart des hébergeurs Web proposent des redirections de sous-domaines comme celles-ci. L'installation ne devrait donc pas poser de problème. Vous pouvez également utiliser le script PHP mentionné ci-dessus pour vérifier le type d'appareil visitant votre site et servir la version mobile le cas échéant.

Bienvenue sur le web mobile!

  • Abonnez-vous au flux RSS NETTUTS pour plus de commentaires et d'articles sur le développement Web au quotidien.