Me gustaría preguntarte cómo te las arreglas para presentar el diseño web. Por lo general, envío un archivo/archivos jpg al cliente directamente por correo, pero este no es el mejor enfoque. En la mayoría de los casos hace el trabajo, pero he experimentado algunos casos que no lo hicieron.
Digamos que configuré un diseño de 1980px de ancho. El ancho es importante porque el cliente puede ver todo el fondo que aparece, pero el diseño real tiene un ancho de 960 px. El problema es que, en el 90 % de los casos, el cliente abre la imagen en el navegador de imágenes predeterminado del sistema operativo y la imagen se escala para ajustarse a la vista. Además, si mi cliente tiene, por ejemplo, una pantalla ancha de 1440 px, los 1980 px se escalan a 1440 px y los 960 px son solo 690 px. Como sabemos, si la imagen está escalada, no podemos ver todos los detalles porque la imagen antialiasing del navegador de imágenes y todos los detalles de nitidez desaparecerán. ¿Qué sucede si mi cliente abre el mismo diseño en una pantalla ancha de 1280 px o más angosta? Se pone peor.
El segundo problema es el orden de las imágenes. He tenido esta situación un par de veces, he enviado tres imágenes con diferentes enfoques de diseño y mi software de correo ordena alfabéticamente, mientras que mis clientes envían los archivos adjuntos por (por ejemplo) tiempo de modificación. Como resultado, el cliente me llama y me dice: "El primer diseño es el mejor. Me gustaría elegir este". El problema es que no tengo ni idea de cuál es el primero en su correo. Es confuso, ¿verdad?
La solución podría ser colocar una imagen en la web, escribir un par de líneas de código html y CSS y enviar un enlace. Pero este enfoque también tiene algunas trampas. Digamos que yo escribí el código. El ancho de img debe ser 1980px: img { ancho: 1980px; } y de hecho lo tiene. Pero hay otro problema. Cuando el cliente abre el navegador y la resolución de su pantalla es inferior a 1920 px, la imagen comienza desde la izquierda y termina en algún lugar en el medio. Esto se debe a que hay una barra de desplazamiento horizontal, pero su posición predeterminada es la izquierda, no el centro. Ok, entonces puedo usar algo de javascript para extorsionar la posición adecuada, pero la situación resulta ser ridícula. Es como usar una ametralladora para una hormiga.
El hecho es que todas esas situaciones pueden ocurrir y, de hecho, lo he experimentado un par de veces. La mejor opción sería mostrar una imagen en su tamaño original centrada con posibilidad de moverla a la izquierda/derecha.
¿Alguna pista, idea, herramienta? :)
Agregando a la respuesta de Shannon , si necesita compartir imágenes, trataría de evitar el correo electrónico. Puede cargar sus imágenes en un servicio en línea y compartir el enlace en su lugar.
Sin embargo, si desea evitar por completo el encogimiento o la representación diferente de las fuentes, le recomiendo que comience a hacer sus diseños directamente en HTML + CSS . Lo que el cliente ve es lo que obtendrá. Mostrar un sitio web real hace que sea mucho más fácil entender la navegabilidad y mejorar la usabilidad. Primero hago algunos wireframes (luego obtengo los comentarios del cliente), luego empiezo a probar cosas en el navegador.
No estoy seguro de lo que quiere decir con que su ancho debe ser de 1980 px, eso suena bastante grande. Tener algo de código en su lugar resolvería esto, la resolución dependerá del usuario, pero debería verse bien en cualquier resolución. Para el diseño receptivo, te recomiendo nuevamente que planifiques y le muestres al cliente algunos wireframes .
El problema que está encontrando, que es común, es que no está presentando el sitio web.
Está presentando imágenes estáticas de cómo se verá el sitio web en un entorno determinado.
Idealmente, simplemente no hagas eso. En su lugar, presenta el sitio web como un sitio web... algo en lo que se puede hacer clic, tocar, cambiar de tamaño, etc. En lugar de mostrar archivos de PhotoShop, está mostrando HTML, CSS y JS.
Por supuesto, eso no siempre es factible según el proceso y los equipos en uso.
Entonces, si tiene que mostrar imágenes estáticas, le recomiendo que nunca las envíe a ciegas por correo electrónico o un enlace. En su lugar, preséntelos 'en persona' incluso si eso significa a través de una llamada de conferencia o una pantalla compartida. De esa manera, puede agregar verbalmente todo el contexto importante que de otro modo faltaría. Esto logra tres cosas importantes:
He tenido el mismo problema y se me ocurrió una solución más elegante basada en el ejemplo de html+css. En lugar de usar la etiqueta html, solo creo un div con la imagen de fondo establecida en la imagen que quiero presentar a mi cliente.
Aquí está el código para esto:
body {
margin:0;
}
#website {
background:url('website-homepage.jpg') top center no-repeat; // change to your jpg
width:100%;
height:1040px; // change to your height
}
Y aún mejor, también he creado una plantilla de página de WordPress que establecerá automáticamente la imagen destacada como fondo de la página y automáticamente tomará la altura de la imagen.
Me he ocupado de esto de diferentes maneras. Si estoy tratando de mostrar "el flujo" del sitio, usaré un programa como Adobe Muse, porque puedo crear una estructura alámbrica rápida en la que el cliente puede hacer clic.
Si estoy tratando de mostrar el "diseño" general del sitio, crearé las páginas en Photoshop y luego crearé un archivo PDF de varias páginas que ordene las páginas, obligando al cliente a desplazarse en el orden en que quiero que aparezcan. páginas en las que se mostrarán. Además, en este escenario, mi tipo es nítido y no se pixela, como se sabe que lo hace un guardado para web jpg.
Si espera que su cliente abra el programa de visualización de imágenes predeterminado, coloque sus capturas de pantalla dentro de una plantilla de navegador.
De esta forma, si miran el diseño al 50 % de su tamaño, reconocen la imagen del navegador que lo envuelve y entienden que están mirando la imagen reducida.
Por supuesto, si estoy presentando capturas de pantalla en persona, usaré capturas de pantalla limpias sin un navegador alrededor y, por supuesto, las abriré en un navegador real para la presentación. La plantilla del navegador puede parecerle descuidada, pero es una prueba bastante ficticia si no está seguro de cómo el cliente abrirá la imagen.
Intente utilizar el servicio (m) maquetter.com . Resuelve los problemas que especificaste. Vea un ejemplo ( mqttr.com/example ).
Este servicio está destinado a la presentación conveniente de diseños a un cliente. Y no se requiere que el cliente tenga ninguna habilidad técnica para revisar el proyecto. Puede cargar fácilmente todos sus diseños para mostrárselos al cliente después. La posibilidad de establecer varios diseños para cada página permite al cliente elegir la opción más adecuada. Todos los diseños están indexados (por ejemplo , http://mqttr.com/example#0103 ), por lo tanto, el cliente siempre puede decirle el número exacto de cualquier diseño determinado o señalar los cambios deseados.
Espero que nuestra respuesta te ayude.
Vicente