Design

Grid 960

Compatível com padrões web atuais e a fim de atender frameworks css baseado no Grid 960 12 colunas.

Este Grid ordena elementos gráficos para resolver uma composição e obter coesão no layout.

Referencias: O que é?, 960.gs, Melhorando Layouts, 960 Grid System, Thegridsystem

Nome dos arquivos

Nomei os arquivos conforme a tabela abaixo:

Página Arquivo(.psd ou .png)
Home home.psd
Categoria tag.psd
Busca do Produto search.psd
Detalhes do Produto product.psd
Checkout(Carrinho) cart.psd
Checkout(Endereço) address.psd
Checkout(Pagamento) payment.psd
Checkout(Pagamento) finished.psd
Login login.psd
Meus Pedidos account.psd

Dimensões parass Mobile e Desktop

Para melhorar a experiência em nossos site para versão mobile, utilizamos as seguintes dimensões de largura para a criação dos layouts

Dipositios celulares: menor 768px de largura

Tablets: maior ou igual 768px de largura

Desktop com maior ou igual 992px de largura

Assinatura Vnda no rodapé

Todos os direitos reservados - Vnda Tecnologia de E-commerce

* assinatura da Vnda no rodapé, usando uma cor para destacar (um pouco) o link

Enviar Favicon

Criar uma imagem png e enviar em um arquivo separado na dimensão 16x16 ou 32x32.

Especificações Front-End

Entendemos como front-end os arquivos de HTML e CSS que representam o design. Códigos de Java Script e Plugins também fazem parte deste escopo quando fazem parte de uma ação ou comportamento

HTML

- Utilizar HTML5

- Gerar código indentado com dois espaços

- Estrutura principal deve estar organizada de forma independente
<header> (topo)
<section> (conteúdo)
<footer> (rodapé)

Aplicar Titulos Headings (h1..h2..h3..h4.. ) - *Aplicar semântica SEO

CSS

- Framework de Grid e CSS.
*Principal referência: http://getbootstrap.com/css/#grid (Recomendado)

- Adotar classes sempre em Inglês

Sugestões

- Menu Comportamento Mobile mmenu.frebsite.nl

- Lightbox fancybox.net ou http://lokeshdhakar.com/projects/lightbox2/

Front-End (Arquivos locais)

Para melhorar a experiência no Setup da loja cabe ao desenvolvedor html respeitar as premissas abaixo e nos enviar o html conforme o padrão exigido pela vnda.

Nome dos arquivos

Utilize o nome dos arquivos de acordo com os templates usados na plataforma ecommerce da vnda.

Página Entrega(front) Setup(plataforma)
Home home.html home.liquid
Categoria tag.html tag.liquid
Busca do Produto search.html search.liquid
Detalhes do Produto product.html product.liquid
Checkout(Carrinho) cart.html cart.liquid
Checkout(Endereço) address.html address.liquid
Checkout(Pagamento) payment.html payment.liquid
Checkout(Pagamento) finished.html finished.liquid
Login login.html login.liquid
Meus Pedidos account.html account.liquid

hierárquia de pastas

Diretórios
vnda_stg_nome-loja/
vnda_stg_nome-loja/public/javascripts/
vnda_stg_nome-loja/public/stylesheets/
vnda_stg_nome-loja/public/images/

Structured Data

   <head itemscope="" itemtype="http://schema.org/Organization">

    <meta itemprop="name" content="Loja">
    <meta itemprop="email" content="email">
    <meta itemprop="telephone" content="99 9999-9999">
    <link itemprop="url" href="loja.com.br">
    <link itemprop="logo" href="logo.png">

Aplicar schema Organization na tag head