diseno web movil - 5 cosas que necesita saber

25
Diseño Web Móvil -5 Cosas Que Usted Necesita Saber! www.mobilenicheapps.com Page 1 Diseño Web Móvil - 5 Cosas Que Usted Necesita Saber! Por Héctor Jayat

Post on 21-Oct-2014

271 views

Category:

Marketing


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Diseno web movil - 5 Cosas Que Necesita Saber

Diseño Web Móvil -5 Cosas Que Usted Necesita Saber!

www.mobilenicheapps.com Page 1

Diseño Web Móvil -5 Cosas Que Usted

Necesita Saber!

Por Héctor Jayat

Page 2: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

2 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

Aviso legal / Información Legal

Todos los derechos reservados . Ninguna parte de esta publicación puede serreproducida, almacenada en sistemas de recuperación o transmitida encualquier forma o por cualquier medio, sin el permiso previo y por escrito delautor / editor , excepto en el caso de citas breves con el fin de escribirartículos críticos o opiniones .Aviso de responsabilidad

El autor y el editor han realizado todos los esfuerzos para asegurar laprecisión de la información aquí contenida . Sin embargo , la informacióncontenida en este libro se presenta sin ninguna garantía , ya sea expresa oimplí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 delpropietario de la marca sin intención de infracción de la marca .Información de derechos de autor© 2013 Hector Jayatwww.mobilenicheapps.com

Page 3: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

3 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

Tabla de ContenidosIntroducció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 15Conclusión .................................................................................................................... Página 18Sobre el autor .............................................................................................................. Página 25

Page 4: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

4 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

Introducción

El mundo se ha vuelto móvil, y empresas como Apple, Google y Amazon estánapostando 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 webpara móviles para su negocio.Para la mejora de su presencia móvil ,

Hector Jayat

Page 5: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

5 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

¿Realmente necesito un sitio web para móviles?

Las últimas estadísticas son realmente alarmantes. Según CBS News , hay másde 5 mil millones de teléfonos celulares en uso en todo el mundo , y alrededorde mil millones de ellos son capaces de conectarse a Internet .De hecho , hay más dispositivos móviles con conexión a Internet quecomputadoras de escritorio y portátiles juntos.Debido a que el uso de dispositivos móviles está en constante aumento , esimportante que cada empresa considere la construcción de un sitio webamigable para móviles. Aquellos que no lo hagan , corren el riesgo de perdernegocio 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 ofrecetodo tipo de servicios móviles , servicios de emergencia , servicios que sepueden ordenar en línea o simplemente negocios que se requieren cuando elusuario está en movimiento y/o fuera del alcance de su computadora deescritorio, 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 negociopuede beneficiarse.

Page 6: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

6 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

Ejemplo # 1 – Servicio de Grúas o RemolquesEste ejemplo debe ser fácil de seguir. A un automovilista se le queda pardo elcarro y está en la necesidad de un servicio de remolque de emergencia. Comono está en casa, lo más probable es que va a utilizar un dispositivo móvil paraencontrar el servicio que necesita .Esto pone de relieve tanto la necesidad de un sitio web para móviles, y un sitioweb bien optimizado para los motores de búsqueda ( también conocido como" SEO" - Search Engine Optimization) .Ejemplo # 2 - RestaurantesDespués de la iglesia , un grupo de amigos habla de dónde podrían ir aalmorzar . La búsqueda se lleva a cabo en el smartphone de alguien y en pocosminutos 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 deespalda. Cuando está fuera de su área habitual , utiliza su dispositivo móvilpara buscar un quiropráctico que ofrece consultas sin cita.

Page 7: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

7 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

Como puede ver, hay un montón de razones por las que alguien puede utilizarun dispositivo móvil para buscar un negocio. Un beneficio adicional es que lamayoría están buscando hacer negocio de inmediato , no en algún momentoen el futuro.Si su sitio web móvil es fácil de encontrar , atractivo , fácil de navegar y ofrecela información esencial del negocio , tiene una buena oportunidad de ganar unnuevo cliente .

Page 8: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

8 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

¿Qué lenguaje de codificación es el mejor?

Los sitios web móviles pueden ser " codificados " en una variedad delenguajes, al igual que sitios web regulares. Usted puede optar por código desu página web con HTML (Hypertext Markup Language) , XHTML ( ExtensibleHypertext Markup Language ) o HTML5 ( la nueva versión del lenguaje demarcado de hipertexto ) .Me doy cuenta de que todo esto es muy técnico, pero es importante por lomenos 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 ensu 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, yalgunos navegadores no son totalmente compatibles con las características deHTML5.Entonces, ¿ qué recomiendo ?

Page 9: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

9 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

Recomiendo el uso de XHTML MP ( el "Perfil de Mobile" versión de XHTML ) .Es totalmente compatible con todos los navegadores , y le permite tomarventaja 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 , yde nuestros clientes.Si usted tiene un dispositivo móvil , puede hacer clic aquí para ver nuestrositio web para móviles .

Page 10: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

10 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

¿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 haymuchas inconsistencias entre los dispositivos utilizados para acceder a susitio web.Algunos, como los teléfonos inteligentes , tienen pantallas muy pequeñas yotras , como iPads o en general las tabletas, tienen pantallas más grandes quepermiten ver las páginas en formato "horizontal" con mayor facilidad.Algunos pueden ver el contenido de Flash -video, y algunos, como losdispositivos de Apple, no pueden.Algunos tienen procesadores relativamente rápidos, y los navegadores contodas las funciones , y algunos con muy pocas o ninguna.La mayoría no tienen un teclado de tamaño completo, o ningúntienen unteclado en absoluto. Debido a esto , es importante que su sitio móvil estéoptimizado para "pantallas táctiles. " Este segmento representa el segmentode mayor crecimiento de los dispositivos móviles , y casi todos los nuevosdispositivos hacen uso de la tecnología de pantalla táctil.

Page 11: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

11 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

En términos generales , aquí están las principales cosas a tener en cuenta en eldiseño de su sitio móvil :• Su sitio debe tener un diseño "flexible " ... uno que se expanda o contraiga enfunció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 , nidebe exigir que se utilicen las funciones de "zoom -in " o "zoom -out" si esposible.• 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úmerosde 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ñode archivo pequeño . Muchos dispositivos tienen procesadores lentos y laspáginas se cargan a "paso de tortuga" si sus tamaños de página son superioresa 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ácilpara sus visitantes móviles para encontrarlo.

Page 12: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

12 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

• 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, considereo bien eliminar el contenido "dinámico" en conjunto, o simular el efecto através de Javascript.La mayoría de los dispositivos móviles tienen el Javascript habilitado, y semostrará correctamente el contenido .

Page 13: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

13 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

¿Necesito "SEO " en Mi sitio móvil?

SEO o Search Engine Optimization, es un conjunto de técnicas que se utilizanpara mejorar el " ranking de los motores de búsqueda " de una página web, enrelación con un conjunto de "palabras clave" o frases.Por lo tanto , si usted es un quiropráctico , alguien puede encontrar su sitioweb fácilmente cuandobusca por palabras como "quiropráctico " ó "quiropráctico de emergencia", o cualquier número de frases o palabras clavesimilares.Los principales motores de búsqueda ofrecen resultados diferentes para losvisitantes móviles , por lo que es importante optimizar su sitio web paramó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ánclasificando a los sitios web amigables para móviles más alto en losresultados. 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 debúsqueda .No es mi intención enseñarle sobre Search Engine Optimization , es un temamuy complejo para este breve informe . Sin embargo , nuestra recomendación

Page 14: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

14 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

es que tenga contenido único para su sitio web para móviles en lugar deutilizar el contenido existente en su actual sitio web.Además de que su contenido sea único, también debe ser breve . Los visitantesmóviles están típicamente en apuros o con poco tiempo, y no requieren detodo el contenido que aparece en su sitio web regular.

Page 15: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

15 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

¿Cómo la gente Encontrará Mi Sitio Web Móvil ?

Después de construir su sitio móvil , usted querrá asegurarse de que se puedeencontrar en su mercado objetivo. Afortunadamente , algo de exposición sepuede lograr de forma automática .Algunos propietarios de sitios web prefieren poner un " enlace activo " en susitio regular que dice algo así como: " Haga clic aquí para visitar nuestro sitioweb para móviles. " Si el usuario hace clic en el vínculo , se muestra el sitioweb amigable para móviles.Personalmente , a nosotros no nos gusta este enfoque. Se obliga al visitante aver el sitio web " no-amigable para móviles", y sólo muestra la versión móvilsi 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 webregular. De esta manera , su sitio web será capaz de determinar de unamanera inteligente qué navegador para acceder a la página web, está siendoutilizado por el visitante. Si detecta que se está utilizando un " navegadormó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 deinmediato ... uno que está optimizado para un dispositivo móvil y uno quepuede ser fácil de navegar .

Page 16: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

16 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

Sin embargo, me permito sugerir que usted puede proporcionar a susvisitantes 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 queel script sea anulado si el usuario desea acceder a su sitio web tradicional o deescritorio una vez estando en sus sitio web móvil. Si este es el caso, ustedpuede añadir un enlace para ver su página web tradicional.Además de utilizar un "script de redirección", nosotros sugerimos optimizarsu sitio móvil para los motores de búsqueda ( con técnicas SEO) , y hacer todolo posible para asegurarse de que sus clientes actuales conozcan su nuevositio 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. ) acercade su nuevo sitio móvil.• Posteo de una entrada en su blog acerca de su nuevo sitio web para móvilesy pidiendo comentarios/sugerencias.

Page 17: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

17 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

• La inclusión de un código QR en la parte posterior de su tarjeta de visita quelleva al usuario directamente a su sitio móvil .Por supuesto , hay muchas otras maneras de promocionar su sitio móvil , peroestas ideas sin duda le ayudarán en sus esfuerzos de marketing.

Page 18: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

18 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

ConclusiónBueno, este breve informe está llegando a su fin, pero queremos darle algunosejemplos visuales que pueden ayudarle a entender mejor la importancia detener un sitio web para móviles.Le vamos a dar tres ejemplos, comenzando desde el más "suave", y avanzandohacia el más "salvaje".Nota: Cada gráfico contendrá dos imágenes. La primera es una imagen tomadadesde mi portátil, el segundo una foto de lo que el sitio web se ve igual quecuando se ve en un iPod touch (4 ª generación).Ejemplo #1 – http://tvtowing.comTVTowing.com está clasificado en la primera página de Google con la frase,"remolques los ángeles CA." Su sitio web no aparece horriblemente en undispositivo 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 laventana del iPod Touch, pero el texto es demasiado pequeño para leersefácilmente. El visitante puede acercar la imagen, pero eso hace necesariocomenzar a desplazarse de izquierda a derecha para leer el contenido onavegar por el sitio.

Page 19: Diseno web movil - 5 Cosas Que Necesita Saber

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

Page 20: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

20 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

Ejemplo #2 – http://pepzpizza.comPepzPizza.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 queparte de su contenido no es visible en dispositivos móviles que no admitenFlash (es decir, el iPhone, iPad, iPod Touch y una variedad de dispositivos deotros fabricantes).Como puede ver en las imágenes de la página siguientes, el gráfico hacia laparte superior de la página no se muestra en el dispositivo móvil (ya que fueconstruido con Flash) y el menú de navegación del sitio desaparece también(y eso es muy malo!).

Page 21: Diseno web movil - 5 Cosas Que Necesita Saber

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

Page 22: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

22 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

Ejemplo #3 – http://mmlpr.comMmlpr.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 relacionespúblicas.Como la totalidad de su sitio está construido en Flash (sus gráficos y sucontenido), que literalmente desaparecen cuando intenta verse en undispositivo móvil que no permite instalar Flash.La imagen superior muestra lo que verá si ve su sitio en una computadora deescritorio o portátil. La imagen inferior muestra que todo, excepto una imagende fondo simple, desaparece cuando se trata de ver en el dispositivo móvil.

Page 23: Diseno web movil - 5 Cosas Que Necesita Saber

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

Page 24: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

24 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

Esperamos que haya encontrado útil todo este reporte, y que le ayude a lahora 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 lacreación de sitios web para móviles de calidad y nos encantaría laoportunidad 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 desolicitud en línea para solicitar más información.Esperamos hablar con usted y haremos todo lo posible para ayudarle aaumentar su exposición web con tecnologías móviles, obtener nuevos negociosy superar a sus competidores!Por su Éxito!Héctor JayatConsultor Móvilwww.mobilenicheapps.com

Page 25: Diseno web movil - 5 Cosas Que Necesita Saber

Mobile Website Design – 5 Things You Need To Know!

25 Diseño Web Móvil – 5 Cosas Que Necesita Saber!Por: Héctor Jayat – www.mobilenicheapps.com

Acerca del AutorHector Jayat es el fundador/CEO de Mobilenicheapps que seespecializa en ayudar a negocios locales principalmente en elnicho de restaurantes a tener una presencia en línea significativa y obtenermá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ñoWeb y Diseño de aplicaciones de negocios para móviles.Cuando el no está haciendo marketing con negocios locales, disfruta enseñarsobre aplicaciones para android a sus amigos, esposa e hija.

Incremente la Exposición de su Negocio de RestauranteEnlistando Su Negocio en

RESTAMOVIL.COMEl Primer Directorio de Restaurantes Móvil

http://www.restamovil.com