30 útiles tutoriales de diseño web receptivo
Así que hemos llegado al final de nuestro "Semana de Diseño Web Responsivo", El post de esta noche será el último de la serie. Haremos todo lo posible para ayudarlo a perfeccionar sus habilidades en la manipulación de esos códigos para que respondan a voluntad cuando se muestren en diferentes dispositivos. Y para ello, estamos presentando. 30 Tutoriales de Diseño Web Responsivo encontrado en linea Esta lista no pretende ser exhaustiva, pero le ayudará a comenzar a comprender los conceptos básicos del diseño de un sitio web adaptable que se adapte a todo tipo de tamaños de pantalla..
Comenzaremos con tutoriales introductorios en 'Rompiendo el hielo', algo así como una clase de RWD: 101 a la que deberías asistir para entender el concepto antes de pasar a los ejercicios 'Comenzar a construir'..
Por último, terminaremos con una sección "Hacer más" en la que presentaremos tutoriales que se reproducen con diseños horizontales, videos elásticos, menús desplegables y navegaciones de acordeón de diapositivas, miniaturas y el problema de las tablas..
Pero primero…
Aquí hay un resumen de los dos tutoriales que fueron presentados a principios de esta semana por nuestros autores:
Navegación del sitio web sensible
Por Thoriq Firdaus - [Ver tutorial]
Aquí hay un tutorial para ayudarlo a hacer su propia navegación web sensible. Uno de los aspectos más importantes de un sitio web es lo fácil que es navegar por diferentes partes del sitio. Descubre cómo optimizar esto con CSS3 con este tutorial..
Curriculum vitae sensible
Por Jake Rocheleau - [Ver tutorial]
Si usted es un profesional de la web y un currículum en línea ya es parte integral de su carrera, entonces debe aprovechar la oportunidad para hacer que ese currículum también sea receptivo. Facilita a empleadores y clientes encontrarte en cualquier dispositivo. Y mientras lo hace, su propio currículum se duplica como una cartera de lo que puede hacer como desarrollador..
Rompiendo el hielo
Ahora, ¿dónde estábamos? Ah, sí, comencemos algo para romper el hielo.!
Guía para principiantes de diseño web responsivo
Por nick petit - [Ver tutorial]
Este tutorial es un excelente punto de partida para los principiantes, ya que describe lo que significa diseño web sensible, cómo salió a la luz, así como explicaciones sobre las redes de fluidos y las consultas de los medios, entre otros. Echa un vistazo a los recursos que figuran en la parte inferior del tutorial también.
Introducción al Diseño Web Responsivo: Video
Por nick petit - [Ver tutorial]
Este es un tutorial que dura cerca de 9 minutos, lo que refleja la superficie de lo que se trata el diseño web sensible, cómo surgió, el impacto que tiene en el diseño de un sitio web y los elementos que intervienen en la producción de un diseño web sensible. . Si desea comprender de qué se trata el diseño web sensible sin dirigirse primero a la codificación, debe comenzar con este video.
Cómo convertir cualquier sitio web en un sitio responsivo
Por Rochester Oliveira - [Ver tutorial]
Este es otro tutorial que comienza a partir de lo básico, pero lo desglosa poco a poco, incluido el sistema operativo y los navegadores para los que hace que su sitio web responda, así como los elementos que se ven afectados cuando se ve desde diferentes dispositivos. El autor también presentó algunos complementos útiles de WordPress y jQuery para facilitar su trabajo..
Diseño responsivo en 3 pasos
Por nick la - [Ver tutorial]
Este tutorial le explicará cómo puede producir un diseño web sensible con etiquetas meta, estructura HTML y las consultas de medios más importantes. Necesitas un poco de conocimiento de CSS para entenderlo ...
Diseñando Para Una Web Responsiva
Por Max Luzuriaga - [Ver tutorial]
Aquí hay un artículo que no es tanto un tutorial como una guía para crear un diseño web sensible. Dicho esto, el autor literalmente le dice qué hacer y qué no hacer con el diseño web sensible. Hay explicaciones sobre por qué ciertas características no son lo suficientemente receptivas, cómo trabajar con proporciones y módulos, y lo mejor de todo es que es relativamente breve y fácil de absorber..
Diseño web responsivo: una guía visual
Por Andrew Gormley - [Ver tutorial]
Si los tutoriales llenos de texto no son opciones viables, intente este video tutorial en su lugar. Todavía es bastante técnico, pero si te hace sentir mejor, no tienes que leer mucho. Tiene una duración de aproximadamente 25 minutos y el creador de video en realidad avanza rápidamente a través de las partes donde codifica, luego vuelve a explicar lo que hacen los códigos..
Empezar a construir
Bien, comencemos a construir algunos diseños sensibles, comenzando con ...
Rejillas fluidas
Por etan marcotte - [Ver tutorial]
Diga cuadrícula y pensaría 'estructuras rígidas', diría fluido y pensaría que podría fluir desde un lado de la pantalla hacia la parte inferior o superior o lateral al aplicar presión al navegador, pero ponga esos dos juntos y Probablemente piense que necesita ver este tutorial para apreciar completamente cómo las cuadrículas fluidas pueden ayudar a que su diseño sea más receptivo..
Imágenes fluidas
Por etan marcotte - [Ver tutorial]
Al final de este artículo, debes saber quién es Ethan Marcotte. Aquí hay una sugerencia: él es el que ideó el concepto y el término para diseños web adaptables. Su nombre aparecerá en todos los otros tutoriales de esta lista, así que, ¿por qué no pedir consejos sobre imágenes fluidas directamente del Maestro??.
Patrones de navegación escalables en diseño web responsivo
Por Michael Mesker - [Ver tutorial]
Este tutorial habla sobre las lecciones que el autor aprendió al trabajar en un proyecto de diseño web sensible a gran escala. Lea su 'tutorial' sobre cómo crear plantillas que sean más fáciles de configurar para obtener resultados fáciles de usar y receptivos. Es un gran aspecto entre bastidores para entender cómo diseñar interfaces de la mejor manera para vistas de escritorio, tableta y dispositivo móvil..
Diseño web responsivo con CSS3 Media Queries
Por nick la - [Ver tutorial]
Y otro excelente tutorial para que aprendas a diseñar una plantilla de sitio web adaptable en varios navegadores con HTML5 y CSS3. Es un enfoque paso a paso y hay demostraciones de un diseño web antes y después de que se implementaron las consultas de medios para apreciar mejor el impacto de las consultas de medios..
Efectos CSS: espacie las imágenes para que coincidan con la altura del texto
Por Zoe Mickley Gillenwater - [Ver tutorial]
Este tutorial hace que aprendas el truco de hacer que las imágenes de ancho fijo cambien su tamaño y espaciado para alinearse con el texto que lo acompaña, sin importar el tamaño de la ventana del navegador.
Diseños adaptativos con consultas de medios
Por Aaron Gustafson - [Ver tutorial]
Aprenda cómo usar diseños adaptables o flexibles con consultas de medios CSS. Simplemente siga el ejercicio para aprender a adaptar su diseño a la vista de doble columna o de una sola columna, así como a preparar el diseño para el iPhone y el iPad..
Imágenes receptivas: experimentando con el tamaño de la imagen consciente del contexto
Por Scott Jehl - [Ver tutorial]
Aquí hay un tutorial que usó el enfoque de construir desde el primer móvil. Esta técnica especifica un tamaño más grande para que las imágenes se utilicen en resoluciones de pantalla más grandes, menos solicitudes de imágenes, así como el rastreo de la AU.
Hacer más
Videos Elásticos
Por nick la - [Ver tutorial]
Este tutorial trata sobre la escala de videos a medida que se cambia el tamaño de la ventana de su navegador. Es esencialmente un truco de CSS y hay una demostración para ver el truco en funcionamiento en el tutorial en sí..
Ocultando y revelando porciones de imágenes
Por Zoe Mickley Gillenwater - [Ver tutorial]
El tutorial en realidad se toma del libro del autor y describe cómo revelar u ocultar partes de las imágenes según las resoluciones de pantalla. Le enseña cómo recortar dinámicamente imágenes cuando cambia el tamaño de la pantalla, mostrando solo una parte de la imagen cuando hay espacio limitado.
Responsive Content Navigator con CSS3
Por Mary Lou - [Ver tutorial]
¿Prefieres una forma más elegante para que los usuarios naveguen a tu lado? Luego, debes leer este tutorial para aprender cómo codificar en algunas transiciones geniales: atenuación, diapositivas, rotaciones y ampliación de escala. Las transiciones son esencialmente capas de contenido que se mostraron u ocultaron con codificación específica.
Crear una plantilla de diseño web sensible
Por harry atkins - [Ver tutorial]
Este es un breve tutorial para producir una respuesta plantilla web que funciona tanto en el escritorio como en el iPhone.
Diseño horizontal sensible
Por Mary Lou - [Ver tutorial]
Este tutorial le enseña cómo crear un diseño horizontal con varios paneles de contenido desplazables. Utilizando El origen de las especies Como texto de muestra, cada capítulo del libro está separado en columnas colocadas una junto a la otra en modo de navegador completo, pero cuando se reduce a un tamaño lo suficientemente pequeño, el diseño cambia a un "libro" de desplazamiento completamente vertical..
Convertir un menú a un menú desplegable para pantallas pequeñas
Por Chris Coyier - [Ver tutorial]
Este tutorial le mostrará cómo convertir un menú en una lista desplegable cuando la ventana del navegador es estrecha o cuando está en un dispositivo móvil. La fila de enlaces en la esquina superior derecha de la página se convierte en un menú desplegable para ahorrar espacio sin sacrificar las opciones de navegación.
Acordeón de deslizamiento flexible
Por Mary Lou - [Ver tutorial]
Aprenda a crear un diseño de acordeón simple y flexible, con transiciones de fundido y anchos ajustables según el tamaño de la pantalla y las resoluciones.
Cómo utilizar las consultas de medios de orientación CSS3
Por Ryan Seddon - [Ver tutorial]
De acuerdo con la regla simple que define los modos vertical (altura mayor que ancho) y horizontal (ancho mayor que altura), puede escribir una consulta de medios para seleccionar estilos específicos según el modo en que lo vea. Este tutorial nos mostrará cómo hacerlo, y se completa con un enlace a un camaleón que cambia de color y utiliza el color para demostrar este cambio a medida que reduce la ventana del navegador..
Tablas de datos sensibles
Por Chris Coyier - [Ver tutorial]
Las tablas son una fuente de dolores de cabeza cuando se trata de tamaños de pantalla pequeños, pero eso no significa que debamos evitar por completo las tablas. Aprenda a usar consultas de medios para hacer que su tabla cambie de formato completamente cuando cambie a tamaños de pantalla móviles. Vea la demostración para tener una idea de la magia que puede hacer en base a este tutorial..
Fluid CSS3 Slideshow con efecto de paralaje
Por el ala del anillo - [Ver tutorial]
Cree una presentación de diapositivas CSS3 donde se utilicen dos imágenes de fondo y cuando se cambien las posiciones de los fondos, se verá un efecto de paralaje. Aparte de eso, la presentación de diapositivas es flexible, se redimensiona a sí misma a medida que la ventana del navegador se acerca..
Cómo construir una galería de miniaturas sensible
Por Joshua Johnson - [Ver tutorial]
Esto es ideal para los sitios web que ofrecen miniaturas en una galería. A medida que se cambia el tamaño de la ventana del navegador, se cambia el diseño para que ocupe entre dos columnas (tamaños de pantalla más pequeños) y cinco columnas (máximo). Para ver presentaciones de diapositivas y controles deslizantes más similares, consulte nuestro artículo de las 10 galerías de imágenes / presentaciones de diapositivas más sensibles.
Optimizando su correo electrónico para dispositivos móviles
Por Ros Hodgekiss - [Ver tutorial]
Incluso los correos electrónicos pueden optimizarse para la visualización en pantalla pequeña, como los sitios web. La mayoría de las veces, el texto en un correo electrónico HTML se redimensiona a un punto que no está hecho para una lectura cómoda; Aprende a manejar esto y más desde este tutorial..
utilizando marcos
Crea un sitio web adaptable para dispositivos móviles con Skeleton
Por Joshua Johnson - [Ver tutorial]
Skeleton es un marco impresionante para crear sitios web sensibles con él. Este tutorial lo lleva en una guía paso a paso sobre cómo utilizar el marco de trabajo de Skeleton para crear diseños con capacidad de respuesta impresionantes. Te sorprenderás al ver lo fácil que es implementar.
Diseño web responsivo con HTML5 y Less Framework 3
Por Louis Simoneau - [Ver tutorial]
Si no se te ha presentado correctamente a Less, primero revisa nuestro propio tutorial de Less CSS para probar Less. En este tutorial, se utilizó el marco Less para permitirle ver claramente los efectos de las consultas de medios.
Conclusión
Y eso concluye nuestra Diseño web adaptable serie. Esperamos que los temas, herramientas y otros recursos presentados en esta serie hayan ayudado a exponer el concepto de diseño web sensible a nuestros lectores. Pero ¿cómo sabríamos si no nos dices??
Háganos saber sus comentarios en la serie y si tiene sugerencias para más ideas que desea ver en hongkiat.com. Envíenos una línea, o un comentario a continuación.
