diseño web

diseño web, ecomerce, HazmeWeb / 24 abril, 2015

¿Porqué necesito una web?

Si estas aquí seguro que te has hecho la pregunta ¿porqué necesito una web?

Un amigo publicista siempre me decía:

En  los medios  si no estas, es que no existes...

 

Read more
CMS, diseño web, ecomerce, Gestor de contenido, HazmeWeb, Uncategorized / 5 mayo, 2014

Tienda online con WordPress

Contestando a mi amiga y compañera Teresa del blog Joquebonito os voy a dar unos consejos para montar una tienda online con WordPress.

WordPress.Com

Este es un gran sistema para alojar tu blog sin complicaciones, ya que la aplicación es online y te da prácticamente todo hecho, pero si tu blog esta alojado aquí  de momento no tienes posibilidad de tener una tienda online. Si estas alojando tu blog en Bloguer, estas en la misma situación.

Si estas usando este sistema te recomiendo migrar a un hosting propio donde te permita alojar una tienda.

Read more
diseño web, HazmeWeb, Uncategorized / 26 abril, 2014

Formatos de Imagen para web

Las imágenes son un componente muy importante de nuestra web/blog harán que sea mas vistosa y más agradable para la vista, pero en ocasiones pueden resultar una pesadilla a la hora de elegir las adecuadas y elegir el formato en el que debemos insertarlas.

Vamos a intentar aclarar un poco los formatos mas habituales, las características y las ventajas de cada uno.

Read more
CMS, diseño web, Gestor de contenido, HazmeWeb, Uncategorized / 21 abril, 2014

Modifica la tipografía de tú web o blog con CSS

La tipografia es parte de la personalidad de nuestro sitio.
En nuestra web o blog la tipografia es importante ya que añade personalidad al sitio. No siempre nos gusta la tipografía predefinida o no va con el tema de nuestra web/blog, por lo que nos vemos en la necesidad de modificarla.

Lo normal para mantener una cierta coherencia es no usar mas de dos fuentes, para que no parezca que nos hemos salido del sitio y hay que tener en cuenta que las fuentes de fantasía con muchos giros etc en resoluciones pobres no son legibles.

Propiedades CSS de Tipografia

Mediante CSS podemos modificar por completo el aspecto de nuestra fuente:

Propiedad tipo de fuente:

FuentesCon esta propiedad definimos el tipo y la familia de la fuente. La fuente que escribimos en primer lugar es la que utiliza el navegador por defecto, en el caso de que el equipo no tenga instalada la primera utilizara la siguiente.
Con esta propiedad hay que tener en cuenta que si el equipo desde el que abrimos la web no tiene instaladas las fuentes que hemos elegido, el navegador utilizara por defecto.

font-family: Arial, Helvetica, sans-serif

Propiedad Color de la fuente:

Con esta propiedad definimos el color en el que se vera la fuente en nuestro sitio, lo podemos definir el color de las siguientes formas:
Usar colores resalta el mensaje del texto.

color: #369;
color: black;
color: #B1251E;
color: rgb(71, 98, 176);

&nbsp
&nbsp

Propiedad tamaño de la fuente:

Es la propiedad que define el tamaño de la letra, podemos definir tamaño absoluto(indica el tamaño de letra de forma absoluta mediante alguna de las siguientes palabras clave: xx-smallx-smallsmallmediumlargex-largexx-large.) y tamaño relativo (indica de forma relativa el tamaño de letra del texto mediante dos palabras clave (largersmaller) que toman como referencia el tamaño de letra del elemento padre.)
Usar colores resalta el mensaje del texto.

Los valores que la definen son:

pixel, puntos,  em y en porcentaje %:

font-size: 9px
&nbsp
&nbsp
&nbsp
&nbsp

Propiedad ancho de la fuente:

Con esta propiedad definimos el ancho que tendrá nuestro texto, lo más habitual que usamos es la normal y negrita, pero se puede afinar mucho mas el ancho con esta propiedad.
Alternativas a la negrita.Los valores que la definen son:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

 font-weight: bold;

&nbsp
&nbsp

Propiedad variant:

Esta propiedad permite otra variación en el estilo del tipo de letra, nos permite cambiar entre mayúsculas y minúsculas.
Variant resalta textos
Los valores que la definen son:

normal | small-caps | inherit

font-variant: small-caps;

&nbsp
&nbsp

Añadir la tipografia al sitio.

Podemos añadir tipografias especiales descargando la tipografía en nuestro sitio y haciendo una llamada con un css:

@font-face{
font-family: ‘nombredemifuente’;
src: url(‘../fonts/mifuente.otf’);
}

Con este código llamamos a una fuente especifica que hemos guardado en nuestro site en una carpeta llamada fonts. Esta forma de cargar las fuentes no es muy recomendable para textos largos ya que añade un tiempo de carga extra y hay que tener en cuenta que no todos los navegadores usan la misma extensión para las fuentes, por lo que debemos hacer una carga de fuente especifica para los navegadores que más se usan.
&nbsp
&nbsp

Añadir fuentes desde Google fonos.

Mediante google fonts podemos añadir un montón de tipografías que no están en todos los equipos, el navegador llama a la fuente que esta alojada en google fonts y no es necesario que el usuario descargue la fuente en su equipo.

Para hacer esto simplemente debemos añadir unas porciones de código en nuestro sitio que nos las da google directamente desde fonts:

<link href=’http://fonts.googleapis.com/css?family=Sniglet‘ rel=’stylesheet’ type=’text/css’>

 

diseño web, HazmeWeb, seo, Uncategorized / 16 abril, 2014

Tu Dominio, tu nombre online

Hazmeweb te ayuda a elegir tu dominio

¿Que es el dominio?

El dominio es el nombre que elegimos para representar la IP en la que esta alojado nuestro sitio web. Traduce la IP (Internet Procol) a DNS (Domain name service).

Para entendernos mejor es como en la agenda del móvil cuando asociamos un nombre con un numero de teléfono.

Los dominios son unicos y están representados por dos partes:

  • el nombre que asociamos a nuestro sitio web (Hazmeweb)
  • y el tipo de organización (.es; .com; .net; etc)

el dominio te define, hazmeweb te ayuda a elegirlo

Resalta Tu Marca

El dominio no deja de ser tu marca personal en la red, por lo que es conveniente elegirlo bien siguiendo unas pautas:

Lo Que Haces:

Intenta que tu dominio defina lo que haces, a lo que se dedica tu empresa o el tema de tu blog.

¿Ya tienes un nombre?

Si eres una empresa o profesional y ya tienes un nombre comercial registrado. En el caso de que no lo puedas registrar, usa tu nombre con algo que defina tu actividad. Para blog o webs de profesionales no es muy recomendable usar nombres propios ya que al ser muy comunes en las búsquedas, arrojaran muchos resultados.

Partiendo de Cero tu dominio:

Si no tienes nombre todavía, lo mejor es que elijas uno teniendo en cuenta estas cuestiones básicas:

1. Fácil de recordar.
2. Lo más intuitivo posible y fácil de escribir.
3. Que transmita fuerza.
4. Que sea  una representación lo más precisa posible  de tu actividad.

Simplicidad:

Cuanto mas simple sea más fácil  es de recordar

La Terminación:

Hazmeweb te ayuda a elegir la mejor terminación para tu dominioLa tendencia natural es  buscar siempre el .com por que es la terminación que más sitios aloja.  Pero esta no es siempre la mejor. Las terminaciones se crearon para definir el tipo de organización que estaba detrás de el dominio (.com era comercial; .org Organización; etc) y para definir la nacionalidad (.es; .ru; .uk; .fr etc)

Realmente ya no se usan  con esa finalidad, y en la actualidad hay infinidad de terminaciones. Si tu sitio web es de ámbito local y quieres  que tus visitas, en principio, sean locales, te recomiendo el de nacionalidad (.es); ya que los buscadores te ubicaran mas en el idioma y la nacionalidad de la persona que busca.

El futuro de tu empresa

Cuando hagas  la elección del dominio no utilices nombres que estén de moda en ese momento, ya que  en poco tiempo estarán desfasados y la ayuda que te daran en un principio se convertirá más tarde  en lastre.

Prueba y Error

Prueba el dominio con tus amigos y familiares a ver que reacción obtienes, el precio del dominio no es demasiado elevado, por lo que puedes quedarte varias terminaciones y utilizar la que mas te guste, el resto las puedes enlazar a tu domino como landing pages.

Fácil

CMS, diseño web, Gestor de contenido, HazmeWeb, Uncategorized / 10 abril, 2014

WordPress o Joomla

To be or not to be… WordPress o Jommla

wordpress-and-joomla

diseñoprevio_wireframeCuando te pones manos a la obra con un proyecto web, creo que lo mejor es que lo primero hagas un wireframe con el aspecto que quieres que tenga tu web. Después listar las funcionalidades que requieres de tu web.

Con esta información ya nos resultara mas fácil decantarnos por uno u otro gestor de contenido.

Joomla

plantilla de joomla Es un CMS no demasiado dificil de gestionar, pero su principal virtud es su principal complicación: Modularidad.

Joomla esta hecho mediante una estructura de capas en las que puedes ir insertando módulos y en cada modulo puedes insertar lo que necesites. Esta característica nos da la posibilidad de insertar “fácilmente” en cada pagina lo que queramos.

Casi todas las plantillas disponen de una especie de mapa con la estructura en la que puedes colocar los módulos, esto lo hace muy flexible pero a la vez lo complica un poco ya que si utilizas varias plantillas tienes que estar continuamente mirando.

Para mi la ventaja fundamental es si quieres montar un sitio en varios idiomas sin salirte de tu URL principal ya que puedes montar la web en varios idiomas sin tener que montar varias veces la web, solo cambiando los menús.

Otra ventaja que le veo es que puedes utilizar varias plantillas en el mismo site.

Pero como dije antes sus virtudes se transforman en defectos, su modularidad hace de joomla un tanto tedioso a la hora de configurarlo, la posibilidad de configuración de atribuciones para los usuarios resulta muy pesada, debe ser en sitios en los que se necesiten perfiles muy diferenciados donde realmente sea rentable configurarlos.

En cuanto a la instalación, no es muy diferente de la de wordpress, pesa mas y la modularidad le resta un poco de velocidad de carga.

En cuanto a la personalización, es un pelin más complicado añadir tus estilos propios y tienes que saber manejarte con CSS si o si si quieres que te quede bien. A nivel visual tiene plantillas con estéticas de buen nivel, pero exista un paso por detrás de wordpress en este aspecto.

Después de montado para hacer cambios resulta bastante pesado, puedes colocar banner de una manera muy estratégica, pero no resulta ni rápido ni comodo.

En definitiva te recomiendo Joomla si necesitas una web en varios idiomas con muchos baner y funciones axiliares, y si el blog no será la parte fundamental de tu web.

 

WordPress

wordpress temaSi lo que prima en tu proyecto es diseño y poder insertar contenido de una manera sencilla, wordpress es tu CMS.

Es mas facil de instalar y es mas facil encontrar un diseño que se adapte a lo que quieres lograr con tu web. Existen miles de plantillas y pluguin para conseguir cualquier funcionalidad. Es un CMS bastante liviano en cuanto a su carga.

si no abusamos de los plugin es muy ágil de funcionamiento y es relativamente fácil crear temas hijos con los que modificar y personalizar los estilos.

Este gestor nació a partir de un blog, por lo que como editor de post posiblemente sea el mejor.

La parte back o de gestion esmuy amigable y practica, una vez montado el proyecto, resulta rápido y comido realizar cambios.

Los perfiles de usuario están muy vinculados con el blog, no con la parte estática.

En la parte de funcionlidades dependes casi por completo de los pluguin, que hay para casi todo, pero si quieres afinar u poco más la funcionalidad tienes que manejarte con PHP.

En principio para una web con un buen diseño HTML5 y CSS3 es la mejor opción,  quizá su estructura simple es la mayor ventaja. La desventaja es que la personalización individual de las paginas estáticas es mas complicada con wordpress que con joomla pero con todo y eso yo me decanto por esta opción casi para cualquier proyecto.

A dia de hoy es una herramienta fantástica para poner en marcha un proyecto web.

 

Existen otros gestores de contenido, el siguiente mas popular es Drupal, es muy potente y para funcionalidad es una muy bina herramienta, pero es necesario tener un nivel de conocimiento bastante alto para manejarse bien con el.

diseño web, HazmeWeb, Uncategorized / 9 abril, 2014

Elegir el mejor sistema para empezar en internet con Blog, web o ecomerce

Que es lo que quiero que haga mi web?

Fácil

Cuando nos decidimos a montar y publicar un proyecto web, tenemos que decidir un tema, una vez hemos decidido el tema al que vamos a tratar en  nuestro sitio, el siguiente paso es saber el tipo de web que queremos o a que la vamos a dedicar.

Hoy dia casi todos los sitios tienden a aunar las características de todos los tipos. En un mismo sitio tenemos una web corporativa en la mostramos lo que hacemos y como lo hacemos, un blog en el que compartimos contenidos de útilidad e incluso un ecomerce, pero debemos pensar realmente cual será la función principal de nuestro sitio ya que de ello depende la tecnología que utilizaremos.

 

Tecnología en función de lo que Queremos hacer con nuestra web

El Blog:

blogEn principio casi todo el mundo comienza por un blog en el que compartir contenidos. Es la opción más fácil,  más barata y en muchos casos la mas efectiva si lo que queremos es dar a conocer nuestras habilidades o compartir contenidos con afines.

Si lo que necesitamos es simplemente un blog,  Bloguer y WordPress son las plataformas más utilizadas por su facilidad de edición no necesitamos saber nada de código para empezar con nuestro blog. Las dos son gratuitas, es como abrir una cuenta en de correo electrónico.

WordPress.com:

Si lo que estas pensando es en probar, aprender y si te va bien lanzarte a algo mayor te recomiendo que empieces por aquí. La edición es muy parecida a la de la aplicación de wordpress.org. Trasladar lo que tengas aquí a un wordpres en un servicio de hosting propio es fácil y todo el aprendizaje te servirá.

Las desventaja fundamental es que todas las características que lo convierten en una buena herramienta son de pago, plugins, dominio propio etc.

No se puede analizar el trafico con analitycs ni se puede monetizar… y te ponen anuncios con los que subsiste wordpress.com.

Bloguer:

Ofrece algunas características que wordpress no, se puede analizar y monetizar. Tiene un panel de edición en el que puedes customizar tu blog sin escribir código y si sabes escribirlo te permite meter partes para una personalización mayor. Te permite hasta 20 paginas estáticas.

La mayor desventaja para mi es si tu proyecto va muy bien y quieres implementar funcionalidad propias es muy complicado y a la hora de migrar a hosting propio no tiene un hermano mayor potente como es el caso de wordpress.

Cualquiera de las dos es una buena opción para empezar con un proyecto, pero si la cosa funciona, no hay que esperar a que la cosa se complique para migrar a un site propio donde no estemos limitados.

 

La WEb:

empresa

En esencia no es muy diferente a un Blog, hoy día todo se construye usando la misma tecnología, la diferencia fundamental es lo que queremos mostrar. En una web hay mas partes estáticas en las que vamos a mostrar un contenido que va a permanecer mas tiempo en ella.

Si tenemos una empresa queremos contar a nuestros visitantes quienes somos, donde estamos, cual es la actividad de nuestra empresa etc este contenido es más estático, y aunque lo iremos actualizado, no es contenido dinámico como las entradas de un blog.

En la web incorporaremos un blog en la que podemos contar las novedades de la empresa y generar también contenido.

Hoy dia como decía usamos loas mismas tecnologías para crear una web que un blog, usamos gestores de contenido (conocidos por sus siglas en ingles CMS). Los gestores de contenido son muy prácticos ya que la estructura básica ya esta creada y solo hay que ir custodiando a nuestro gusto las capas y los estilos. Los más populares a día de hoy son Drupal, Joomla y WordPress. Son todos de código abierto, por lo que son gratuitos. En esencia los tres hacen lo mismo y de una manera muy similar. Los tres funcionan mediante partes mas estáticas, paginas, y partes mas dinámicas, entradas. Sus puntos fuertes son dos:

Casi cualquier funcionalidad que se nos ocurra ya esta programada mediante un plugin, que son fragmentos de código específicos para hacer una cosa concreta.

Son altamente personalizables, puedes cambiar los estilos incluso las capas para customizarlos a tu gusto.

Por no hacer demasiado pesado este articulo voy a dejar para otro definir un poco más cada uno de ellos, a día de hoy el 19% de las webs que hay en internet están notadas con wordpress, quizá sea por su facilidad de uso y por lo bien que se lleva con google. Yo es el que uso habitualmente casí para todo, salvo que el proyecto necesite unas características muy especificas.

La tienda online o ecomerce:

tiendaonline

Las tiendas online o ecomerces son los proyectos más complicados de montar bien de las webs, principalmente porque tienen muchas bases de datos con muchas interconexiones y requieren varios niveles de acceso.

Los sistemas que mas se están utilizando para montar tiendas online a día de hoy son Prestashop y Magento, son CMS específicos para comercio electrónico. Hay para escribir un libro sobre cada uno de ellos e iré profundizando más en el tema.

Prestashop:

Si ya tienes un manejo digamos a nivel usuario y quieres dar el paso a un ecomerce, tu herramienta es Prestashop, es fácil de instalar, prácticamente igual que wordpress. No necesita unos requisitos demasiado específicos de hosting (antes de lanzarnos a comprar, mirar las especificaciones de software… para no llevarnos sorpresas desagradables.) Es relativamente fácil montar una tienda con Prestashop, las complicaciones mayores las tiene la gestión de pedidos etc.

 

Magento: 

Es una herramienta muy potente y muy segura, pero es bastante divicil de instalar, es muy software muy pesado y los archivos tb por lo que consume muchos recursos del servidor, no nos vale cualquier hosting. En definitiva no es una herramienta tan amateur como prestashop.

Si tu tienda necesita una herramienta muy potente y segura Magento es la tuya, pero no te vuelvas loco intentando hacerla funcionar… La ayuda profesional no es tan cara y a la larga nos evita quebraderos de cabeza.

 

diseño web, HazmeWeb, Uncategorized / 2 abril, 2014

El color, la tipografía y las imágenes en el Diseño Web

 

Casi todo el contenido de la web es el texto y las imágenes, por lo que estos son una parte fundamental de tu ella.

Vamos a ver unos claves sencillas para mantener la estética y la usabilidad en tu web.

El color de la web

Los colores y sus relaciones

El color va a ser una de las partes que defina tu web, quizá la que mas impacto tiene a primera vista sobre el navegante. El color lo vamos utilizar como una herramienta para causar el efecto que deseamos. Ya vimos en un post anterior  (que ampliaremos mas adelante…) los efectos sicológicos del color. En principio vamos a elegir los colores en función del tema al que dedicamos la web, si estamos creando una web de viajes utilizaremos colores acorde con los climas de destino… Si montamos una web infantil, usaremos colores suaves y sedantes…

De una manera muy simplista los colores se usan en dos maneras básicas, los fondos y las fuentes. Vamos a procurar que las fuentes siempre contrasten con los fondos, de manera que sean legibles.

Utilizaremos siempre una combinación de colores afines, y no demasiados colores si no tenemos intenciones de que sea lo que mas llame la atención de la web.

Lo normal es no emplear mas de 3 colores, y sus gamas. Si ya tenemos un branding previo nos basaremos en este para elegir los colores.

Los colores de la tipografia en la web, los elegiremos bien para que sean legibles con los fondos de las capas donde los coloquemos, lo normal es elegir dos colores con sus gamas, uno para los enlaces y otro para los textos, el de los enlaces eligiéremos uno que llame la atención sobre el texto para que el usuario sea consiente de que ese texto enlaza a algo relacionado con lo que se esta escribiendo.

 

La  tipografía

 

Fuentes

Es una parte que imprime mucha personalidad a la web, pero no por ello debemos olvidar su cometido principal que se lea bien.

Al elegir las tipografias hay que buscar que no sean demasiado complicadas, las tipografías demasiado fantásticas no están en la mayor parte de los ordenadores, ni en las tablets, ni en los smartphones…

Por lo que la web que era tan chula con tu fuente en tu ordenador en el de tus usuarios no dice nada…

Procura elegir fuentes que estén en google fonts, ya que mediante un poco de código que te da el mismo fonts no hace falta que el lector tenga la fuente elegida, la añade google mediante el navegador.

Personalmente suelo elegir fuentes muy planas y sanserif ya que son las que ofrecen una mejor lectura y estéticamente me gusta la sensación minimalista que ofrecen.

Si quieres añadir un texto impactante con una fuente de fantasia, hay diferentes técnicas para hacerlo y que no pierda impacto visual ni tarde en cargar todas ellas implican meter código, si el código te da problemas y  el texto no es demasiado grande siempre puedes añadirlo como una imagen.

 

Las imagenes

imagenes

Una imagen vale más que mil palabras? La verdad es que yo no lo tengo tan claro, pero la imagen aporta mucho a la web. Hay mucho que decir sobre las imágenes y mas adelante ampliaremos la información sobre imágenes que da para mucho…

En principio hay que tener en cuenta algo fundamental, el peso de la imagen ha de ser bajo y la calidad alta.  Elige imágenes pequeñas para tu web. La resolución tiene que ser de 72 dpi. No interesa que el tiempo de carga de la página se alargue. En cuanto a los formatos, los más usados son JPEG, PNG o GIF. Este último se usa mucho en iconos o ‘banners’ publicitarios.

Hay un montón de editores con los que tratar nuestras imágenes, podéis encontrar mas información aquí.

diseño web, HazmeWeb, Uncategorized, usabilidad / 31 marzo, 2014

Usabilidad Web

Cuando nos ponemos manos a la obra con nuestro proyecto web una característica por la que cualquier usuario debe definirlo es FACILfacil

 

Definición de objetivos

Como ya he dicho en otras ocasiones lo primero debemos pensar en la persona que va a visitar nuestra web, y una vez hemos definido a quien nos dirigimos debemos responder a unas preguntas:

  • Que necesitan?
  • Que esperan?
  • Que factores les afectan?
  • Cuales son sus aspiraciones?

 

Respondiendo a estas preguntas conocemos la necesidad de nuestros usuarios y en función de esta vamos a estructurar todo el proyecto.

Fundamentos de la usabilidad web

 

checklistAutonomía, los usuarios deben tener el control sobre el sitio web.

Los usuarios sienten que controlan un sitio web si conocen su situación en un entorno los breadcumbs y los menus resaltados nos ayudan a saber donde estamos

 Reversibilidad, la web ha de permitir deshacer las acciones realizadas.

Aprendizaje, nuestra web debe requerir  proceso de aprendizaje muy corto y deben poder ser utilizados desde el primer momento.

 Feedback a los usuarios, la web siempre ha de aportar información al usuario de manera que éstos siempre conozcan y comprendan lo que sucede en todos los pasos del proceso.

Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande.

 

El diseño y la usabilidad  web

Estos dos conceptos han de ir de la mano, no debe prevalecer ninguno, pero en ese caso debemos dar prioridad a la facilidad de uso sobre el diseño. La economía tampoco ha de prevalecer sobre ninguno de los conceptos, por hacer algo en menos tiempo o con menos coste, no debemos hacer que sea mas feo o poco útil.

Cuando estamos trabajando la web desde todos los puntos de vista debe ser diseñada para el usuario, debemos intentar que sea muy fácil recordar como se hacen las cosas, usando un modelo de relaciones conceptuales es muy fácil para el usuario recordar las acciones.

Toda las interacciones de la web tenemos que intentar pensarlas de una manera practica y con el menos común de los sentidos…

Cuantos menos click y pasos tenga que dar el usuario sera mas fácil que llegue a donde quiera.

Organización de contenidos

Para la organización de contenidos se usan habitualmente 3 esquemas:

  • Esquemas alfabéticos de organización de la información (EAOI)
  • Esquemas cronológicos de organización de la información (ECOI)
  • Esquemas geográficos de organización de la información (EGOI).

Todos son buenos, pero todos son apropiados para todos los sitios. En función del tipo de contenido y la cantidad siempre elegiremos el que facilite más el acceso a la información por parte del usuario.

 

Cambios y adaptaciones 

usuario

La manera en la que vamos a saber si nuestra web es tiene facilidad de uso o no es por la respuesta que vamos a recibir de nuestros usuarios, con este feedback podemos ir implementando cambios para que cada vez sea más cómoda para nuestros usuarios.

La web es un una herramienta viva, no debemos publicarla y olvidarno, debemos analyzar los datos que nos devuelva y con ellos hacer los cambios que sean necesarios para que se mantenga viva.

 

diseño web, HazmeWeb, responsive design, Uncategorized / 27 marzo, 2014

Diseño web adaptativo, responsive web desing

 

 Responsive web design, ver bien tu web en toda los dispositivos

 

 

No es nada nuevo que cada día el acceso a internet es mayor desde los dispositivos móviles,cada vez somos más los  que navegamos  desde una tablet o móvil mientras descansas en el sofa y ve la tv, en un estado anímico muy favorable para comprar online…

Los analisisis de ecomerce indican que el volumen de compra desde estos dispositivos (smartphone y tablet fundamentalmente)  cada vez es mayor y con tickets cada vez mas altos. Por lo que hay que prestar una atención especial a esta funcionalidad.

En el video de “Video to brain”, define muy bien que es el responsive design de una manera muy gráfica.

 Valores que aporta el responsive design a nuestra web

 

Responsive Desing, diseño adaptativo

Responsive Desing, diseño adaptativo

  • Imagen Una web bien adaptada da una imagen profesional.
  • las búsquedas por smartphone en muchas ocasiones son para algo que se necesita de inmediato(cajero automático, grúa, negocio cercano...) por lo que si nuestro negocio no esta bien adaptado perderemos leeds.
  • Mejora de posicionamiento, Google valora positivamente las webs que implementan diseño adaptativo.
  • Mejora SEO, usando responsive design mejoramos el numero de visitas ya que serán siempre a las mismas URL
  • Inserccion fácil de nuevo contenido, si la web esta bien adaptada, introducir nuevo contenido será muy sencillo y se vera bien en cualquier tamaño de pantalla.
  • La usabilidad mejora, logicamente con la adaptación conseguimos que nuestra web se pueda usar perfectamente desde cualquier dispositivo.

 

Técnicas para hacer nuestra web adaptativa.

En función del uso al que destinemos nuestro proyecto web podemos elegir entre las técnicas y tecnologías para el diseño adaptativo, por ejemplo:

Si nuestro proyecto es una web corporativa, lo mas indicado es que mantenga la imagen adaptando el contenido y utilizaremos las Media Queries de CSS3

Si nuestra web lo que prima son loos motores de búsqueda y los formularios emplearemos jQuery mobile, que nos va ha garantizar que la usabilidad seguirá siendo la mejor.

Si en nuestro proyecto lo que prima es la imagen buscaremos una adaptación mediante estilos css3 adhoc para el proyecto

Es importante conocer cuales son las necesidades de nuestro proyecto para que la adaptación sea correcta siempre pensando en la experiencia de usuario.

Jquery-mobile

diseño web, HazmeWeb, Uncategorized / 24 marzo, 2014

Diseño web, Tu web como tú quieres.

web-designComo decimos siempre, tu web no es para tí, te tiene que gustar, pero tienes que pensarla para el publico al que la diriges. Antes de plantearte como sera el diseño web, analiza bien el sector al que te vas a dirigir, examina otras web similares y toma nota de lo que te gusta y de lo que no te gusta.

 

Inclusión de SEO en el diseño.

seo_azulHacer un análisis previo del sector y sus palabras clave mediante las herramientas que google nos ofrece nos aportara datos acerca de cuales son las palabras claves para nuestro proyecto.
La inclusion de parámetros SEO en el diseño de su web te ofrece beneficios como:

Velocidad de indexado: El tiempo que pasa entre la publicación de un nuevo contenido y su aparición en Google disminuye considerablemente.

Mejorar el posicionamiento para las categorías: El sitio se vuelve más relevante, permitiendo que mejoren las posiciones de las categorías.

Reduce los gastos de las campañas SEM:Si la página gana mediante SEO algunas categorías por las que se esté pagando por clic en la publicidad (SEM, Search Engine Marketing), no necesita continuar pagando por ellas, pudiendo reducir ese gasto o invertirlo en dar a conocer otros productos, lo que mejora el ROI de la campaña.

Incremento de las posibilidades de venta:La consecuencia instantánea de obtener más visitas en la web es el incremento de  las opciones de venta (leeds) con el consecuente incremento de ingresos de todo tipo.

 

Psicologia del color.

psicologia_de_color

La elección de los colores es muy importante en  el diseño web ya que determinados colores los asociamos con acciones diferentes:

El rojo llama a la acción, por lo que sera bueno utilizarlo en zonas donde queremos que el usuario haga clicks.

El azul es un color sedante, por lo que es bueno usarlo en zonas donde queremos que el usuario se quede algún tiempo.

La psicologia del color tb debes analizarla en función de tu proyecto en concreto, no es lo mejor utilizar nuestros colores favoritos ya que pueden no ser los más idóneos para la actividad que propone nuestro sitio web.

 

Usabilidad de la web.

usabilidad-webAlgo fundamental es conseguir que usar tu web sea lo mas sencillo posible:

Procura que para conseguir cualquier acción no sean necesarios demasiados click.

Que el usuario sepa siempre donde esta y sea posible volver al inicio en un click.

Sigue todas las pautas que tu proyecto te lo permita y piensa siempre como usuario de la web.

Tecnologia web.

A la hora de elegir la tecnología que vamos a utilizar en el diseño y desarrollo de la web debes tener en cuenta que es lo que requieres de tu web, si es un ecomerce, si es una web corporativa, si es un blog. Para cada tipología existe una tecnología más adecuada. Después ten en cuenta cual es el diseño que quieres ya que has tecnologías que se adaptan mejor que otras a determinados diseños.

Si has elegido hosting, antes de lanzarte a comprar una plantilla mira primero que tecnologías y versiones soporta tu alojamiento ya que te puedes encontrar con incompatibilidades  que te hagan tirar dinero.

 

En conclusion , prepara una lista en la que vayas chequeando los hitos a tener en cuenta y acuérdate siempre de ver desde tu proyecto desde el punto de vista del usuario mas que de el diseñador.

Logo

 

diseño web, HazmeWeb, Uncategorized / 20 marzo, 2014

Empezar con tu web, proyecto online.

Antes de empezar a pensar en tu web

 

Idea
 

Partiendo de tu idea tienes que tener claro a quien vas a dirigir esta idea, intenta saber como sera el usuario o cliente de tu proyecto, tu proyecto no es para ti, es para este usuario o cliente. Cuando tengas esto claro, ponte a buscar toda la información que puedas acerca de proyectos similares que serán tu competencia. Hoy es muy difícil encontrar un proyecto que no exista, pero la innovación no solo debe estar en la idea, esta también en la manera de llevarla a cabo, en la manera de gestionarla y en la manera de relacionar tu proyecto con tu usuario/cliente.

Previo a empezar con el proyecto web, el dominio y el Hosting.

Dedicar un poco de tiempo al nombre que vamos a usar para nuestro proyecto online sera buenos para elegirlo bien. Es importante que el nombre defina tanto la empresa como la actividad a la que vas a dedicar tu proyecto. Intenta que tu nombre sea lo menos común posible, ya que cuanto menos conocido sea más fácil resultara que los buscadores te encuentren por tu nombre. Este nombre sera el dominio de tu web una vez lo reserves.

Dominio

Tu web debe estar alojado en un servidor, esta parte es el Hosting que es muy importante ya que será el que aloje tu pagina y en gran medida hará que funcione mejor o peor. A la hora de elegirlo ten en cuenta la cantidad de trafico que soporta, así como la velocidad del mismo. También las tecnologías que soporta y que las versiones sean compatibles con las tuyas.

No te dejes llevar por las ofertas, ya que las más agresivas están condicionadas por limitaciones de espacio y trafico…

 

A quien te vas a dirigir…

Es fundamental que tengas en cuenta que tu web, a los usuarios a los que te diriges, tu proyecto no es para ti, es para ellos. Busca la forma de enfocarlo de manera que sea lo más atractivo posible para tu publico y a la vez que muy fácil navegar por ella.

La psicologia del color es un criterio muy a tener en cuenta, así como el diseño del  SEO desde el principio ya que esto te ayudara a que tu web se posicione bien desde el principio.

 

 

 

 

El presupuesto…

En este apartado tienes que tener muy claros los recursos económicos de los que dispones para el proyecto. Tienes que repartir tu dinero en las siguientes partidas:

Dominio; quizá la parte más económica, varia en función del tipo que uses (.com; .es; .net; etc) su precio varia en función del registrador tb.

Hosting, no elijas el mas economico como te decía anteriormente.

Recursos de imagen y video: Destina una parte de tu presupuesto para elegir unas buenas fotos, si eres bueno con la cámara y los editores fotográficos el recurso no serán € sera tiempo.

Diseño: Quiza sea la mayor de las partidas de tu presupuestosi lo haces tu mismo, el recurso sera el tiempo… un buen diseño incluyendo una buena programación lleva mucho tiempo. Hay muchos CMS en los que no resulta dificil introducir tu contenido, en estos casos la adaptación es lo mas complicado.

Si no tienes ni idea de informática o de gestión de este tipo de software te recomiendo que cuentes con nosotros para ponerlo en marcha y dediques tu tiempo a investigar tu mercado.

Es mas facil y barato de lo que crees.

Difusion: Junto con el diseño, son las partes mas importantes de tu proyecto. Puedes tener la mejor pagina del mundo y la más bonita, pero si no la difundes como es debido quedara en el cajón de las webs olvidadas.

 

 Los Horarios y el Tiempo…

Es muy importante que te marques unas metas, unos objetivos que sean difíciles pero que se puedan cumplir. Dosifica tus esfuerzos ya que si le dedicas todo tu tiempo llegara un momento en el que te sentirás desfondado y perderas la fuerza e ilusión que tu proyecto requiere para tener éxito…

El descanso es fundamental para mantener las ideas frescas que tu proyecto necesita.

Y como decía Maximo Gladiator: “Fuerza y Honor

 

 

Logo Hazmeweb.

Hazmeweb, Es más fácil de lo que crees…