Fórum OpenCart Brasil

boa noite galera, estou soltando a loja que estou concluindo a configuração, para visitação dos amigos aqui do fórum. Gostaria muito que vocês, visitassem e avaliassem. Estou aberto à críticas e sugestões. Abraço a todos.

Loja:http://www.capitalflores.com.br/loja/in ... ommon/home

Olá Rogério, parabéns pela loja, gostei muito do layout responsive!

Começando de cima pra baixo:

TOPO:
- A publicidade da "Fordev" ficaria melhor no footer ou um pouco acima do footer, header serve para destacar e fixar a marca do site em questão.
- No campo de busca, seria bacana emendar o botão da lupa com o campo de busca, ficaria legal colocar um fundo verde no tom usado na borda e com uma lupa branca um pouco maior.
- Aumente um pouco as letras dos links para preencher mais os espaços em branco (mas sem exagero)
- Tire a bandeira brasileira e se não for fazer uma versão completa traduzida do site todo, remova a língua inglesa, pois se algum gringo aqui no Brasil entrar, com certeza ele saberá se virar com o menu em português.

CONTEUDO PÁGINA PRINCIPAL:
- Não me agrada muito a loja pegando a tela toda, acho mais bonito ela centralizada com o topo, pois no meu monitor de 18 polegadas widescreen já ficou estranho, imagina em um monitor de 20, 22, 24 polegadas, nem deve parecer com uma page neles, defina o tamanho do content que fica legal.
- Títulos 'Destaques' e 'Novidades': não acho muito adequado esses títulos para nenhum site, pois são muito limítrofes - Ex: só aqueles produtos são destaques, e o resto é dispensável?.. só aqueles produtos são novidades e o resto é velharia? - Trocaria para títulos com mais credibilidade e com mais chances de serem convertidos em compra, tipo "Mais Vendidos", "Promoção da Semana" ou então por categorias mesmo "Arranjos", "Bouquets", etc.
- Quando clico no botão "Comprar" vai para a página do produto, então é melhor trocar o titulo para "Veja Mais", "+ Detalhes".

PÁGINA DO PRODUTO:
- Aumente o tamanho do preço do produto.
- Porque o "texto longo" é importante? Deixe claro para o comprador, se é para ele fazer uma observação ou será o texto que vai no cartão mandado junto ao produto.
- Deixe os produtos relacionados à vista no modulo abaixo da descrição, pois se não for aquilo que a pessoa quer, você dará um opção parecida da que ela buscou.

Me empolguei um pouco, pois gosto muito de layouts responsivos e é uma área que me dedico bastante.

Espero ter colaborado com alguma coisa.

Abraço.

thyagosouza escreveu:Olá Rogério, parabéns pela loja, gostei muito do layout responsive!

Começando de cima pra baixo:

TOPO:
- A publicidade da "Fordev" ficaria melhor no footer ou um pouco acima do footer, header serve para destacar e fixar a marca do site em questão.
- No campo de busca, seria bacana emendar o botão da lupa com o campo de busca, ficaria legal colocar um fundo verde no tom usado na borda e com uma lupa branca um pouco maior.
- Aumente um pouco as letras dos links para preencher mais os espaços em branco (mas sem exagero)
- Tire a bandeira brasileira e se não for fazer uma versão completa traduzida do site todo, remova a língua inglesa, pois se algum gringo aqui no Brasil entrar, com certeza ele saberá se virar com o menu em português.

CONTEUDO PÁGINA PRINCIPAL:
- Não me agrada muito a loja pegando a tela toda, acho mais bonito ela centralizada com o topo, pois no meu monitor de 18 polegadas widescreen já ficou estranho, imagina em um monitor de 20, 22, 24 polegadas, nem deve parecer com uma page neles, defina o tamanho do content que fica legal.
- Títulos 'Destaques' e 'Novidades': não acho muito adequado esses títulos para nenhum site, pois são muito limítrofes - Ex: só aqueles produtos são destaques, e o resto é dispensável?.. só aqueles produtos são novidades e o resto é velharia? - Trocaria para títulos com mais credibilidade e com mais chances de serem convertidos em compra, tipo "Mais Vendidos", "Promoção da Semana" ou então por categorias mesmo "Arranjos", "Bouquets", etc.
- Quando clico no botão "Comprar" vai para a página do produto, então é melhor trocar o titulo para "Veja Mais", "+ Detalhes".

PÁGINA DO PRODUTO:
- Aumente o tamanho do preço do produto.
- Porque o "texto longo" é importante? Deixe claro para o comprador, se é para ele fazer uma observação ou será o texto que vai no cartão mandado junto ao produto.
- Deixe os produtos relacionados à vista no modulo abaixo da descrição, pois se não for aquilo que a pessoa quer, você dará um opção parecida da que ela buscou.

Me empolguei um pouco, pois gosto muito de layouts responsivos e é uma área que me dedico bastante.

Espero ter colaborado com alguma coisa.

Abraço.

Bom dia Thyago, cara, muito obrigado pelos feeds ai, vou ta vendo isso hoje sem falta. Obrigado ai por sua opinião. Grande abraço.

Complementando o thyagosouza, no meu monitor full HD é quase impossível destinguir um layou na página. Qd trabalhamos com layouts responsíveis temos que ter muito cuidado com as telas maiores. Existem tamanhos padrões que são controlados via media query no CSS. De preferência é melhor trabalhar com as larguras de telas em mente, as mais comuns são: 1.440px (monitores com resolução 1600x900 até 1920x1080 fullHD), 1.000px - 980px (resolução entre 1280x720 até 1360x768), 920px (resoluções em cerca de 1024x768) e qualquer coisa abaixo disto é mobile (tablets e smartphones).
Visualizando esta lista de resoluções dá para perceber que é sempre deixada uma boa margem na largura, pois é mais cômodo a leitura na vertical ao invés da horizontal. Outra coisa importante é, se você não tem conteúdo suficiente, não adianta ter a página com a largura completa, pois a diagramação perde todo o sentido. No seu caso acredito que a largura máxima de 980px é mais do que o suficiente para o conteúdo. Basta colocar no seu container o código "max-width: 980px;". Como já dito pelo Thyago, também centralize o conteúdo da página, pois é um pouco incomodo os elementos alinhados nos extremos da página.

Layouts responsívos são maravilhosos, e honestamente não consigo fazer mais nenhum site que não seja . Mas apesar disto, é sempre mais delicado e precisa de muita atenção ao criar um layout assim. Mas depois de se acostumar, é só alegria ;D

Obrigado meus amigos, já implementei as dicas que vocês deram, agora a loja ta bacana até nos monitores 42 polegadas. valew galera, e to aceitando mais feeds ai da galera, por favor, visitem e deem sua opinião.

Aqui continuou muito estranho... É muito espaço para pouco conteúdo. Como disse antes, o ideal é trabalhar com resoluções e não porcentagem. Você colocou o container para 90%, sendo que o melhore resultado seria trabalhar com a propriedade max-width, pois você limita somente a largura máxima e não a mínima.O seus produtos se perdem em resoluções maiores e fica mais estranho ainda porque os elementos ficam alinhados à esquerda...
Se eu fosse vc trocava o "width: 90%;" por "max-width: 980px;" e trabalhava em cima desta largura, pois como disse é pouco conteúdo para muito espaço, o que só faz atrapalhar. Esta propriedade é uma das mais importantes para designs responsívos, por que posso limitar até onde o elemento vai crescer, porém deixando-o encolher. Você pode (e deve) usá-la em vários elementos pelas páginas, como imagens, divs, spans e etc.

O seu slideshow está com alguns problemas, ele chega a exibir as imagens, mas logo após acabar o efeito elas desaparecem e as imagens também não esticam até a largura máxima.

O logo também está com uma margem muito grande à esquerda (92px!) o que está desaliando-o. Ao invés da propriedade margin, use a padding que é mais apropriada para designs responsívos e coloque um valor menor, como 15px.
Outra coisa que se comporta de maneira estranha são os links de controle de conta (Principal, lista de desejos, minha conta...). Vi que você quer alinhá-lo à esquerda e usou a margem negativa, mas isso acabou por fazer este elemento se comportar estranhamente. Vá no arquivo do template (header.tpl) recorte o div q o contem e cole no final do div do cabeçalho, antes do menu. Também coloque um padding de 15px e você vai ver que vai melhorar. Mas não se esqueça de fazer backup antes .

Moral da história para layouts responsívos:
-Procure não alinhar os elementos com a propriedade margin, use o padding.;
-Se não for possível alinhar com padding, volte pro básico e coloque o código na ordem necessária e não use "gambiarras" para este alinhamento;
-Tenha em mente "áreas de resolução de telas" e trabalhe com a largura máxima que será permitida para cada "área";
- Sempre teste em todas resoluções possíveis. Se vc não tem acesso a uma resolução maior, vc pode criar um simples arquivo html com um iframe com a largura desejada. Deste modo vc poderá ter uma boa ideia de como ela se comportará;
- Se a sua página não tem conteúdo suficiente para preencher todo o espaço horizontal, não estique o seu container. Simplesmente fixe o container para a largura máxima padrão da atualidade: 980px.

Ufa, foi mal pelo livro, mas espero q ajude em algo ;D

verdade @unknown1140 muito espaço para pouco conteúdo, o tamanho definido está em width:90%; o melhor seria width: 980px; fixo