Se você é novo no desenvolvimento da Web ou é um veterano experiente – todos nós, em determinado momento, demos uma olhada no nosso site e deixamos escapar um longo suspiro insatisfeito. Sabemos que não parece certo, e pode ser melhorado, mas como? Bem, não tema e não procure mais, a seguir, examinaremos 5 maneiras pelas quais você pode aprimorar esse clunker de um site.

Use menos marcação

Classes complicadas e aninhamento desnecessário em HTML são a desgraça da existência de todos os codificadores. Enquanto no momento apenas empilhar elementos uns sobre os outros para ” apenas fazer funcionar” pode parecer uma boa idéia, mas mais cedo ou mais tarde você terá que enfrentar esse código novamente – e quem sabe se você será capaz de decifrar isso? Garantir que sua marcação seja organizada de maneira organizada e que os nomes das suas classes sejam decifráveis ​​é a chave para manter sua sanidade no futuro.

Então, quebre o teclado e vamos cortar a gordura nesse HTML com algumas dicas úteis :

1. Nem sempre busque o Bootstrap, o Foundation ou outras estruturas de front-end, se você realmente não precisa dele

2. Tente usar Sass ou Menos e aproveite o aninhamento no escopo para reduzir nomes de classes redundantes

3. Evite usar elementos como <b>, <u>e, a <strong>menos que esteja alinhado com o corpo do texto (lembre-se da acessibilidade)

4. Planeje seu layout com antecedência e visualize como os elementos podem ser reduzidos para produzir o resultado final

5. Se você trabalha em equipe, faça da marcação um cidadão de primeira classe em seu processo de revisão de relações públicas.

Bônus: Evite o estilo embutido quando possível

Às vezes, é inevitável, mas quando possível, evite colocar o estilo na linha. Embora conveniente a curto prazo, à medida que sua base de código aumenta, isso causará mais dores de cabeça do que vale a pena.

Conteúdo de equilíbrio e espaço em branco

Seu site parece um laboratório estéril escassamente mobiliado? Ou no extremo oposto do espectro, parece um ninho desordenado para roedores? Nenhum desses extremos é bonito, e é um erro que todo desenvolvedor cometeu em algum momento – uma barra de navegação na parte superior, um menu lateral por aqui, pop-ups em abundância e quantidades abundantes de cores espalhadas pela página. Embora o preenchimento de seu site com conteúdo útil seja bom, geralmente cometemos o erro de exagerar.

Gaste tempo determinando o objetivo de cada página e o conteúdo necessário para cumprir esse objetivo. Use o espaço em branco na sua interface do usuário para chamar a atenção dos usuários para o que você deseja focar. Em geral, para a maioria dos desenvolvedores, menos é mais. Um exemplo perfeito está aqui no meio, você já reparou em todo esse glorioso espaço em branco? Quando usado corretamente, o espaço em branco chama a atenção do usuário e aumenta a legibilidade . O espaço em branco chama a atenção do usuário para o objeto de interesse.

Quebrar blocos de texto

Quando uma página da web é muito longa, muitas vezes fica difícil prender a atenção dos usuários. Longas colunas de texto que se prolongam por dias criam uma experiência chata semelhante à leitura dos documentos técnicos que acompanham a sua torradeira (quem realmente lê isso mesmo?). Se um usuário navegar no seu site e for imediatamente recebido com uma parede gigante de texto, garanto que, em vez de clicar em se inscrever , ele estará clicando novamente .

Que tal … em vez de ler este site – eu tiro uma soneca?

Para evitar matar potenciais clientes ou leitores com tédio, experimente dividir suas colunas de conteúdo de texto com imagens ou formulários. Ao ter uma boa mistura de conteúdo alinhado vertical e horizontalmente, você cria uma experiência muito mais interessante. Além disso, adicionar quebras de linha entre parágrafos e / ou conteúdo de texto relacionado também facilitará a leitura do usuário. Ao dividir seu conteúdo dessa maneira, aproveita a tendência do cérebro para agrupar informações – na idade do Twitter e nos limites de 280 caracteres, a atenção de muitos de nós foi reduzida e a apresentação de informações em pequenos pedaços cria uma sensação de a leitura é mais gerenciável.

Reserve um momento enquanto estiver lendo seu blog favorito ou verificando as notícias e veja como o conteúdo é organizado e como as informações são agrupadas.

Abrace a simplicidade

Como mencionado na primeira dica, não depender muito de estruturas como o Bootstrap quando desnecessário pode ser uma lufada de ar fresco. Dependendo das suas necessidades, os recursos incluídos podem ser um exagero. Agora, não me interpretem mal, eu amo absolutamente como é fácil aprender e aplicar algo como Bootstrap , Foundation ou Material UI , para criar um site elegante rapidamente. De fato, estruturas como essas me ajudaram muito cedo, como desenvolvedor, a me tornar mais produtivo. Muitas vezes, porém, você nunca precisará de tudo o que uma estrutura tem a oferecer.

Pegue o seguinte estilo, por exemplo, ao definir pontos de interrupção em um arquivo separado, você poderá criar um estilo reativo facilmente sem importar arquivos grandes para o seu projeto.

Com a introdução do Flexbox ao CSS, também ficou mais fácil do que nunca criar seus próprios sites reativos e compatíveis com dispositivos móveis. O que nos leva à nossa dica final.

Design móvel primeiro

Hoje em dia, o usuário médio da Internet estará navegando no site em um smartphone ou tablet, e não em uma área de trabalho, por isso, durante a etapa de design da criação do site, você realmente precisa considerar o espaço na tela em que precisa trabalhar. telefone. Devido à área reduzida com a qual trabalhar, geralmente prefiro esboçar a aparência da versão móvel de um site antes de migrar para o desktop.

Em toda a realidade, você pode se desenvolver na ordem em que se sentir mais confortável, mas um erro muitas vezes cometido é simplesmente negligenciar sua experiência móvel. Para obter a melhor experiência absoluta para seus usuários móveis, considere também tornar seu site um aplicativo Web progressivo (PWA) ; isso permite que o site apareça ao usuário como um aplicativo tradicional ou móvel nativo.

Existem três grandes benefícios na criação de um PWA, que incluem:

1. Confiabilidade – seu aplicativo carrega instantaneamente e pode conter conteúdo offline, garantindo resiliência mesmo com uma conexão de rede instável.
2. Velocidade do aplicativo – responda rapidamente à interação do usuário e pouco ou nenhum atraso ao rolar.
3. Experiência – como o site se comporta como um aplicativo nativo, os usuários receberão uma experiência familiar. Os PWAs também são instaláveis ​​e podem residir na tela inicial do usuário sem a necessidade de uma loja de aplicativos.

Por fim, nosso trabalho como desenvolvedores é criar uma experiência agradável, útil e memorável para nossos usuários. Ao prestar muita atenção à maneira como você cria e desenvolve seu site e ao usar mídias de qualidade , você pode destacá-lo da multidão.