it-swarm-pt.com

Um site para várias resoluções de cliente

Continuo pensando que, embora seja difícil criar um site único para várias resoluções de cliente ou tamanhos de tela, é muito mais sustentável do que criar um site separado para cada dispositivo ou resolução.

Quais aplicativos de design ou edição de site, se houver, posso usar para ajudar na criação de CSS específico ou até na marcação para segmentar dispositivos de um determinado tamanho?

6
Bernhard Hofmann

O Dreamweaver CS5 oferece suporte para consultas de mídia HTML 5, permitindo o uso de CSS e visualização específicos por resolução de tela. Esse é o único que vem à mente, mas nunca gostei do Dreamweaver e não o recomendaria.

2
fluxd

Um único site para vários clientes é certamente mais sustentável.

A primeira coisa a fazer é ter vários arquivos CSS que o navegador selecionará de acordo com o atributo media :

<link rel="stylesheet" type="text/css" media="screen" href="default.css">
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">

Você pode adaptar o layout dos elementos, seu tamanho e até ocultar alguns deles para dispositivos menores.

Se partes grandes do seu layout precisarem ser removidas em dispositivos pequenos, é melhor removê-las no servidor para poupar alguma largura de banda.

A resolução da tela e o tamanho da janela podem ser determinados no cliente em Javascript (este é o teste mais confiável, screen.width/screen.height e document.body.clientWidth/document.body.clientHeight), enquanto estiver no servidor, você deve confiar principalmente no HTTP_USER_AGENT header (teste aqui junto com outros cabeçalhos).

Outra técnica importante é abandonar o uso de tabelas HTML para o layout da página em favor de blocos flutuantes , que se adaptam melhor a diferentes resoluções de tela ou redimensionamento de janelas.

Cuide também do tamanho real da tela, pois os pequenos dispositivos tendem a ter uma resolução muito maior (DPI, pontos por polegada) que pode tornar as coisas ilegíveis.

Ambas as técnicas precisam ser combinadas (lado do cliente e servidor) para obter os melhores resultados. O exemplo Responsive Web Design é impressionante, mas você realmente precisa dominar as técnicas para conseguir isso, e ainda existem limitações.

Eu acho que essa pergunta, mesmo que seja perguntada por causa de novos dispositivos móveis conectados, deve ser considerada para o computador, pois o usuário pode redimensionar a janela do navegador.

5
Mart

Esta é uma apresentação imperdível, que cobre um déficit na maneira como muitos usam consultas de mídia: Repensando a Web para dispositivos móveis .

Em poucas palavras, os telefones celulares que não suportam consultas de mídia (e existem muitos) podem acabar com um estilo destinado a navegadores de desktop. A abordagem recomendada aqui, e em uso por mim mesmo, começa com estilos base para todos e depois adiciona progressivamente estilos para navegadores que suportam consultas de mídia.

Veja minha resposta a uma pergunta relacionada no Stack Overflow .

3
David Oliver

Somente o CSS não funcionará para isso, porque você pode ter um layout muito diferente para a interface do usuário móvel e para PC/Mac. Apenas uma pequena idéia reside no layout do lado do servidor. Por exemplo, você precisa renderizar parte da página (grade de dados, barra lateral, barra de navegação etc.). Por exemplo, você usa o ASP.NET como um processador do lado do servidor. Em seguida, no layout da página, você escreve:

Para barra de navegação:

<acme:NavBar runat="server">
  <MenuItem Name="<%$Loc: News%>" />
  <MenuItem Name="<%$Loc: Products%>">
    <MenuItem Name="<%$Loc: Project1%>" />
    <MenuItem Name="<%$Loc: Project2%>" />
  </MenuItem>
  <MenuItem Name="<%$Loc: Support%>" />
  <MenuItem Name="<%$Loc: Contacts%>" />
</acme:NavBar>

Para datagrid:

<acme:Grid ID="grid1" runat="server">
...
</acme:Grid>

Em seguida, em codebehind:

grid1.DataSource = dao.GetProducts(filter);
grid1.DataBind();

e assim por diante.

Então você deve escrever diferentes renderizadores para diferentes resoluções (móvel/etc ...). * Para uma resolução grande, você renderiza cabeçalhos, buscadores, filtros, classificadores, conteúdo rolável, plug-ins JQuery, etc. * Para uma resolução pequena, você processa apenas um html simples.

Espero que a idéia principal seja clara.

0
Genius

Você não precisa de vários "sites" para clientes diferentes (acho que ninguém faz isso), mas deve ter vários portais para diferentes segmentos de visitantes, por exemplo: desktop/laptop, netbook/ipad/smartphones e outros Móvel.

Embora o CSS permita especificar diferentes folhas de estilo para diferentes tipos de dispositivos, isso é problemático na prática. Muitos telefones inteligentes não pegam a folha de estilo móvel ou usam a folha de estilo móvel E a folha de estilo da tela.

Em segundo lugar, seus diferentes segmentos de público-alvo procurarão informações diferentes. Por exemplo, um usuário móvel provavelmente não estará interessado em ler artigos longos ou visualizar imagens ou vídeos de alta resolução. Portanto, um portal separado com uma experiência de usuário direcionada seria o ideal, e é por isso que os serviços mais populares oferecem portais separados para usuários móveis.

Em terceiro lugar, a manutenção é mais organização e simplicidade do que quantidade. Claro, você pode ter uma única grande folha de estilo usando muitos hacks em cascata e de navegador para colocar seu site principal em todos os clientes. Mas é provável que seja mais difícil manter isso do que manter 2-3 folhas de estilo mais simples, cada uma adaptada a uma classe específica de clientes.

Por fim, se o seu aplicativo for modularizado adequadamente usando isolamento de domínio e projetado com uma separação de preocupações, será fácil configurar novos portais personalizados para diferentes classes de dispositivos. Se você estiver usando um padrão MVC, tudo que você precisa fazer é adicionar novas visualizações e continuar usando os mesmos modelos e controladores. Se você estiver criando um aplicativo AJAX, então poderá reutilizar a maioria das visualizações criando serviços da web.

0
Lèse majesté

Isso dependeria do seu conteúdo, mas você poderia modular seu conteúdo.

Cada elemento de conteúdo pode ser exibido em um módulo estreito que pode ser exibido em três colunas em uma tela ampla. Para resoluções mais baixas, você pode usar menos colunas.

Um bom exemplo disso é: http://colly.com/ Existem três ajustes de layout à medida que você diminui a largura da página. Usando isso como uma diretriz para o seu próprio site, você pode criar um layout de cada módulo e página com 3 variações para atender a cada uma dessas larguras.

Para implementar isso, você pode ter módulos de tamanho fixo (talvez como li) dentro de um contêiner que ajusta o tamanho. Você pode ajustar o tamanho dos contêineres usando o jquery para detectar a largura da tela (e a alteração da largura) e adicionar/remover classe. Você pode criar variações nos elementos do contêiner, por exemplo: ul.product_list li e ul.product_list_wide li

0
Leah

Como outros já disseram, eu usaria consultas de mídia CSS3 para direcionar várias resoluções. Dependendo do seu site/aplicativo, isso pode não ser possível. Isso pressupõe que você usará o mesmo conteúdo para todas as experiências, apenas exibindo-o de forma diferente com base no tamanho da tela (isso nem sempre é ideal para uma experiência móvel).

Alguns recursos para usar esta técnica seriam:

Um artigo da List Apart sobre Responsive Web Design: http://www.alistapart.com/articles/responsive-web-design/

Repensando o compartilhamento de slides da Web para celular: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiib

JavaScript para ativar consultas de mídia CSS3 para navegadores que não o suportam nativamente: http://code.google.com/p/css3-mediaqueries-js/

Uma seleção de consultas de mídia para diferentes dispositivos e tamanhos: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

Alguns outros exemplos: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your- site /

Infelizmente, não há um WYSIWYG para fazer esse tipo de coisa - você precisa de conhecimento e habilidade para poder implementá-lo manualmente.

Embora eu sugira contra eles, serviços como o Mobify existem se você estiver preocupado apenas com as visualizações de computadores/dispositivos móveis. http://mobify.me/

0
RussellUresti