En estos días todo el mundo está avanzando hacia la web. Desde pequeñas empresas hasta las grandes empresas a las escuelas en línea, etc universidades, todos están trabajando duro para hacer un impacto grande en línea, porque esto es casi publicidad gratuita para su marca y los resultados en el mismo llegar a una gama más amplia de la audiencia que el uso de otras formas de manual para hacer así. Un aspecto importante de Diseño de páginas Web es una «Versión Móvil» de la página web en estos días porque los teléfonos móviles con servicio de internet se están convirtiendo en todo el mundo muy común y por lo tanto quiere permanecer conectados a sus sitios web favoritos en cualquier lugar.
Hoy, vamos a discutir algunos aspectos clave y las técnicas que un desarrollador web / diseñador debe seguir para tener una versión móvil limpio y de aspecto profesional de cualquier sitio web. Así que vamos a empezar!
interfaces móviles son generalmente pequeñas y por lo que un desarrollador tiene que ajustar las dimensiones previamente definidas. Para empezar, a continuación es un esquema muy básico de un «sitio web móvil».
DISPOSICIÓN
Vamos a discutir los diferentes elementos de la disposición anterior:
- LOGO:
Una de las cosas principales en el diseño. Usted debe tratar de hacerlo lo más atractivo posible, pero al mismo tiempo cuidar de su tamaño. Asegúrese de que el tamaño no exceda de 2 KB de tamaño, ya que las imágenes siempre tienen siempre la carga en las redes móviles y no quisiera que su sitio de carga incompleta de diferentes personas!
- SITIO WEB DE NAVEGACIÓN:
Una de las cosas más importantes en el diseño. No importa qué, usted necesita tener los enlaces a las páginas principales / lugares / cosas en su sitio en este bar y esta debe estar siempre en la parte superior. Como usted sabe, al escribir en la mayoría de los dispositivos móviles utilizando el teclado QWERTY pequeño o los teclados QWERTY virtual no es fácil trabajar con ellos en todo. Por lo tanto, la creación de un sistema de navegación completo para su sitio web es un aspecto clave para hacer que su sitio web para móviles ambiente.
- CONTENIDO:
Esto es lo principal en su sitio web para móviles. La gente en realidad vienen a sitios web en sus dispositivos móviles sólo para ver el contenido. Así que asegúrese de que usted no hace ningún cambio solo a su contenido para dispositivos móviles de lo contrario podría terminar perdiendo un usuario.
Si bien en dispositivos móviles, la gente está generalmente en el tiempo de ir, así que realmente no tienen mucho que ver el contenido. Como solución a esto, usted debe reducir su contenido a algunos puntos de gran valor, pero al mismo tiempo, debe proporcionar el usuario con un enlace al artículo principal que contiene todo el contenido. (Si usted tiene un blog activo, entonces puede pasar por alto, puesto que no puede realmente reducir el contenido de cada mensaje por separado todos los días!)
Todos sabemos que las imágenes en el contenido son una necesidad. Pero en la versión móvil de su sitio web, usted debe asegurarse de que usted no tiene gráficos mucho porque la mayoría de los teléfonos móviles que tardan una eternidad en cargar imágenes pesadas. Así que utilice las imágenes y los gráficos lo menos posible, sólo cuando contextualmente relevantes.
Y si quieren poner las imágenes en su sitio web para móviles, debe estar en formato. JPEG o. GIF o. PNG ya que estos archivos son bastante ligeros. Además, asegúrese de comprimir las imágenes para evitar el zoom. Y uno más, hoy en día casi todos los dispositivos actuales mostrar imágenes, sin embargo, los usuarios pueden navegar con las imágenes apagadas. Así que siempre uso la propiedad de texto ALT para las imágenes que es una práctica recomendada. Además, debe adecuadamente el tamaño de su imagen para evitar una situación en la que el lector o visitante tiene que hacer zoom en la imagen para ver bien.
- PIE DE PÁGINA:
Hay un viejo refrán, «Un hombre no es reconocido por la ropa que lleva puesta, sino por la condición de sus zapatos!» Esto va más cierto para muchos sitios web. Siempre veo los blogs, el marketing de Internet, etc sobrecargada con «la basura y sucio» hiper-enlaces de pie de página. Como yo, muchos otros no les gusta y en sitios web para móviles, donde el tamaño de la pantalla es pequeña, esto podría ser una cosa en la que podría perder un cliente o un lector. Así que un atractivo pie de página!
Así que si desea que sus aplicaciones / web ‘s móviles interfaz va con éxito, usted debe poner atención en su diseño. Simplemente debe ser libre de errores como «Web de navegación en dispositivos móviles» será la próxima gran cosa.
CODIFICACIÓN
Esto es algo que muchos desarrolladores de nuevos móviles de interfaz dude. A continuación se presentan algunos consejos que pueden ayudar a quitar esa duda:
- Código válido:
Utilice el código adecuado y asegúrese de que el 100% válida porque la mayoría de los navegadores móviles no son tan buenos como los PC (computadoras personales) ejemplares por lo que debe asegurarse de que es válida.
- PLANOS DE FLUIDO:
No siempre es fácil descubrir cómo su diseño se verá en todos los navegadores móviles, ya que hay dispositivos móviles demasiados utilizados para la navegación web y para el seguimiento de todos puede ser un gran dolor. Una manera de abordar / omitir este problema es el uso de diseños de líquido que se ajustará automáticamente al tamaño de la pantalla.
Para lograr esto evitar el establecimiento de ancho en píxeles y porcentajes de uso o EMS en su lugar. Por ejemplo, en lugar de:
vista de origen
de impresión?
1 ancho: 400px;
uso
vista de origen
de impresión?
Un ancho de: 100%
o
vista de origen
de impresión?
1 ancho: 1.0ems
Puede encontrar más información acerca de los diseños móviles de líquidos y también descargar algunos los pre-construidos por ir a este enlace: Perfecto varias columnas CSS diseños líquidos – compatible con iPhone
- Hojas de estilo ESPECÍFICAS
Usted siempre puede dirigirse a distintos dispositivos móviles para el usuario una mejor experiencia. Por ejemplo, para la orientación navegación de los usuarios de su sitio el uso de dispositivos de mano se puede utilizar esto en de su sitio web:
vista de origen
de impresión?
1
Puede encontrar más información sobre estos tipos de medios en este enlace: W3.org – Tipos de medios.
- DICEN «NO» a los scripts FANCY
Para su sitio web para móviles para ir con éxito, no use Javascript o Flash o cualquier otro de los guiones de lujo se encuentra allí a cabo. Debido a que la mayoría de los dispositivos móviles no interpretar estos y terminar bien la congelación de los dispositivos o simplemente hacer algo estúpido!
Si realmente quieres usar estos continuación, debe darle a su usuario una opción de Cortés para que el usuario sabe lo que su teléfono móvil se está cargando y la apertura (y si algo sale mal, es suya la culpa y no porque ya les advirtió) .
- Take It Easy con los anuncios
Esto es una cosa que casi todo el mundo debe tener cuidado de! No llene su página con anuncios móviles. Y esto no es sólo para la página móvil, sino también para el sitio web original.
Es un viejo dicho: «Una manzana podrida en un cesto hace que todos los demás sucia». Esto se hace verdadero para estos sitios web que están llenos de anuncios. Estos sitios web no se preocupan por la experiencia del usuario, pero sólo se preocupan por el dinero que entra en sus bolsillos (porque CPM es alto en los dispositivos móviles).
Así que mi sugerencia, simplemente no lo llenan de anuncios! «Simplemente no hacer que su página con anuncios de colores.»
- DETECCIÓN DE NAVEGADOR MÓVIL (AUTOMÁTICO)
Para hacer su marca de éxito también debe incluir un sistema automático «móvil de detección del explorador y la redirección de» script del lado del servidor (por ejemplo, PHP). Usted también puede usar esto como la detección del agente de usuario, donde un servidor toma una decisión sobre lo que debe servir como base en un navegador de entrada describe sus capacidades. Usted también puede usar esto como un método alternativo o de reserva a la anterior de detección de navegador móvil en PHP. Otras implementaciones función JavaScript peticiones en tiempo real a bases de datos como DeviceAtlas o WURFL que también suministran información sobre lo que un dispositivo puede hacer. Una versión para móviles no está completa hasta que se activa automáticamente para cada usuario móvil!
* Hacer un cliente de aplicaciones dedicado (si es necesario)
¡Sí! Has leido bien. Si usted tiene un usuario muy alto-base, hacer una aplicación específicas dirigidas a diferentes interfaces móviles. Facebook, Gmail, Twitter, Yahoo y muchas otras grandes empresas-han hecho esto y es por eso que han tenido tanto éxito. Si usted hace una aplicación para dispositivos específicos, entonces ya no tiene que preocuparse por todos los scripts de lujo, etc, ya que puede mejorar la aplicación de su propio camino (no se puede cambiar el navegador móvil, pero definitivamente su propia aplicación).
MÓVIL CONSTRUCTORES DEL SITIO
Usted debe haber visto los constructores de sitio web de lujo por ahí, ¿no? Bueno, ahora tenemos los sitios web que ayudan a crear sitios web para las interfaces móviles, así!
1. MOBIFY
2. MOFUSE
3. WIRENODE
4. MobilePress
5. WP-TAP
6. WP-TOUCH PRO
Así que hemos pasado por casi todos los aspectos y las técnicas de «Diseño de sitio web para móviles». Si usted tiene alguna pregunta acerca de algo relacionado con «Diseño de Sitio Web móvil», entonces no dude en señalar que en los comentarios!
Fuente: www.1stwebdesigner.com