Pricing and signup page is the key factor to your sales. Pricing pages normally give details on various packages/options and the differences within them. They are there to make visitors clear about the product. Therefore, the design of the pricing page is very important.
Modern sites for web applications, web services and web hosting providers tend to decorate their pricing and signup pages attractive as possible. Tables are being used to compare and shows the various options available. Table is good for comparison purpose and it helps potential customers to make better decision.
Different approaches are being implemented on pricing page. Here, we are going to look into some of the creative approaches for pricing page and product comparison table designs. Also, we will be discussing about tips and advices for designing a creative pricing page. Let’s start with the tips & advices. After all, we will proceed to the showcase.
1. Comparison Tables With Detailed Feature
If you are offering multiple options for your product, and there are significant differences within each package, it is advisable to have a table and clearly list down the detailed features and differences within them.
The table should helps users spot the differences and help them to make decision.
Example: Expression Engine
Expression Engine has three different type of packages: Core(free), Personal and Commercial. The pricing table clearly explains the modules included, and also term of use for each option.
(more…)
Transparency in Internet Explorer is always a big issue for all Web Designers. There are a lot of compatibility problems with Internet Explorer 6. We have to design our website base on Firefox/Opera/Chrome, and then try it with Internet Explorer.
One of the major concern about IE6 is the transparency problem. IE6 can’t render transparent PNG image properly. As the result, your transparent and glassy design will become messy in IE6.
Luckily, there are a few solutions which can help web designer overcome the IE6 transparency problem. Each of them uses different method. Today, we are going to briefly look into these 6 methods. Please read the documentation while you are considering which method to use.
This solution requires jQuery and ables to work with CSS Backgrounds. To use this method, simple add both jQuery and pngFix plugin at your header section and then activate pngFix on document.ready.
(more…)
December 13th, 2009 in
Tutorial,
Wordpress |
6 Comments
It’s amazing that in my own non-scientific poll, half of those who work in some technology field still get the term hacker confused. A hacker is not someone who is leering in cyberspace ready to infiltrate their unsuspecting victim’s computer and pillage any information of use from its hard drive. A hacker is someone who looks for ways to manipulate things to make them work better. So when I speak of hacks for WordPress, I am looking at ways to change the code to make the application work better for us, not how to scrape content or steal log in information.
Hacks vs. Plug-ins
There are many different plug-ins available to help manage content on a WordPress blog so why would we want to mess with the code?
For starters, getting our hands dirty with the code of WordPress gives us a much better insight as to how the software works. As we become more comfortable with the source that powers our blog, we gain a better understanding of how to secure it from malicious attacks.
A second reason to avoid turning to a plug-in as a first resort is that an accumulation of plug-ins causes your blog to become bloated. Eventually, this bloat may begin to affect the way your blog loads and delivers to your audience.
Finally, if you pride yourself on going green or you just want to do what you can for the environment, you may be interested to know that code bloat can unnecessarily burden your server’s CPU. Making your server work harder uses more energy. Cooling a hard working CPU uses even more energy. Reducing code bloat saves energy.
Instead of relying on plug-ins, we are going to look at a few hacks that can help better manage a blog’s content. Each one of these hacks requires a bit of PHP knowledge and the ability to upload to your server.
(more…)
November 30th, 2009 in
Photoshop,
Tutorial |
28 Comments
We use posters at a lot of places. For example, we have posters for movies, games, events and books. Photoshop is a great application for poster design. With the help of Photoshop actions, filters, powerful features and tutorials from community, we can easily create beautiful poster.
If you are looking for tutorial to design your poster, then you had came to the right place. Today, we are going to share 50+ awesome Photoshop tutorials for designing and creating poster.
(more…)
October 16th, 2009 in
PHP,
Tutorial |
21 Comments
PHP is undoubtedly one of the preferred development methods chosen by many to create dynamic web pages. As contents get bigger, there is a real need to manage our PHP codes so that it runs faster. Unfortunately for many beginners, designers and enthusiasts, making PHP codes run faster requires intricate knowledge of the overall infrastructure around PHP. It could be your Apache settings, your operating system, or even the memory of your machine.
But we can start from somewhere. Here are 7 areas of your own PHP code that you can modify for performance.
PHP static Keyword
Usage of the static keyword on functions is often programmer’s first choice for optimization. It allows methods within a PHP class to be accessed without the need to instantiate it.
<?php
class Foo {
public static function staticMethod() {
// put codes here
}
}
Foo::staticMethod();
?>
The process of instantiating an object is always expensive and as we can see here, the function staticMethod() can be called without creating a new Foo object. This optimization could lead almost up to 4 times speed improvement.
(more…)
Delicious is the most popular social bookmarking service. If you pay attention on WDB, then you may notice that most of WDB’s articles are being saved more than 100 times by Delicious users.
There are a lot of ways for you to display your Delicious saved counts. But today we are going to show you how to use Delicious API together with Wordpress custom field to save and display the Delicious saved counts.
What you need to know before start writing the code?
- MD5 – You need the URL’s Md5 hash value in order to lookup its Delicious saved counts. You can read more by reading the PHP md5() function.
- serialize() and unserialize(). We will need to serialize the data before storing to the database, and then unserialize them after retrieve from database.
- Custom field. We use the custom field to store the Delicious saved counts to the database. By saving the Delicious saved counts to the database, we can reduce the number of calls to Delicious’s API and also drastically speed up your post loading speed. Imagine, if you have 1k visitors per hour, then you will have 1000 requests sent to Delicious per hour. So, we have to save the counts in our database in order to reduce our server load too.
(more…)
News Ticker is a fantastic way to present headlines or minor updates to your readers. The smooth scrolling effect will attract your readers and generate more clicks to your site. I am writing this tutorial as there are readers ask about this after they read my tutorial about content slider.
There are a lot of great tutorials discussing on how to implement news ticker, however most of the tutorials that i found are not really suitable for a beginner. So, i decided to use jQuery and its plugin jCarousel Lite to create a simple yet powerful news ticker.
Why i choose jCarousel Lite? it is because jCarousel Lite is a tiny but powerful plugin. Furthermore, you can easily tweak/configure it to achieve different effects. News ticker is just a sample application for this plugin.
Let’s start to create our news ticker using jCarousel Lite. Download both jQuery and jCarousel Lite before we can start.
Step 1
Let’s create a blank index.htm file, and include jQuery and jCarousel Lite. Also, create a blank style.css file for later use.
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="jcarousellite_1.0.1c4.js" type="text/javascript"></script>
</head>
</html>
(more…)
May 16th, 2009 in
Tutorial |
182 Comments
There are a lot of free scripts to create a content slider. One of the example is SmoothGallery by JonDesign. But, if you are using jQuery and don’t want to install another JavaScript library, then you may need to consider jQuery slider plugin.
Today, i am going to provide a tutorial on using jFlow, a minimalist jQuery plugin to create a content slider. Readers are required to have basic XHTML/CSS and JavaScript skills. I will provide a download link after this tutorial. This is the first tutorial post on WebDesignBooth, and i will write more tutorials in future.
So, let’s start to create our content-slider now. Download both jQuery and jFlow before you proceed.
- Create a style.css file, and insert the following code into the file:
#jFlowSlide{ background:#DBF3FD; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#3AB7FF; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }
.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }
.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }
(more…)
