Web Design sensível (guia rapido)


Os dispositivos e navegadores estão aumentando dia a dia que precisam trabalhar com o seu site. Não é suficiente apenas para ter uma versão móvel e uma versão de navegador e não pode criar cada versão para iPad, iPhone, celulares Android, comprimidos, televisão, netbooks, desktops com telas de alta resolução e baixa. Nosso design do site não deve apenas ser mais flexível, mas mais adaptável aos meios de comunicação.

Os designers devem criar projetos que se ajustam às necessidades de cada browser, independentemente do dispositivo.  Vamos dar uma olhada no elemento principal característica de Web Design sensível.

Layouts flexíveis:
O primeiro passo para o projeto considerado sensível é o layout flexiable. Como as mudanças de largura do navegador, as redes de fluidos irá redimensionar e resposition o conteúdo conforme necessário. Grade Fluidminúsculo é uma grande ferramenta para a criação de redes de inundação e você deve tentar. Esta ferramenta permite que você faça grades até 1200px largura máxima.

Imagens flexíveis:
Ajustar imagens de acordo com as larguras de tela ou dispositivos diferentes é outro aspecto importante de web design ágil e há um par de maneiras que você pode conseguir isso. Completamente redimensionar a imagem sobre a cultura flyDynamically os métodos imageCombine bot para o redimensionamento de imagem em determinado tamanho, a imagem só encolhe e se croped quando se obtem o tamanho abaixo específicado.

Consultas de mídia:
Em CSS2 você foi capaz de aplicar folhas de estilo específica para o tipo de mídia specifc como tela ou impressão. Em CSS3, o W3C tornou mais eficiente, acrescentando consultas da mídia fizeram como parte da especificação CSS3. É a característica mais excisting de web design ágil. Consultas de mídia se comportam semelhante a comentários condicionais. Por exemplo, você tem um estilo para a tela grande ou ecrã e estilo diferente para dispositivos móveis com largura de specifica. Consultas de mídia permitem que os designers para criar vários layouts usando o mesmo conteúdo.

Aqui estão alguns exemplos de consultas de mídia, que servem uma folha de estilo, dependendo da largura da janela de exibição:

Largura máxima:
O código a seguir será aplicável se o max-dispositivo largura é 320px.

 rel="stylesheet" media="(max-device-width: 320px)" href="mobile.css" />

Largura min:
O estilo seguinte será aplicável se a área de visualização é maior do que 1200px.

  rel="stylesheet" media="(min-width: 1200px)" href="largescreen.css" />

Várias consultas de mídia:
Você pode usar várias consultas de mídia. A folha de estilo a seguir com aplica se a área de visualização é700px e 1000px entre

 rel="stylesheet" media="(min-width: 700px) and (max-width: 1000px)" href="normalscreen.css" />

2 comentários (+add yours?)

  1. Roger Costa
    Mar 07, 2012 @ 09:55:28

    A intenção do post foi muito bacana, mas sinceramente, a tradução deixou muito a desejar! Ficou muito confuso…

    Responder

    • designsal
      Mar 07, 2012 @ 11:17:38

      Seja bem vindo Roger Costa obrigado pelo comentário identificamos sua observação e aproveitamos sua opinião para melhoramentos nas traduções obrigado por participar

      Responder

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s

Termos de uso

Queremos que todos usem livremente o conteúdo do Designsal. Por isso, todo o conteúdo aqui divulgado pode ser copiado, desde que: A autoria seja creditada como “Designsal” Haja um link clicável apontando para o original Não seja feito “hotlink” (linkar diretamente a imagem de nosso servidor) O material seja disponibilizado gratuitamente, sem fins comerciais ou sem obtenção de nenhum lucro. (Por falar nisso, me inspirei no Design Blog para escrever estes termos.) Obrigado! ...
PageRank
%d bloggers like this: