SITE AINDA EM CONSTRUÇÃO!

Grafia

Arte

Site profissional com CMS!

Administre facilmente o seu site.

Planejado para celular, tablet e computador.

Ultra-rápido, com navegação melhorada AMP.

Otimização profissional para o buscador Google.

desktop

tablet

s.phone

Os sites desenvolvidos pela "Grafia Arte" são desenvolvidos para serem responsivos e não adaptivos. Isso significa que o design foi projetado levando em conta princípios profissionais de Web Design e Usabilidade para dispositivos diferentes.

planejamento

Planejar para diferentes dispositivos é organizar o conteúdo de maneira inteligênte, deve haver um propósito pelo qual o conteúdo está lá.

No planejamento é levado em conta "quando solicitado", o design minimalista, que é bem leve e consome pouca banda de internet, sendo melhor para mobiles.

As vezes se torna necessário retirar, esconder, ou inserir elementos de determinados dispositivos, por necessidade ou porque atrapalham a usabilidade do usuário.

Menos código HTML5, se o projeto permitir.

O site é pensado para ser minimalista, não só em termos gráficos, mas no código. Isso depende do site e o que o cliente deseja.

CSS3 otimizado, criado de forma inteligênte.

O aquivo ".css" fica abixo de 50KB e em linha. A estilização é escrita pensando em padrões reutilizáveis que impedem a criação de código sem necessidade, ou não utilizáveis, como é o caso de frameworks, onde não podemos usar tudo dela, por tanto, é excluído o que não é usado.

Mais ícones, menos imagens. Se possível.

As imagens são evitadas ao máximo e substituídas por fontes icônicas. Quando não é possível, são exportadas comprimidas e o nível de compressão será determinado de acordo com cada imagem e se o foco do cliente é qualidade máxima nas imagens ou se as imagens são apenas ilustrativas e opcionais.

Otimização com a Google Console

A ferramenta Google Search Console, permite otimizar o projeto, fazendo análises do código. É uma ferramenta para otimizar ainda mais o site e deixá-lo relevante, como a Google gosta.

Gerenciamento Google Analytics.

Inserção do código de análise do Google Analytics. O cliente pode administrar sozinho com sua conta, ou contratar a "Grafia Arte" para administrar. A vantagem de analisar o site, é entender se o design e tudo o que foi feito de usabilidade e conversão, estão mesmo funcionando e dando resultados. om isso, novas estratégias são criadas, com o objetivo de crescer a marca e gerar resultados.

SEO Avançado

SEO (Search Engine Optimization), é a otimização de páginas na web, para torná-las relevantes o suficiênte para o robozinho (robots) da Google. Quanto mais otimizado, melhor será.

O trabalho de SEO é muito importante para tornar o seu negócio visível. Por existir muita concorrência, quem aperfeiçoa a otimização, fica melhor posicionado nas buscas e possui grandes chances de estar na primeira página de pesquisa. Isso aumenta a possibilidade de negócio.

A Google quer mostrar conteúdo relevante aos usuários, quanto mais relevante for o seu site, mas a Google gostará de indicar você a quem pesquisa, isso é rank. O trabalho da Grafia Arte é tornar o seu site bem visto pela Google de forma orgânica. Caso deseja pagar a Google pelo Adwords, isso já não é SEO, mas SEM. A Grafia Arte aconselha fazer o SEO, porque além de não pagar nada a Google, você chega se posiciona por merecimento e relevância. O SEM pode ser feito para momentos em que há uma promoção nova, ou algo que queiramos que o resultado de divulgação seja imediato, mas isso não garante sucesso, somente através de métricas, poderemos entender se o seu investimento está valendo a pena.

Domínio Amigável.

Não é regra, mas é recomendado que expresse o conteúdo que o site oferece no domínio e dê preferência a domínios ".com.br", isso declara que o seu site é focado no Brasil., caso realmente seja. Essas ações podem ajudar na relevância do seu site, o tornando regional, como uma pizzaria que atende num determinado local e fora dele, é perda de foco.

URL Amigável.

A URL amigével é regra. Na criação de uma página, a URL deve expressar claramente o que a página contem. É interessante entender como o usuário busca o que você oferece e com isso, detalhar em sua URL essas palavras chaves.

Conteúdo Relevante.

SEO é dar relevância ao seu conteúdo criado, caso ele seja ruim, a taxa de rejeição aumentará e a relevância cairá. Produza vídeos e postagens relevantes, buscando saber o que está em alta nos "Trends" sobre o seu negócio e faça se o tema realmente for bom.

Meta Tags / Links

Importantíssimas para o SEO, porque definem em código, algumas funções:

Description: Descreve o site. A Google imprime isso na busca.

Author: O autor do site, empresa.

Robots: É possível indicar regras ao robots, via "meta tag".

Canonical: Impedi a duplicação no indexamento da mesma página.

Meta Tags SOCIAIS

Importantíssimas para o SEO em Redes Socias, melhoram o corpo do "conteúdo compartilhado":

Facebook: Tags de informações, para o Facebook.

Twitter: Melhora as informações compartilhadas do Twitter.

Google+: Melhora as informações compartilhadas do Google+.

Otimização.

A otimização deixa o site mais leve, consumindo menos banda de internet, mais rápido e podendo melhorar o SEO:

Imagens: Mais ícones, menos imagens. A Grafia Arte cria imagens em CSS também, são leves, quando não é possível, as imagens são comprimidas.

Código: Menos código, menos informações desnecessárias para serem lidas, mais objetividade no negócio.

html5

O HTML5 veio para dar mais significado ao código. Agora o seu site pode ser melhor compreendido pela máquina.

Antes do HTML5

Antigamente os sites eram marcados com <div>, por tanto, a máquina não conseguia interpretar o que significava os blocos no código e apenas imprimia na tela sem entendê-lo.

Depois do HTML5

Agora as marcações fazem com que os blocos principais no código, sejam compreendidos pela máquina, não é compreendido o conteúdo de forma detalhada, mas já é um grande passo em relevância.

Schema.org

O HTML5 dá significado as marcações, mas não define o conteúdo de forma detalhada. O SCHEMA, sim. Ele permite fazer com que o conteúdo da página seja definido e isso é MUITÍSSIMO relevante,. A Google, Microsoft, Yandex e Yahoo, se juntaram nessa iniciativa colaborativa.

Google

Bolo de chocolate|

Google

Bolo de chocolate|

A relevância que o seu site ganha é muito significativa. Além disso, os usuários que procuram o seu conteúdo podem ser mais atraídos pela informação detalhada, porque possuem imagem, rank, informações. É um trabalho complexo de fazer, porque é necessário detalhar os campos usando mais código dentro do código padrão HTML. Veja abaixo o exemplo.

<divitemscope itemtype="linkSchema">
<spanitemprop="name"> Oferta</span>
<spanitemprop="price"> R$20</span>
<divitemprop="reviews"itemscope itemtype ="LinkSchema">
<imgsrc="/imagem.jpg">
<metaitemprop="ratingValue"content ="4 ">
<metaitemprop="bestRating"content ="5 ">
Baseado em<spanitemprop="ratingCount ">25</span> avaliações de usuários.
<div>
<div>

HTML5

SCHEMA.ORG

Rich Cards

Os Rich Cards são blocos de anúncios. São usados pela Google e recomendados por ela. Ideais para produtos, livros, filmes, receitas e coisas do tipo.

Os Rich Cards são criados na Google Search Console. A Grafia Arte também os cria, porém, cada vez que criar algo interessante em seu site e quiser um "RC" para ele, deverá criá-lo sozinho, ou contratar a Grafia Arte para gerenciá-los.

Bolo de choco...

robots.txt

O "ROBOTS" serve para que algumas páginas de administração sejam ignoradas ou permitidas.

Por segurança e seleção, é usado esse documento para informar ao robô de indexão, o que queremos e o que não queremos que ele indexe, para mostrar aos usuários.

# www.robotstxt.org/
Disallow: /pagina1.php*
Disallow: /pagina2.php
Disallow: /pagina3.php
Disallow: /pasta

sitemap.xml

O "SITEMAP" são as informações de URLs do site. É como dizer: Hey Google, aqui estão minhas páginas.

Além de ajudar o robozinho, ainda indicamos qual a prioridade que ele deve indexar as URLs informadas, o que é mais relevânte. Isso nos permite colocar como prioridade uma promoção, um produto que vende mais e assim por diante.

CSS3 / animação

Você determina se quer ou não animações nos seu projeto e com qual frequência. Veja abaixo um exemplo de 3 animações de muitas possíveis. Além disso, é possível fazer animações mais complexas e interativas: