Let’s get one thing straight: web design is a challenge. There is a surplus of options when it comes to designing your web page: colors, font choices, spacing, layout, and sizing to name but a few. If you make changes to your own website through a content management system, there are a lot of things that can disrupt the chi of your website that your designer developed. The wrong combination of fonts, colors, and imagery can spell disaster to the most elegant of designs. Here are three great tips to help you avoid some common mistakes.
#1 – Leave the fonts and colors alone, please
Consistency throughout a website is very important to maintain a professional appearance in your web presence. Design elements such as colors, layout, and fonts, need to look the same from page to page. If your content management system allows you to change fonts and colors, ignore those features. Your web designer has given a lot of thought about these basic building blocks, and you’ve paid for his/her expertise. Why second guess his/her decisions?
You can avoid inadvertently making font and color changes if you…
#2 – Don’t copy and paste from Microsoft Word
…or almost any other program, for that matter. It’s an issue of compatibility. When you copy and paste from Word to PowerPoint or Excel, you don’t expect the same results, right? It’s the same when copying content from another program to your website. Whether it’s from Word, Publisher, or another website, you’re just asking for trouble when you copy and paste. Often, unseen bits of code get copied along with your text. This code might be ignored or filtered out by the content management system you are using, but sometimes it can cause some pretty crazy behavior, such as:
- Font types get changed
- Colors and sizing goes out of whack
- Elements get pushed out of place
- Text is centered when it should be aligned or justified
- Garbled looking code appears out of nowhere
There is better way to input text into your website. First, open a basic text editor (Notepad comes free with Windows). Copy and paste your text from Word, or any other program, into your Notepad. This will remove text formatting and any hidden code that might be hidden along with the content, slimming down your information to what you need: just the text. Next, copy the text from Notepad into your website.
But what if your Word document had photos that you wanted to add?
#3 – Resize your photos before you upload them to your website
There is a lot of terminology that gets tossed around when talking about image sizing and resolution, and I’d like to clear up one point of confusion.
You may have heard people say that your images should be 300DPI for print and 72DPI for web. The second part of that statement is a myth. For the web, the ONLY numbers you need to be concerned with are pixel dimensions. Take a look at the two images below. The image on the left is 72DPI (about 4 inches wide when printed), while the image on the right is 300DPI (about 1 inch wide when printed).
Penguins at 72DPI
Penguins at 300DPI
These images look exactly the same. That’s because both images have the same number of pixels (300×225).
The term DPI stands for “dots per inch.” A 300DPI image contains more pixels for every inch of printed space than in a 72DPI image. The 300DPI image above will print smaller than the 72DPI version, as more pixels are used up for every inch of printed space.
Whether that all makes much sense or not is beside the point, which is: you should be aware of how large your image is in pixels before you upload it. The best size will vary from website to website, depending upon the amount of space available on your web page. There are a few ways to determine a good size for your website. An easy way is by trial and error. Start by uploading an image roughly 500 pixels wide. This size will likely be too large or small, so resize your image until you find a comfortable size for your website.
Subscribe to our blog so you don’t miss my next post, where I’ll be explaining more in depth about how to optimize your images for the web.
