Sensitive web design, responsive web design or adaptive design

Este post también está disponible en español. 

Sensitive web design, the definitive name

How is said, responsive web or adaptive design? Wikipedia names it adaptive or adaptable web. Users call it responsive web design. Google translate refers to it as ¨ sensitive design¨ and with any doubt it seems the best adaptation to us (take note Siri).

Whatever name you use, you are referring to the same, a kind of web design which adapts to any screen resolutions.

 How to know if a web has responsive design?

Identifying whether a web is responsive or not is very simple: you just have to remodel the window of your browser to make it smaller. If it appears in the horizontal scroll bar and you have to move horizontally to see the hidden content, then…the web doesn’t have responsive design. Simple, isn’t it?

This simple check clears up doubts between liquid design and responsive design at which we looked in a previous post.

Responsive design Resizer BookmarkletIf you don’t feel like making checks with the browser’s window you can use the bookmarklet ( app embed in the browser) Viewport Resizer offers you different  prearranged resolutions. Furthermore you can print in paper the resolutions you wish.

What are the advantages of responsive design?

Responsive design provides 4 great advantages.

SEO. Search Engine optimization. The optimization for browsers is the great winner. There’s only one web (HTML+CSS) and hence the URL is unique for every device. Browsers are not going to find other URL and different contents for the mobile device. We avoid instructions in robots. txt and redirections from one of the versions to others, and even avoid losing the links which could make users in certain web versions.

UX. User eXperience. The user access to the same website independently of the device used. The version for mobile devices is complete too. The same experience of use, the same navigation. Coherence.

Integrity. There’s only one HTML structure and one unique page of CSS style for every device. Whatever size they have. From smartphones at 320 px wide to resolutions of 2,650 px (even higher than retina screens). In the past, it wasn’t like this and there was a page of style for every width standard (320 px for mobiles, 768 px for tablets, 1,024 px for notebooks and 1,600 px for desktops). Each actualization in the web meant retouching one by one the CSS and that could represent loses of integrity

Costs. Although responsive design requires more time investment from the designer and programmer, costs of maintenance are optimized as just 1 page of style has to be checked and not as before when 4 different pages of style had to be manipulated.

How is a web content adapted with a responsive design?

The fastest structure of the website is defined with HTML5. The website’s presentation (background color, typography, source of bodies, etc) is made with pages of style CSS3.

When the user’s navigator asks for a web, the server makes the page of style to carry out the media-query by which it obtains immediate information about the device, especially the screen resolution and orientation (vertical or portrait, horizontal or landscape). The server therefore only has to adjust the content which is going to be useful to the screen format in which it’s going to be seen. This process lasts thousandths of a second, there’s no delay for the user. To any effect it’s another website.

Responsive web designFor this to be possible we should define with anticipation the disposition, order and the size that the different elements which constitute the content of the website and also the behavior that those elements are going to have in a reduced size.

Responsive design is for this reason much more laborious than a conventional design as it implies to take into consideration various displays (smartphone, tablet, desktop), to reorganize the elements (what’s shown before and what’s shown afterwards) and finally to redesign the elements which could bring up problems ( for instance, the camps of a contact’s formulary).

Free online tools identify and validate responsive design

To validate the adaptive design of a website you will have to make some checks. There are a range of free online tools that will facilitate the work. Each day there are more in the web. You can look for them as ¨responsive web design testing tools¨. We leave you here the main ones that have been created for attracting traffic and generate notoriety.

 The best 420 examples of responsive web design

Responsive design examples MediaQueriesEivind Uggedal is compiling at MediaQueri.es website (territorial Spanish URL is only by naming) what he considers the best examples of adaptive design. At this moment (March 2013) his selection covers 420 websites from every kind of sector that shows in thumbnails  with 4 different resolution: Smartphone (320 px), Tablet (768 px). Netbook (1,024 px) and Desktop (1,600 px)

Anuncios

Tipos de plataformas de ecommerce

Existen 4 tipos de plataformas de venta online:

Marketplaces horizontales y verticales.

Proporcionan una plataforma de ecommerce sencilla (fichas de producto + carrito de la compra + pago por PayPal) a autónomos, microempresas y pymes. Suelen recibir bastante tráfico que captan como agregadores. No gestionan dominios, las tiendas son subdominios del dominio principal o carpetas con el nombre de la tienda. El hosting (espacio en servidor y tráfico) y mantenimiento (copia de seguridad) son por cuenta del proveedor

Ejemplos de marketplaces verticales: especializados en una tipología de producto o en un mercado muy concreto como las aplicaciones para Android, iOS, Magento, etc. Tenemos dos buenos ejemplos muy conocidos por los españoles:

  • Etsy  > Handmade Goods, Vintage Items, Supplies (cosas artesanales, cosas antiguas, accesorios). Cobran 1,20$ anual por cada artículo publicado (0,20$ cada 4 meses) y una comisión del 3,5% sobre el precio de venta del artículo
  • Big Cartel > Big Cartel is a simple shopping cart for artists (Free, 9,99$/mes, 19,99$/ mes, 29,99$/ mes)

Ejemplos de marketplaces horizontales: son más conocidos porque al poseer una mayor variedad de productos atraen muchos usuarios más.

  • DaWanda > Europa > productos únicos, hechos a mano y originales, producidos en pequeñas series. Totalmente traducido al español tanto el back como el frontend.

Plataformas SaaS y Cloud Solutions

Las soluciones SaaS (Software as a Service), también llamadas Cloud Solutions (Soluciones en la Nube) son tiendas preconfiguradas. Las soluciones SaaS permiten configurar en muy poco tiempo el catálogo de productos, personalizar de forma muy simple el aspecto de la tienda y comenzar la venta de productos de forma casi inmediata sin necesidad de programación. Permiten tener una tienda en internet a bajo coste en muy poco tiempo. Como en los marketplaces el hosting (espacio en servidor y tráfico), mantenimiento de la aplicación y de la tienda (copia de seguridad) son por cuenta del proveedor.

Se remuneran por unas cuotas más altas: 29$/ m, 59$/ m, 99$/ m y 179$/ m y un porcentaje de comisión sobre la venta de artículos más bajo (1% al 2%).

Estas soluciones permiten gestionar un dominio propio, establecer varias categorías de producto, colecciones dentro de esa categoría y gestionar un mayor número de productos. Sin embargo al ser software cerrado (propietario) no pueden integrarse con sistemas de contabilidad, gestión de proveedores, almacén…etc, que son imprescindibles cuando el ecommerce funciona (es decir, cuando empiezas a gestionar más de 20 pedidos día).

Ejemplos de plataformas SaaS

  • Shopify.com
  • Magentogo.com*
  • Prestabox.com**
  • Theetailers.com
  • Ozongo.com
  • Trilogi.com
  • 1and1.es

*Magento Go y **PrestaBox son versiones SaaS de soluciones que sí permiten una migración sencilla a una solución de desarrollo más completa (que requieren hosting propio).

Plataformas Open Source

Open Source significa Código Abierto. Es decir, la tecnología (la aplicación) es pública y de uso gratuito, no requiere el pago de licencias y la comunidad de desarrolladores se ocupa del desarrollo, mantenimiento y evolución del programa.

Las plataformas de código abierto tienen dos ventas económicas.

Coste muy reducido. Estas soluciones son muy potentes y sus funcionalidades permiten gestionar un catálogo de productos, aplicar reglas de promoción de productos (descuentos, códigos promocionales), gestión de venta cruzada de productos, sistemas de pago, zona de gestión del usuario, gestión de múltiples tiendas de forma simultánea, sistema de seguimiento de pedidos y analítica de ventas, etc.

Compra de funcionalidades a bajo coste. Hay una gran cantidad de programadores freelance y empresas (comunidad) que trabajan para ampliar las funcionalidades o características de las soluciones de código abierto. Muchas funcionalidad específicas (integración con ERP, Web Services, integración a través de API con otros proveedores, etc) pueden ser adquiridas en marketplaces de aplicaciones a abajo coste como plugins o extensiones de la aplicación principal.

Ejemplos de plataformas Open Source (hay muchos más)

  • Magento.com
  • Prestashop.com
  • Zencart.com
  • Opencart.com

Plataformas de ecommerce a medida

Si nuestra tienda online crece mucho necesitaremos una programación más específica y adaptada a tanto a nuestros procesos particulares (contabilidad, gestión de proveedores, gestión de stocks y almacén…etc)., como a los mercados en donde vendemos (lenguas de doble byte, divisas, logistica, etc). Necesariamente tendremos que desarrollar una programación propia.

Ejemplos de plataformas de ecommerce a medida

  • Amazon.com
  • Barnes & Noble.com
  • El Corte Ingles.com
  • Walmart.com