La usabilidad de un sitio web, o traducido a la lengua de Cervantes facilitarle la vida al usuario lo máximo posible a la hora de navegar por un sitio web, es cada día más importante dentro del medio. Cada vez son más las webs que forman la www y se convierte en imprescindible aplicar todo lo que sea necesario para que nuestro sitio destaque sobre los demás. Si no eres experto en el tema de hacer diseños usables, que mejor forma de empezar que con unos simples tips de muy fácil aplicación, a saber: Incluye siempre un lema que describa clara y concisamente al sitio y que esté en una posición privilegiada (el header por ejemplo) Ofrece a tus visitantes un cajón de búsqueda de contenido No abuses de elementos gráficos Añade un mapa del sitio, tanto para visitantes como para buscadores No rompas el flujo de trabajo del usuario. Dale opciones siempre La estructura tiene que ...

Dentro del diseño web la parte imprescindible de todo sitio es su interface, un conjunto de bloques, textos, imágenes y demás elementos que deberían estar en perfecta consonancia para que el usuario vea rápidamente y pueda navegar fácilmente por la información que le queremos transmitir. Y como casi todo, la calidad se consigue con los detalles, pequeños toques basados en teoría que mejoran la efectividad de por ejemplo un botón. Como no podía ser de otra forma los de smashing magazine escribieron sobre este interesante tema del diseño de interfaces, concretamente nos proporcionan 10 técnicas con las que mejorar nuestras interfaces web. Información de la valiosa, clarita y al grano del asunto: como mejorar resultados. Enlace: 10 Useful Techniques To Improve Your User Interface ...

Son muchas las galerías dedicadas a recopilar buenos diseños para acudir a ellas en busca de un poco de inspiración cuando nos ponemos manos a la obra con un nuevo trabajo. De un tiempo a esta parte se empieza a dar otro tipo de galerías, las que recogen elementos que prácticamente toda web implementa, también para buscar inspiración. MephoBox es de las últimas. Cuentan con unas cuantas categorías principales como navegaciones, headers, formularios, paginaciones etc. Dentro de cada una encontraremos ejemplos de buenos diseños e implementaciones. Recomendable tenerlo a mano. Enlace: MephoBox ...

Cuando nos pongamos a trabajar en un nuevo diseño es recomendable que antes planees claramente que es lo que quieres y también ojees unos cuantos buenos ejemplos al respecto. Para cumplir este objetivo de inspirarnos DzineBlog comienza una serie de posts con el título “Interface Design Inspiración” en los que irá recopilando ejemplos de diseños de calidad en los diferentes elementos de una interfaz web, desde cajones de registro hasta menús o pies de página. Comienzan con una selección de formularios de comentarios, parte muy importante dentro de cualquier blog y para los que es complicado conseguir un buen nivel de usabilidad. Son muchos datos en un espacio reducido que además interactuan directamente con el usuarios. Si este no ve claro el formulario y amigable, no comentará. Los elegidos son de buen nivel, algunos también originales como este ejemplo con el que ilustro el post: Enlace: Interface Design Inspiration – 36 Clean ...

Unos de los códigos de respuesta mas típicos que seguro todos nos hemos encontrado alguna vez por la red es el 404. Debido a su frecuencia de aparición se suele dar por supuesto que todo el mundo sabe que es un error 404 y no es así. Desde El Blog para Wemasters de Google, que están a todo, empiezan una seria de posts formativos sobre el asunto donde se explica claramente y de forma sencilla que es exactamente un código 404. En este primer capítulo se centran en sentar las bases para el resto de entradas que le seguirán, explicando pues en que consiste en código de respuesta 404 y que pasa dentro de un servidor para que este devuelva eso en vez del contenido. Conociendo a los de google habrá que seguir atentos a los post sucesivos que seguro darán claves no solo para mejorar la experiencia de los usuarios ...

Ya hemos hablado en más de una ocasión sobre las acciones de photoshop, esos pequeños scripts que automatizan determinados procesos, con el consiguiente potencial de esta utilidad. Design Shard publica un tutorial con el que aprender a crear acciones, concretamente en este caso explica como montar una estructura de carpetas de forma automática enfocada a diseñadores web, ideal si usas photoshop para hacer wireframes, donde lo primero es crear una estructura de carpetas con las partes básicas de un sitio (header, sidebar, content etc). El tutorial está en video y también en imágenes más texto. Enlace: Photoshop Actions – Creating Folder Structures for Web Designs – ...

Otro sitio a sumar en la lista de los que nos proporcionan información variada sobre un dominio. Como siempre está bien tener alternativas, vamos con él. Codeflux nos ofrece varias herramientas en un mismo sitio todas enfocadas a monitorizar trafico web y de red. Entre ellas encontramos pig, finger, nslookup, whois o tracerout. Complementando el servicio añaden más opciones como un validador de código CSS y HTML, páginas del manual de Linux, poder medir la performance de tu Apache etc. La oferta no es muy diferentes a la de sitios similares, pero si añaden esos pequeños toques que pueden venir de gran ayuda para los que desarrollan actividades relacionadas con la web. Otro servicio a tener en cuenta. Enlace: Codeflux | Vía: VisualBeta ...

Open ID es un protocolo para identificarnos en numerosos sitios, nos permite tener una cuenta con la que entrar a todos los servicios que soporten dicho protocolo. Seguro que todos tenéis una aunque no lo sepáis, por ejemplo tu cuenta de google sirve de identificador Open ID, o la wordpress, yahoo etc. Si quieres que tus usuarios puedan usar Open ID, para mandar un comentario por ejemplo, ID Selector es la solución. Es un widget que una vez implementado agrega al formulario de acceso varios servicios de Open ID para que el usuario elija el que quiera. Además una vez el usuario haya hecho una selección el widget lo recordará en próximas visitas. Enlace: ID Selector | Vía: ...

No todo va a ser wordpress o joomla, existen más alternativas en el mundo de los cms,s con los crear webs y blogs en la red. Textmotion es otra de estas alternativas, de código libre y totalmente gratis. Podemos crear una cuenta en el propio sitio o descargar la última versión para toquetear al gusto todo lo que queramos. Según cuentan tres son los pilares fundamentales sobre los que se sustentan, seguridad, belleza y usabilidad. Me falta probarlo en profundidad para ver si es oro todo lo que reluce, no es tarea nada fácil programar un buen cms, sin bugs, que sea fácil de entender, con sistema potente de plantillas etc. Enlace: Textmotion  ...

Toda web tiene un punto de partida y ese es su maquetación en css + xhtml. Son varios los servicios que nos brindan la opción de hacer esto de una forma totalmente visual, a los que tendremos que añadir Drawter. Se nos presenta un espacio de trabajo sobre el que mediante el ratón iremos dibujando los diferentes bloques principales de nuestro sitio, contando con diversas opciones de personalización de cada bloque mediante css. Una vez demos por finalizado el trabajo, nos genera el código css y xhtml necesario para conseguir esa estructura y seguir trabajando con ...

Como ya se ha dicho hasta la saciedad, si algo destaca del iPhone es su genial navegador que nos permite visualizar webs y blogs con una calidad estupenda. Es capaz de cargar casi cualquier tipo de diseño que veremos sin prácticamente ningún cambio respecto a como lo visualizaríamos en un navegador tradicional. Aún con esa capacidad es aconsejable optimizar nuestro sitio para el iPhone. Podemos hacerlo de diferentes formas, entre ellas con el servicio en linea intersquash. El proceso es extremadamente simple, solo tenemos que indicar nuestro feed y nombre del sitio. Picamos en un botón y listo, se nos genera la URL con el contenido de nuestro feed especialmente pensado para el ...

A la hora de diseñar un sitio web uno de los recursos que mejores resultados nos puede dar es el de usar un vistoso backgound, a lo que suele ir unido que este sea de resolución considerable. Webdesignerwall nos deleita con otro de sus tutoriales donde explica varias técnicas CSS para usar backgrounds grandes como fondo de una web. Enlace: How to: CSS Large ...

Puede que tengas un sitio estupendamente diseñado en el que se vertió esfuerzo y horas de trabajo para conseguir ese resultado “diferenciador” tan importante dentro de la inmensa maraña de sitios que es la web. También puede que tu sitio esté bien situado dentro de los buscadores y estos te envíen visitas a buen paso. Si finalmente teniendo esos dos pilares perfectos tu sitio no termina de despegar o mejor aún, ves en las estadísticas que los porcentajes de abandono son altos, falta optimizar un tema sumamente importante: las velocidades de carga. Casi el 100% de los usuarios quieren la información rápidamente, vivimos en la era de las prisas y estás ya están totalmente enquistadas en la gran mayoría, mucho más en internet. Este trabajo de control de cargas se hace mucho más llevadero con la ayuda de multitud de programas, extensiones y servicios con los que contamos. Desde Daily Artisan recogen 12 ...