Etiqueta: diseño de páginas web quito

Una primera aproximación o intento de resolver este problema es el denominado diseño líquido o fluido. Se dice que una página web tiene diseño líquido cuando la anchura de sus elementos está definida utilizando porcentajes. Supongamos que tenemos una cabecera cuyo ancho fijamos en el 100 %, una columna lateral cuyo ancho fijamos en el 25 % y una parte principal de contenidos cuyo ancho fijamos en el 75%. El resultado será que al visualizarse en distintos dispositivos la anchura de los elementos será un porcentaje de la anchura disponible.

Supongamos que establecemos un ancho “fijo” para nuestra página web de 900 px y que para el contenedor que conforma la columna lateral definimos #columnaLateral {widht: 225px; } y para el contenedor del espacio principal definimos #espacioCentral {width: 675px;}. Con estas reglas decimos que el diseño no es fluido porque no se adaptarán al ancho disponible de pantalla. En la TV Full HD de nuestro ejemplo el ancho disponible es de 1920 px, mientras que el ancho total que ocuparemos con la definición indicada es de 900 px. Esto supone que 1920 – 920 = 1000px de la pantalla del televisor quedará libre, con lo que la sensación será que la página web se ve muy pequeña y se desaprovecha la pantalla.

Por el contrario, si consideramos el iPhone del ejemplo, su ancho disponible es de 640 px mientras que nuestra página web tiene 900 px de ancho. Como la página web no cabe en la pantalla, aparecerá cortada y para poder ver las partes no visibles aparecerán unas barras de scroll. La sensación será que la página web se ve muy grande y cortada.

Pasamos ahora al diseño fluido. Para ello definiríamos las anchuras en porcentajes. Fíjate que siempre hablamos de anchuras porque se entiende que las páginas web en vertical son muy largas y el usuario ya está acostumbrado a tener que subir y bajar por ellas. En cambio, tener que moverse lateralmente es algo que suele considerarse “desagradable”.  En el diseño fluido definiríamos los anchos de esta manera: para la columna lateral #columnaLateral {widht: 25%; } y para el contenedor del espacio principal #espacioCentral {width: 75%;}.

Parece una solución ideal. Ahora el tamaño de la página web se ajustará a la pantalla y no se desaprovechará ninguna parte de las pantallas grandes ni aparecerán barras de scroll lateral en las pantallas pequeñas. ¿Qué ocurre en la práctica? En la práctica esta solución no es ideal ni mucho menos. Nos encontramos que ocurre lo siguiente: en las pantallas grandes, un párrafo que en una pantalla de un ordenador mediano se ve en 5 líneas se verá quizás en una sola línea ya que el ancho disponible es muy grande. El efecto es una línea muy larga que resulta desagradable de leer. Por el contrario, cuando un párrafo consta de una sola línea corta, en una pantalla muy grande se verá en el lateral izquierdo mientras que a su derecha queda un gran espacio en blanco. En general, el diseño fluido dará lugar a una deformación de contenidos que quedan muy a lo largo o demasiado cortos, y la impresión general es mala.

En las pantallas pequeñas como las de un smartphone, el diseño fluido hará que la página web “se comprima” para ocupar el ancho disponible que es muy poco. Cuando la pantalla es realmente pequeña, el efecto que se genera es de “miniaturización” o que todo se ve “diminuto”, tan pequeño que prácticamente no se puede leer. Por ello en la práctica es más habitual establecer estas anchuras principales en pixeles antes que en porcentajes.

La solución a obtener una correcta visualización en páginas web puede pasar por distintas vías:

a) Utilizar lo que se denomina “responsive design” que se podría traducir como “diseño sensible al dispotivo” aunque muchas veces en español se habla simplemente de “diseño responsive”. Esta técnica trata de usar un único HTML y CSS pero mediante la detección del dispositivo en que se va a visualizar la página, ofrecer un diseño adecuado para cada tipo de dispositivo (esto obliga a escribir diferentes reglas según el tipo de dispositivo en que se vaya a visualizar la web).

b) Utilizar diferentes dominios para el acceso con dispositivos pequeños o dispositivos grandes. Por ejemplo el dominio http://www.iberia.com/ está destinado a dispositivos de pantallas medianas o grandes mientras que http://iberia.mobi/ está destinado a tablets, smartphones y similares. Los diseños son distintos: más simples para los dispositos pequeños. Puede utilizarse la detección de dispositivo para redirigir del dominio principal al .mobi.

c) Definir ancho en pixeles, que como indicamos al hablar de medidas CSS podría considerarse una medida híbrida entre relativa y absoluta y es la que suele ofrecer un mejor resultado “intermedio”.

d) Utilizar otras técnicas.

¿Quieres comprar hosting y dominio Económico? Clic Aquí 

Diseño de páginas web Marketing Digital

¿Qué te pueden aportar las keywords?

En primer lugar, el hecho de ser el método habitual de búsqueda y entrada a una página web ya justifica el uso de keywords, su análisis y búsqueda.
Trabajar las keywords correctas en tus contenidos, te permitirá posicionarlos en las primeras posiciones de los buscadores y, como consecuencia, aumentar sus visitas.

De ahí que, si quieres conseguir un buen posicionamiento orgánico de una página web, blog o post, es totalmente necesario seleccionar las keywords correctas y utilizarlas de forma adecuada en el contenido.

Para que te hagas una idea, deberás utilizarlas en el título y en algún subtítulo, en la metadescripción, en el interior del texto (sobre todo en el primer párrafo), en el alt-text de las imágenes, entre otros. De esta forma, los buscadores entenderán que tu contenido trata sobre ese concepto concreto.

Dejando a un lado las cuestiones de posicionamiento, las keywords también resultan de extraordinaria ayuda para definir el contenido principal de una página y su estructura, así como de los diferentes posts publicados.

¿Quieres comprar Hosting y dominio Económico? Clic Aquí 

Diseño de páginas web Marketing Digital

Responsive web design ó Diseño web adaptativo es una técnica de diseño y desarrollo que crea un sitio web o sistema que se adapta al tamaño de la pantalla del usuario. Responsive design mejora la experiencia de navegación del usuario al ofrecer una página web adaptable y flexible, optimizada para el dispositivo que está utilizando. Los dispositivos móviles comienzan a ser el medio más habitual para acceder a Internet.
Los consumidores acceden a la red a través de smartphones (61%), ordenadores portátiles (37%) y tabletas (22%).Hoy en día, los dueños de sitios web se ven ante la decisión de tener un sitio web específico para dispositivos móviles o rediseñar su sitio actual convirtiéndolo en adaptable a dichos dispositivos (Responsive Web Design = Diseño Web Adaptable). Esto se nota especialmente porque no deben aparecer barras de navegación o scroll horizontales (parte inferior de la pantalla del navegador) y los elementos que componen cada una de las páginas del sitio deben adecuar su posición y tamaño.
Existen varios beneficios a la hora de  elegir el diseño adaptable, incluyendo algunos beneficios en lo que respecta a SEO (Posicionamiento en buscadores, principalmente el más popular Google).

Rankings locales más altos

Si está apuntando a palabras clave locales para su negocio, un diseño web adaptable mejorará sus rankings. Recuerde que cada vez mas gente busca direcciones de comercios, empresas o servicios locales usando dispositivos móviles. Los resultados de búsqueda en dispositivos móviles son influenciados por parámetros geo-específicos, entonces su sitio web deberá contemplar tales parámetros SEO. De esta manera, Google será capaz de identificar su sitio optimizado como uno de los que serán presentados de acuerdo a la búsqueda realizada.

Su trabajo SEO es preservado y mantenido sin verse afectado

El trabajo SEO puede ser costoso y lleva mucho tiempo, entonces porqué debería repetir ese trabajo para un sitio móvil? Cuando usted elige un sitio web adaptable en lugar de un sitio web específico para móviles por separado, todo el trabajo realizado en cuanto a SEO y redes sociales se mantendrá por completo ya que se trata exactamente del mismo sitio.
El trabajo SEO será mantenido, incluyendo los textos de enlaces, la estructura de enlaces interna, tags de títulos, meta descripciones, palabras clave, contenidos y URLs amigables a los buscadores.

Se evitan los contenidos duplicados

El diseño adaptable evita por completo el contenido duplicado tan mal visto por Google. Aquellos diseñadores que crean versiones móviles de sus sitios web generalmente duplican el contenido del sitio principal en la versión móvil. Este tipo de trabajos inmediatamente destruye la credibilidad de la versión móvil desde la perspectiva de los buscadores. Esto quiere decir que será más dificultoso rankear bien la versión móvil del sitio. Se pueden contrarrestar los efectos del contenido duplicado usando «Switchboard tags» (etiquetas que informan a Google que se trata del mismo sitio en donde uno de ellos es el principal (canonical) y el otro es una versión para ser vista en computadoras de escritorio, etc.), pero qué sucede si Google no los relaciona? Además, Bing y Yahoo todavía no tienen implementado este tipo de relacionamiento por completo, entonces usted puede arruinar la reputación de su sitio con estos otros buscadores también.
El diseño web adaptable también evita el trabajo de tener que actualizar 2 o más sitios web.

Se mantienen los enlaces (internos y externos o entrantes)

El intercambio o construcción de enlaces (o Link building) lleva mucho tiempo y es más costoso aún. Si usted ha invertido su tiempo o recursos en tener enlaces entrantes a su sitio, es mucho mejor utilizar esos enlaces para el beneficio de su sitio web móvil. Aquellos que crean versiones específicas de su sitio web para ser vistas por dispositivos móviles tienen que comenzar desde cero con el trabajo SEO y de intercambio de enlaces. Creando o reformando su sitio web actual a uno hecho con diseño web adaptable tendrá una gran ventaja sobre los que no lo hagan.
Otro de los beneficios es que las páginas de sitios adaptables son mas fáciles y más elegidas para ser compartidas. Un usuario móvil dudará de compartir la versión móvil de una página si cree que sus seguidores pueden tener problemas para verla en un dispositivo móvil. Los enlaces compartidos desde un móvil, por lo general, se adaptan al navegador, pero no contienen ninguno de los gráficos asociados con el sitio original.

Google fomenta el Diseño Web Adaptable (Responsive Web Design)

Google aún es dominante en las búsquedas por lo que debemos escuchar atentamente lo que tiene para decir y justamente ha confirmado que el diseño adaptable es el camino a seguir:
“Google recomienda a los webmasters que sigan la mejor práctica de la industria usando diseño web adaptable (responsive web design), sirviendo el mismo HTML para todos los dispositivos y usando solamente CSS para ser mostrado en cada dispositivo de manera diferente.”
El algoritmo de Google actualmente pone mucho peso en la experiencia del usuario. Esto incluye redes sociales, el promedio de tiempo visitando un sitio y el porcentaje de abandonos. Google recompensará a su sitio con un alto lugar en los resultados si usted mejora la experiencia de sus usuarios.

Conclusión

El diseño responsive te permite estar en la última tendencia de desarrollo online. Como el uso de internet móvil y apps está creciendo, deben de tenerse en cuenta varias implicaciones: los costes de desarrollo y mantenimiento, la visibilidad en los motores de búsqueda y la mejora de los ratios de conversión. Las claves del beneficio de un diseño responsive están en todos esos factores combinados con un enfoque unificado para el diseño.
Con el aumento de las ventas de tabletas y móviles, el diseño responsive es la clave para mantenerte por delante de tus competidores y ganar cuota de mercado.

¿Quieres comprar Hosting y dominio Económico? Clic Aquí 

Diseño de páginas web Marketing Digital