BAC Software Consulting

Web & Document Accessibility | Drupal | WordPress | Web Programming | Web Design

BAC Software Consulting Blog

Web Programming

How to Delete and Limit Post Revisions in WordPress

WordPress 2.6 and above has a new feature which is the posts and page revision. WordPress automatically creates revisions of your posts or pages. Whenever you save a post or a page, the old version is retained so you can revert back at any time. Older revisions are never deleted so you always have a full history of all changes. However, this feature causes your WP database to rapidly increase in size. Depending how active your blog is, revisions can seriously bloat your database with multiple copies of the same post. Each additional revision will slowly increase the size of your MySQL database.

Sometime it is necessary to do some cleanup. Every revision requires a separate record in wp_posts table and probably entries in the wp_term_taxonomy, wp_postmeta and wp_term_relationships tables. Removing older revisions will free up disk space.

Too many revisions stored in the database might cause longer query time. This means that your blog will load slower and your visitors may wait longer before the content loads. This also leads to high CPU or memory load on your Web hosting server. To my shock, I realized that in this blog I have anywhere from 9 to 47 unnecessary revisions per post/page. Wow!

Does reducing the database size, also speeds up your Website load time?

As you can see from the above image, removing old revisions is one of the best things you can do to your WordPress blog to keep it running efficiently. For a personal blog, many versions of the same post is a waste of resources. Excessive revisions will increase the burden on the database, slows down your WP admin area, your phpMyAdmin and may slow down the download time of your WP Website.

WP Revision Options

The WP_POST_REVISIONS constant has 3 options.

  1. true (default), -1: store every revision
  2. false, 0: do not store any revisions (except one for auto save)
  3. (int) > 0: store that many revisions (+1 auto save). Old revisions are automatically deleted.

Deleting Existing Revisions Using SQL command

Before we start, I am going to say this once: BACK UP YOUR DATABASE. You are about to run SQL statements to your WP database, and if you make a mistake you can revert back to your backup version.

To permanently delete all existing revisions for all pages and posts, login to your phpMyAdmin, select your WordPress database, click on the “SQL” button and paste the following code in the SQL command window. For a detailed explanation about SQL command1, the tutorial is in the References section at the end of this post.

SQL command1:

DELETE a,b,c
FROM wp_posts a
LEFT JOIN wp_term_relationships b ON ( a.ID = b.object_id)
LEFT JOIN wp_postmeta c ON ( a.ID = c.post_id )
LEFT JOIN wp_term_taxonomy d ON ( b.term_taxonomy_id = d.term_taxonomy_id)
WHERE a.post_type = 'revision'
AND d.taxonomy != 'link_category';

My WP Database After Executing SQL command1

After executing SQL command1I noticed that NOT all stored revisions are deleted in the my WP database. Checking the post_type field in the wp_posts table, I noticed that there are still many “history” data that have not been removed. It seems that the above code still leaves some traces behind. This brings me to the execution of the next SQL command2.

To better explain, the wp_posts table has a field named post_type. This field can have many values, such as post, page or revision. When we want to get rid of all revisions, we run a SQL command to delete any entry in the wp_posts table in which the post_type field is equal to revision.

Again, in your phpMyAdmin area, click on the “SQL” button, and paste the following code in the SQL command window, and hit Go.

SQL command2:

DELETE FROM wp_posts WHERE post_type = 'revision';

My WP Database After Executing SQL command2

Now after executing SQL command2, all previously saved revisions stored in the WP database are totally removed. There are no orphaned data left in the database.

The following table shows my WP database before and after executing SQL command1 and then SQL command2.

 table: wp_posts
(Records)		table: wp_postmeta
(Records)		table: wp_term_relationships
(Records)		Database size
(KB)		Database reduced by:
(Compared to Baseline)
Baseline
(Before Executing the SQL commands)		7892154947,558n/a
After Executing SQL command14162151214,99333.93%
After Executing SQL command24421512150993.26%

Wow! After executing SQL command1 and then SQL command2, the size of the database has been reduced by 93.26%, and the wp_posts table has now 44 records down from 789 records originally. That would tell you how much the WP revision feature can accumulate unnecessary records in the database. Now the question that comes to mind is how to prevent or at least limit the number of revisions in WordPress?

Disable or Limit Revision feature in WordPress

To Disable WordPress Post Revisions:

You can turn off post/page revision feature by editing your wp-config.php file located in your WordPress root directory. Simply add the following code at the top of the wp-config.php file:

//Turn OFF WP revisions feature. 
define('WP_POST_REVISIONS', false);

You could put the code above anywhere at the beginning of the config file as long as it is inside the opening PHP tag (<?php)

To Limit WordPress Post Revisions:

Alternatively, you can use a positive integer to limit the number of revisions.

//Limit WP revisions. Value can be any positive integer number.
//Create a maximum of 2 revisions, plus one for auto-save.
define('WP_POST_REVISIONS', 2);

What About Website Loading Speed?

After the size of the database has been significantly reduced (93% in my case), I noticed that:

  1. WordPress administration area is faster to load and to respond to user requests.
  2. phpMyAdmin area, where the WP database reside, is faster to respond to user requests.

But the biggest question I have: Did deleting WordPress post and page revisions have any impact on this Blog loading speed?

Does Deleting Post and Page Revisions Speed up Your WordPress Website?

I would say that the improvement of this blog´s download time is statistically insignificant. What remains to be seen is that if you have a much larger database with hundreds of posts, would that make a significant difference?

Web Development

DoFollow Versus NoFollow What to Choose for Your Website?

DoFollow and NoFollow are important factors for SEO that influence the ranking of a particular Website in search engines. DoFollow is a term that does not exist. It is a term given to Websites that are not using the rel=“nofollow” attribute in links. nofollow is a value that can be assigned to the rel attribute of the HTML link to instruct some search engines not to pass on any influence to an outbound link. NoFollow and DoFollow control how a Website passes its PageRank or link juice to other links.

Although search engines don´t pass along the link juice (or let PageRank flow) they still follow and index these links. The nofollow value is not meant for preventing content from being indexed by search engines.

What Exactly is NoFollow?

NoFollow (rel=“nofollow”) means that PageRank or Link juice will NOT be passed to a link. It tells major Search Engines, especially Googlebot, that this link can be followed, the linked page is crawled and indexed, but the PageRank score will not be taken into account.

The attribute that defines a link as NoFollow is rel=“nofollow”.

A typical NoFollow link is like this:

<a rel="nofollow" href="https://bacsoftwareconsulting.com/" title="">BAC</a>

What Exactly is DoFollow?

DoFollow is the exact opposite of NoFollow. A DoFollow link will let your PageRank flow to all external and internal links. When you remove the rel=“nofollow” attribute from a link, then the link becomes DoFollow. The absence of the nofollow value makes the link a DoFollow. Search Engines robots, especially Googlebot, will crawl the link, index it and the PageRank score will be taken into account.

A typical DoFollow link is like this:

<a href="https://bacsoftwareconsulting.com/" title="">BAC</a>

How Do I Know if a Website is Using NoFollow?

There are 2 ways to check:

  1. View the Source code: Highlight the link that you want to check and view the source code of the Webpage. There are several ways to To view the page source depending on the browser you use. You could either select “source” from your browser´s menu or you could right click on the page to view the source from the context menu.
  2. Use an Add-On: Mozilla Firefox and Google Chrome browsers have add-ons that highlight a NoFollow link on a Webpage without actually looking at the source code.

Advantages of rel=“nofollow” Attribute

  1. Minimize Comment Spam: Especially the comment spam that is manually filled by real users once they know that your Website is DoFollow. Automatic spam will not be affected. Robots that submit spam will not check your link status.
  2. Not Passing on Your PageRank:You might not want to pass your PageRank to Websites that are completely unrelated to your field, as this, with time, may cause your PageRank score to go down.
  3. The overall PageRank of your Website is preserved.

Disadvantages of rel=“nofollow” Attribute

  1. You will not attract more visitors to comment on your Website, thus getting less traffic.
  2. Without improving popularity, you may not get inbound links to your Website. Thus your PageRank will not improve.
  3. Less traffic, means less clicks to any advertisements you have on your Website, and thus less earnings.

Where Should I use rel=“nofollow” Attribute

Use the rel=“nofollow” attribute whenever you don´t want to pass your link juice. Regardless what you read otherwise, never add nofollow to any internal pages of your Website. Here are some scenarios when to use NoFollow:

  1. Use NoFollow for single pages that has more than 100 links. For example, a resource page having several hundred links.
  2. Use NoFollow for Trust Badges: like the Better Business Bureau and VeriSign, you can add rel=“nofollow” to those links.
  3. Use NoFollow for your RSS feed. This ensures that your RSS feed isn´t indexed before your Website.
  4. Use NoFollow when linking to any “questionable” and untrusted Websites.
  5. Use NoFollow for mega Websites and Social Networks such as: Facebook, Gmail, Adsense, etc.
  6. Use NoFollow if you link to Web browsers such as Mozilla and Chrome.
  7. Use NoFollow for paid advertising. If you sell advertisement space on your Website, those ads should always have a rel=“nofollow” attribute inserted in the Link.
  8. Use NoFollow for affiliate links.

Is NoFollow a Bad Thing?

No not necessarily, consider the following: The NoFollow links might have no effect on PageRank but they still refer real people. As long as “real visitors” can follow the links, that´s great. Eventhough you do not get link juice from the NoFollow links, you still get real visitors.

NoFollow isn´t bad. There´s nothing wrong with getting NoFollow links. While they don´t pass link juice, they do help associate your Website with anchor text.

Advantages of DoFollow

The advantages of adding DoFollow links on your Website are:

  1. You will attract more visitors especially for comments, thus getting more traffic, exposure and popularity.
  2. With an increase in popularity, you may get more inbound links to your Website, which helps your PageRank to increase.
  3. The increase in traffic may also increase your revenue from affiliate programs and other advertisements.

Disadvantages of DoFollow

  1. The PageRank of your Webpage will be passed to external links. The overall PageRank can be reduced.
  2. However, you can offset the decrease of your PageRank by attracting more inbound links.
  3. You get an increase of spam Comments, which require extra time and efforts from your side.

Which Links Should be Set as DoFollow?

To reemphasize, the non-existence of the rel=“nofollow” attribute, means that the link is DoFollow. Links that should be kept DoFollow are:

  1. All Internal Links. Internal links will help spiders crawl your pages more deeply and they will get indexed often.
  2. For a blog, links pointing to posts should be kept DoFollow.
  3. Niche links can be DoFollow. Always give a link to a Website that shares the same content as yours.

Why Blog Owners Abandon DoFollow?

The answer is simple Comment spam. Spam does not have to be automated. A person can leave just as many worthless comments as software just to get link juice. For every person who takes the time to make a genuine comment, there are several who do the following:

  1. Leave a trivial comment.
  2. Leave a short summary of the Post.
  3. Leave a flat out spam comment unrelated to the topic.
  4. Leave spam comments on several posts in one session.

Conclusion

  1. Ultimately, as long you keep providing great content and services that people want, your Website will grow.
  2. Whatever your decision is, just remember that one “authoritative” link can be more effective than several low level links.
  3. You can build relationships through commenting. Leaving thoughtful comments is a good way to start a relationship with an influential blogger in your field.
  4. Remember that DoFollow blogs are giving you link juice in exchange for your quality comments. So, be considerate. If you post junk comments, blog owners will get tired of moderating and taken advantage of, and will eventually turn NoFollow back on.

So What would I choose? The best approach is to use a mixture of DoFollow AND NoFollow links.

Web Development

A Closer Look At HTML Versions

HTML has evolved into one of the most used and highly recommended markup languages. Web developers, both amateurs as well as professionals have tremendously benefited from the emergence of HTML. The frequent release of different HTML versions reflects the growing popularity of the language. Through this post, I will be familiarizing you with different versions of HTML which have created a wave in the world of web development. So, let’s examine each of these HTML versions closely.

1. First Version – HTML

Well, the very first version of HTML didn’t come with a number. IT was just called “HTML” and was solely used for creating simple web pages. Marking its use way back in 1989-1995, this first version of HTML was later standardized by IETF and numbered as “HTML 2.0”(explained under point no.2 below).

2. Second Version – HTML 2.0

Considered as the very first definitive HTML version, the initial draft of HTML 2.0 was being re-written and revamped by Karen Muldrow in July 1994. After this, it was being presented at an IETF meeting in Toronto. The sole purpose of this draft was to capture the most common HTML practice in web browsers. Some of the features absent in HTML 2.0 include: support for tables or ALIGN attributes, Netscape/Microsoft extensions etc.

3. Third version – HTML 3

Released back in late 1995, HTML 3 was a result of the tireless efforts put in by Dave Raggett who was inclined on upgrading the features and utility of HTML. Although this version was never implemented, a majority of its features were being integrated in HTML’s next official version which was known as HTML 3.2.

Version 3.2 of HTML came equipped with an integrated support for images, Tables, heading and a variety of element ALIGN attributes. Serving as the current “universal” dialect, HTML 3.2 could be understood by all the major browsers. However, some features which went missing in HTML 3.2 comprised of EMBED, FRAMES and APPLET. This HTML version was being presented by World Wide Web Consortium (W3C) in the year 1997. Published in January 1997, HTML 3.2 included attribute alignment, tables, headings, images and a lot more.

4. Fourth Version – HTML 4.0

Considered as the next major release of HTML, version 4.0 was introduced in December 1997. As an extension to its existing feature set comprising of multimedia, text and hyperlink, this version of HTML included advanced multimedia options, style sheets, scripting languages, improved printing facilities and documents, which are accessible to users with specific disabilities. This version of HTML has also taken stride towards the internationalization of documents, with the sole aim of ensuring maximum evolution of the World Wide Web.

HTML 4.01

Yet considered as another official release of HTML, the version 4.01 includes support for a majority of extensions in addition to features such as extra TABLE, JavaScript enhancements, support for internationalized documents, FORMS and Cascading Style Sheets. Released in December 1999, HTML 4.01 was being presumed to be replaced by a brand new language called XHTML-Extensible HyperText Markup Language. Recognized by all the modern browsers, HTML 4.01 serves as the perfect option for building an intranet where the browsers support just the 3.2 or 4.0 tags. W3C has always been recommending that authors and user agents prefer producing HTML 4.01 documents instead of HTML 4.0 documents. In addition to this, W3C also recommends that the authors must generate HTML 4 documents instead of HTML 3.2 documents. Last, but definitely not the least, W3C recommends that all the tools which are interpreting HTML 4 must continue supporting both, HTML 2.0 and HTML 3.2.

5. Fifth Version – HTML 5

Assumed to be the last HTML version, HTML 5 was released in January 2008 and was published as a W3C Recommendation on October 2014. Equipped with its own HTML serialization, HTML 5 has a syntax which reminds us of the very popular SGML syntax. Plus, this HTML Version also comprises of an XML that’s based on XHTML5 serialization. Although HTML5 isn’t fully supported by some older browsers, there are polyfills which can easily use JavaScript for making specific features work in these browsers. For instance, html5shiv uses JavaScript for allowing older IE (Internet Explorer) versions to recognize and style specific HTML elements.

Conclusion

So now that you know all the different versions of HTML, it is up to you to make a wise choice in accordance to your requirements. Hope the information provided above would enlighten you to take a good decision.

Web Development

5 ways to Enhance User Experience

Today where internet is flooded with many options for web users, online businesses has changed their motive to keep their visitors interested rather than increasing sales. The better the user experience on the website, the better the chances of growing in the market. In order to make your online business a big hit, it is important to make your website user-friendly.

What is considered for making a website user-friendly? Is it the amount of information we offer on our website? Or how beautiful it looks? Though these two are considered important, there are many other factors that will definitely persuade your visitors in a positive way.

Here are 5 ways to enhance User Experience for your website:

But First, What is User Experience?

According to Wikipedia: User experience (UX) involves a person’s emotions about using a particular product, system or service. User experience includes the practical, experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership. Additionally, it includes a person’s perceptions of system aspects such as utility, ease of use and efficiency.

1. Implement Responsive Design

Responsive web design has been creating a buzz since its introduction. You probably have seen many websites making use of this new technology to drive more traffic to their website. Responsive design is no longer an option; it has become the need of the hour. Whether you already have an online presence or planning to build one, responsive layout is not something you can overlook in today’s world.
Responsive layout is a website design approach intended to craft websites to offer the best possible viewing experience to the user — easy navigation and reading with a minimum of scrolling, panning and resizing — over a wide range of platforms (from personal computers to smartphones).

2. Add Interactive Elements

Nearly every business is user-oriented. As they say “customer is king”, getting the attention of your visitors in the first few seconds is necessary to keep them interested in your site. Presenting interactive elements in front of your visitors gives them an opportunity to communicate with the site directly. Don’t make them wait for something they badly want, instead try to offer them options that address their needs. You can add infographics, a combination of content, images, videos, colors and movements, to make your content more interesting.

3. Get Feedback from your Visitors

Feedback is a great way to improve your website and services. You can either create one feedback page or simply make use of third party tools to get the valuable feedback on your website structure, design, page loading speed and appearance from your visitors. You can even install certain WordPress plugins like YOP Poll, Opinion stage, and Feedweb to know your visitors reviews.

4. Keep Social Media Registration Options

Nobody likes to register to a website. Adding social media registration option such as twitter, Facebook, and Google+ makes it easier for visitors to register and read your valuable content. You can even add Disqus and Facebook comments option to improve user interaction on your website.

5. Don’t use Newsletter Signup Pop-up

Let’s face it; we hate it when pop up comes up now and then while reading something on the site. These newsletter pop ups literally suck! I get it, you just want to produce some sales leads but it only increases the bounce rate of your website. Believe me, don’t ever use it. It is just not worth the time and effort!

Bonus! Other Techniques to Enhance User Experience

There are many more techniques to enhance User Experience (User Experience for the Web (WebUX) is a field on its own), such as:

  • Use a Consistent Design.
  • Optimize Graphical Elements.
  • Easy and Intuitive Navigational Structure.
  • Provide a Search Mechanism.
  • Short (to the Point) Registration Forms.
  • Place Important Information above the fold.
  • Use Breadcrumb Navigation.
WordPress Tip: How To Exclude Pages From wp_nav_menu Function

WordPress

WordPress Tip: How To Exclude Pages From wp_nav_menu Function

In this tutorial, I will show you how to exclude certain pages from the navigation menu when using the wp_nav_menu() function in WordPress. The wp_nav_menu() function is usually located in the header.php file in your theme´s folder.

To my surprise, I discovered that the wp_nav_menu() does not contain “exclude” as one of its parameters. So in this case, how to prevent certain pages from showing up in the menu?

The wp_nav_menu() purpose is to display the navigation menu created in WordPress dashboard in Appearance › Menus panel if a menu is set there, and with a fall back scenario if it is not.

How to exclude pages that you don´t want to show in the Navigation Menu? This is where this tutorial helps. This tutorial applies to any WordPress theme that uses the wp_nav_menu() function.

Real Example | WordPress Twenty Eleven Theme

To give you an example. One of the popular WordPress themes is Twenty Eleven.

Below is the original code of the header.php file of the Twenty Eleven theme (Version 1.3). Many unrelated sections of the code are removed for brevity.

CODE-x: Original header.php File :: Twenty Eleven Theme (Version 1.3)

Note: To scroll within the code, you can also click on the code window and use your keyboard´s arrow keys.

<?php
/**
 * The Header for our theme.
 * Displays all of the <head> section and everything up till <div id="main">
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
 
<!-- CODE REMOVED FOR BREVITY, by Boutros AbiChedid. -->
 
<?php /* Our navigation menu.  If one isn&acute;t filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
 
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
                         
<!-- CODE REMOVED FOR BREVITY, by Boutros AbiChedid. -->
 
<div id="main">

CODE-x Notes:

For the purpose of this tutorial, the most important statement is line 15 of CODE-x.

The wp_nav_menu() works on WordPress 3.0 and above. I hope you will always upgrade to the latest version.

Also WordPress Twenty Ten theme (Version 1.3) uses the same wp_nav_menu() function but with different arguments. More on that later.

Code Reference: wp_nav_menu()

Result of Twenty Eleven Theme Using CODE-x

The image below, shows how the Menu appear for this Blog when I use the Twenty Eleven theme without any modifications to the wp_nav_menu():

But, I don´t Want to Show Certain Pages in the Menu. What Should I do?

To exclude certain pages from the navigation menu, you need to add the “exclude” argument to the wp_nav_menu() function as shown in the code below. This works, even though the exclude parameter is not one of the parameters listed in wp_nav_menu() function.

You have the option to exclude pages from your Menu, by changing line 15 of CODE-x. For instance, I wanted to exclude 3 pages from the menu; thus I replaced line 15 of CODE-x with the following line (Line-xM).

Line-xM

//Replace line 15 of <em>CODE-x</em> with the following line:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'exclude' => '859,889,1031') ); ?>

Note: The numbers 859, 889 and 1031, are separated by commas, and are 3 page IDs on this blog, you need to replace these numbers with yours. If you don´t know how to find the Page ID, read my previous tutorial on How To Find the Page ID.

Result of Twenty Eleven Theme When Using Line-xM

The image below, shows how the Menu appear for this Blog when I use the Twenty Eleven theme when modifying the wp_nav_menu() (using Line-xM):

If you want to exclude just one page from the Menu, then replace line 15 of CODE-x with the following line:

//Replace line 15 of <em>CODE-x</em> with the following line:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'exclude' => '859') ); ?>

I am Using WordPress Twenty Ten Theme. Can you Help me With That?

Sure I can! Open the header.php file located in your theme´s folder and find the wp_nav_menu function. For instance for Version 1.3 of Twenty Ten theme, the statement that you will be replacing is line 12 of the following code:

CODE-y: Original header.php File :: Twenty Ten Theme (Version 1.3)

<?php
/**
 * The Header for our theme.
 * Displays all of the <head> section and everything up till <div id="main">
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>
 
<!-- CODE REMOVED FOR BREVITY, by Boutros AbiChedid. -->
 
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

 
<div id="main">

Depending of what you need to do: You have the option to exclude pages from your Menu, by changing line 12 of the CODE-y. For instance, I wanted to exclude 3 pages from the menu, then I replaced line 12 of CODE-y with the following line:

//Replace line 12 of <em>CODE-y</em> with the following line:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary',  'exclude' => '859,889,1031')); ?>

Note: The numbers 859, 889 and 1031, are separated by commas, and are 3 page IDs on this blog, you need to replace these numbers with yours.

If you want to exclude just one page from the Menu, then replace line 12 of CODE-y with the following line

//Replace line 12 of <em>CODE-y</em> with the following line:

//Replace line 12 of <em>CODE-y</em> with the following line:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary',  'exclude' => '859')); ?>

Note: The number 859 is a page ID on this blog, you need to replace this number with yours. If you don´t know how to find the Page ID, read this tutorial on How To Find the Page ID.

Your Turn to Talk

Now you know what to do if you want to exclude certain pages from the wp_nav_menu() output. If your theme is using the wp_nav_menu() function and you don´t want certain pages from showing up in your menu, you know what to do.

This tutorial applies to any WordPress theme that uses the wp_nav_menu() function to display the navigation menu. The exclude parameter can still be used, even though it is not listed as one of the parameters in the WordPress Codex.

Web Design

7 Creative and Remarkable Website Footers Design for Inspiration

Designing creative footer design is sophisticated and complex process in order to make the Website design as successful and efficient as possible. Although the footer of a Website always appears at the last of the web page, it can´t be neglected.

Effective footer design can help creating an impressive and long-lasting impression. Hence, a well-managed and designed footer can certainly grab visitor´s attention towards your website.

In this post, we are going to present the most innovative and stunning examples of websites, showcasing their inspiration and powerful footer designs. These designs can prove how effectively website footer utilizes and provides an extra bit in order to enhance the user´s experience.

43 folders

This footer design is creative to reach to the next level, not having professional look with complete information. It combines different aspects of web design, but the problem there is no contact detail available on site. The contact link at the footer directs you to another page in another website. This approach can frustrates visitors. Therefore, you need to work better on footer design.

Mecannical

Wow! This is an outstanding and creative footer design for those who love funny things. Contact and feedback option is also available with a send button. In the right side of footer, some links like home, testimonial, about, portfolio appear. This footer design is creative design, but not professional.

Seesparkbox

This website provides two different versions of footer design: a shorter and longer versions. You can switch with the help of single click to see the big view of footer.

Green Woods Country Club

This is cool design with green background, reddish and white font color of content. The negative thing with that site is: there are no sitemap, phone number or other essential links at the footer. You need to do some hard work with the footer design to make it effective and innovative.

Carsonified

This is another unique way to separate the footer of web page from the rest of the design. Black color background is used for the complete web page. The contact information and address is also available with links. As a developer, these types of designs are not in demand.

Meomi

The footer design of Meomi website can attract kids and cartoon website designers. All the information is incorporated on this page in a well-organized way like content, images, layout for children.

Bristol Archive Records

This footer is visually alluring to attract visitors and provide valuable information with the help of links.

Your Turn to Talk

What do you think about these 7 Creative Website Footers? hopefully, you liked this amazing collection of footer design. Do you have other Website footer designs you like?