Diseno web movil - 5 Cosas Que Necesita Saber

333 views
255 views

Published on

El mundo se ha vuelto móvil, y empresas como Apple, Google y Amazon están apostando a que la tendencia es mucho más que una moda pasajera !

En este breve informe , voy a cubrir algunas de las estadísticas más recientes , y revelar los "cinco cosas" que tiene que saber antes de crear un sitio web para móviles para su negocio.

Para la mejora de su presencia móvil ,
Hector Jayat

Published in: Marketing
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
333
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Diseno web movil - 5 Cosas Que Necesita Saber

  1. 1. Diseño Web Móvil -5 Cosas Que Usted Necesita Saber! Diseño Web Móvil 5 Cosas Que Usted Necesita Saber! Por Héctor Jayat www.mobilenicheapps.com Page 1
  2. 2. Mobile Website Design – 5 Things You Need To Know! Aviso legal / Información Legal Todos los derechos reservados . Ninguna parte de esta publicación puede ser reproducida, almacenada en sistemas de recuperación o transmitida en cualquier forma o por cualquier medio, sin el permiso previo y por escrito del autor / editor , excepto en el caso de citas breves con el fin de escribir artículos críticos o opiniones . Aviso de responsabilidad El autor y el editor han realizado todos los esfuerzos para asegurar la precisión de la información aquí contenida . Sin embargo , la información contenida en este libro se presenta sin ninguna garantía , ya sea expresa o implícita. Aviso de marca registrada En lugar de indicar todas las apariciones de un nombre registrado como tal , este libro utiliza sólo los nombres de forma editorial y para el beneficio del propietario de la marca sin intención de infracción de la marca . Información de derechos de autor © 2013 Hector Jayat www.mobilenicheapps.com 2 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  3. 3. Mobile Website Design – 5 Things You Need To Know! Tabla de Contenidos Introducción ………………………………………………………………………………Página 4 ¿Realmente necesito un sitio web para móviles? ....................................... Página 5 ¿Qué lenguaje de codificación es el mejor? .................................................... Página 8 ¿Qué hace a un sitio web móvil diferente? ..................................................... Página 10 ¿Necesito "SEO " en mi sitio móvil ? ................................................................. Página 13 ¿Cómo la gente encuentra mi sitio web móvil? ............................................ Página 15 Conclusión .................................................................................................................... Página 18 Sobre el autor .............................................................................................................. Página 25 3 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  4. 4. Mobile Website Design – 5 Things You Need To Know! Introducción El mundo se ha vuelto móvil, y empresas como Apple, Google y Amazon están apostando a que la tendencia es mucho más que una moda pasajera ! En este breve informe , voy a cubrir algunas de las estadísticas más recientes , y revelar los "cinco cosas" que tiene que saber antes de crear un sitio web para móviles para su negocio. Para la mejora de su presencia móvil , Hector Jayat 4 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  5. 5. Mobile Website Design – 5 Things You Need To Know! ¿Realmente necesito un sitio web para móviles? Las últimas estadísticas son realmente alarmantes. Según CBS News , hay más de 5 mil millones de teléfonos celulares en uso en todo el mundo , y alrededor de mil millones de ellos son capaces de conectarse a Internet . De hecho , hay más dispositivos móviles con conexión a Internet que computadoras de escritorio y portátiles juntos. Debido a que el uso de dispositivos móviles está en constante aumento , es importante que cada empresa considere la construcción de un sitio web amigable para móviles. Aquellos que no lo hagan , corren el riesgo de perder negocio contra los que sí lo hagan ... es así de simple. Si bien todas las empresas podrían beneficiarse por tener un sitio web móvil , algunos tipos de negocios se beneficiarán más que otros. Si su empresa ofrece todo tipo de servicios móviles , servicios de emergencia , servicios que se pueden ordenar en línea o simplemente negocios que se requieren cuando el usuario está en movimiento y/o fuera del alcance de su computadora de escritorio, se ajustan a esa categoría. Sería imposible para mí dar la lista de los tipos de negocios más beneficiados, pero voy a dar algunos ejemplos para ayudar a determinar si su negocio puede beneficiarse. 5 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  6. 6. Mobile Website Design – 5 Things You Need To Know! Ejemplo # 1 – Servicio de Grúas o Remolques Este ejemplo debe ser fácil de seguir. A un automovilista se le queda pardo el carro y está en la necesidad de un servicio de remolque de emergencia. Como no está en casa, lo más probable es que va a utilizar un dispositivo móvil para encontrar el servicio que necesita . Esto pone de relieve tanto la necesidad de un sitio web para móviles, y un sitio web bien optimizado para los motores de búsqueda ( también conocido como " SEO" - Search Engine Optimization) . Ejemplo # 2 - Restaurantes Después de la iglesia , un grupo de amigos habla de dónde podrían ir a almorzar . La búsqueda se lleva a cabo en el smartphone de alguien y en pocos minutos un restaurante ha sido seleccionado cerca del lugar. Ejemplo # 3 - Quiropráctico (o muchas otras empresas de servicios médicos) Un hombre de negocios fuera de la ciudad comienza a experimentar dolor de espalda. Cuando está fuera de su área habitual , utiliza su dispositivo móvil para buscar un quiropráctico que ofrece consultas sin cita. 6 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  7. 7. Mobile Website Design – 5 Things You Need To Know! Como puede ver, hay un montón de razones por las que alguien puede utilizar un dispositivo móvil para buscar un negocio. Un beneficio adicional es que la mayoría están buscando hacer negocio de inmediato , no en algún momento en el futuro. Si su sitio web móvil es fácil de encontrar , atractivo , fácil de navegar y ofrece la información esencial del negocio , tiene una buena oportunidad de ganar un nuevo cliente . 7 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  8. 8. Mobile Website Design – 5 Things You Need To Know! ¿Qué lenguaje de codificación es el mejor? Los sitios web móviles pueden ser " codificados " en una variedad de lenguajes, al igual que sitios web regulares. Usted puede optar por código de su página web con HTML (Hypertext Markup Language) , XHTML ( Extensible Hypertext Markup Language ) o HTML5 ( la nueva versión del lenguaje de marcado de hipertexto ) . Me doy cuenta de que todo esto es muy técnico, pero es importante por lo menos saber sus opciones antes de comenzar su proyecto de sitio web móvil. Me gustaría recomendar a evitar el uso estándar de HTML, XHTML incluso , ya que no será capaz de tomar ventaja de ciertas " características móviles ", como enlaces " Toque-Para-Llamar " . Estos permiten al usuario hacer clic en su número de teléfono , y realizar la llamada sin escribir absolutamente nada. Además, yo evitaría el código de su sitio móvil en HTML5 , por el momento , como el "estándar " ya que este código aún no está completo para móviles, y algunos navegadores no son totalmente compatibles con las características de HTML5. Entonces, ¿ qué recomiendo ? 8 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  9. 9. Mobile Website Design – 5 Things You Need To Know! Recomiendo el uso de XHTML MP ( el "Perfil de Mobile" versión de XHTML ) . Es totalmente compatible con todos los navegadores , y le permite tomar ventaja de una variedad de " características móviles ", incluyendo enlaces "Tocar-para-Llamar" enlaces. Es lo que nosotros utilizamos para nuestros propios sitio web para móviles , y de nuestros clientes. Si usted tiene un dispositivo móvil , puede hacer clic aquí para ver nuestro sitio web para móviles . 9 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  10. 10. Mobile Website Design – 5 Things You Need To Know! ¿Qué hace que un sitio web móvil diferente del que tengo ahora ? Diseñar un sitio web para móviles puede ser un verdadero desafío porque hay muchas inconsistencias entre los dispositivos utilizados para acceder a su sitio web. Algunos, como los teléfonos inteligentes , tienen pantallas muy pequeñas y otras , como iPads o en general las tabletas, tienen pantallas más grandes que permiten ver las páginas en formato "horizontal" con mayor facilidad. Algunos pueden ver el contenido de Flash -video, y algunos, como los dispositivos de Apple, no pueden. Algunos tienen procesadores relativamente rápidos, y los navegadores con todas las funciones , y algunos con muy pocas o ninguna. La mayoría no tienen un teclado de tamaño completo, o ningúntienen un teclado en absoluto. Debido a esto , es importante que su sitio móvil esté optimizado para "pantallas táctiles. " Este segmento representa el segmento de mayor crecimiento de los dispositivos móviles , y casi todos los nuevos dispositivos hacen uso de la tecnología de pantalla táctil. 10 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  11. 11. Mobile Website Design – 5 Things You Need To Know! En términos generales , aquí están las principales cosas a tener en cuenta en el diseño de su sitio móvil : • Su sitio debe tener un diseño "flexible " ... uno que se expanda o contraiga en función del tamaño de la pantalla del dispositivo móvil en que se visualice. • El diseño no debe obligar al usuario a desplazarse de izquierda a derecha , ni debe exigir que se utilicen las funciones de "zoom -in " o "zoom -out" si es posible. • El sitio debe ser fácil de navegar a través de la pantalla táctil del usuario. • Su información de contacto debe ser fácil de encontrar , y todos los números de teléfono se debe marcar con la función " Click-to -Call ". • Cada página de su sitio móvil debe ser optimizada para tener un un tamaño de archivo pequeño . Muchos dispositivos tienen procesadores lentos y las páginas se cargan a "paso de tortuga" si sus tamaños de página son superiores a 75kb . • Si los clientes necesitan llegan a su negocio físico, considerar la adición de un "mapa de Google " interactivo o alguna otra funcionalidad que haga más fácil para sus visitantes móviles para encontrarlo. 11 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  12. 12. Mobile Website Design – 5 Things You Need To Know! • No utilice el "Flash" para cualquier elemento en su sitio móvil. Si lo hace, algunos usuarios simplemente no serán capaz de verlo. En su lugar, considere o bien eliminar el contenido "dinámico" en conjunto, o simular el efecto a través de Javascript. La mayoría de los dispositivos móviles tienen el Javascript habilitado, y se mostrará correctamente el contenido . 12 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  13. 13. Mobile Website Design – 5 Things You Need To Know! ¿Necesito "SEO " en Mi sitio móvil? SEO o Search Engine Optimization, es un conjunto de técnicas que se utilizan para mejorar el " ranking de los motores de búsqueda " de una página web, en relación con un conjunto de "palabras clave" o frases. Por lo tanto , si usted es un quiropráctico , alguien puede encontrar su sitio web fácilmente cuandobusca por palabras como "quiropráctico " ó " quiropráctico de emergencia", o cualquier número de frases o palabras clave similares. Los principales motores de búsqueda ofrecen resultados diferentes para los visitantes móviles , por lo que es importante optimizar su sitio web para móviles al igual que lo haría con su sitio web regular. La buena noticia, sin embargo , es que los motores de búsqueda están clasificando a los sitios web amigables para móviles más alto en los resultados. Como resultado , la creación de un sitio web para móviles le dará una mejor oportunidad de conseguir una mayor exposición en los motores de búsqueda . No es mi intención enseñarle sobre Search Engine Optimization , es un tema muy complejo para este breve informe . Sin embargo , nuestra recomendación 13 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  14. 14. Mobile Website Design – 5 Things You Need To Know! es que tenga contenido único para su sitio web para móviles en lugar de utilizar el contenido existente en su actual sitio web. Además de que su contenido sea único, también debe ser breve . Los visitantes móviles están típicamente en apuros o con poco tiempo, y no requieren de todo el contenido que aparece en su sitio web regular. 14 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  15. 15. Mobile Website Design – 5 Things You Need To Know! ¿Cómo la gente Encontrará Mi Sitio Web Móvil ? Después de construir su sitio móvil , usted querrá asegurarse de que se puede encontrar en su mercado objetivo. Afortunadamente , algo de exposición se puede lograr de forma automática . Algunos propietarios de sitios web prefieren poner un " enlace activo " en su sitio regular que dice algo así como: " Haga clic aquí para visitar nuestro sitio web para móviles. " Si el usuario hace clic en el vínculo , se muestra el sitio web amigable para móviles. Personalmente , a nosotros no nos gusta este enfoque. Se obliga al visitante a ver el sitio web " no-amigable para móviles", y sólo muestra la versión móvil si el usuario tiene la suerte de encontrar el enlace antes mencionado . En su lugar , se puede emplear un "script de redirección" en su página web regular. De esta manera , su sitio web será capaz de determinar de una manera inteligente qué navegador para acceder a la página web, está siendo utilizado por el visitante. Si detecta que se está utilizando un " navegador móvil ", se muestra automáticamente la versión móvil de la página web. Esto es mucho mejor ya que el visitante verá un diseño agradable de inmediato ... uno que está optimizado para un dispositivo móvil y uno que puede ser fácil de navegar . 15 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  16. 16. Mobile Website Design – 5 Things You Need To Know! Sin embargo, me permito sugerir que usted puede proporcionar a sus visitantes una forma de ver su sitio web regular si realmente lo quiere. Muchos "script de redirección" tienen una función específica que permite que el script sea anulado si el usuario desea acceder a su sitio web tradicional o de escritorio una vez estando en sus sitio web móvil. Si este es el caso, usted puede añadir un enlace para ver su página web tradicional. Además de utilizar un "script de redirección", nosotros sugerimos optimizar su sitio móvil para los motores de búsqueda ( con técnicas SEO) , y hacer todo lo posible para asegurarse de que sus clientes actuales conozcan su nuevo sitio móvil. Algunas ideas incluyen ... • El envío de un boletín electrónico que " revela " su nuevo sitio móvil. • Alertar a sus "fans" (a través de Facebook , Twitter , LinkedIn , etc. ) acerca de su nuevo sitio móvil. • Posteo de una entrada en su blog acerca de su nuevo sitio web para móviles y pidiendo comentarios/sugerencias. 16 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  17. 17. Mobile Website Design – 5 Things You Need To Know! • La inclusión de un código QR en la parte posterior de su tarjeta de visita que lleva al usuario directamente a su sitio móvil . Por supuesto , hay muchas otras maneras de promocionar su sitio móvil , pero estas ideas sin duda le ayudarán en sus esfuerzos de marketing. 17 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  18. 18. Mobile Website Design – 5 Things You Need To Know! Conclusión Bueno, este breve informe está llegando a su fin, pero queremos darle algunos ejemplos visuales que pueden ayudarle a entender mejor la importancia de tener un sitio web para móviles. Le vamos a dar tres ejemplos, comenzando desde el más "suave", y avanzando hacia el más "salvaje". Nota: Cada gráfico contendrá dos imágenes. La primera es una imagen tomada desde mi portátil, el segundo una foto de lo que el sitio web se ve igual que cuando se ve en un iPod touch (4 ª generación). Ejemplo #1 – http://tvtowing.com TVTowing.com está clasificado en la primera página de Google con la frase, "remolques los ángeles CA." Su sitio web no aparece horriblemente en un dispositivo móvil, pero está lejos de ser óptimo. Como puede ver en las imágenes de la página siguiente, su sitio se ajusta a la ventana del iPod Touch, pero el texto es demasiado pequeño para leerse fácilmente. El visitante puede acercar la imagen, pero eso hace necesario comenzar a desplazarse de izquierda a derecha para leer el contenido o navegar por el sitio. 18 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  19. 19. Mobile Website Design – 5 Things You Need To Know! 19 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  20. 20. Mobile Website Design – 5 Things You Need To Know! Ejemplo #2 – http://pepzpizza.com PepzPizza.com está clasificado en la primera página de Google con la frase, "pizza anaheim CA." Este negocio no está muy lejos de Disneyland, y está clasificado muy bien. Sin embargo, ellos realmente necesitan un sitio web para móviles, ya que parte de su contenido no es visible en dispositivos móviles que no admiten Flash (es decir, el iPhone, iPad, iPod Touch y una variedad de dispositivos de otros fabricantes). Como puede ver en las imágenes de la página siguientes, el gráfico hacia la parte superior de la página no se muestra en el dispositivo móvil (ya que fue construido con Flash) y el menú de navegación del sitio desaparece también (y eso es muy malo!). 20 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  21. 21. Mobile Website Design – 5 Things You Need To Know! 21 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  22. 22. Mobile Website Design – 5 Things You Need To Know! Ejemplo #3 – http://mmlpr.com Mmlpr.com es el ejemplo más extremo de una "página web que ha ido mal!" Irónicamente, esta empresa está involucrada en marketing y relaciones públicas. Como la totalidad de su sitio está construido en Flash (sus gráficos y su contenido), que literalmente desaparecen cuando intenta verse en un dispositivo móvil que no permite instalar Flash. La imagen superior muestra lo que verá si ve su sitio en una computadora de escritorio o portátil. La imagen inferior muestra que todo, excepto una imagen de fondo simple, desaparece cuando se trata de ver en el dispositivo móvil. 22 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  23. 23. Mobile Website Design – 5 Things You Need To Know! 23 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  24. 24. Mobile Website Design – 5 Things You Need To Know! Esperamos que haya encontrado útil todo este reporte, y que le ayude a la hora de diseñar sitio web para móviles o pedir que se lo diseñen. Si desea ayuda profesional, estamos aquí para usted. Somos expertos en la creación de sitios web para móviles de calidad y nos encantaría la oportunidad de construir uno para usted! Si desea ver cómo podemos ayudarle, llámenos al: (656) 683-2995 en México ó visite: http://www.mobilenicheapps.com y complete el formulario de solicitud en línea para solicitar más información. Esperamos hablar con usted y haremos todo lo posible para ayudarle a aumentar su exposición web con tecnologías móviles, obtener nuevos negocios y superar a sus competidores! Por su Éxito! Héctor Jayat Consultor Móvil www.mobilenicheapps.com 24 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com
  25. 25. Mobile Website Design – 5 Things You Need To Know! Acerca del Autor Hector Jayat es el fundador/CEO de Mobilenicheapps que se especializa en ayudar a negocios locales principalmente en el nicho de restaurantes a tener una presencia en línea significativa y obtener más clientes y ganancias. El tiene experiencia en temas de la Ingeniería como son Electrónica, Comunicaciones, Sistemas, Marketing por Internet, Marketing Móvil, Diseño Web y Diseño de aplicaciones de negocios para móviles. Cuando el no está haciendo marketing con negocios locales, disfruta enseñar sobre aplicaciones para android a sus amigos, esposa e hija. Incremente la Exposición de su Negocio de Restaurante Enlistando Su Negocio en RESTAMOVIL.COM El Primer Directorio de Restaurantes Móvil http://www.restamovil.com 25 Diseño Web Móvil – 5 Cosas Que Necesita Saber! Por: Héctor Jayat – www.mobilenicheapps.com

×