30 tutoriais úteis de Web design responsivo
Então chegamos ao final do nosso "Semana Responsive Web Design", O post desta noite será o último da série. Estamos indo tudo para ajudá-lo a aprimorar suas habilidades na manipulação desses códigos para responder à vontade quando exibidos em diferentes dispositivos. E para fazer isso, estamos apresentando 30 tutoriais responsivos para web design encontrado online. Esta lista não pretende ser exaustiva, mas você começará a entender os conceitos básicos de criação de um site adaptável que atenda a todos os tipos de tamanhos de tela..
Vamos começar com tutoriais introdutórios em 'Breaking the Ice', algo como uma aula de RWD: 101 que você deve participar para pegar o jeito do conceito antes de passarmos para os exercícios de 'Start Building'.
Por fim, terminaremos com uma seção "Fazer mais", na qual apresentaremos tutoriais que reproduzem layouts horizontais, vídeos "elásticos", menus suspensos e navegações slide-to-top de acordeão, miniaturas e o problema difícil com tabelas.
Mas primeiro…
Aqui está uma recapitulação dos dois tutoriais que foram apresentados no início desta semana pelos nossos autores:
Web site responsivo Navegação
De Thoriq Firdaus - [Ver tutorial]
Aqui está um tutorial para ajudá-lo a fazer sua própria navegação de site responsivo. Um dos aspectos mais importantes de um site é como é fácil navegar por diferentes partes do site. Descubra como otimizar isso com CSS3 com este tutorial.
Resumo responsivo
De Jake Rocheleau - [Ver tutorial]
Se você é um profissional da Web e um currículo on-line já faz parte de sua carreira, aproveite a oportunidade para tornar esse currículo responsivo também. Tornar mais fácil para os empregadores e clientes encontrá-lo em qualquer dispositivo. E enquanto você está nisso, seu próprio currículo funciona como um portfólio do que você pode fazer como desenvolvedor.
Quebrando o gelo
Agora, onde nós estávamos? Ah sim, vamos começar uma ação de quebra de gelo!
Guia do iniciante ao Web design responsivo
Por Nick Petit - [Ver tutorial]
Este tutorial é um excelente ponto de partida para iniciantes, uma vez que descreve o que significa design responsivo da web, como veio à tona, além de explicações sobre grades de fluidos e consultas de mídia, entre outras. Confira os recursos listados na parte inferior do tutorial também.
Introdução ao Design Web Responsivo: Vídeo
Por Nick Petit - [Ver tutorial]
Este é um tutorial que tem cerca de 9 minutos de duração, que reflete sobre o que é o web design responsivo, como ele surgiu, o impacto que ele tem no design de um website e quais elementos estão envolvidos na produção de um web design responsivo. . Se você está procurando entender o que é web design responsivo sem entrar na codificação primeiro, você deve começar com este vídeo.
Como transformar qualquer site em um site responsivo
De Rochester Oliveira - [Ver tutorial]
Este é outro tutorial que começa do básico, mas quebra tudo pouco a pouco, incluindo o sistema operacional e os navegadores pelos quais você está transformando seu site, assim como os elementos afetados quando o site é visualizado a partir de dispositivos diferentes. O autor também apresentou alguns plugins WordPress e jQuery úteis para ajudar a tornar o seu trabalho muito mais fácil.
Design Responsivo em 3 Passos
De Nick La - [Ver tutorial]
Este tutorial explicará como você pode produzir um design da Web responsivo com meta tags, estrutura HTML e todas as importantes consultas de mídia. Você precisa de algum conhecimento de CSS para entender…
Projetando para uma Web responsiva
De Max Luzuriaga - [Ver tutorial]
Aqui está um artigo que não é tanto um tutorial, pois é um guia para a criação de web design responsivo. Dito isto, o autor literalmente diz-lhe o que fazer e o que não fazer no web design responsivo. Há explicações sobre por que certos recursos não são responsivos o suficiente, como trabalhar com proporções e módulos e, o melhor de tudo, é relativamente curto e fácil de absorver..
Web Design Responsivo: Um Guia Visual
Andrew Gormley - [Ver tutorial]
Se os tutoriais com texto não forem viáveis, experimente este tutorial em vídeo. Ainda é bastante técnico, mas se faz você se sentir melhor, você não precisa fazer muita leitura. Tem cerca de 25 minutos de duração e o videomaker passa rapidamente pelas partes onde ele codifica, depois volta para explicar o que os códigos fazem..
Comece a construir
Tudo bem, vamos começar a criar alguns designs responsivos, começando com…
Grades Fluidas
De Ethan Marcotte - [Ver tutorial]
Diga grade, e você pensaria em "estruturas rígidas", digamos fluido, e você pensaria que poderia fluir de um lado da tela para a parte inferior ou superior ou lateral quando você aplica pressão ao navegador, mas junte os dois e provavelmente você acha que precisa examinar este tutorial para apreciar como as grades de fluidos podem ajudar a tornar seu design mais responsivo.
Imagens fluidas
De Ethan Marcotte - [Ver tutorial]
No final deste artigo, você deve saber quem é Ethan Marcotte. Aqui está uma dica: ele é o único que surgiu com o conceito e termo para projetos responsivos da web. O nome dele aparecerá em todos os outros tutoriais dessa lista, então por que não dar conselhos sobre imagens fluidas diretamente do próprio Mestre??.
Padrões de Navegação Escalonáveis no Web Design Responsivo
Por Michael Mesker - [Ver tutorial]
Este tutorial fala sobre as lições que o autor aprendeu trabalhando em um projeto de web design responsivo em larga escala. Leia o seu 'passo a passo' sobre como criar modelos que são mais fáceis de configurar para resultados amigáveis e responsivos. É um ótimo visual nos bastidores para entender como projetar interfaces da melhor maneira para as visualizações de desktop, tablet e celular.
Web design responsivo com consultas de mídia CSS3
De Nick La - [Ver tutorial]
E outro excelente tutorial para fazer você aprender como criar um modelo de website responsivo com vários navegadores com HTML5 e CSS3. É uma abordagem passo a passo e há demonstrações de um design da Web antes e depois das consultas de mídia serem implementadas para melhor avaliar o impacto das consultas de mídia.
Efeitos CSS: Imagens do espaço para fora para coincidir com a altura do texto
De Zoe Mickley Gillenwater - [Ver tutorial]
Este tutorial faz com que você aprenda o truque de fazer com que as imagens de largura fixa alterem seu tamanho e espaçamento para se alinhar ao texto anexo, independentemente de como a janela do navegador é redimensionada.
Layouts adaptativos com consultas de mídia
De Aaron Gustafson - [Ver tutorial]
Aprenda a usar layouts adaptáveis ou flexíveis com consultas de mídia CSS. Basta seguir o exercício para aprender a adaptar o seu design à visualização de coluna dupla ou vista de coluna única, bem como preparar o design para o iPhone e o iPad.
Imagens responsivas: Experimentando com dimensionamento de imagens com reconhecimento de contexto
De Scott Jehl - [Ver tutorial]
Aqui está um tutorial que usou a abordagem build-from-mobile-first. Essa técnica especifica um tamanho maior para as imagens usarem em resoluções de tela maiores, menos solicitações de imagem, bem como sniffing de UA.
Faça mais
Vídeos elásticos
De Nick La - [Ver tutorial]
Este tutorial lida com o dimensionamento de vídeos à medida que a janela do seu navegador é redimensionada. É essencialmente um truque CSS e há uma demonstração para ver o truque em ação no próprio tutorial.
Escondendo e revelando porções de imagens
De Zoe Mickley Gillenwater - [Ver tutorial]
O tutorial é tirado do livro do autor, descrevendo como revelar ou ocultar partes das imagens dependendo das resoluções da tela. Ele ensina como cortar imagens dinamicamente quando o tamanho da tela muda, mostrando apenas parte da imagem completa quando há espaço limitado.
Navegador de conteúdo responsivo com CSS3
Por Mary Lou - [Ver tutorial]
Prefiro uma maneira mais extravagante para os usuários navegarem ao seu lado? Então, você deve ler este tutorial para aprender como codificar em algumas transições legais: fade in, slides, rotações e aumento de escala. As transições são essencialmente camadas de conteúdo que foram mostradas ou ocultadas com codificação específica.
Crie um modelo de design da Web responsivo
De Harry Atkins - [Ver tutorial]
Este é um breve tutorial para produzir uma resposta modelo da web que funciona tanto na área de trabalho quanto no iPhone.
Layout horizontal responsivo
Por Mary Lou - [Ver tutorial]
Este tutorial ensina como criar um layout horizontal com vários painéis de conteúdo com rolagem. Usando A origem das espécies como o texto de exemplo, cada capítulo do livro é separado em colunas colocadas lado a lado no modo de navegador completo, mas quando reduzido a pequeno o suficiente, o layout muda para um 'livro' de rolagem totalmente vertical.
Converter um menu para um menu suspenso para telas pequenas
De Chris Coyier - [Ver tutorial]
Este tutorial mostra como converter um menu em uma lista suspensa quando a janela do navegador é estreita ou quando você está em um dispositivo móvel. A linha de links no canto superior direito da página é convertida em um menu suspenso para economizar espaço sem sacrificar as opções de navegação.
Acordeão Slide-to-Top Flexível
Por Mary Lou - [Ver tutorial]
Aprenda como criar um layout de acordeão simples e flexível, com transições de fade in e larguras ajustáveis com base no tamanho da tela e nas resoluções.
Como usar consultas de mídia de orientação CSS3
Por Ryan Seddon - [Ver tutorial]
Com base na regra simples que define modos de retrato (altura maior que largura) e paisagem (largura maior que altura), você pode escrever uma consulta de mídia para segmentar estilos específicos com base no modo em que você o visualiza. Este tutorial nos mostrará como fazer exatamente isso e vem completo com um link para um camaleão de mudança de cor que usa cor para demonstrar essa mudança quando você reduz a janela do navegador.
Tabelas de Dados Responsivos
De Chris Coyier - [Ver tutorial]
Tabelas são uma fonte de dores de cabeça quando se trata de tamanhos de tela pequena, mas isso não significa que precisamos evitar completamente as tabelas. Aprenda a usar as consultas de mídia para transformar seus formatos de mudança de tabela completamente quando você alternar para os tamanhos de tela do celular. Veja a demonstração para ter uma ideia da mágica que você pode fazer com base neste tutorial.
Slideshow fluida CSS3 com efeito de paralaxe
Pela asa do anel - [Ver tutorial]
Crie uma apresentação de slides CSS3 onde duas imagens de fundo são usadas e quando as posições dos planos de fundo são alteradas, um efeito de paralaxe é visto. Além disso, o slideshow é flexível, redimensionando-se à medida que a janela do navegador se fecha..
Como criar uma galeria de miniaturas responsivas
Por Joshua Johnson - [Ver tutorial]
Isso é ótimo para sites que apresentam miniaturas em uma galeria. À medida que a janela do navegador é redimensionada, o layout é alterado para ocupar entre duas colunas (tamanhos de tela menores) e cinco (máximo) colunas. Para slideshows e controles deslizantes mais semelhantes, confira nosso artigo Top 10 de galerias de imagens responsivas / slideshows gratuitos.
Otimizando seu email para dispositivos móveis
De Ros Hodgekiss - [Ver tutorial]
Mesmo os e-mails podem ser otimizados para visualização de tela pequena, como os websites. Na maioria das vezes, o texto em um email em HTML é redimensionado para um ponto que não é feito para uma leitura confortável; aprenda como gerenciar isso e muito mais neste tutorial.
usando frameworks
Crie um site responsivo para dispositivos móveis com esqueleto
Por Joshua Johnson - [Ver tutorial]
O Skeleton é uma estrutura incrível para criar sites responsivos com ele. Este tutorial leva você a um guia passo-a-passo sobre como usar o framework Skeleton para criar projetos responsivos impressionantes. Você ficará surpreso ao ver como é fácil implementar.
Web Design Responsivo com HTML5 e Menos Framework 3
De Louis Simoneau - [Ver tutorial]
Se você não foi apresentado corretamente a Menos, verifique primeiro nosso próprio tutorial Menos CSS para obter uma amostra de Menos. Neste tutorial, a estrutura Less foi usada para permitir que você visse claramente os efeitos das consultas de mídia.
Conclusão
E isso conclui nossa Web design responsivo Series. Esperamos que os temas, ferramentas e outros recursos apresentados nesta série tenham ajudado a expor o conceito de web design responsivo aos nossos leitores. Mas como saberíamos se você não nos dissesse?
Deixe-nos saber o seu feedback na série e se você tiver sugestões para mais ideias que você quer ver em hongkiat.com. Deixe-nos cair uma linha, ou um comentário abaixo.
