Aspectos a tener en cuenta en un proyecto web responsive

Vamos a analizar en que pensar cuando queremos hacer una web responsive como dios manda.

Por supuesto en el Diseño. A la hora de pensar en el diseño debemos tener en cuenta que debe poder adaptarse a los diferentes dipositivos como móviles, tablets, etc.. en algunos casos encontramos frameworks en los que primero se diseña la versión móvil, luego se va a la versión tablet y es al final cuando diseñamos la versión desktop.

Pero claro, luego están los diferentes formatos de pantalla a tener en cuenta, con lo que que debemos saber que podríamos mostrar vídeos o fotografías de mayor tamaño a mayor tamaño de pantalla, o ajustar un diseño específico para laptops.

Y que pasa con los SO?
Podemos mostrar contenido sólo para iOS o sólo para android o Windows Phone  sabiendo que los “selects” funcionan de manera diferente en cada caso y teniendo en cuenta que algunos efectos que van bien en desktop como los “mouseover”,”rollovers” o “dropdowns” en “mobile” no van bien.

Y los iconos o gráficos?
Pues éstos se tienen que hacer para cada dispositivo, porque un icon para iphone 3G no tiene el mismo tamaño y resolución que un icon para “iphone retina” o “ipad retina”, incluso ahora que hay macbook retina hay que hacer el ícono adaptado a su tamaño. Además todos los íconos deben estar en un sprite para que la web cargue una sola imagen con todos los elementos. Este sprite se va mejorando y editando mientras se maqueta.

Por otro lado, es una buena opción es usar fonticons, lo que permite controlar los íconos como si fuesen fuentes tipográficas, controlando así su tamaño, color o permitiendo algún efecto CSS3 o de animación de forma mas fácil. Aunque esto no remplaza el usar íconos de imágenes para casos donde no exista una fonticon aplicable. Algo que por ejemplo se debería preparar para diferentes resoluciones de pantalla sería el logotipo de tu página o algún simbolo especialmente diseñado.

OJO: Esto no se aplicaría a las fotos que se suban al sistema, es decir al repositorio de Media del mismo WP, sólo a las fotos que se carguen desde el CSS y no desde el CMS.

Debemos también saber que hay dos tipos de slider, fluidos y responsive.

  • En el fluido el alto del slider se ajusta según el ancho de la imagen que varía según el ancho de la pantalla del dispositivo. Ej: Orbit de foundation.
  • En el responsive el alto no varía y se ve mas o menos imagen según el ancho de la pantalla. Ej: Ver spacebox.

 

Importante la tipografía. Aquí entramos en un aspecto complejo ya que no sólo hay que controlar el tamaño de las fuentes, sino decidir el tamaño adecuado según el tamaño de monitor. Teniendo en cuenta que la distancia que tiene la pantalla de un portátil a los ojos del usuario no es la misma que la distancia que hay con la pantalla de un móvil, una tablet o de un monitor en sus diferentes tamaños, sin hablar ya de una SmartTV.

Por otro lado y como una buena opción podemos usar webfonts, las cuales se pueden cargar desde servicios de terceros o desde el mismo CSS como archivos de fuentes usando @font-face.  

Elegir un Framework con el que te sientas cómodo Debemos intentar encontrar un framework que nos aporte un entorno agradable a fin de usarlo también en futuros proyectos los que nos facilitará bastante la vida. Una vez que nos hemos familiarizado con uno en concreto podemos evolucionar con él y usarlo de la forma mas efectiva.

Yo cada vez me decanto mas por foundation, para íconos Font-Awasome, jQuery, Less, Sass y algún que otro minified (reductores de peso de archivos).

Usar foundation no nos limita a fijar el ancho de la web a 960px ni a sólo 12 columnas con un espaciado de 30px cada una, podemos definir nuestro grid y crearlo. Ej: 18 col, 10px gutter, fluid + fix.

Foundation Icons Fonts - ZURB Playground - ZURB.com

Nunca olvidemos el Contenido & SEO Esencialmente todo el contenido será gestionable, TODO, aunque luego al cliente le demos acceso a unas partes y otras no. Podemos crear todo tipo de campos y funcionalidades, pero hay que definir bien que creamos y como funcionará.

El análisis SEO del contenido se debe aplicar en el Theme, y es necesario que el diseño indique que tipo de tag usa, H1, H2, a, ul, ol, etc. Necesitaríamos el informe de análisis SEO para aplicar las keywords también en el código si así lo indica el analista.

Sin olvidar los PSDs Un psd bien organizado ahorra mucho tiempo.

Enlaces:

miniEntrevista : Paula Gual

Una de las maravillas de WordPress es lo fácil que es empezar a usarlo, dar los primeros pasos como instalar un Theme, Instalar y Activar plugins es algo que la comunidad ha puesto mucho esfuerzo en hacerlo entendible para todo tipo de público. Así es como nacen nuevas y frescas ideas, ideas que necesitan de un dominio, pasión y dedicación. Y así es como Paula Gual que no tiene nada que ver con el mundo de la programación o online ha puesto en marcha un blog donde nos cuenta algo que le apasiona, y de eso van los blogs, gente apasionada por algo que toma la iniciativa de comunicarlo. Paula nos cuenta su experiencia así:

El pasado 4 de marzo lancé el blog de utensilios de cocina el www.elpelagambas.com . Es un blog compartido con otra bloguera, Susana. Y estoy planificando la migración de otras dos webs de la empresa.

 

 

¿Porque te decidiste por WordPress?

WordPress en mi opinión, es el CMS para blogs más completo y versátil. Me proporciona todas las opciones que necesito tanto en lo que es el diseño, teniendo en cuenta que no soy diseñadora, como en la parte tecnológica, teniendo en cuenta que no soy informática ni programadora.

¿Que fue lo mas complicado de hacer en tu blog?

Creo que lo más complicado fue elegir el nombre aunque pueda parecer una tontería. Y en cuanto a WordPress elegir un theme que cumpliera con los requisitos predefinidos (ligero, opciones en theme, responsive, etc).

¿Cuantos plugins utilizas y cual consideras mas útil?

  • Los plugins que utilizo en el blog son:
  • Shareholic: para que se pueda compartir en redes sociales.
  • Related Posts by Zemanta: para los posts relacionados.
  • Word Press Popular Posts: para los posts más leídos
  • All in one SEO: para el SEO
  • Google XML Sitemaps: para crear los sitemaps automáticamente
  • CodeStyling Localization: para traducir el theme, los plugins y los widgets
  • Akismet: para el SPAM

Más útil, pues un poco todos, si no no los usaría. Pero el Related Posts me sorprendió por la cantidad clics que tiene. Creo que es una buena manera de aumentar las páginas vistas por visita.

 

¿Como consigues la información para publicar en tu blog?

Los utensilios de cocina son en sí uno de mis hobbys, de un viaje puedo volver antes con un utensilio de cocina raro que con una miniatura de algún monumento local. Así que muchas de las cosas que aparecen las tengo, o las quiero tener.

Por otra parte, ahora que tengo que generar contenidos más allá de mi propia experiencia, tengo una lista de fuentes (algunas con rss y otras que consulto periodicamente) que me dan contenido. Algunos ejemplos son los blogs de cocina, las propias marcas de utensilios, blogs de otros países, etc…

 

¿Cuanto tiempo dedicas a tu blog?

Fueron aproximadamente tres meses de trabajo para la puesta en marcha, dedicándoles unas 3-4 horas a la semana.

Ahora, son unas 3-4 horas semanales a escribir. Por otra parte, otras 2 horas al mantenimiento del blog, depende de las actualizaciones de WordPress, Theme y Pluggins que haya. Comentarios que contestar, etc.

Por suerte en nuestro caso somos dos personas en el blog, así que nos repartimos ambos trabajos – escribir y back office – si no sería prácticamente imposible para sola mi sacar 6 posts semanales.

 

 

Para saber mas de Paula puedes seguirle en tu twitter @elpelagambas o visitar su www.elpelagambas.com.

miniEntrevista : Tona Pou

Lo prometido es deuda, tenemos la primera entrevista en Mallorquí, y quien mejor que nuestra super conocida Tona Pou, ella se describe así:

Estratega en internet social. Quejica. Militant mallorquina. Keep calm and love dogs.

 

Què recomanaries a algú que té pensat usar un blog com a eina de comunicació a l’empresa, servei o negoci?

És que jo som de les que considera que la paraula blog no serveix per una unitat de negoci. No serveix per un tema d’accés a la informació: perquè s’ha de veure el darrer que has publicat i no el que t’interessa? Wordpres és una eina fantàstica per la gestió dels continguts, i fent una pensada se pot fer una navegació àgil sense haver d’estar fermat a la dictadura del darrer que escrius és el primer que es veu.

 

Què és el que més valores de wordpres com a gestor de continguts?

Plantejant les etiquetes que vulguis posar, pots crear una navegació senzilla per l’usuari perque cada cosa aparegui on un vol.

 

Quina penses que és la raó principal per la qual els clients no creen el seu propi contingut o com cercar-lo?

Bàsicament perque no és la feina de ningú. També hi ha por a què es dirà, a que sigui adient per l’empresa, que convingui pel posicionament, la selecció de què s’ha de dir del què no… Però a gent com jo ens paguen perque traslladen la responsabilitat de la creació, edició i distribució dels continguts, i no han de preocupar-se. No és sols que en sabin o no, és que no volen pensar-hi

 

Dels clients i la gestió dels comentaris, quin ha estat el teu major repte? 

Pot pareixer extrany, però els problemes que he tengut no han estat per la gestió de comentaris per part d’usuaris, sino per part de jefes que volien que retiras comentaris que no els agradaven. És una feina convencer-los de que si no és una opinió que sigui mal educada, mal carada, dita amb un llenguatge ofensiu. No basta que hi hagi una opinió que no els agradi, si tenen raó o si no la tenen però està ben explicat, no se pot retirar un comentari. La veritat és que sempre m’han fet cas. Se fien de mí i tot ha anat sempre bé, però les discusions no les mos ha llevades ningú! =P

Has tengut la oportunitat d’usar post formats o advanced content templates?

No, la veritat. Estic pegant una mirada perque he de fer el meu site d’una P**A vegada i estic destriant plantilles responsive i que tenguin opcions avançades d’edició, perquè pareix mentida lo bó que és wp com a gestor de continguts i lo txung que és com a editor! =P

miniEntrevista : Helen Baker

Hemos tardado un poco en publicar nuevas miniEntrevistas, el trabajo primero 😉
Una de las cosas que mas me gustan de esta isla es lo cosmopolita que es, sin necesidad de tomar un avión puedes conocer gente de todas partes del mundo. Y muchos de ellos ya se han hecho su lugar en la isla. So, let’s do this miniInterview in English. Why? Why not!. I la propera miniEntrevista serà en mallorquí, estigueu atents!

 

I’m a freelance web copywriter and editor. I provide text for online media like websites and e-newsletters.

 

In plain English, what do copywriters do and how do they work with web designers or developers?

In short, we write words. Any words! As a web copywriter, they range from body text and micro copy through to metadata and alternative format text. I also understand how issues like accessibility, usability and SEO affect what I write and take these into consideration.

Usually, I work for clients as one member of a team that includes a designer and a developer. I’ll work with my contact to define the website’s target audience, objectives and key messages. Then, if needed, I’ll compile a sitemap or review and refine an existing one.

I’ll often write the copy at the very start of the project, so that the designer knows what he or she has to work with and which elements to include. This avoids any surprises further down the project journey, where changes can be extremely hard to implement.

Don’t confuse ‘copywriter’ with ‘copyrighter’! A ‘copywriter’ writes copy (text) and a ‘copyrighter’ is concerned with the legal aspect of copyrighting and protecting creative assets.

 

You have experience with different CMSs, but I know you love WordPress. Why?

I’ve used other systems like ExpressionEngine, HubSpot and Drupal, plus lots of proprietary programs (whatever my clients use). But when I started out as a freelancer, I made my own website with WordPress.

It was very easy and intuitive to use, and I love the fact that there’s a plug-in for almost anything you can think of, thanks to its Open Source principles. And, of course, the fact it’s free makes it available to everyone, giving power to people worldwide to express themselves.

As my knowledge has broadened, WordPress has been the ideal platform for playing around with HTML and CSS. It’s really helped me to understand how text works on websites and to appreciate the hard work of designers and developers.

 

Online publishing is at the heart of WordPress. From your experience, what are its strengths and weaknesses?

As an individual user, its strengths are definitely ease of use, from installing the software and choosing a design to publishing text and adding a plug-in. I must admit, I’m finding it hard to think of any weaknesses at the moment!

 

Google’s Matt Cutts has always said that WordPress is best for SEO. What do you think as an SEO copywriter?

I don’t call myself an SEO copywriter. It’s just one of many considerations (which often crossover) for creating relevant web copy that works. I always write for people first and search engines second. We should never lose sight of the fact that human beings actually use websites!

But I would agree that WordPress does make it easy to optimise copy, such as:

  • metadata
  • text elements (like H1, H2 and so on)
  • links from key phrases
  • ALT tags (done correctly).

 

Which plug-ins do you recommend?

I actually use very few – just Akismet (of course), All-in-one SEO pack and Quotes collection. But I also have others installed and am planning to play around with them at some point: LinkedIn for WordPress, Pinterest RSS widget, Portfolio slideshow and WPML multilingual CMS.

Thank you for asking me to take part in the interview! If you’d like to know more about me, visit www.concisecontent.co.uk or email me at helen@concisecontent.co.uk (también hablo español).

Usos de WordPress en turismo, mesa redonda 20/03/2013

Colegio guias turisticos, excursiones mallorca, guias, guias mallorca y guias turisticos mallorca

Os proponemos una mesa redonda sobre el tema “Usos de WordPress en turismo“. La idea es comentar y debatir como se ajusta WordPress a las diferentes necesidades derivadas del turismo: creación de contenidos, integración con reservas hoteleras, plugins específicos, multiidioma, etc.

El encuentro será el próximo miércoles 20 de marzo, a las 19 horas en la cafetería del Gran Hotel, en el Caixa Forum de Palma (Plaza de Weyler, 3 – 07001 Palma). La hora de finalización estimada es las 21h.

Os podeis apuntar dejando un comentario en esta entrada, ¡os esperamos!

miniEntrevista : Daniel Nabil

Desde hace tiempo que le sigo, sus trabajos y su web muestra la gran experiencia y calidad en sus proyectos, todavía no he tenido la oportunidad de conocerle pero ya tendremos una meetup para que todos podamos compartir conocimientos. Él se describe así:

Construyo sitios webs. Lo suelen llamar diseño web, desarrollo frontend y otros nombres que suenan a que haces algo complicado, pero básicamente lo que hago desde hace unos 15 años es eso, montar páginas web y dar forma a las ideas en Internet, porque siempre me ha gustado construir cosas.

 

Tienes un portafolio impecable ¿Cual es el proyecto más complejo en el que has participado?

Muchas gracias. En la mayoría de los casos lo que ha hecho complicado un proyecto, más que el propio diseño o desarrollo, han sido cosas como la urgencia, las exigencias poco realistas del cliente o los continuos cambios a mitad del proyecto. En otras palabras, más que proyectos complicados, lo que he tenido son proyectos que se complican.

Todo proyecto tiene tendencia a complicarse si lo dejas demasiado “suelto”, por eso es importante atarlo bien. Poco a poco he ido aprendiendo a guiar al cliente para que defina y priorice sus necesidades desde el principio, precisamente para evitar esa complejidad innecesaria.

Casi todos los proyectos empiezan siendo muy simples y estando todo muy claro, pero muchas veces ves perfectamente que no es así, y que si no dedicas un tiempo al principio a marcar objetivos y concretar detalles, vas a acabar trabajando más de lo necesario.

 

¿Tienes algún Tema libre en wp.org o premium en algún marketplace?

Todavía no. Tengo varios temas a punto de terminar, tanto gratuitos como de pago, pero aun no están disponibles. Me apetece mucho poder ofrecer soluciones económicas a nivel de diseño y funcionalidad, pero sin perder ese toque especial de las webs hechas a mano y a medida.

Es algo que hace mucho tiempo que quiero hacer, no solo para los clientes que no se pueden permitir un trabajo exclusivo, sinó para poder devolver a la comunidad la guía y el apoyo recibidos de manera desinteresada desde que empecé a trabajar con WordPress.

 

¿Cuánto es el máximo de plugins que has usado en un proyecto?

Poco más de diez. No soy muy amigo de arreglarlo todo a base de plugins. Se trata de conseguir que la web haga lo que el cliente necesita que haga. Si se puede conseguir sin plugins, perfecto, si no, como máximo debo haber instalado 10 o 12. No recuerdo ningún proyecto que necesitara más. Cada extensión que añades incrementa la complejidad del sistema, por lo que suelo ser bastante ahorrador en este aspecto.

 

¿Trabajas solo, con agencias o un equipo más grande?

En la mayoría de proyectos en los que trabajo yo me encargo de casi todo, desde el diseño y la maquetación, hasta el desarrollo y la implementación, aunque muchas veces acabas trabajando junto a alguien más para cosas como traducciones, correcciones, fotografía, SEO, etc.

Montar páginas web te permite estar en contacto con mucha gente. A no ser que el proyecto sea muy pequeño, para poder realizar el trabajo completo suele ser necesario contar con un equipo, aunque normalmente suele ser algo disperso: varias personas trabajando, pero cada una por su lado.

Pero por otra parte, me gusta “verle la cara” a la empresa o negocio para el que estoy trabajando, saber a quién estoy ayudando, por eso no me suelen interesar los proyectos demasiado grandes.

 

¿Cuáles crees que son los requisitos de un buen Tema?

Yo creo que lo principal es que se ajuste a lo que necesita el usuario final. Un tema no puede serlo todo para todo el mundo: no puede ser rápido, simple y limpio y al mismo tiempo incorporar todos los scripts de pases de fotos conocidos.

Precisamente uno de los grandes inconvenientes que les veo a la mayoría de plantillas compradas en Themeforest y sitios similares es que están hechas para intentar encajar en todos los casos posibles. Estos temas vienen cargadísimos de archivos que lo más probable es que nunca vayamos a utilizar, con lo cual las webs se convierten en pequeños monstruos, lentos y pesados. Sería como si necesitas un cuarteto de cuerda para una fiesta, pero al final te traen toda la orquesta sinfónica, por si acaso.

Evidentemente, si no conoces al usuario final no puedes adaptarte a sus necesidades, por lo que, en el caso de plantillas enfocadas a distribución general, lo más importante es que sean temas simples, limpios y escritos siguiendo los estándares de código, para que puedan servir de base para montar lo que necesitemos.

 

Puedes seguir a Daniel en su twitter @daninabil o visitar su web www.danielnabil.com

WordCamp Europa, ya tiene localización y fecha!

Será en la ciudad de Lieden, Paises Bajos.

La fecha propuesta es del 5 al 7 de Octubre del 2013, si falta mucho, pero mejor organizarnos desde ya!.

¿Holanda y Paises Bajos son lo mismo? pues no, y que mejor que un video

 

Ah! además de ser una buena ocación para aprender mas sobre WordPress será una buena forma de practicar inglés.

 

miniEntrevista : Cafeymas

Hoy preguntamos a @CafeyMas un blog de nuestro colaborador Jesús Cortés, vale aunque suene a autobombo tiene una simple razón, es el blogger que mas a mano tenemos.

Recuerdo que tu blog estaba en blogger y luego migraste todo a WordPress, ¿Con que versión de WP empezaste?

Si no recuerdo mal, fue la 2.8. Recuerdo que en esa entonces todavía no había gestor de “menús” y me parecía menos flexible que Joomla,… 😉

¿Cuantos Plugins utilizas en tu blog y cuales son?

Tengo 27 plugins activos… pero sólo comentare los más importantes para no aburrir:

  • Wp geo: para geoposicionar, situar en el mapa las cafeterías, y permite un mapa general con todas las recomendaciones.
  • WP Banerize: fantástico gestor de banners/publicidad
  • Custom Field Template: me hace más fácil la introducción de campos personalizados.
  • Faceted search: permite hacer búsquedas cruzadas entre categorias.

Tu Tema (Theme), es a medida, premium (de pago), childtheme (Tema hijo) o utilizas un framework?

Es un theme gratuito muy tuneado, con varias plantillas personalizadas y modificaciones de código. Ahora estoy en proyecto de actualizar completamente el theme, para incluir mejoras de funcionalidad (sobre todo las búsquedas) y que sea adaptable a dispositivos móviles.

¿Como sueles resolver tus dudas?, visitando los foros de wp.org y su versión en Español o utilizas otras fuentes?

Principalmente le consulto primero a San Google ;-), pero obviamente también consulto con los foros de wp, con mis colegas de Twitter y algunos blogs especializados.

¿Que esperas de las siguientes meetups?

Me gustaría que fuéramos capaces entre todos de crear una comunidad estable en torno a WordPress, en la que tengan cabida la diversidad de perfiles existentes, y conseguir cierta regularidad.
Sería un bonito reto conseguir apoyo de algún sponsor y así poder traer ponentes de fuera.