por WebReunidos | Abr 11, 2017 | Accesibilidad, CSS, Diseño web
Un diseño web para móvil, no consiste simplemente en una adaptación de la versión web de escritorio. Si es cierto que nos debería de proporcionar también la misma información que la versión para monitor.
Muchos son los factores que hay que manejar para crear una página web con una versión móvil eficiente, hojas de estilo CSS, optimización de código JavaScript, compresión de imágenes, usabilidad, accesibilidad, etc.
En primer lugar hay que tener en cuenta que un dispositivo móvil, sobre todo smartphone o similar, consumen ancho de banda a través de un proveedor de comunicaciones, por lo tanto, es especialmente relevante reducir el peso en Kilobytes de la web con el fin de tener un consumo mínimo.
Por otro lado, algunos elementos que ocupan gran espacio en una versión de escritorio, sobre todo sistemas tipo SLIDER o carrusel, se deberían suprimir en la versión móvil y así ofrecer una mejor experiencia de usuario y optimizar la carga de la página web.
Llegados a este punto en el que estamos quitando elementos y modificando otros, nos damos cuenta que según trabajemos sobre un gestor de contenidos CMS, por ejemplo WordPress, o un diseño a medida, esto nos va a condicionar en gran medida el resultado.
CMS vs Diseño web para móvil a medida. Ventajas y desventajas
Gestor de contenidos CMS
Ventajas: En un sistema CMS encontraremos miles de plantillas en el mercado que ya incorporan la versión móvil por defecto. Si tenemos los conocimientos y pericia adecuados, podremos manipular la plantilla para adaptarla a las necesidades del proyecto.
Desventajas: Al ser plantillas que pretenden dar soluciones a muchos proyectos, tienen numerosas páginas con diferente código que en consecuencia desaceleran la carga de la página y consumen más ancho de banda. Más notable aun es la manipulación que hay que realizar para mover elementos dentro de la página.
Diseño web a medida
Ventajas:
La velocidad de carga de la página web es muy alta, el consumo de ancho de conexión a internet es muy reducido como resultado de emplear el código y recursos imprescindibles para el óptimo visualizado de la web.
En las futuras actualizaciones o modificaciones que se realicen en la página web, el tiempo que se invierta será mínimo.
Desventajas:
El trabajo para el desarrollo web inicial es más complicado ya que hay que elaborar todos los elementos de la web, esto requiere una gran labor al principio, sin embargo a medio plazo la inversión está más que amortizada.
Entonces ¿qué versión móvil debo elegir?
Parece muy evidente que una versión a medida es la opción idónea, pero lamentablemente esta es una pregunta que no se puede resolver mediante una fórmula, claro que siempre queremos lo mejor para un proyecto, sin embargo, como se ha expuesto anteriormente un desarrollo a medida supone un desembolso inicial alto frente a un sistema CMS.
Probablemente la mejor recomendación sea, si es un proyecto que inicia sus primeros pasos y no dispone de mucho presupuesto, pues adelante con la versión bajo plantilla CMS además con el plugin adecuado podremos tener la versión de página AMP incluida.
Finalmente, es muy recomendable dedicar unos minutos a la lectura sobre posicionamiento SEO para dispositivos móviles, entonces ya estará condiciones de decidir como quiere su diseño web para móvil.
por WebReunidos | Jul 9, 2016 | Accesibilidad, CSS, Desarrollo web, Diseño web, SEO
Video YouTube
En este tutorial te enseñamos a incluir en tu web un video YouTube responsive, con el fin de que se vea correctamente en monitores de escritorio, tablets y dispositivos móviles.
Cada ve más, Google tiene más en cuenta las páginas web que tienen una versión móvil correcta y por lo tanto están siendo premiadas.
Una de las complicaciones con las que un diseñador web se puede encontrar está en cómo adaptar un vídeo de YouTube para que se visualice correctamente en todos los dispositivos. En este tutorial, no vamos a crear una versión móvil sino que vamos de una manera muy sencilla a explicar cómo se puede adaptar un vídeo para que sea líquido, y por lo tanto se ajuste correctamente a cualquier tamaño.
Como todos sabemos la inclusión del vídeo pasa por utilizar una etiqueta llamada <iframe>, que si bien no es buena para la accesibilidad, es necesaria para el funcionamiento de códigos externos, lo más normal es que no tengamos acceso al control de lo que se está ejecutando dentro de ese marco, sin embargo si tenemos la oportunidad de manejar las características de iframe.
Definición de etiquetas y CSS
Aunque no es obligatorio, sí es recomendable la inclusión de la etiqueta viewport con el fin de que se vea correctamente en dispositivos Tablet y móviles.
<meta name="viewport" content="width=device-width, user-scalable=no">
<!-- opcional -->
El código CSS para este ejemplo es muy simple
<style>#video {
width: 100%;
height:1%;
min-height:380px;
overflow:hidden;
float:left;
margin-bottom: 30px;
margin-top: 7px;
}
#video iframe {
width: 100%;
min-height:360px;
}
</style>Para el cuerpo de nuestro código solo nos queda tener la url del vídeo que queremos incluir, luego cada uno maquetará a su gusto.
<body>
<h1>YouTube responsive video: Demo</h1>
<div id="video">
<iframe src="https://www.youtube.com/embed/ELDTyQj_UL4?autoplay=1" frameborder="0"
allowfullscreen></iframe>
</div>
<p>Tutorial desarrollado por: <a href="https://webreunidos.es"
title="Diseño Web Madrid: WebReunidos" target="_self">WebReunidos</a></p>
</body>
Aquí tenéis una Demo de YouTube responsive video de cómo funciona este código tan simple.
Como siempre os dejo el código completo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<!-- opcional --><title>Documento sin título</title>
<style>
#video {
width: 100%;
height:1%;
min-height:380px;
overflow:hidden;
float:left;
margin-bottom: 30px;
margin-top: 7px;
}
#video iframe {
width: 100%;
min-height:360px;
}
</style>
</head>
<body>
<h1>YouTube responsive video: Demo</h1>
<div id="video">
<iframe src="https://www.youtube.com/embed/ELDTyQj_UL4?autoplay=1" frameborder="0"
allowfullscreen></iframe>
</div>
<p>Tutorial desarrollado por: <a href="https://webreunidos.es"
title="Diseño Web Madrid: WebReunidos" target="_self">WebReunidos</a></p>
</body>
</html>
Creo que con este tutorial se ha demostrado que tener un YouTube responsive video es simple.
por WebReunidos | Dic 4, 2014 | CSS, Diseño web, SEO
Introducción a las herramientas para SEO móvil y diseño
Por todos es conocido que cada vez más accedemos a internet a través de dispositivos móviles y la tendencia va en aumento desde los últimos años.
Es muy importante implementar el auge de la navegación por móvil a nuestra estrategia global de SEO. Google ofrece en su popular Analytics unas estadísticas que nos ayudarán a estudiar la frecuencia con la que se está accediendo a nuestros servicios.
Google Analytics para cada dispositivo
Dentro de nuestras tareas de monitorización con cuentas de Google Analytics, vamos viendo la evolución del tráfico orgánico que está llegando a través de dispositivos móviles. Es muy importante prestar la debida atención desde el punto de vista de accesibilidad y usabilidad web. La experiencia de navegar de los usuarios finales es muy diferente para estos dispositivos.
Tal es la importancia que Google en los últimos tiempos está prestando una atención especial al SEO y usabilidad de estos dispositivos. Somos muy conscientes de que si Google proporciona tantos datos segmentados a la navegación dentro de sus herramientas, es porque hay una considerable ponderación que se presta a ello y además el popular buscador lo tiene muy en cuenta.
¿Qué herramientas nos ofrece Google para trabajar el Mobile SEO?
PageSpeed Insights
Con una gestión óptima de velocidades de carga, contenidos adecuados para dispositivos móviles y la accesibilidad correspondiente, conseguiremos escalar puestos en SEO. Todo esto se consigue tras el laborioso trabajo de desarrollar versiones CSS adecuadas, optimización de imágenes y de los procesos implicados en los servicios web, como son programación de servidor, accesos a bases de datos, etc.
Google nos facilita una visión de cómo es la carga de la página tanto en contenidos visualizados en escritorio como para móvil. Incluye la recopilación de CSS y JavaScript, compresión de imágenes, la optimización del almacenamiento en caché para navegadores, y mucho más. No obstante, Google sigue mejorando sus sistemas y algoritmos de análisis, por lo que es importante estar al día de todos los avances.
Móvil amigable
Con esta herramienta que toma algunas funcionalidades ‘Insights’ mencionadas y junto con la usabilidad y SEO móvil, Google va más lejos y nos ofrece una visión correcta para la resolución de problemas. También podemos encontrar una guía SEO Mobile a la que subscribirse
Ahora bien, si lo anteriormente expuesto es una ayuda inestimable, dentro del marco general de nuestra web, sería muy interesante identificar donde residen los problemas, más aun en el contexto global de la navegación.
Herramientas de usabilidad web móvil
Observamos que la información proporciona es la misma que nos ofrecen las herramientas anteriores, pero ahora podemos identificar dónde se localizan los problemas.
¿Realmente hace una diferencia?
A la par que se trabaja para obtener una óptima versión móvil, estamos ayudando a mejorar la experiencia de usuario, un pilar básico. Ahora Google está mostrando etiquetas ‘movil-frienly’, algo bastante similar al uso de ‘esquemas’, Google quiere ir más allá y precisa acceder al contenido con el fin de corroborar que es correcto y sobre todo está enriquecido para que sea del gusto de los resultados de búsqueda.
En estos momentos Google está dando mucha importancia a la formación de los webmasters a la hora de orientar el desarrollo y diseño a móvil, así como que factores de SEO puede tener un efecto positivo para el sitio web, gracias a las búsquedas por móvil.
¿Por dónde comenzar?
Llegados a este punto, para unos estos puntos serán una ‘revisión’ de sus conocimientos, pero para otros este es un campo nuevo y es preciso desmigar por donde comenzar la optimización SEO para móvil.
¿Qué tipo de versión móvil, voy a utilizar o cómo voy a enmarcar mi contenido?
En otras palabras, mi sitio móvil va a ser una versión exclusiva o va a ser una adaptación de mi plataforma para escritorio.
En el caso de un sitio totalmente dedicado a móvil, los visitantes serán reenviados a la URL específica que se ha desarrollado para una pantalla móvil, lo más probable en este caso es tener una navegación distinta a la web principal con probables cambios de contenido. Ésta versión requiere un esfuerzo extra a la hora de compaginar el posicionamiento SEO de la web de escritorio y la móvil.
Para una versión adaptable, habrá que adaptar el contenido a la versión móvil, esto se consigue trabajando correctamente las hojas de estilo CSS y aplicando una correcta redirección a dichos estilos, para ello es conveniente observar las recomendaciones de Google sobre los tamaños de pantalla donde aplicarlos. Con esta versión el trabajo para SEO es mucho más sencillo.
Recomendaciones finales
Si estás considerando comenzar un proyecto web, oriéntalo desde el principio para versión móvil, y de paso a imprimible. Preferiblemente elige una versión que se construya con CSS a partir de la versión de escritorio, y monitoriza constantemente la velocidad de carga, accesibilidad y usabilidad web.
por WebReunidos | Nov 24, 2014 | CSS, Diseño web
“Hojas de Estilo en Cascada (Cascading Style Sheets) es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, cómo se va a imprimir o incluso cómo va a ser pronunciada la información”. Esta es la definición de hoja de estilos (o CSS) que ofrece la W3C, el consorcio internacional que trabaja para desarrollar los estándares de la web, incluidos CSS, HTML y XML. En ella se encuentran dos detalles importantes:
- Es simple: el desarrollo de este estándar fue concebido para facilitar la labor de los ediseñadores de páginas wb que necesitaban aislar el contenido de las páginas de la forma en que se muestra en pantalla. Este principio hay que mantenerlo a la hora de definir la estructura de una hoja de estilos; debe ser simple ante todo.
- Dice cómo se muestra el documento: la definición de estilos, que puede ser, por ejemplo, letra negrita de tamaño 14 para los títulos H1, va ligada al contenido de la página web. Cada línea de código que forma la hoja de estilos CSS hace referencia a un elemento del contenido HTML de la página web, en este caso un título H1, que luego es mostrado por pantalla con un cierto diseño. Hay que procurar entonces no hacer declaraciones de diseño que luego no se usen en los documentos, ya que se estaría desplazando información al ordenador del cliente que luego no va a ser utilizada.
Estructura simple y declaraciones oportunas serán los dos grandes principios que rigen la creación de una hoja de estilos eficaz. La velocidad de carga de las páginas web depende de la cantidad de datos que tienen que \»pedir\» al servidor y, cuantos menos datos, mayor velocidad. Por otra parte, aumentando la velocidad de carga de los datos se mejora también el SEO de la página, siendo posicionada por los buscadores en lugares más altos. Y este menor tamaño también permite al servidor de páginas web disminuir su carga de trabajo.
Características principales de las hojas de estilo CSS
Otra de las características principales de CSS es la herencia de los estilos que se definen. Con ella se consigue que los elementos que se encuentran contenidos en otros elementos, como un párrafo que está dentro de una capa, hereden las propiedades de su contenedor. Por ello, si se tiene claro que, por ejemplo, el tipo de letra que se va a usar en el documento es Arial, no es necesario indicarlo en cada elemento que se muestre, sino que será suficiente con hacerlo en la declaración del diseño del elemento que contiene toda la página.
¿Y qué pasa si se definen dos estilos diferentes para un elemento que está contenido en otro? ¿Cómo se dirime la aplicación de dos estilos? En este caso se aplica el del elemento contenido. Aparece también otro de los conceptos importantes: la especificidad. Un estilo es más específico del elemento mientras mejor lo identifica, mientras menos genérico es y ese estilo será aplicado al elemento.
Por último, al usar un archivo separado con los estilos del documento, se permite que el navegador cachee esa información y no haga más peticiones si esta no cambia. Se procurará agrupar las definiciones de estilos en un solo archivo para reducir el número de peticiones al servidor y permitir este almacenamiento en caché, que redundará en una mejor velocidad de carga de las páginas de todo el sitio web.
Un servidor web más rápido y un uso del ancho de banda eficiente son las razones para disminuir el tamaño de las hojas de estilo CSS y reducir el número de peticiones a su servidor. Con las explicaciones expuestas, se conseguirán a la vez estos dos objetivos.
Si estás interesado en esta temática, no dejes de ver nuestra guía rápida de diseño web.
por WebReunidos | Feb 2, 2013 | Accesibilidad, CSS, Diseño web
Tal y como indicábamos en nuestro anterior post, Inicializar los estilos. Reset CSS, la visualización de las páginas web en un navegador se ven afectadas por los hojas de estilo que se cargan. Asimismo, se indicó que hay una prelación entre ellas.
En este post, vamos a hablar de los conceptos: cascada, especificidad y herencia.
Cascada
Cuando dos o más reglas coinciden en un mismo elemento, dicho conflicto se resuelve mediante un proceso denominado cascada.
La cascada es el orden de prelación, importancia, que se le asigna a cada regla de las hojas de estilos. De ahí, que las hojas de estilo de autor/diseñador se consideren las más importantes, seguidas por las hojas de estilo de usuario y por último, las hojas de estilo predefinidas por el navegador.
El orden de importancia de las hojas de estilo coincide con el orden de carga de las hojas CSS al visualizar una página web: de izquierda a derecha, de menor a mayor prelación.
Sin embargo, teniendo en cuenta la accesibilidad web y su principio básico de eliminación de barreras para el acceso a la información para determinados grupos de personas – discapacitados y mayores-, el usuario mediante la regla !important toma el control de la presentación visual al asignar a su regla el máximo nivel de importancia, incluso por encima de las reglas !important declaradas por el autor/diseñador.
El orden de importancia de los estilos declarados es de mayor a menor:
- Estilos de usuario etiquetados como !important
- Estilos de autor/diseñador etiquetados como !important
- Estilos de autor/diseñador
- Estilos de usuario
- Estilos aplicados por el navegador
Ejemplo de declaración de !important:
el resultado será: Prueba de especificidad
El texto se muestra en rojo porque la regla color:red está declarada como de mayor importancia, rompiendo de esta forma, con la norma sobre especificidad que a continuación pasaremos a tratar.
Especificidad
Las reglas se ordenan según lo específico que sea el selector. Las reglas con selectores más específicos tienen prioridad sobre aquellas reglas con selectores menos específicos, es decir, más genéricos.
El color del texto será verde: Prueba de especificidad.
El selector de tipo <p> es el mismo en las tres declaraciones y su importancia es la misma, pero el texto se pintará de color verde (color: green;) porque la declaración p id=”especial” es la más específica, la más concreta. Es decir, sólo se aplicará a aquellos párrafos que lleven el selector ID.
Las otras declaraciones tienen un carácter mucho más genérico; bien para todos los párrafos –p color: red-; obien, para todos los elementos de la página – * color: blue-.
Si dos reglas tienen la misma especificidad, la última definida tiene prioridad.
El resultado es el texto en rojo (Prueba de especificidad) porque ambos selectores <p> tienen la misma prioridad, pero prevalece el último definido, p color: blue.
Para calcular cómo de específica es una regla, cada tipo de selector tiene asignado un valor numérico. La especificidad de una regla se calcula al sumar el valor de cada uno de sus selectores.
La especificidad de un selector se divide en cuatro niveles:
- Nivel A es igual a 1 si el estilo es un estilo en línea
- Nivel B es igual al número total de selectores ID
- Nivel C es igual al número de selectores de clase, pseudo clase y atributo
- Nivel D es igual al número de selectores tipo y selectores pseudo elemento
Una regla escrita en un atributo de estilo/style siempre será más específica que cualquier otra regla. Una regla con un ID será más específica que una sin un ID, y una regla con un selector de clase/class será más específica que una regla con selectores tipo (h1-h6, p, etc.).
La especificidad de las hojas CSS permite establecer estilos generales para elementos comunes y luego ir anulándolos para elementos más concretos, más específicos.
Herencia
Los documentos HTML están estructurados de forma jerárquica para ordenar el contenido. El primer elemento de esta estructura es el <html>, y de él son descendientes el resto de elementos que constituyen y forman una página web.
Esta característica de las hojas de estilo nos va ha permitir que determinadas propiedades como por ejemplo color o tamaño de la fuente no se tenga que indicar elemento por elemento, sino que con indicárselo al elemento padre, éste, por herencia, lo trasladará a sus hijos, a sus descendientes.
Con motivo de esta característica, se nos puede dar el caso que un elemento herede valores de todos sus superiores jeráquicos.
Los párrafos en rojo con tipo de fuente Arial, tamaño 14px.
La herencia se puede interumpir si declaramos una nueva regla CSS. Por ejemplo, indiquemos que el color para body y sus descendientes es negro, pero cambiemos el tipo de fuente, tamaño, y color para el elemto p.
La regla definida para el elemto <p> prevalece sobre las que debería heredar de sus elementos superiores jerárquicos. Al igual que en la la especificidad, la regla CSS más próxima tiene mayor prioridad. Así, si en el elemento aplicamos una regla de estilo directa, ésta prevalecerá sobre la que se haya definido en las hojas de estilo CSS.
Información de interés:
por WebReunidos | Ene 22, 2013 | Accesibilidad, CSS, Diseño web
Cuando publiquemos nuestra página web, una de los puntos a revisar es su visualización en los difrentes navegadores y sus correspondientes versiones, por ello es importante inicializar los estilos CSS.
Los navagadores cuando muestra una página web, no sólo aplican los estilos creados por el diseñador web, sino que también aplican las hojas de estilos del propio navegador y las del usuario.
Como podemos constatar, son tres las hojas de estilo que se pueden aplicar cuando visualizamos un sitio web: las del navegador, las del usuario y las del diseñador.
Así mismo, indicar que por ser las primeras en aplicarse, el orden de prioridad más bajo le corresponde a las CSS del navegador, luego son las del usuario, y las de mayor prioridad, al ser las últimas en cargarse y aplicarse, son las del diseñador.
Este orden de prioridad puede ser modificado si se incluye en la regla CSS la palabra !important. Si una regla definida en las CSS del usuario es igual a una defenidia en la del diseñador, tendrá prioridad las del usuario si en ella incluye la palabra !important. Esto es así, al objeto de dar mayor control al usuario al objeto de conseguir una mayor accesibilidad web para aquellas personas con determinada discapacidad.
Una web para todos, diseño para todos.
Hoja de estilo del navegador: es la que establece el estilo inicial de todos los elementos HTML . Si al cargar nuestra página web, no hemos definido el estilo a algun elemento, éste tomará el aspecto que por defecto esté definido en las hojas CSS del navegador.
Hoja de estilo del usuario: tal y como su nombre indica, es aquella que el propio usuario aplica a través de su carga en el navegador.
Hoja de estilo del diseñador: son los estilos definidos por el diseñador de la página web.
Los valores de los elementos HTML -tipo de letra, márgenes verticales, títulos de secciónetc.- son aplicados de diferente forma por cada uno de los navagadores. Por ello, para que no nos ocurra como en la captura de pantalla, que nuestro diseño no coincide con la visualización en el navegador, deberemos neutralizar los estilos prefijados en las CSS del navegador.
Una forma rápida y sencilla sería neutralizar los márgenes y relleno de todos los elementos de la página.
La solución ideal es crearse una hoja de estilo CSS –reset css– para inicializar los estilos CSS que aplican por defecto los navegadores y que afectan a la visualización de nuestro site.
Incluimos como ejemplo, la propuesta de hoja de estilo reset css del diselñador Eric Meyer.
