Allyson Stewart is a web designer who shares tutorials on creating websites and using office software at the beginner level at Dollar Templates and Fonts. She’s been in the web design industry for over a decade and is passionate about helping others work more efficiently.
Sometimes simplicity is key on a website. Tons of animations can slow down a page, turning visitors away from your amazing work of art. Don’t get me wrong. Animations have their place on some websites where a lot of movement is expected. When in doubt, design for the majority of your audience.
Spicing up a drab website is possible with a few, simple tricks. These six tips can help if you’re short on time or ideas, bringing you repeat visitors if you have great content to go with it.
Add Fast Loading Images.
Not only do images fill up empty areas, but they also make pages more attractive. You can use images to illustrate a tutorial or to liven up your text. Be sure to use images that relate to your content, however, rather than images that are off topic.
If you’re afraid of page load time, optimize your images beforehand. You don’t need to purchase a separate image editor to do the job. There are a number of free online editors that can optimize your images too.
When you link to the image, don’t forget to include alternate text. Alternate text describes the image within the code and is a must have for users with disabilities.
Use Color.
Have you ever noticed how color instantly changes your mood, whether it’s a piece of clothing or room in your home? The same is true for web pages. In fact, research shows that colors can liven up our mood or dampen it. The color blue, for example, is often used in business because it signifies stability, strength and trust.
You can use colors to your advantage on a website. To spice up your pages, add colors that represent your company and goals or the mood you want to stimulate. It’s important however, not to use too many colors on a web page.
Incorporate Bullets.
Bullets are a simple, but effective way to spice up your text. Thanks to CSS, a code that helps you format web pages, you can turn simple bullets into graphics. Bullets help you separate text on your page, drawing readers to a particular section you want to highlight.
On the other hand, bullets are only effective when used properly. Using bullets unnecessarily (just for the sake of adding them) defeats the purpose. Instead, apply the bullets to a list or specific area of your page. Indenting them also makes them more visible.
Add an Amazing Header.
The right header can do wonders for your website, and you only have to create it once. Since the header displays on every page, your creativity extends throughout the site. The possibilities are endless as far as design is concerned. Just be sure to add a header that works with your overall theme.
Include Headings and Subheadings.
Like bullets, headings and subheadings help people locate information more quickly. Additionally, they add variety to a page, giving the eyes a break.
If your web page includes lots of text, insert headings and subheadings above sections or related content. Instead of manually formatting every heading or subheading, put CSS to work. It’ll make your headings and subheadings consistent, so people can easily identify the sections on your website.
Eliminate Broken Links.
No one can help a few broken links here or there. Even if you check for broken links often, they have a way of creeping back in. If you have several broken links, however, you probably haven’t updated your website for a while. And your visitors can tell. In fact, too many of these can send your readers packing.
To improve the usability of your website, check for broken links and fix them periodically. You can use a broken link checker to scan your pages for any hidden links you may have missed. This saves you time if you don’t want to check the links manually.
In closing, sometimes it only takes a few changes to get your website back into shape. Most of these tricks apply to visual changes rather than background changes, but there are several more, too many to discuss in this post. If you’d like to share additional tricks you’ve either tried or observed, I’d love to hear your thoughts.
Related Posts:
- Website Marketing: Cardinal For Overall Growth of Business
- How To Get Tons of Visitors Within the First Month of Publishing a Website
- What Do I Need To Build My First Website?
- How Do I Generate Organic Traffic to an eCommerce website?
- Believing in bbPress – Simple Forum Software




















"You’re such a smart boy!" were his first accolades heard. So, it’s no wonder that this phrase became the title of his business, Smart Boy Designs.
Read more about Christian
{ 39 comments… read them below or add one }
All excellent points. The image loading thing can be huge. I need to check into that….
David W recently posted..Knowing When to Quit
Thanks, David. You’re right. Images do have a way of bogging down a web page, especially for those who have a slow Internet connection. I appreciate the comment.
Allyson
Ohhhhh I’d better pay more attention to tip # 6 – check broken links! Neat write up, thanks
Yes, those broken links can be something.
Thanks, Tia!
Allyson
Allyson Stewart recently posted..How to Create a Free Website Header in Photoshop
Twitter: wonderoftech
September 8, 2011 at 10:45 am
Hi Allyson, How lovely to visit Christian’s site and see your bright and shining face here! I find this topic fascinating because I am always trying to improve how my site looks. I agree, bullets, headings, etc. can not only make the site visually appealing, but can help a reader under
I have a question for you: when you’re adding headers and sub-headers, how do you distinguish them visually? As a newbie blogger, I used to use underlining until I realized that underlining should be restricted to links. So now I just use bold for headers, but that doesn’t leave me anything to distinguish sub-headers. Italics are reserved for emphasis, so what can I use for sub-headers?
Thanks for this awesome article!
Carolyn recently posted..Good-bye iPhone, Hello Android? Part 1
Hi, Carolyn. It’s so great to see you! And thanks for your kind words, comment and question.
You can use heading tags in HTML to format headers and sub-headers. Heading tags include , , , , and . The largest heading tag is the tag, which you can use for headers. It’s really large, however, so if you don’t want to mess with the CSS code, use an tag instead.
You can format your sub-headings with the tag if you’re not using it for your main headings, or use , , or .
So, to format headings on your WordPress blog, click the “HTML” tag and type the heading as:
heading text or
heading text
To format sub-headings, type it as follows:
sub-heading
And the good news is, these tags won’t italicize or underline your headings and subheadings, unless you format them that way with CSS.
Hope this helps. Let me know if you need additional direction. Take care and see you soon!
Allyson
Oops, Carolyn. Sorry, the HTML tags got lost in my reply, so I’m resubmitting them for readability:
The heading tags are as follows:
<h1>, <h2>, <h3>, <h4>, <h5> and <h6>
<h1> is largest and <h6> is smallest.
To format headings in WordPress, click the “HTML” tab and type your headings as follows:
<h1>heading text</h1> (OR)
<h2>heading text</h2>
To format subheadings, use:
<h2>subheading text if you’re not using this tag for your main headings</h2> (OR)
<h3>subheading text</h3> (OR)
one of the other heading tags.
Thanks,
Allyson
I agree…Optimizing images for fast loading is very important.
Serdar Kara recently posted..Simple Market Temasını Türkçeleştirdim
Thanks for the comment, Serdar. And it’s even better that we don’t need to purchase an image editor or go through a bunch of steps to optimize them, isn’t it?
Allyson
Allyson Stewart recently posted..CSS Font Style
Twitter: adriennesmith40
September 8, 2011 at 12:52 pm
Great tips Allyson and it’s great to actually SEE you girl! What a beautiful photo. It’s finally nice to put a face to our chatting.
As always, you continue to give us great information and I love your blog. You have taught me some neat things over there and you explain it so that a non-techie person can understand it. That’s what I love the most.
I have a question for you, not sure if you know the answer. When I put an imagine in my blog post, the image won’t appear when I add the link to other social networking sites such as Facebook. In other words, the link will only appear with no image. I use to host the image only on my blog but recently went back through and put them all on my server now thinking that was the problem. Unfortunately, it didn’t solve the problem because they still won’t appear. Any suggestions as to why that’s the case?
Thanks Allyson and again, great to see you here. Congrats on the guest post.
Adrienne
Hi, Adrienne.
It’s so great to see you here too. Thanks for reading my post. I appreciate your wonderful comment and compliment! This is actually my first guest post. Thanks to Christian for allowing me to share here.
As you know, I’m quite new to social networking sites, so I’m not exactly sure if this will make your images to display correctly.
If the social networking site allows you to use HTML, try this:
1. Right-click on the image on your blog and select “Copy Shortcut” (IE), “Copy image URL” (Chrome) or “Copy Link Location” (Firefox) from the pop-up menu. This copies the link address.
2. Go to the social networking site and insert the following code:
3. Replace “link-address” with the link you copied.
If that still doesn’t work, save the image from your blog onto your computer and then upload the image to Facebook or the social networking site to display it.
Hopefully, that works.
I also Googled your question. Apparently, a number of WordPress users are having the same problem. It has something to do with the publicize feature. You can read more about it at http://en.forums.wordpress.com/topic/publicize-feature-and-facebook-displaying-image-from-wp-on-fb.
So, if these steps don’t work, please give that a try. Timethief, one of the commenters, usually has a lot of great tips for WordPress blogs.
Please let me know if you still have problems displaying it. Take care, my friend. Great question.
Allyson
Twitter: adriennesmith40
September 12, 2011 at 6:42 pm
Thanks Allyson, I will definitely check this out.. I appreciate you taking the time to reply to me and I’m sorry I haven’t been back over here to see what you shared.
So happy to see you getting out on other blogs and will thank Christian for inviting you over. I love your stuff.
Adrienne
Adrienne recently posted..A Time For Remembrance And Appreciation
Any time. You’re very welcome, Adrienne. And thanks as well!! I truly appreciate Christian and his openheartedness.
I hope one of these steps work for you. I agree, it’s really frustrating when something stops working altogether. I’m not sure if the Publicize feature (in my previous link) is the problem, but you may give it a try. It seems that it’s used to display posts as well as images from WordPress. I also found this other link that might help: http://wordpress.org/support/topic/wp-29-thumbnail-sharing-on-facebook/page/2
Thanks again, Adrienne.
Twitter: smartboydesigns
September 8, 2011 at 2:47 pm
So when you post to Facebook – you’re not given that option to choose what photo you want displayed along with your post? Or is that not the problem?
Twitter: adriennesmith40
September 12, 2011 at 6:43 pm
I’m not given anything, I just get a link and nothing else. It just stopped working for me and it’s so frustrating. It’s not even showing that I have any images period. Urgh!!!
These are some great tips Allyson.
Definitely enjoyed them and agree with your points. These simple steps can definitely improve a blog post and make it more appealing to its readers.
Michael recently posted..8 Ways To Diversify Your Income Online & Make Serious Money Today
Thanks, Michael. I appreciate that.
Have a good one.
Allyson
Your welcome!
Michael recently posted..8 Ways To Diversify Your Income Online & Make Serious Money Today
Great to see you here! You make all great points. Optimizing photo is key. Nothing worse than seeing someone upload a full resolution photo. No need! Just slows down their website.
I used to not use subheadings but now I add them to every post. I know it’s better to break up long posts that I tend to write.
Great job Allyson!!
Benny recently posted..Is Your Brain Full of Crap or Full of Clean Water?
Twitter: smartboydesigns
September 8, 2011 at 5:16 pm
at one point I had sub-sub headings, but decided to simplify. lol
Good idea, Christian! It’s kinda hard to keep track of sub-sub headings after a while.
Hi, Benny. Great to see you here too! Thanks for your comment.
Unfortunately, I think some people simply don’t know about image optimization. Trying to spread the word. I definitely love your posts and layout. I like the fact that you use subheadings. You do a good job breaking your text into manageable pieces.
Thanks again and see you soon.
Allyson
Neat tips there Allyson. I usually refer to Pamela Wilson’s blog for design tips. Now I have another cool source for design ideas.
Eddie Gear recently posted..Bloggers With Attitude – S1P4
Thanks, Eddie! I appreciate that. I don’t think I’ve heard of Pamela Wilson before now. I’ll have to go look her up. Take care.
Allyson
Twitter: MatthewHooper
September 9, 2011 at 6:36 am
Great tips. Luckily for WordPress users there are two plugins that can help out. The first one is called “WP Smush.it” and it optimizes images for the web. The second one is called “Broken Link Checker” and, obviously, it lets you know when you have broken links on your site.
Keep up the good work!
Thanks, Matt! I appreciate you sharing those plugins too. WordPress “does” have lots of wonderful plugins that save us time. I use the “Broken Link Checker” plugin all the time, but I didn’t know about “WP Smush.it.” Nice!
Have a good one.
Allyson
Hi Allyson,
Thanks for the tips. My blog is super simple, which I like, but a bunch of other blogs seem to have a lot going on, which is cool too, but I’m glad to hear simplicity is on the list of your 6 simple website tricks. Check!
Thanks for sharing!
Chelsea Thomas recently posted..Social Media Interpretations
Hi, Chelsea. Thanks for stopping by to read my tips. I “do” love simplicity and the fact that you can make up for any missing elements with a few, minor changes. I appreciate your comment.
useful tips. Thanks for the same. plan to use some of them in my page design.
Thanks, Meeran! It’s so good to hear that you plan to incorporate some of these tips into your design. I’ll have to stop by your site to see the end results. Take care and have a good one.
Allyson
Hi Allyson,
I enjoyed reading your tips. Thank you and God Bless.
Respectfully,
Anna Taylor
Oh, thank you so much, Anna! I appreciate it. Have a good one and God bless.
Allyson
Thank you for the tips, Allyson!
I always try to make my images smaller in size so that they would load faster. But the loss in quality leaves a lot to desire, i’m still looking for a program that would suit my needs. The free editors kind of lack in image optimization.
Richard recently posted..How to Spray with the Paint Zoom Properly
Hi, Richard. Thanks so much for the comment.
Great job trying to optimize your images beforehand! You’re absolutely right. Quality sometimes gets lost in the process. Paid optimization tools like Photoshop and Fireworks actually let you optimize different parts of a sliced image based on the range of colors within it. This makes the image pretty decent afterwards.
I thought I’d list some free, quality image optimization tools you can try as well:
http://www.imageoptimizer.net/
http://www.smushit.com/
http://pixlr.com/
http://tools.dynamicdrive.com/imageoptimizer/
http://www.webresizer.com/resizer/
I hope they’ll prove helpful in future projects for you… They’re not as robust as the paid versions, but do a decent job with image optimization.
Thanks again have a good one.
Allyson
Allyson Stewart recently posted..How to Create a Gradient in Photoshop for Your Web Page
Thanks, Allyson! Some of those websites are new to me, hope i can find something close to the level of Photoshop.
Richard recently posted..Wagner 0525002 Power Painter Max Review
You’re welcome, Richard. Unfortunately, they’re not as detailed as Photoshop. I’m not sure if you’ve used Pixlr before, but it’s one of my favorites as far as free editors are concerned. It lets you customize the optimization settings before you save an image.
I also like Dynamic Drive and Webresizer. They have options that let you view the images in different optimization settings. You’ll just need to checkmark “show all results” at Dynamic Drive and “Compare Image Sizes” at the bottom of Webresizer’s page.
Hope that helps. Thanks!
Great Tips! Really you are doing good work. Keep it up.
New Media Guru NMG recently posted..New Media Guru NMG: Google +1 Button Coming to Web, Mobile Display Ads
Twitter: smartboydesigns
September 22, 2011 at 6:55 am
Glad it was helpful!
Thanks so much! Take care.