www.pikseliadisenoweb.com
Bienvenido a Pikselia

Elementos esenciales del diseño web responsivo

El diseño web responsivo es un tema de mucha actualidad en el diseño de páginas web.

image

Precisamente, la popularidad del diseño web de respuesta es bien merecida debido a que los usuarios de Internet están diversificándose cada vez más en la utilización de diversos métodos para acceder e interactuar con un sitio web.

En efecto, el diseño de páginas web contemporáneo debe estar enfocado y estructurado para ser accesible en diversas plataformas, como iPad, iPhone, dispositivos móviles en general, Pcs, notebooks, etc. Para cada plataforma el sitio web debe responder eficientemente y ofrecer los mismos resultados de visualización en una y otra plataforma.

De manera que, para que el diseño web responda a las diferentes necesidades de cada dispositivo y/o plataforma, el sitio debe ser construido en una base flexible, en el que se puedan incorporar imágenes igual de flexibles que se adapten en dimensión y en calidad a la plataforma donde serán visualizadas. En consecuencia, el diseño web en esta etapa debe tener habilitado diferentes puntos de vista dentro de los contextos en los que se pretende exponer el contenido.

Cualquier diseño que no contenga esta idea de flexibilidad simplemente no califica como un diseño web responsivo. Por tanto, para tener una página web de respuesta a cualquier plataforma y dispositivo es absolutamente necesario saber definir todos los parámetros de desarrollo, empezando por las columnas, el espaciamiento y contenedores que a menudo son muy importantes en el diseño web y pueden llegar a ser tan flexibles como cualquier sistema existente.

De hecho, la mayoría de los sistemas de redes existentes utilizan Estilos CSS para definir el tamaño, el espacio y la alineación. Tratando de superponer estos límites en un diseño web de respuesta puede ser complicado y más lento en comparación con la codificación de una red propia. Ya sea que se esté usando un sistema de red para crear una solución personalizada, lo verdaderamente importante de un sistema de red flexible es en la mecánica de sus tamaños de diseño y espaciado.  Esto significa abandonar los píxeles y reemplazarlos con diseños web que utilizan porcentajes y unidades relativas de medición.

Imágenes que se mueven y presentan alguna escala con nuestra red flexible es otra característica clave de un diseño web responsivo. Las imágenes flexibles a menudo se convierten en un dolor de cabeza para los diseñadores web. Cargando en enormes imágenes de gran tamaño que escala hacia abajo con la anchura y la altura de los atributos HTML cuando queremos más espacio para el contenido del texto en los dispositivos de navegación más pequeñas no es una buena práctica para la página web y que esta tenga tiempos de carga más rápidos.

Una alternativa a las imágenes de escala se puede encontrar con CSS. La propiedad CSS overflow (por ejemplo overflow: hidden) nos da la posibilidad de recortar las imágenes dinámicamente a medida que los contenedores cambian para adaptarse a nuevos entornos de visualización. También es posible tener varias versiones de la imagen en el servidor, y luego servir de forma dinámica la versión de tamaño adecuada en función de la aplicación del usuario usando el lado del servidor o la detección de características de cliente junto con la manipulación DOM.

Por último, las consultas en los medios de comunicación son, posiblemente, la característica más interesante de un diseño web de respuesta. Este es un tema al que hay que prestarle mucha atención, pues muchos diseñadores actualmente no están muy familiarizados con el tema. Las consultas en los medios de comunicación permiten a los diseñadores crear varios diseños usando los mismos documentos HTML y sirviendo selectivamente las hojas de estilo en base a las características del agente de usuario, como el tamaño de la ventana del navegador. Otros parámetros son la orientación (horizontal o vertical), resolución de pantalla, color, y todas las cuestiones de configuración visual.

————————————————————————————————————

Visitanos en nuestra página: www.pikseliadisenoweb.com

¿Cómo personalizar una página de error 404?

En este artículo te explicaremos como darle estilo a tu página de error 404 y las buenas prácticas para optimizarla logrando así una buena experiencia de parte del usuario que se encuentra con esta página. 

Explicaremos ante todo:

  • ¿Qué es una página de Error 404?
  • ¿Cómo puedo personalizar mi página de Error 404?
  • Buenas prácticas sobre las páginas de Error 404

¿Qué es una página de Error 404?

La página de Error 404 es el archivo que tu servidor ejecuta o mejor dicho “muestra” al visitante cada vez que visita una sección de tu sitio que dejó de existir (enlace roto).

Cada vez que nos encontramos con un enlace que está “roto” el servidor ejecuta un html que suele tener la leyenda Not Found, Error 404

image

Imagen que representa el error 404 en cualquier servidor

Perfecto! Ya sabemos que es el error 404 y cómo se ve está página o sección.

¿Cómo puedo personalizar mi página de Error 404?

Cuando un usuario de tu sitio web se encuentra con un enlace roto normalmente cierra la ventana y se va! Por eso es muy importante crear una página personalizada y para ello te daremos una serie de ideas.

Lo más importante es crear un archivo html de nombre 404.html y darle la misma estética que nuestro sitio web, asignarle el logo de la empresa y en lo posible alguna leyenda que diga “No se encuentra disponible lo que estás buscando” o como vemos en otros casos el famoso “Ops! Error 404! ”

Todo depende de como le hables a tus visitantes, si usas un lenguaje informal o con cierta formalidad.

Además puedes insertar un buscador para que el usuario agregue el termino que esta buscando y así ofrecerle otros resultados sin que salga de nuestro sitio. También puedes mostrar un mapa de sitio, un listado de categorías o una nube de etiquetas. La intención es mantener al usuario dentro del sitio web.

image

Una vez que defines tu hermoso 404.html solo te queda informarle al servidor que muestre ese html en lugar del que muestra actualmente y para lograr esto debemos acceder al archivo .htaccess y agregar la siguiente línea

“errorDocument 404″:
errorDocument 404 /404.html

————————————————————————————————

Visita nuestra pagina: www.pikseliadisenoweb.com

Google publica la nueva guía SEO en español

Google acaba de anunciar  la publicación de la nueva “Guía para principiantes sobre optimización para motores de búsqueda” disponible en diez nuevos idiomas: español, francés, alemán, ruso, turco, finlandés, sueco, húngaro, chino tradicional y chino simplificado.

Podemos obtenerla en PDF desde la dirección goo.gl/seoguide-es, donde han revisado y actualizado el contenido existente, además de añadir una nueva sección sobre webs para móviles.

32 pagins imprescindibles para quienes trabajamos de, para y por Internet.

Actúa a lo grande para ser grande o como hacer crecer tu página web o blog

HubSpot llevó a cabo un estudio con data del sitio Website Grader con respecto a la cantidad de contenido que un sitio/blog publica y cuantos nuevos lectores/clientes adquieren esos sitios gracias a ese contenido.

Del estudio se destacan 3 aspectos a tener en cuenta, mediante los cuales un blog o sitio web puede llegar a obtener el éxito deseado, que dicho sea de paso no son ningún secreto o algo que hayan descubierto ahora, es algo que se conoce desde hace rato, especialmente por la gente que tiene blogs muy leídos.

Los tres aspectos básicos a tener en cuenta son:

  1. Crear mucho contenido
  2. Mantener perfiles sociales activos
  3. Escribir contenido regularmente

Esos son 3 aspectos básicos y agregaría fundamentales a tener en cuenta si queremos que nuestro blog tenga el éxito esperado, si queremos que sea uno de los mas leídos, si queremos tener miles y miles de visitas diarias.

Un blog en el cual escriben 1 post por día, si no son una figura conocida y popular, salvo contadas excepciones, no generará muchas visitas y si la estrategia en la social media es pobre, mucho menos.

Si quieren algún día llegar a vivir de un blog, no lo van a hacer escribiendo 7 u 8 artículos por semana. El crecimiento del blog será tan lento que terminará por cansarlos y muchos, tarde o temprano abandonarán. Terminan frustrados.

Ahora si escriben por amor al arte, sin importarles cuanta gente los lee, entonces ni hablar, escriban cuando lo crean necesario, cuando estén verdaderamente inspirados.

Con los datos del estudio, HubSpot creó la siguiente infografía, que nos muestra como con esos 3 aspectos tendrán posibilidades de que su blog obtenga el éxito que esperan.

Informe dice que Sitios mal diseñados acaban con la pila de los móviles

Uno de los elementos que un usuario siempre evalúa de su teléfono celular inteligente es la duración de la batería, pero muchas de las variables pueden estar más allá del propio smartphone. Un informe de la Universidad de Stanford descubrió que los sitios web que no están bien diseñados o que no tienen versión móvil pueden ser los causantes de que esta dure poco.

El equipo de investigadores hizo diferentes pruebas con un equipo con sistema operativo Android. Se analizó el comportamiento de diferentes sitios web, entre ellos algunos muy populares como Wikipedia e Internet Movie Database.

“A pesar de la creciente popularidad de la navegación por la web móvil, la energía consumida por el navegador del teléfono mientras se está Internet no se conoce bien”, comentan los investigadores en el informe (PDF), Uno de los mayores problemas que encontraron es que cuando el sitio no está bien codificado, el móvil tiene un consumo mucho más alto de energía.

El consumo disminuyó cuando el equipo analizó y ajustó el sitio web de Wikipedia, sin afectar la experiencia del usuario, y encontró que el ahorro fue de un 30%. “Nuestros resultados muestran que para los sitios web de interés, descargar y analizar las hojas de estilo en cascada y Javascript consume una gran parte de la energía total necesaria para presentar la página”.

Otro de los resultados del informe es que uno de los elementos de la variación del consumo de energía son las fotos, que resultan mucho más optimas en formato .JPG que en .GIF o .PNG.

Pero lo más importante es que los sitios web tengan una versión óptima para los dispositivos móviles. Uno de los sitios que no salió bien librado en las pruebas fue el de Apple.com, pero el resultado se debe porque no tienen está optimización. En cambio, el más eficiente en consumo de energía fue el de correo electrónico de Gmail, atribuido al uso de HTML en vez de Javascript.

La investigación se dio a conocer en el marco de la conferencia de World Wide Web de este año, que se llevó a cabo en Lyon, Francia.