My Opera10 Dicas sobre concepção de um carregamento rápido web site
Tuesday, May 13, 2008 1:19:09 AM
Dicas e truques sobre web design eficaz
The Number 1 rule that every web designer should follow is to create a fast loading web site. O Número 1 regra que todo web designer deve seguir é o de criar um rápido carregamento web site. You might have a great design but very few people are going to see it if it takes a long time to load. Você pode ter um grande projeto, mas muito poucas pessoas estão indo para ver se ele leva muito tempo para carregar. While designing a web site always think about how long it will take to load. Embora a concepção de um sítio web sempre pensar em quanto tempo vai demorar para carregar. Try out our tips to build a great looking web site that also loads fast. Experimente as nossas dicas para construir uma grande procura web site que também carrega rápido.
Minimize the use of images - The key to a fast loading web site is to minimize the use of images. Minimizar a utilização de imagens - A chave para uma rápida carga web site é o de minimizar o uso de imagens. Images do enhance a page but don't make 80% of your web site only images. Imagens fazer aumentar a página, mas não fazem 80% de seu web site apenas imagens. Instead break it down as much as possible to simple HTML. Em vez quebrá-lo para baixo, tanto quanto possível, a simples HTML. Notice the popular sites like Yahoo, Google, Ebay, Amazon etc., they have very few images because the load time is more important. Aviso a sites populares, como o Yahoo, Google, eBay, Amazon etc, eles têm muito poucas imagens da carga, porque o tempo é mais importante. Very often simple designs are the best. Muitas vezes são os melhores desenhos simples.
Optimize images for the web - Once you have decided on the images that you need on your site, make sure that it is optimized for the web. Otimizar imagens para a web - Depois de ter decidido sobre as imagens que você precisa em seu site, certifique-se de que é otimizada para a web. They should be in the gif or jpeg format. Eles devem estar no formato GIF ou JPEG. You can also minimize the size of the image by choosing the number of colors you need, from the color palette. Você também pode minimizar o tamanho da imagem, escolhendo o número de cores que você precisa, desde a paleta de cores. The less the colors you choose, the less the size of the image. A menos que você escolher as cores, menos o tamanho da imagem. You can also use online tools like Gif Wizard to optimize your images or to get a recommendation on how to cut down the size of an image. Você também pode usar ferramentas on-line como Gif Wizard para otimizar suas imagens ou para obter uma recomendação sobre a forma de reduzir o tamanho de uma imagem.
Use Tables creatively - You can get some great looking designs by using tables creatively . Use Quadros criativamente - Você pode obter algumas grandes desenhos procurando por meio de quadros criativamente. Tables load very fast because it is just HTML code. Quadros carga muito rápido porque ele é apenas código HTML. Tables can be used in the homepage, menus or anywhere you like. Os quadros podem ser utilizadas na página inicial, menus ou em qualquer lugar que você queira. Check out our homepage and our menus to see how we have used tables in our site. Veja a nossa homepage e os nossos menus para ver como nós temos tabelas usadas em nosso site.
Read more on Using HTML Tables Creatively Leia mais sobre como usar tabelas HTML criativamente
Cut down the use of animated gifs - Don't use animated gifs unless it is necessary. Reduzir o uso de gifs animados - Não utilize gifs animados, salvo se tal for necessário. Animated gifs take a long time to load and can also be very irritating. Gifs animados demorar muito tempo para carregar e também pode ser muito irritante. But since they catch your attention you could use small animated gifs to draw a visitor's attention to a particular section of your site. Mas, uma vez que captura a atenção que você poderia usar as pequenas gifs animados de chamar a atenção do visitante para uma determinada seção de seu site.
Design simple icons - Instead of using big, bulky images use simple and small icons that add a little color and draw the attention of a visitor. Design simples ícones - Em vez de utilizar grandes e volumosas imagens utilização simples e pequenos ícones que acrescentar um pouco de cor e de chamar a atenção de um visitante. We have used small icons in our homepage to highlight the main sections of our site. Temos utilizado pequenos ícones na nossa homepage para destacar as principais seções do nosso site.
Use background images instead of big images whenever possible - Use background images whenever possible. Use imagens de fundo e não de grandes imagens sempre que possível - Use imagens de fundo, sempre que possível. This is usually a very useful tip for headers and footers. Isto é, normalmente, uma dica muito útil para cabeçalhos e rodapés. Instead of using an image of width 580 which is a uniform design you can use just a part of that as a background fill. Em vez de utilizar uma imagem de largura 580, que é um padrão uniforme você pode usar apenas uma parte do que como pano de fundo preencher. This reduces the size of the web page as the image is small. Isto reduz o tamanho da página da Web como a imagem é pequena. The code will look like this : O código será semelhante a esse:
Try out CSS Styles - Have fun with CSS styles to get some cool text effects. Experimente as CSS Estilos - Divirta-se com estilos CSS para obter alguns efeitos cool texto. Again, a CSS Style is simple HTML code so it loads very fast. Mais uma vez, um estilo CSS é simples código HTML para que ele carrega muito rápido. You can create cool rollovers using CSS Styles. Você pode criar rollovers cool Estilos usando CSS.
Rollover the text on the right menu to see how we have used CSS Styles to get a simple but nice text effect. Capotamento de texto no menu da direita para ver como nós temos utilizado Estilos CSS para obter um texto simples, mas agradável efeito.
Check out our CSS Styles tutorial for more cool tips on CSS Styles Confira as nossas Estilos CSS tutorial para arrefecer mais dicas sobre CSS Estilos
Use Flash sparingly - There seems to be a lot of hype about Flash but I recommend that you minimize the use of Flash on a site. Use Flash moderadamente - Parece haver um monte de hype sobre Flash, mas eu recomendo que você minimizar a utilização do Flash em um site. Don't make entire sites using Flash. Não faça todo sites usando Flash. It may look great but it takes hours to load and can really put off visitors. Ela pode parecer grande, mas que demora horas para carregar e podem realmente adiar visitantes. If you do want to use Flash use it within an HTML site and make sure it loads fast. Se você quer usar Flash usá-la dentro de um site HTML e certifique-se que ele carrega rápido.
Design most of your site in HTML - As much as possible try to design your site using HTML. Design maior parte do seu site em HTML - Na medida do possível tentar design do seu site usando HTML. You can create great designs by just using HTML code. Você pode criar desenhos em grande utilizando apenas código HTML. Use tables, CSS Styles and simple fonts to design your site. Use tabelas, CSS Estilos simples e fontes para a concepção do seu site. Minimize the use of animated gifs, Flash, bulky images etc. Minimizar a utilização de gifs animados, Flash, imagens etc volumosos
Keep checking your load time - Last but not least, before you decide on the final design of your web site, check its load time on NetMechanic . Mantenha o seu controlo carga vez - Por último mas não menos importante, antes de se pronunciar sobre o projecto final de seu web site, verifique sua carga em tempo NetMechanic. This site gives you a free analysis of your web site which is extremely useful. Este site dá-lhe uma análise gratuita de seu web site, que é extremamente útil. We kept using it to improve our site till we got a report that said good loading time! Mantivemos a usá-lo para melhorar o nosso site até que comecei um relatório que disse bom tempo para download!
We learnt these tips while building our web site. Nós aprendemos estas dicas ao mesmo tempo construir nosso web site. We've enjoyed sharing them with you and hope that you found them useful. Temos desfrutado compartilhá-las com você e esperamos que lhe foram consideradas úteis.
The Number 1 rule that every web designer should follow is to create a fast loading web site. O Número 1 regra que todo web designer deve seguir é o de criar um rápido carregamento web site. You might have a great design but very few people are going to see it if it takes a long time to load. Você pode ter um grande projeto, mas muito poucas pessoas estão indo para ver se ele leva muito tempo para carregar. While designing a web site always think about how long it will take to load. Embora a concepção de um sítio web sempre pensar em quanto tempo vai demorar para carregar. Try out our tips to build a great looking web site that also loads fast. Experimente as nossas dicas para construir uma grande procura web site que também carrega rápido.
Minimize the use of images - The key to a fast loading web site is to minimize the use of images. Minimizar a utilização de imagens - A chave para uma rápida carga web site é o de minimizar o uso de imagens. Images do enhance a page but don't make 80% of your web site only images. Imagens fazer aumentar a página, mas não fazem 80% de seu web site apenas imagens. Instead break it down as much as possible to simple HTML. Em vez quebrá-lo para baixo, tanto quanto possível, a simples HTML. Notice the popular sites like Yahoo, Google, Ebay, Amazon etc., they have very few images because the load time is more important. Aviso a sites populares, como o Yahoo, Google, eBay, Amazon etc, eles têm muito poucas imagens da carga, porque o tempo é mais importante. Very often simple designs are the best. Muitas vezes são os melhores desenhos simples.
Optimize images for the web - Once you have decided on the images that you need on your site, make sure that it is optimized for the web. Otimizar imagens para a web - Depois de ter decidido sobre as imagens que você precisa em seu site, certifique-se de que é otimizada para a web. They should be in the gif or jpeg format. Eles devem estar no formato GIF ou JPEG. You can also minimize the size of the image by choosing the number of colors you need, from the color palette. Você também pode minimizar o tamanho da imagem, escolhendo o número de cores que você precisa, desde a paleta de cores. The less the colors you choose, the less the size of the image. A menos que você escolher as cores, menos o tamanho da imagem. You can also use online tools like Gif Wizard to optimize your images or to get a recommendation on how to cut down the size of an image. Você também pode usar ferramentas on-line como Gif Wizard para otimizar suas imagens ou para obter uma recomendação sobre a forma de reduzir o tamanho de uma imagem.
Use Tables creatively - You can get some great looking designs by using tables creatively . Use Quadros criativamente - Você pode obter algumas grandes desenhos procurando por meio de quadros criativamente. Tables load very fast because it is just HTML code. Quadros carga muito rápido porque ele é apenas código HTML. Tables can be used in the homepage, menus or anywhere you like. Os quadros podem ser utilizadas na página inicial, menus ou em qualquer lugar que você queira. Check out our homepage and our menus to see how we have used tables in our site. Veja a nossa homepage e os nossos menus para ver como nós temos tabelas usadas em nosso site.
Read more on Using HTML Tables Creatively Leia mais sobre como usar tabelas HTML criativamente
Cut down the use of animated gifs - Don't use animated gifs unless it is necessary. Reduzir o uso de gifs animados - Não utilize gifs animados, salvo se tal for necessário. Animated gifs take a long time to load and can also be very irritating. Gifs animados demorar muito tempo para carregar e também pode ser muito irritante. But since they catch your attention you could use small animated gifs to draw a visitor's attention to a particular section of your site. Mas, uma vez que captura a atenção que você poderia usar as pequenas gifs animados de chamar a atenção do visitante para uma determinada seção de seu site.
Design simple icons - Instead of using big, bulky images use simple and small icons that add a little color and draw the attention of a visitor. Design simples ícones - Em vez de utilizar grandes e volumosas imagens utilização simples e pequenos ícones que acrescentar um pouco de cor e de chamar a atenção de um visitante. We have used small icons in our homepage to highlight the main sections of our site. Temos utilizado pequenos ícones na nossa homepage para destacar as principais seções do nosso site.
Use background images instead of big images whenever possible - Use background images whenever possible. Use imagens de fundo e não de grandes imagens sempre que possível - Use imagens de fundo, sempre que possível. This is usually a very useful tip for headers and footers. Isto é, normalmente, uma dica muito útil para cabeçalhos e rodapés. Instead of using an image of width 580 which is a uniform design you can use just a part of that as a background fill. Em vez de utilizar uma imagem de largura 580, que é um padrão uniforme você pode usar apenas uma parte do que como pano de fundo preencher. This reduces the size of the web page as the image is small. Isto reduz o tamanho da página da Web como a imagem é pequena. The code will look like this :
Anonymous # Monday, August 15, 2011 7:39:43 PM