Seu site já está otimizado para dispositivos móveis? Se ainda não, não é o fim do mundo. Os navegadores modernos contêm inovações como zoom de pinça e ajuste automático do tamanho da fonte.

Se você não tem tempo ou dinheiro para otimizar seu site para dispositivos móveis, aqui estão dez coisas simples que você pode fazer agora mesmo para que seu site tenha uma boa aparência para os visitantes de dispositivos móveis.

1. Defina os atributos corretos do campo do formulário

Se você usar campos de entrada para nome de usuário ou endereço em seu site, desative a correção automática e ative a capitalização automática:

Seu nome:

Se você não fizer isso, o sistema de entrada automatizado T9 substituirá nomes, por exemplo, “Erwan”, por algo como “Erevan”.

Configurando o uso automático do primeiro letras maiúsculas em tipos de palavras libertará os usuários da necessidade de incluir letras maiúsculas todas as vezes - ou seja, cada palavra começará com uma letra maiúscula (por exemplo, “Ken burns” se tornará “Ken Burns”):

Pense em todas as armadilhas que um usuário pode encontrar em seu site.

E sem ir muito longe do assunto. Caso o seu site solicite um e-mail do usuário, utilize o campo de e-mail para que o visitante não precise digitar o símbolo @ no teclado de um dispositivo móvel:

Seu e-mail:

2. Defina a largura apropriada para dispositivos móveis

Abra o seu site no navegador do seu computador e reduza a largura da janela do programa até que você não consiga ler nada nela.

Esta será a largura mínima permitida. Pegue o valor atual da largura e defina-o como a propriedade @viewport definindo uma meta tag no cabeçalho da página:

Na próxima vez que seu site for aberto em um dispositivo móvel, ele será automaticamente definido com a largura que você especificou. O visitante do site não precisará usar o Zoom:

Esta imagem mostra o espaço extra à direita:

E esta imagem mostra o valor de largura definido corretamente.

Se o seu site for construído em um layout fluido e funcionar com todos os tamanhos de tela, sua tarefa ficará ainda mais fácil. Você precisa experimentar a largura com que o site fica bonito e legível em um dispositivo móvel e definir esse valor na meta tag.

3. Defina a largura das imagens para 100%

Agora que seu site tem uma certa largura, algumas imagens ficarão muito largas. Isso não acontecia antes, porque as resoluções dos monitores de desktop são bastante amplas e a maioria das imagens cabe na largura:

Para evitar isso, defina a largura máxima das suas imagens para 100%. Dessa forma, as imagens serão redimensionadas automaticamente nos casos em que sejam muito grandes para a tela do dispositivo móvel. Adicione o código abaixo aos estilos CSS do seu site:

img (largura máxima: 100%)

Se você estiver usando imagens como plano de fundo sem usar uma tag img, basta definir a propriedade CSS background-size como contains . Isso fará com que a imagem de fundo seja redimensionada quando a resolução da tela não for suficiente para exibi-la na escala de 100%:

Cabeçalho ( background: url(header.png) 50% sem repetição; tamanho do plano de fundo: contém )

Se você está preocupado com a possibilidade de a imagem ficar menos nítida, então você está preocupado em vão. No moderno dispositivos móveis isso não vai acontecer.

Quando um visitante usa a ampliação, o navegador aproveita o aumento na clareza da imagem. No entanto, certifique-se de que seu site não tenha a propriedade user-scalable=no na meta tag. Caso contrário, o usuário não poderá utilizar o zoom:

4. Defina a largura dos campos de entrada para 100%

Depois que a largura das imagens for definida por meio da propriedade max-width, faça um truque semelhante com campos de entrada. Basta adicionar ao arquivo CSS do seu site:

entrada, área de texto (largura máxima: 100%)

Ao visualizar o site em um dispositivo móvel, esta opção impedirá que os campos de entrada se estendam para fora da tela.

5. Tenha cuidado ao usar os botões Desativar para confirmação de envio de formulário

Para evitar vários cliques no botão de confirmação de envio do formulário, você deve tornar o envio inativo após o primeiro clique nele.

Ao contrário dos dispositivos desktop, os dispositivos móveis muitas vezes perdem a conexão com a rede. Se você tornar um botão inativo, o usuário não poderá clicar nele novamente. E nesta situação, lembre-se que a causa de tal situação pode não ser apenas a perda da rede.

Durante chamada recebida O navegador do dispositivo móvel será fechado. E então a situação com o botão de confirmação bloqueado se repetirá. O usuário não poderá enviar um formulário já preenchido.

E se você ainda decidir desativar o botão enviar, faça isso por alguns segundos.

6. Use quebra automática de linha em linhas longas

Às vezes é necessário exibir sequências longas, como exemplos de códigos, links, números de contas bancárias. Se o seu site for estreito para mostrar toda a linha, ele pode “ir” além da tela do dispositivo móvel:

Evite esta situação usando a propriedade word-wrap. Isso será quebrado quando a linha atingir a borda da tela. O usuário verá tudo o que precisa sem rolar:

Sua senha:

7. Cuidado ao usar espaços

Uma prática comum ao exibir strings longas é usar espaços a cada cinco caracteres. Isso tornará mais conveniente para o usuário lembrá-los ao entrar em outro aplicativo.

No entanto, um usuário inteligente não fará isso manualmente. Ele usará a área de transferência. Porém, no caso de espaços, ele terá que retirá-los. Quão conveniente e rápido é remover espaços em um dispositivo móvel?

Para evitar tais situações, use recuos em vez de espaços entre grupos de caracteres:

.split m (preenchimento: 0em 0.5em) Seu código: 435143a1b5fc8bb

Como você pode perceber, os “espaços” entre os caracteres permanecem, mas com a diferença que ao copiar e colar não há necessidade de apagar nada. No mínimo, é conveniente e economiza tempo!

8. Benefícios das consultas de mídia

Você pode criar estilos personalizados que funcionarão apenas ao visualizar o site em dispositivos móveis (ou exibidos em uma pequena janela do navegador) e em computador desktop A versão normal da página da web funcionará. Para fazer isso, use estilos de destino dentro de consultas de mídia como no exemplo abaixo:

/* css regular */ .tabs ( padding: 10px 2em ) @media screen and (max-width: 500px) ( /* aplica-se apenas se a tela for mais estreita que 500px */ .tabs ( padding: 3px 1em ) )

Agora você conhece outro truque que ajudará seu site a ficar melhor em um dispositivo móvel.

9. Evite posicionamento fixo

Se o cabeçalho ou a barra lateral do seu site estiver posicionado de maneira fixa, a propriedade CSS position será definida como fixa . Tome cuidado.

Ao fazer uma marcação dessa forma, seu título crescerá com a página e possivelmente ocupará todo o espaço da tela:

A solução mais simples é não usar posições fixas de elementos para exibição em dispositivos móveis.

O exemplo abaixo, usando o método media query, mostrará como implementar isso:

/* css regular */ #header (posição: fixa) @media screen and (max-width: 500px) ( /* aplica-se apenas se a tela for mais estreita que 500px */ #header (position: static ))

10. Use fontes padrão

O uso de fontes personalizadas dá ao site a aparência de um produto profissional, mas os usuários precisam baixar os arquivos de fontes. Isso é feito antes que o site seja exibido no dispositivo.

Via de regra, o volume desses arquivos é bastante grande. Em um dispositivo móvel, esse processo pode demorar grande número tempo. Neste momento, vemos um espaço em branco na tela em vez de texto.

Como sua página é exibida no celular?

Vá para o editor de páginas e clique em “Configurações de ajuste” no painel superior. Nesta janela ligamos e desligamos a exibição da página para os dispositivos selecionados.
Alterne os modos de resposta e veja como a página ficará no editor e no modo de visualização.

No editor:

Na visualização:

Como configurar a adaptabilidade de um widget separado?

A adaptabilidade de alguns widgets pode ser ajustada separadamente. Configuramos a exibição dos widgets “Colunas”, “Imagem”, “Botão” e “Texto” em dispositivos móveis.

Widget de colunas

Nas configurações da seção, ative e desative a exibição de colunas verticalmente para celulares. Em outros dispositivos, as colunas serão horizontais por padrão.

Widget "Imagem"

Definimos um tamanho de imagem especial para telefones celulares. Para fazer isso, acesse as configurações do widget e habilite “Tamanho especial para telefones”.

Widget de botão

Tendo especificado “Posição especial para telefones”, alteramos o alinhamento do botão no telefone: esquerda, centro, direita ou esticamos ao longo da largura.

Widget de texto

O texto se expande automaticamente em seu widget. Por padrão, o alinhamento em dispositivos móveis é definido como central - essa configuração pode ser desativada e ativada.
Você também pode definir o tamanho da fonte para tipos diferentes dispositivos.
E defina recuos.

Como ocultar um widget ou seção?

Widgets e seções que não deveriam ser exibidos em determinados dispositivos podem ser ocultados.

Importante: se a função “ocultar widget” estiver ativa, ela deverá estar incluída na responsividade do mobile. Caso contrário, será exibida a versão de capacidade de resposta com largura mais próxima.

Se você ocultar a seção mobile e esquecer de ativar a capacidade de resposta, ao acessar a página a versão para tablet será exibida.

Escondendo o widget

Vamos ocultar o widget “Imagem” e o widget “Texto” para telas largas. Os widgets serão exibidos apenas em dispositivos móveis, tablets e laptops; para dispositivos widescreen, os widgets ficarão ocultos até no editor.

Escondendo uma seção

Por exemplo, ocultamos a primeira seção para telas largas.

Menu móvel

Utilizamos o widget “Menu Móvel” para facilitar a navegação em dispositivos móveis. Em telas amplas, o menu aparecerá normalmente.

Como instalar seu próprio menu no celular?

Vamos adicionar um menu móvel à seção, remover o menu integrado dela e mover nosso menu para o widget "Menu Móvel". Resta configurar a exibição do menu para versão móvel e posição do botão. Em vez de uma inscrição, colocamos um logotipo.

Possíveis erros: paralaxe - mudança posição visível objeto em relação a um fundo distante dependendo da posição do observador, não destinado a dispositivos móveis.

A página de contato é de grande importância, por isso seu design precisa receber atenção especial. Quanto mais conveniente for a página de contato, mais oportunidades serão abertas para o proprietário do site. Uma página de contato, se projetada corretamente, pode muito bem impactar as taxas de conversão: se um usuário puder entrar em contato facilmente com um gerente ou administrador do site, ele terá uma experiência positiva. Quanto mais simples o processo, quanto menos campos ou formulários o usuário precisar preencher, melhor para a conversão.

Uma boa página de contato pode melhorar um site porque cria as condições para um bom relacionamento entre os visitantes e o proprietário do site. Não importa que tipo de site seja, pode ser uma loja online, portal de notícias ou serviço web - o feedback é extremamente importante.

Apesar disso, muitos designers subestimam a importância de uma página de contato bem desenhada, focando no design das páginas de conteúdo principal.

Acontece que um usuário precisa entrar em contato rapidamente com o proprietário do site ou com o suporte ao cliente. Porém, nada funciona, mesmo se você usar a busca do site. Às vezes a informação necessária está presente no site, mas fica “oculta” porque o designer não cuidou da navegação adequada e o usuário simplesmente não vê o link necessário. O usuário desesperado está pronto para ligar para o telefone, mas também não consegue encontrá-lo.

Empresas e serviços web que prestam muita atenção ao design das páginas de contato agem com extremo cuidado. Simplesmente porque esta página faz mais do que apenas conter informações de contato: ela contém as informações que o usuário precisa e é interativa. E, o mais importante, uma boa página de contato incentiva o usuário a interagir continuamente com o site.

A página de contato é uma espécie de plataforma de comunicação. Se o dono do site permite que os clientes expressem suas opiniões, isso já é um convite ao diálogo. Os desenvolvedores e usuários da Web podem se beneficiar desta colaboração e é por esta razão que ela precisa ser projetada corretamente.

Como você sabe, a funcionalidade no design é um dos fatores-chave. A página de contato contém informações importantes, no entanto, não há muito, o que às vezes pode levar a uma avaliação errônea da funcionalidade. O dono do site pensa que se colocou o endereço na página e-mail e um telefone, então isso é o suficiente. Às vezes ele está certo.

No entanto, a verificação dupla da funcionalidade pode fazer mais bem do que mal. Links quebrados ou páginas sobrecarregadas de informações são prejudiciais ao engajamento. O dono do site pode não receber uma mensagem importante, mas o pior acontecerá se ele fornecer informações desatualizadas ou imprecisas. Ao desenhar uma página de contato, primeiro você precisa pensar nos usuários, pois afinal essa página foi criada especificamente para eles.

Localização

É fundamental garantir que a página de contato esteja sempre acessível aos usuários. Aparência um site, mesmo com design exclusivo, não significa nada se o usuário não encontrar a página de contato. Às vezes você tem que criar formulários de contato bastante complexos, então você precisa seguir as instruções com antecedência. Será mais fácil para os usuários entrarem em contato com o proprietário do site se tiverem um guia passo a passo.

Para um designer que projeta um site, é importante lembrar dois pontos:

• A navegação primária deve sempre incluir uma página de contato
• Os usuários devem encontrar a página de contato na primeira vez que visitarem o site, independentemente da página interna que acessarem

A julgar pela experiência acumulada pelos designers, os usuários tendem a procurar informações de contato em lado direito página, então faz sentido colocar o link “Fale Conosco” lá. Porém, é preciso lembrar que essas informações são de importância secundária para o usuário, portanto, você não deve tornar esta seção do site muito perceptível ou intrusiva. O link para a página de contato localizado no canto superior direito da página funciona melhor. E o pior é um link em um menu suspenso, já que os usuários podem simplesmente não perceber.

Formulários de contato simples

Para sites comerciais a página de contato é muito importante, isso já foi discutido acima. Embora possa não ser tão bonito quanto outras páginas do site, deve ser simples, fácil de usar e compreensível. Se as informações não estiverem estruturadas corretamente, funcionarem mal ou forem enganosas, é improvável que o proprietário do site consiga construir relacionamentos de longo prazo com seus clientes.

Muitas vezes acontece que um usuário que deseja deixar uma mensagem sai do site porque não consegue preencher formulário de contato. Ou ele não quer se for muito longo ou complicado. Os usuários de hoje não querem perder tempo preenchendo formulários detalhados, por isso vale a pena pensar em simplificá-los. Quanto mais simples o formulário, melhor, também para a experiência do usuário, por isso é preciso focar na coleta de informações básicas.

Redação exata

Se falamos de sites oficiais, então em todas as páginas, inclusive na página de contato, é necessário aderir a uma linguagem clara e precisa sobre os benefícios que o usuário receberá ao se tornar cliente da empresa. Para que serve isso? Limpo de tudo informações desnecessáriasé a maneira mais eficaz de atrair e reter a atenção. Dados bem resumidos devem ser concisos para que as pessoas possam encontrar facilmente o que precisam.

Além disso, não se esqueça do componente visual. E não estamos falando apenas de designs atraentes de formulários de contato. Caso a empresa possua endereço físico, você pode ajudar os usuários colocando um mapa na página de contato. Para empresas localizadas em grandes cidades, é muito importante explicar aos usuários como será mais conveniente para eles chegarem ao escritório, loja ou armazém.

Capacidade de resposta da página de contato

Para qualquer negócio online, a capacidade de resposta é tudo. Esta é uma regra estrita, sem exceções. Como a Internet está se desenvolvendo em ritmo acelerado e cada vez mais novos dispositivos aparecem no mercado, isso significa que as informações de contato devem estar disponíveis independentemente do navegador ou dispositivo que a pessoa estiver usando. Hoje é muito fácil perder na competição - basta não otimizar sua página de contato para exibição em dispositivos móveis.

Componentes integrais

O que é melhor: um endereço de e-mail ou um formulário de contato? Os usuários precisam maneiras simples conexões com os provedores dos serviços de que precisam, então você precisa encontrá-los no meio do caminho. Você pode se concentrar na comunicação por e-mail ou colocar um formulário de contato - cada método tem seus prós e contras.

Formulários de contato

• O formulário de contato não deve forçar os usuários a irem para outra página
• O formulário de contato não se destina a criar conta ou faça login por e-mail
• O formulário deve ter uma função de preenchimento automático, se possível
• O formulário de contato deverá ter funcionalidade para envio de mensagens e notificações

E-mail

• A comunicação via e-mail deve ser segura para o usuário
• É aconselhável salvar todos os dados enviados para uso futuro.
• O trabalho com as mensagens recebidas deve ser feito de forma sistemática, também é preciso tomar cuidado backup dados

Formulário de validação

Os formulários de verificação são de grande importância quando você precisa saber mais sobre os usuários do seu site. Além disso, o processo de validação orienta um pouco o usuário na direção certa, pois pode chamar a atenção para dados inseridos incorretamente ou campos em branco. Assim, o formulário de verificação economiza tempo do cliente, pois ao final do processo de preenchimento a pessoa terá a certeza de que sua mensagem chegará ao endereço correto.

Números de telefone

Muitas empresas não indicam na página de contato números de telefone, pois temem que ligações constantes interfiram no processo de trabalho. Porém, como no caso de um cartão, os números de telefone na página de contato aumentam a confiança do usuário na marca; os clientes se sentem seguros, acreditando que em uma situação difícil poderão entrar em contato com um funcionário da empresa e discutir o problema. Um número de telefone reduz a distância entre o proprietário do site e o usuário; isso se aplica tanto a empresas tradicionais quanto a serviços online que não possuem endereço físico.

Perfis de mídia social

Os botões de mídia social são cada vez mais encontrados nas páginas de contato. Essa abordagem pode aprimorar significativamente os recursos do site, especialmente se o suporte ao cliente for fornecido 24 horas por dia, 7 dias por semana. Muitas pessoas acham mais conveniente entrar em contato com a empresa através rede social, então vale a pena pensar nessa forma de interagir com o usuário.

Projetando uma página de contato

Realmente boas páginas os contactos indicam a elevada qualificação dos designers que os conceberam. E a parte mais importante do design é o estilo visual da página de contato. No caso dos formulários de contato, isso significa campos grandes que facilitam o envio de dados. Se o formulário parecer bonito, funciona melhor.

Antes de iniciar o projeto, o projetista deve realizar um estudo detalhado de tudo informações de contato fornecido pelo cliente. Todos os elementos devem estar bem organizados, além disso, devem estar harmoniosamente combinados. Você também deve lembrar que a página de contato deve corresponder esquema de cores site para que o usuário identifique exclusivamente o site e a marca.

Conclusão

A página de contato deve estar sempre visível. Isso se aplica não apenas à página principal, mas também a todas as outras páginas do site. Ao criar uma página de contato, você precisa ter em mente que os usuários só poderão entrar em contato com o proprietário do site ou com a equipe de suporte da forma que veem na guia “Contatos”. Neste caso, a chave do sucesso é a comodidade e a simplicidade. Precisamos dar aos usuários o que eles desejam. Se o usuário precisar inserir seus dados pessoais no site, o melhor é fazer perguntas básicas: nome, sobrenome, endereço de e-mail. O formulário de contato não deve conter campos desnecessários. Você também precisa cuidar da adaptabilidade da página de contato - elas devem ser exibidas em qualquer navegador e em qualquer dispositivo. Se a página de contato for projetada corretamente, as chances de sucesso do site com os usuários aumentam bastante.

Saudações aos meus leitores, ganhei experiência e contarei a vocês os princípios de funcionamento do formulário opinião php. Vou mostrar exemplos claros para que você entenda como tudo funciona e como ocorre a interação entre o próprio formulário de entrada (seus campos de entrada) e o arquivo manipulador escrito em PHP. Além disso, você pode baixar as fontes gratuitamente junto com o arquivo .

Claro, será ótimo se você tiver pelo menos um pouco de conhecimento de HTML/CSS porque... Você terá que arrastar o código para sua página por analogia. Não tocaremos na linguagem PHP; mostrarei todas as alterações necessárias que você precisa fazer por si mesmo.

ATUALIZAÇÃO: Com base nas respostas dos leitores, percebi que preciso de algo mais bonito e funcional, conheça-me, confira e dê uma olhada. Escolha qual você mais gosta)

UPDATE2: Versão 3.0 Adaptive Landing + formulário ajax com transmissão de tags UTM, leia e veja. Você vai gostar

Lembrei-me de quando tentei fazer meu próprio formulário de feedback em PHP pela primeira vez e, para ser sincero, foi trabalhoso, porque... Eu não entendi o que e como estava acontecendo. Paciência e perseverança, amigos, e você terá sucesso.

Formulário de comentários conexões php- estrutura

Estudaremos a análise do próprio formulário de feedback usando um exemplo página de destino (Página inicial), aliás, há um artigo separado sobre. Você pode ver como funciona em ação usando os botões abaixo, estou anexando os fontes desta página de uma página e o arquivo principal do manipulador php (este arquivo irá processar e enviar o email)

Depois de baixar as fontes e descompactar o arquivo, você verá a seguinte estrutura de arquivos:

• imagem - todas as imagens usadas para a própria Landing Page, botões, etc.
• js – scripts javascript que fornecem, por exemplo, um pop-up janela modal na página e outros efeitos visuais
• index.html - arquivo de índice da nossa página de uma página
• index1.php - um arquivo manipulador para o qual os valores do formulário são transferidos, então uma carta é gerada a partir das variáveis ​​​​recebidas e enviada para o especificado endereço de email. Index1.php também atuará como uma página de notificação intermediária sobre o envio bem-sucedido de dados com redirecionamento automático de volta para index.html (ou seja, nossa página de uma página)

É importante que sua hospedagem, onde estão localizados os arquivos do site, suporte processamento PHP, caso contrário o arquivo index1.php não será executado e não funcionará. Para esclarecer essa nuance, entre em contato com a campanha onde sua hospedagem está cadastrada ou apenas teste - funciona, o que significa que há suporte. Caso contrário, habilite a opção de suporte à linguagem php

Dê uma olhada no diagrama de como todos os elementos interagem (página, formulário, manipulador)

Código fonte para chamar o formulário e o manipulador

Vamos dar uma olhada em como funciona um dos botões, que abre uma janela pop-up modal contendo um formulário de feedback. Isto dado código fonte- não é só um, dois inseridos na página e vai funcionar, você mesmo terá que customizá-lo para se adequar ao seu design e necessidades.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Solicite um retorno de chamada Solicite um retorno de chamada

Solicite um retorno de chamada Solicite um retorno de chamada

Abaixo está o código fonte completo do manipulador index1.php, para configurar o envio para o seu caixa de correio, mudar " [e-mail protegido]"para o seu, o resto, em princípio, pode permanecer inalterado

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Você será contatado

Você será contatado body ( background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; ) setTimeout("location.replace("/index.html")", 3000); /*Altera o endereço da página atual após 3 segundos (3.000 milissegundos)*/

Verificando a funcionalidade do formulário

Acesse a janela e insira os dados para uma verificação de teste do nosso formulário

Deixe-me lembrá-lo mais uma vez, sua hospedagem deve suportar processamento arquivos php, caso contrário, nosso manipulador simplesmente não será executado e nenhuma carta será enviada para o endereço de e-mail especificado. O resultado de um formulário de feedback preenchido com sucesso

Para mim é tudo, tentei transmitir o significado e o funcionamento do roteiro da melhor maneira possível. Se você tiver alguma dúvida, não hesite em entrar em contato comigo nos comentários ou no VK (ver dados de contato). Desejo-lhe um trabalho fácil e produtivo.

Como trabalhar