Share
Recientemente tuve el placer de pasar dos semanas en Malasia en el Envato Meetup de 2012. ¡Qué lugar! Durante nuestra estancia allí, aproveché la oportunidad para echar un vistazo por encima de los hombros de mis colegas, recogiendo consejos y trucos mientras trabajaban. Aquí hay cinco brillantes consejos de diseño web del equipo de Envato que creo que te encantarán ...
Stu es un gran defensor del uso de los Preprocesadores CSS, específicamente Sass con Compass. Durante la conferencia de Envato, nos explicó cómo los usaba al crear los temas del mercado, demostrando a la perfección cuán eficiente puede ser Sass cuando trabaja en grandes proyectos de múltiples sitios..
Nuestros mercados son todas variantes del mismo tema:
Un enfoque estándar de CSS le permitiría (por ejemplo) crear hojas de estilo base para mantener la mayor parte del estilo estructural, con hojas de estilo adicionales para modificar los colores y los gráficos de cada sitio. En el mejor de los casos, mantendrías varias copias de archivos CSS muy similares (si no idénticos).
No es así con Sass. Al escribir un conjunto único de hojas de estilo SCSS (parciales) básicas, más un archivo de variables Sass para cada variante de sitio, la estructura de su proyecto se vería más como esto:
Los parciales son fragmentos de reglas de estilo que pueden incluirse en su archivo principal, y también pueden reutilizarse en otros archivos. Al preceder el nombre del archivo con una "_", los archivos SCSS parciales no se compilarán en el CSS desplegable, solo contribuirán a los archivos de la aplicación que elija compilar.
Por ejemplo, puede tener un archivo Sass que dicta todos los estilos de formulario dentro de su proyecto. Usted nombra el archivo "_forms.scss" y lo lleva a su archivo de aplicación sin el guión bajo o la extensión del archivo:
@importar "formas";
No se generará "_forms.css", pero las reglas dentro de "_forms.scss" contribuirán al archivo en el que lo guardó..
Sus archivos de variables establecerán todos los aspectos del tema que pueden alterarse, como los colores de los enlaces, los logotipos, etc. Pueden verse así, por ejemplo:
/ * variables de bosque temático * / $ link_color: # FFE59E;
Este valor se puede usar en el archivo Sass de la aplicación principal o en cualquier artículo parcial que se importe:
a color: $ link_color;
Para generar un tema completamente nuevo, todo lo que tiene que hacer es alterar las variables en un archivo (o arrastrar en un _variables.scss diferente). Para alterar una característica en todos los temas, solo necesita mantener uno expediente; el parcial donde se produce ese estilo particular.
Hemos introducido Sass y Compass en Webdesigntuts + antes de ahora, así que échale un vistazo si aún no has dado el salto..
Cameron lo ha hecho su cruzada personal para hacer. todo Lo hacemos responsivo. Ya dejó su marca de RWD en los nuevos sitios de Rockable Press y Creattica, y pronto estará trabajando su magia en Tuts + ...
Aquí hay un gran consejo para ayudarlo a visualizar sus diseños web, en múltiples resoluciones, en segundos.
Vaya al sitio de Benjamin Keen, donde tiene un excelente JavaScript "Testletive Test Test Bookmarklet". Modifique los tamaños de las vistas que le gustaría probar, luego genere el bookmarklet.
Todo lo que necesita hacer ahora es arrastrar el enlace provisto en sus marcadores. Cuando esté viendo un sitio en el navegador, presione el bookmarklet y el diseño aparecerá en todas las diferentes resoluciones.!
¡Pero espera! ¡Hay más! Cameron ha dado un paso más y ha asignado una tecla de acceso rápido a este bookmarklet; todo lo que ahora tiene que hacer es escribir la frase apropiada (por ejemplo, "rwd") en la barra de URL y el bookmarklet entra en vigor. Perfecto si (como yo) prefiere no tener una barra de herramientas de marcadores voluminosos en pantalla en todo momento.
Cameron estaba usando Firefox, que le permite asignar teclas de acceso directo a marcadores con su práctica característica de palabras clave inteligentes. Normalmente trabajo en Chrome, que lamentablemente no tiene esta característica. Sin embargo, hay una forma de evitar esto, porque es posible asignar teclas de acceso rápido para activar los motores de búsqueda. Ahora agreguemos nuestro bookmarklet a Chrome de esta manera:
Primero, haga clic derecho en la barra de URL y vaya a "Editar motores de búsqueda ..."
Luego se le dará la opción de agregar un motor de búsqueda o consulta. Esto actuará como su tecla de acceso rápido, así que asígnele un nombre (como le plazca), asigne una frase (como "rwd" de Cameron), luego pegue el marcador de JavaScript en la entrada final.
Nota: Tu bookmarklet tendrá que estar codificado en URL, así que asegúrate de que se vea así:
Accentsconagua
javascript: document.write ('% 3C! DOCTYPE% 20html% 3E% 3Chtml% 3E% 3Chead% 3E% 3Cmeta% 20charset =% 22utf-8% 22% 3E… no esta:
javascript: document.write ('... Erik Meyer tiene una herramienta útil para codificar URL si lo necesita.
¡Eso es todo! Visite la página en la que está trabajando, escriba la palabra clave en la barra de url y ¡bang! Prueba RWD instantánea!
Pinterest no es lo suficientemente macho para ti? Delicioso también ... (espera, ¿la gente sigue usando el delicioso?) ¿Necesitas una forma de marcar el contenido real, hacer una copia de seguridad en tu Dropbox e inspirarte visualmente con lo que otros están marcando? Rodney cree que no hay nada mejor que Gimme Bar:
La interfaz modular será una vista familiar para aquellos de ustedes que fijan y marcan con otros servicios. Sigue, favorito, copia de seguridad, luego comparte a través de todos los canales sociales que has conectado ...
Echa un vistazo a qué más se pone Rodney en Twitter y Dribbble.!
Aquí está la cosa; cuando le pedí a Jacob que me diera una sugerencia rápida, me sugirió una extensión de ipsum de lorem, que te ayudará a insertar texto de relleno en tus diseños.
Pero Jacob, sin saberlo, me enseñó una lección invaluable y alternativa durante la conferencia Envato: "No confíes tu iPad a Jess Hooper". Jess trabaja en la oficina de Melbourne y es miembro del equipo de revisión. Se ofreció a cuidar mi iPad cuando dejó el grupo y regresó al hotel una noche..
Al día siguiente, mientras luchaba por abrirme paso a través de la jungla de Malasia, esto llegó a través del móvil de alguien:
Un Tumblog dedicado a mi iPad y sus travesuras ese fatídico día..
Bromas aparte, Jacob es un diseñador muy talentoso. Habrá visto su trabajo en sitios como el sitio million.envato.com y los 1.000 temas de WordPress, junto con muchos de los paquetes de Marketplace y Rockable. El consejo para quitar de esto es:
Construye un Tumblog siempre que tengas la oportunidad.
Es sencillo, es rápido, es divertido y puedes practicar tus habilidades de tematización. Jess, te recuperaré.
Mira a Jeff trabajar y, aunque no te esté enseñando, aprenderás de él. Lo que aprendí de él esta vez podría no parecer el ahorro de tiempo más grande del mundo, pero aquí está:
No tiene que cerrar las etiquetas de los elementos de la lista, ¡deje que el navegador lo haga por usted! *
* De ninguna manera obligatoria ...
Esto parece un poco antinatural, un poco como omitir las comillas de sus atributos html:
Pero relájate, está bien. La próxima vez que te encuentres produciendo artículos de la lista, intenta hacerlos así:
Muchos aspectos del marcado HTML que hemos sido entrenados para considerar como obligatorios son, de hecho, completamente opcionales. Tendemos a pensar que esto no es válido debido a la forma en que la validación de XHTML usó para vencernos. Si prefieres irte etiquetas, si te ahorra tiempo, deshazte de ellas. Los navegadores todavía sabrán exactamente lo que quieres decir.
Lo mismo ocurre con , y
Bueno, espero que hayas encontrado útiles estos consejos aleatorios en algún aspecto (sé que lo hice) ...
