15 Quick Tips to Make Any Website Look Better
15 Quick Tips to Make Any Website Look Better
You don’t have to be a web designer to improve the look and feel of your site. We put together 15 different tricks anybody can apply to make a website look better without much work and without needing to be a designer..
Images
Almost all sites today have visitors who expect quality images incorporated. But with them come headaches. Slower loading speeds, clarity, proportion issues, etc. Try out a few of these ideas to get your images looking better.
- Instead of regular image files, switch to vectors. Vectors can scale up or down without losing their properties. Even better, they are light weight and can be used for all images on your site, including logos, icons and banners.
- CSS allows the use of images as links and still get that anchor text code included. This trick will get you out of a bind if your top navigation bar has been looking a little off without images as your buttons. Simply set the text-indent property to read -0000px;. Now your text is pushed off the page but the image is left viewable.
- Are browsers pushing your pages to render before your images have loaded? By specifying your image dimensions, non-replaceable elements will get wrapped around. Without specifying the dimensions, browsers will reflow after the images have downloaded. Use height and width tags in your <img> elements.
Color
The use of color on your site has some serious implications, especially if you are using the wrong colors. Tons of research has been put into the psychology of color in marketing. Here is a quick breakdown:
- Men and women prefer different types of colors. Women prefer tints. A tint is any color mixed with white. Think, pastels like baby blue or soft greens. Men, on the other hand prefer shades. A shade is any color mixed with black. Shades are a bit more muted, often darker and deeper. If your site is marketing to a specific gender, adjusting your colors to is a good practice.
Women prefer tints. Men prefer shades.
- If you struggle with creating color palettes or suffer from color-blindness, Adobe offers the Adobe Kuler program, which will soon be your best friend. Preset palettes and suggestions are available to take the guesswork out of “what looks good.”
- Use color in your links. Try a color that is more subtle than the color you are using for your text. Your links will be aesthetically pleasing and your viewers will find them easier to use. Try underlining your links with a bottom border by coding: 1px dotted <color>;
- Does your lime-green site look fantastic on a smartphone but brutal on the eyes when opened from a desktop? How we perceive color is heavily influenced by the size of the object we are viewing it on. If Adobe Kuler doesn’t mesh well with your tastes, try flatuicolors.com. This site recommends color combinations but as a bonus, they are specifically intended for flat-design; meaning whatever you choose will look great on any device.
- The last piece of color advice. Do not choose more than 4 colors for your entire site. Use your colors in a strategic way, such as bringing attention to more important areas like navigational areas and content. Pay attention to the small details color can help you with, like your buttons’ text and border areas.
Fonts
A great font can change the entire look and feel of your site even when the rest of your design is left unaltered. Most sites today are content focused and your readers want something that is easy on the eyes, but appealing. Here are some easy font ideas.
- If your site currently uses a custom font, you are slowing down your site by forcing additional rendering and downloads. Your CSS framework might already have font smoothing embedded but take this opportunity to swap out your custom font for one your website download time will thank you for.
- Readability is key. No one likes an overstuffed page. Check to make sure your line-height properties have been adjusted in CSS. That extra space between your sentences will make reading your content more enjoyable for visitors.
- Finding the perfect font for your site does not have to be a drag. Again, no designer necessary. Sites like FontSquirrel.com can help you decide or the Google font library is a pretty good option if you are looking for quick and quality. Google offers you font pairing to help select complimentary fonts and they make implementation easy by generating the CSS/HTML link automatically once you have chosen the desired weight.
Enhance The Experience
Even the best-looking sites can turn a visitor off if they can’t find the information they came for. Consider implementing small changes to enhance their experience.
- If your site has a login area for a member’s site or course offering, don’t make your visitor scour the site to find it. Pop-up boxes have come a long way and when they are being used for the right reasons, visitors actually welcome them. You can design your own pop-up box by creating a div and playing around with elements like rounded or straight edges or borders. Take a chance at being unique with a round pop-up by setting your border-radius to 50%.
- When you don’t tell your visitors exactly where to go or what to do next, they guess. And usually, they guess wrong. Keep them from clicking around, and eventually away from your site, by having a useful footer on each page with contact information and a few quick links to the info they are most likely after.
- You have taken the time to fill your site with value-filled content. It’s only natural your visitors will want to print a page here and there. Don’t force them to print out an oddly formatted pdf. Instead, use this quick trick to create a unique id on the “print this page” button for no more oddly divided blog posts or service page print outs.
In the head section declare a print stylesheet for each page. Set the display to none in the CSS, like this: #print-button {display: none;}
Landing pages are the new black. Chances are you have at least one and that page redirects your mobile users to a different URL. Make your landing page a cache-able redirect and speed up the page load time for the users next visit. Use a 302 redirect that has a one day cache lifetime. This one isn’t exactly a design tip, but minimizing wait time is always in-style.