El gobierno de Estados Unidos apoya el diseño adaptable (responsive design)

La noticia es antigua, del año 2013, ahora no sería noticia, pero me ha parecido gracioso encontrarla: It’s Official: US Government Endorses Responsive Web Design.

La noticia cita el informe DIGITAL GOVERNMENT: BUILDING A 21ST CENTURY PLATFORM TO BETTER SERVE THE AMERICAN PEOPLE, en el que pone:

Mission drives agencies, and the need to deliver better services to customers at a lower cost—whether an agency is supporting the warfighter overseas, a teacher seeking classroom resources or a family figuring out how to pay for college—is pushing every level of government to look for new solutions.

Early mobile adopters in government—like the early web adopters—are beginning to experiment in pursuit of innovation.

Customer-centric government means that agencies respond to customers’ needs and make it easy to find and share information and accomplish important tasks.

Using modern tools and technologies such as responsive web design and search engine optimization is critical if the government is to adapt to an ever-changing digital landscape and deliver services to any device, anytime, anywhere. Similarly, optimizing content for modern platforms, rather than just translating content from paper-based documents to the Web, will help ensure the American people and employees can access content regardless of platform. Agencies will need to keep current with the latest design concepts and refresh content delivery mechanisms to ensure the highest performance.

These imperatives are not new, but many of the solutions are. We can use modern tools and technologies to seize the digital opportunity and fundamentally change how the Federal Government serves both its internal and external customers— building a 21st century platform to better serve the American People.

Lo dice claramente, “Using modern tools and technologies such as responsive web design and search engine optimization”.

Diferencias entre diseño adaptativo y adaptable

En español es difícil hablar de estos dos tipos de diseño porque nos “faltan palabras”, pero en inglés se distingue responsive design y adaptive design.

Tres artículos que explican las diferencias:

Y un par de imágenes que lo aclaran de forma visual:

O te adaptas o desapareces: Google prima el diseño adaptable o adaptativo

Hay que prestar mucha atención a este anuncio de Google: Finding more mobile-friendly search results. Google avisa: desde el próximo 21 de abril se producirán cambios significativos en los resultados de búsqueda, priorizando las webs que catalogan como mobile-friendly, es decir, las que tienen un diseño adaptable o adaptativo (responsive design).

Google ha publicado la herramienta Prueba de optimización para móviles para ayudar a comprobar si un sitio web cumple con sus exigencias. He comprobado algunos de mis sitios web y parece que pasan la prueba:

Pero estas no pasan:

La web de la Universidad de Alicante no pasa la verificación, ¿por qué será que no me extraña? Si hace un par de años, cuando cambiaron la web, si en vez de contratar a una empresa externa me hubieran preguntado a mí (o a cualquiera de los que trabajamos en la Universidad de Alicante y nos dedicamos al tema de las páginas web, que hay muy buenos profesionales), yo les habría explicado que era imprescindible que la hicieran adaptable (responsive).

ua-mobile-friendly

 

Desarrollo de un diseño adaptable

El artículo Build a basic responsive site with CSS explica cómo desarrollar un diseño adaptable o adaptativo (responsive web design) con CSS.

Sobre este tema tengo varios vídeos publicados:

 

CSS: diseño adaptable, adaptativo o flexible:

[kml_flashembed movie=”http://www.youtube.com/v/4-LaxnCKxHw” width=”560″ height=”315″ wmode=”transparent” /]

 

CSS: creación de un diseño adaptable, adaptativo o flexible (parte 1):

[kml_flashembed movie=”http://www.youtube.com/v/ktGF7Dda0wI” width=”560″ height=”315″ wmode=”transparent” /]

 

CSS: creación de un diseño adaptable, adaptativo o flexible (parte 2):

[kml_flashembed movie=”http://www.youtube.com/v/96U4zPbyq9c” width=”560″ height=”315″ wmode=”transparent” /]

 

CSS: creación de un diseño adaptable, adaptativo o flexible (parte 3):

[kml_flashembed movie=”http://www.youtube.com/v/cbtJ4udg7sM” width=”560″ height=”315″ wmode=”transparent” /]