Grandes respuestas! Aquí hay información sobre cómo abordamos la elaboración de presupuestos para receptivos:
El proceso de hacer que un sitio responda nos lleva entre un 10% y un 50% extra de tiempo de marcado y diseño.
Esto se basa en una serie de factores, pero el más importante es si estamos trabajando con un sitio nuevo o modernizando un sitio existente . Obviamente, construir un diseño de sitio completo con capacidad de respuesta en mente lleva mucho menos tiempo que intentar adaptar un sitio existente.
- ¿Cómo convertirse en un desarrollador web autodidacta? Qué tutorial en línea seguir ya que hay muchos
- Ha escrito sus códigos HTML y CSS, y su página está lista para iniciarse. ¿Cómo lo haces accesible en internet?
- ¿Cómo es mi sitio web www.gstmadeeasy.com?
- Cómo obligar a las personas a escribir funciones puras en JavaScript
- Cómo crear un formulario de registro de estudiante usando PHP y MYSQL
Aquí hay algunas cosas más que contribuyen a la cantidad de tiempo que lleva:
- ¿Lo estás haciendo sobre la marcha o lo estás planeando desde el principio? Una práctica recomendada que intentamos seguir es hacer una estructura alámbrica sobre cómo responderá el diseño a los diferentes tamaños de dispositivo. Esto se puede hacer usando una herramienta como Balsamiq (pago – http://www.balsamiq.com/) o Lumzy (gratis – http://lumzy.com). Elimina las conjeturas de cómo deberían responder mejor las cosas durante la fase de marcado, pero agrega más tiempo al proceso.
- Mostrar contenido : ¿muestra diferentes tipos de contenido según el dispositivo? Las personas usan los teléfonos inteligentes de manera diferente a como usan las computadoras. En los teléfonos inteligentes, esperan pequeños fragmentos de información resumida y algunos llamados a la acción distintos que pueden escanear fácilmente y sobre los cuales actuar. Un ejemplo es mostrar menos texto según el tamaño de la pantalla (puede probarlo aquí: http://www.frankieroberto.com/re…), pero hay otros como ocultar ciertas secciones, mostrar menos elementos de menú, etc. Todo esto lleva más tiempo tanto desde una perspectiva de planificación como de codificación.
- Imágenes : otra cosa que desea abordar con Responsive Design es lograr una velocidad de carga óptima para cada tipo de dispositivo. Por ejemplo, si alguien está navegando por su sitio en un teléfono inteligente, es probable que no desee hacer que descarguen la imagen de fondo de pantalla completa de 700 kb que se muestra en su sitio web completo para computadoras; esto hace que la experiencia sea un dolor en el trasero e incluso pueden simplemente ríndete cuando se den cuenta de cuánto tarda tu sitio en cargar. Lo bueno de Responsive es que puedes configurar diferentes imágenes de fondo para diferentes tamaños de pantalla. Nota al margen: además de especificar imágenes de fondo basadas en selectores, creo que las personas del w3c están trabajando en una etiqueta especial que le permite especificar una imagen en lugar de solo un fondo. Dicho todo esto, cambiar el tamaño, exportar y optimizar imágenes para diferentes resoluciones también lleva más tiempo.
- Pruebas : tradicionalmente, solo necesitaría probar los navegadores de escritorio, pero a medida que su sitio responda, querrá asegurarse de que los diseños que ha creado se comporten como esperaba. Utilizamos IETester (http://www.my-debugbar.com/wiki/…), Browserlab (https://browserlab.adobe.com/) y emuladores nativos de iOS (a través de XCode) y Android (a través de SDK). En realidad, está saliendo otra herramienta genial de Adobe llamada Shadow, que le permite emparejar sus dispositivos móviles con su computadora y depurarlos utilizando sus navegadores nativos (http://labs.adobe.com/technologi…). Una vez más, cuantos más dispositivos desee admitir, más tiempo llevará.
Esas son las cosas que observamos cuando cotizamos para un sitio receptivo. Muchos de los pasos son posiblemente opcionales para el proceso de diseño. Hay agencias y clientes con presupuestos más bajos, por lo que la realidad no es que todos siempre tengan el tiempo para ser tan minuciosos.
¡Espero que esto ayude! Si tiene alguna otra pregunta sobre el diseño receptivo, ¡hágamelo saber y haré todo lo posible para responder!
John
EDITAR: Hola a todos, recientemente escribí un artículo sobre el proceso de diseño web receptivo y los méritos de responder frente a un sitio móvil separado. Espero que ayude: http://www.accelweb.ca/blog/2013…
