Archive for April, 2015

|

Blunders You Should Not Make As a Web Designer

Tuesday, April 21st, 2015

Many websites leave a very bad impression in front of their visitors. Even the most seasoned designer can often mess up with things. Irrespective of how proficient designer we are or claim to be, the truth is, the majority of us are still making mistakes and inferior design choices. Web designing is a relatively young field, and most of the designing agencies are too busy working for their clients thereby failing to upkeep their skills and learning something new. Getting yourself acquainted with the latest trends and designing practices is fundamental to steer clear slip-ups that hinder a website performance.

In this post, I have compiled a list of some common mistakes web designers often make while creating a website. Go through them carefully to design a website that does stand out and at the same time practical enough to provide a pleasurable user experience.

So, let’s look at them in detail:

1. Stop using flash

Your website using Flash? Oh really! Your visitor’s head is soon going to explode. We have crossed the time when flash was the only alternative we had to render media content, today it’s HTML5 which can do even more than that. Web designers should stop using flash, right now. A website built using flash isn’t mobile friendly as well, so killing your mobile presence. In addition, getting a flash-oriented website at the top of search engines is a fiddly process. HTML pages are getting indexed, but not flash. This is a major reason why you should not use it. In fact, audio and video presentation can be annoying for some viewers.

2. Not understanding the target audience

Designers often overlook putting efforts understanding their target audience and their needs. Successful web designs must create a “wow” factor and connect visitors emotionally. But, this can only be achieved if designers put efforts understanding what is that pique their audience interest and encourage them to explore a website. Once you gain the knowledge about your target audience, you can start your work right off the bat. Consider the collected data collected through research seriously. Your design can be based on demographics, for instance- if your target audience is older people, then it’d be nice to choose large and clear fonts. Whereas if the target audience is young, then make your design more energetic and bright.

3. Your website is not mobile friendly

When commencing a web design, target mobile first, and then scale your design accordingly. Making sure your design looks graceful on small screens helps you target mobile customers effectively. Designing for website is necessary, of course, but you have to think about content in terms of mobile as well. “mobile-first” is an approach that’s all trending in, these days, and avoiding it can kill your business. According to the research conducted by the Pew Research Center , 64% adults use Smartphones mainly for shopping purpose. So, if you are designing a shopping website, consider designing it responsively to target mobile shoppers. If you site can’t fit into small screens, you are soon going to lose a large chunk of users immediately.

4. Broken social media links

Social media has gained a lot of momentum over the years and has come a long way to make a business stand out in a digital space. Making your social media ineffective can negatively affect your business in a long run. And broken social media links can be harmful for your brand. Broken links can annoy your visitors as they find it difficult to know more about your products and services, thus preventing them to ‘Like’ or ‘Follow’ your social media page.

5. Online contact form that doesn’t provide confirmation receipt

A nicely designed contact form is a gateway to connect with your prospective customers or clients. We advise you to keep it minimal, clear, and easy to understand. A user-friendly contact form has the ability to invite more customers and boost your leads. Keep questions simple; you can also ask them reasons to contact you. Whether they want to do business with you, or just contacting you generally. Also, make sure to provide them a confirmation receipt when they are done providing the necessary details to build trust and loyalty. Giving feedback is a nice approach to make them feel that there are real people behind the website and it is legit as well.

Putting all things together

Web designing is an industry that has come a long way to become an important part of web world. To design a great looking website, it’s crucial to think about users, their changing expectations, and latest tools to keep yourself updated. It is vital for any serious web designers. Mistakes can be detrimental for your business and avoiding them is the only way to stay above the web presence.

Author Bio:

Jack Calder is a expert professional in Markupcloud Ltd, a top notch- psd to html company. Jack is a enthusiastic lover of new technologies and he always shares his knowledge on the web with others regarding the new technological trends in the market.

Tags: ,
Posted in Articles | No Comments »

Planning To Design An E-store? 15 Mistakes You Must Be Wary Of

Monday, April 6th, 2015

Internet undoubtedly serves as an excellent platform for selling products and services to a wider group of audience. With your online store open for the public on a 24/7 basis, you can expect a visible growth in your overall profit rate. So, if you too have been tempted by the multiple possibilities available with an e-store and want to create one, then this is a blog that will tell you all. Here, you’ll find a list of 15 common mistakes that need to be taken into account while building an e-commerce store for sky-rocketing your business growth. So, let’s take a closer look at these mistakes.

Planning To Design an e-store?

Planning To Design an e-store?

1. Lack of vital details within the product description
Since the element is interaction is completely removed in case of an online store, it is absolutely essential for you, as an online entrepreneur to include thorough details within the information furnished for different products provided by your e-store. With a half-baked product information, your customers are likely to get redirected to your competitor’s site, which is definitely something you wouldn’t want to happen.
2. Poor showcasing of e-store products
As an e-commerce business owner, you need to put yourself into the shoes of the website visitors and perceive the way products and services are presented. You need not get indulged in a poor showcase of e-store products, rather you must include the use of high-quality, appropriately sized product photos that can render a flawless first impression on the purchasers.
3. Selecting an inappropriate e-commerce platform
By a wrong choice regarding the e-commerce platform for running your e-store can easily introduce confusion and frustration into the entire online purchase experience. Just ensure that the e-commerce platform you choose for your needs is up-to-date, fully customized and professionally supported.
4. Underestimating the significance of proper marketing
This is perhaps one of the most common mistakes made by e-store owners. It is actually essential for you to pay special attention to product marketing in order to receive the desired results within least amount of time.
5. Expecting the customers to sign up for an account before making a purchase
Not every buyer is interested in creating an account with an e-store and hence it is better to remove the clause of account creation for allowing the users to place an order. As an approach to capture customer attention, doing this will make you successful.
6. A lengthy and confusing checkout process
Purchasers tend to get turned off by a long and hard-to-understand checkout process. If you want maximum purchases made via your e-store, it is recommended to cut down the steps between placing an order and paying for the product(s).
7. Low-grade customer service options
Providing your customers a handy way of getting in touch with you is something that will allow you to keep them engaged to your products and services. Whether it’s regarding a technical question, a product return request or a sales question; make sure to offer a handy request form for the customers.
8. Using a single image for each product
This is a mistake that can lower user engagement for your e-commerce website. It is recommended to use multiple images, clicked from different angles for each product available within the e-store database. This will render a clearer picture about your product(s) and encourage customers for making a purchase.
9. Ignoring the role of building organic visibility
Getting your e-store ranked organically on Google is a time-consuming process which shouldn’t be taken for granted. You need to create inbound links which will allow you to add visibility and credibility to your e-store.
10.  An un-appealing shopping cart design
With shopping cart being an indispensable component of every e-commerce website, it is advised to opt for a shopping cart design that is capable of receiving several applauds. Ensure that every shopping cart user can easily add an item and return to the previous page without getting confused.
11. Making the e-store navigation quite confusing
If your e-store has to include a lot of products belonging to several categories, then it is recommended to pay special attention to the navigation asset of your online portal.
12. Not including shipping rates for e-store products
The lack of an accurate shipping price for your e-store products is probably something that can refrain visitors from making a purchase. The reason being very simple. By not being familiar with the total payable amount for the product(s), the customers find it difficult to decide whether the product’s shipping prices are high or low.
13. Not having a plan to analyze the user data
Irrespective of whether a visitor is purchasing from your e-store or not, he/she is definitely revealing a vital information, which if used in the correct format can allow you to offer an improved user experience. There are online merchants who ignore the importance of having a separate strategy for this.
14. Forgetting to include the e-store policies
Prior to making a purchase from your e-store, the customer would want to know about your store policies. Many online entrepreneurs forget to include these e-store policies, therefore making it tedious for customers to have a better picture about the order that they’ve placed.
15. Not including the related products
Addition of related products is an easy means of increasing the add-on sales for your online business. There are web-based business owners who neglect the inclusion of any such related products, refraining customers from exploring multiple offerings by the e-store.
In Conclusion
After getting familiar with the 15 most common mistakes made while building an e-store, I hope you’d have become all motivated to design an e-store that looks stunning and functions in the desired way.

Tags: , , , ,
Posted in Articles, Resources | No Comments »

Custom Method to Allow Your Authors to Choose Related Posts in WordPress

Monday, April 6th, 2015

The amplitude of features and customization abilities that WordPress provides isn’t hidden anymore. Every individual and developers alike are well aware how great WordPress is – for website creation and maintenance. Not only that, website owners who want a simple blog can also use WordPress.

Another flexible feature that WordPress offers is related posts. Displaying related posts on your site helps save your users’ time – to navigate throughout your website – searching for topics that relates to a post they might be interested in.

By default, WordPress allows you to display related posts in two ways: via tags and categories. However, there is a downside associated with these ways. Both tags as well as categories make use of automated process to show the related posts in your website. But, what if you wish to show your own choice of related posts? What if you want to display related posts of a single author or multiple authors? In that case, WordPress customization is  a way which comes to the scene. By implementing a custom method to display related posts will prove a viable solution.

This post is about how you can create a custom method, allowing your website authors to choose related posts in WordPress.

How to Create Custom method Allowing Authors to Choose Related Posts?

For creating a custom method that allows authors to choose related posts, you’ll first have to create a metabox in WordPress post screen, display all the posts in that screen. And then, allow your website authors to choose related posts from the list of posts. For doing so, paste the below code in your functions.php file:

<?php
function wp_related_post_meta_box() {
add_meta_box(‘wp_related_post’, ‘Select Related Post’, ‘wp_related_post_list’, ‘post’);
}
add_action( ‘add_meta_boxes’, ‘wp_related_post_meta_box’ );
function wp_related_post_list( $post )
{
wp_nonce_field( ‘wp_related_post’, ‘wp_meta_box_nonce’ );
$related_array  = get_post_meta( $post->ID, ‘related_posts_ar’, true );
$related_array = unserialize($related_array);
wp_reset_query();
query_posts(‘order=ASC’);
?>
<select name=”options[]” multiple=”multiple”>
<?php
while ( have_posts() ) : the_post();
$post_id =get_the_ID();
?>
<option value=”<?php echo get_the_ID(); ?>” <?php if($related_array){ if  (in_array($post_id, $related_array)) { echo “selected”; } } ?>><?php echo get_the_title(); ?></option>
<?php
endwhile; wp_reset_query();
?>
</select>
<?php
}
function wp_save_meta_box_related_post( $post_id ) {
if ( !isset( $_POST[‘wp_meta_box_nonce’] ) ) {
return;
}
if ( !wp_verify_nonce( $_POST[‘wp_meta_box_nonce’], ‘wp_related_post’ ) ) {
return;
}
if ( defined( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE ) {
return;
}
if ( !current_user_can( ‘edit_post’, $post_id ) ) {
return;
}
$related_posts = ( isset( $_POST[‘options’] ) ? sanitize_html_class( $_POST[‘options’] ) : ” );
$related_post_array = serialize($related_posts);
update_post_meta( $post_id, ‘related_posts_ar’, $related_post_array );
}
add_action( ‘save_post’, ‘wp_save_meta_box_related_post’ );
?>

Beginners might find the above code a bit hard to understand. So, let’s break the code down into different steps, so that you can get a better idea of how it works.

 

Step 1 – Registering Our Custom Metabox

 

function wp_related_post_meta_box() {
add_meta_box(‘wp_related_post’, ‘Select Related Post’, ‘wp_related_post_list’, ‘post’);
}
add_action( ‘add_meta_boxes’, ‘wp_related_post_meta_box’ );

The very first line in our code creates a wp_related_post_meta_box() function that helps register our custom metabox. And the add_meta_box() function take some parameters to tell WordPress about the metabox. Each parameter in the add_meta_box() function has a certain meaning to it. Let’s now take a look at each of those parameters:

 

wp_related_post: It determines the HTML ‘id’ attribute of the WordPress post editor screen.

Select Related Post: It specifies the title of the editor screen.

wp_related_post_list: This function prints out the HTML for the editor screen.

 

post: This parameter determines that the metabox will appear on post screen. However, you can even choose to display the metabox on page screen by using “page” instead of “post” as your parameter.

Lastly, the add_action( ‘add_meta_boxes’, ‘wp_related_post_list’ ) is an action hook that tells WordPress to add metabox.

 

Step 2 – Creating Function to Generate Metabox Output

 

function wp_related_post_list( $post )
{
wp_nonce_field( ‘wp_related_post’, ‘wp_meta_box_nonce’ );
$related_array  = get_post_meta( $post->ID, ‘related_posts_ar’, true );
$related_array = unserialize($related_array);
wp_reset_query();
query_posts(‘order=ASC’);
//fetch the list of all the posts from WordPress.
?>
<select name=”options[]” multiple=”multiple”>
<?php
while ( have_posts() ) : the_post();
$post_id =get_the_ID();  ?>
<option value=”<?php echo get_the_ID(); ?>” <?php if($related_array){ if  (in_array($post_id, $related_array)) { echo “selected”; } } ?>><?php echo get_the_title(); ?></option>
<?php endwhile; wp_reset_query(); ?>
</select>
<?php
}

The wp_related_post_list( $post ) function helps to generate output of our custom metabox. This code will generate a select list to allow your WordPress website authors to select related posts from the posts list, which will look something like:

 

Step 3 – Saving MetaBox

 

function wp_save_meta_box_related_post( $post_id ) {
if ( !isset( $_POST[‘wp_meta_box_nonce’] ) ) {
return;
}
if ( !wp_verify_nonce( $_POST[‘wp_meta_box_nonce’], ‘wp_related_post’ ) ) {
return;
}
if ( defined( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE ) {
return;
}
if ( !current_user_can( ‘edit_post’, $post_id ) ) {
return;
}
$related_posts = ( isset( $_POST[‘options’] ) ? sanitize_html_class( $_POST[‘options’] ) : ” );
$related_post_array = serialize($related_posts);
update_post_meta( $post_id, ‘related_posts_ar’, $related_post_array );
}
add_action( ‘save_post’, ‘wp_save_meta_box_related_post’ );
?>

 

The (wp_save_meta_box_related_post( $post_id ) function is used to save the metabox value to the WordPress database.  This function will take post id to save that metabox field value on the particular post meta session in your website database. And the add_action( ‘save_post’, ‘wp_save_meta_box_related_post’ ) is a hook that tells WordPress to save the post with meta value.

 

How to Display Related Post List On Frontend?

 

In order to display your choice of related posts list on your website frontend, simply paste the following code in your single.php file:

<?php
$related_post_list = get_post_meta( get_the_ID(), ‘related_posts_ar’, true );
$related_array = unserialize($related_post_list);
if($related_array)
{
echo ‘<ul>’;
echo ‘<h2>Related Posts</h2><br/>’ ;
for($i=0; $i<count($related_array); $i++)
{
echo ‘<li>’.get_the_title($related_array[$i]).'</li><br/>’ ;
}
echo ‘<ul>’;
}
?>

The above code will fetch the post meta value from your database. And the get_post_meta() function will get the value you have to pass for: Related Posts and meta key in this function.

Now, let’s see the below screenshot which displays the output of the above code:

output

So, that’s it! I hope that this post would help you understand the approach you can follow, to display your authors related posts on your WordPress website.

Tags: , , , ,
Posted in Tutorials, Wordpress | No Comments »

The Key Advantages Associated With Native Apps

Wednesday, April 1st, 2015

With the advent of smartphones, tablets and other advanced mobile devices, people can conveniently accomplish a requisite task anytime and anywhere, whether it is online shopping, social networking, playing games, watching movies or any thing. It is apparent that what makes it possible for mobile users to perform tasks and stay productive even on the go is the mobile applications.

Observing the growing demand of mobile applications and its high end advantages, almost every business is embracing an appropriate mobile application to target potential audiences with a flair. The question is to make an ideal choice between a native app development or mobile web app development.

The native applications versus mobile web applications have been a heated debate for a few years now. In this article, we have included the key benefits of native applications. This will distill how native app development can leverage your business by delivering a surefire mobile solution.

native Apps

Native Application: A Foreword

When an app is developed for a particular mobile platform and is installed straight away on the targeted mobile device, it is referred as a native application. You can reap the benefits of any of the device-specific features, by integrating native features of a device into an app. This kind of applications is released on the platform-specific stores like the Apple App store for iOS, the Google Play store for Android, and so forth.

Various upsides of Native app development

1. Users prefer native apps, so do businesses

The primary aim of a mobile application is to efficiently reach a wider mobile audience base. Thus, user preference is a major factor that must be considered.

The best way to kick around and identify what is most preferred by the majority of users is to observe the recent stats. In this case, most of the users like to access native apps and only a quarter of the total like to browse the Internet. This makes it pretty clear that as more and more people are becoming comfortable with mobile apps and adept with the latest mobile devices, they tend to prefer mobile-optimized apps embracing native functionalities.

2. Delivers seamless UX without any hiccups

For those who admire a smooth and flawless user experience, native app is a much sought after choice. You can deliver a polished experience with a simple and blazingly fast mobile app. The native apps is lauded for delivering instant response, device optimized interface, and a lot more.

Here are a few pros of choosing the native over the mobile web.

3. Has an invaluable market support

In this wobbly market place, it is quite hard to seek a platform where one can efficiently target his potential audience. However, as native applications are supported by platform-specific app stores, it is a bit easier to reach colossal audiences. Users can easily look for apps of their choice, which are compatible with their device by searching in the concerned app store. For instance, if you are an iPhone user, you can get native apps for your device from the Apple App store.

4. Is highly safe and secure, however…

Since, most of the app stores (like the Apple App Store) are quite serious about their reputation, all the apps published in the store are required to get approved by professionals. This approval process ensures completely secure and safe native applications to users. However, not every app store embraces approval policy, thus, all native apps don’t possess tested and assured quality.

5. Developers get SDK for the targeted mobile platform

While developing native mobile applications, developers can deploy prolific and resourceful tools and frameworks offered by the mobile platforms. The platform-specific SDK (Software Development Kit) includes the best tools that can efficiently cater to the needs of developers and offer an ultimate way to accomplish a task. This can leverage native app development by allowing developers to develop with more ease and proficiency.

Final Thought:

No doubt, there are several benefits of native app development and you can definitely boost your business values by developing a surefire app that caters to your customers’ needs. However, the mobile web applications and hybrid applications also have their own advantages. It is just a matter of perception and your requirements. For this reason, it is always advisable to streamline your choice by taking your business goals into account.

Tags: ,
Posted in Articles | No Comments »

Top 5 Strategies For Mobile Web Design

Wednesday, April 1st, 2015

Observing the continuous rise in usage of mobile devices for accessing the web than desktops or PCs, website owners who still aren’t running mobile versions of their website should acknowledge building one. You need to look beyond creating website layouts for desktop screens, and instead pay focus on creating a mobile web design that work well on all devices; not doing so, can make you lose a lot of potential users.

Simply put, when creating a website it has become needful for website owners to follow a mobile strategy, so that the needs of mobile users can be addressed. However, keep in mind that your strategy may vary based on the kind of a website development project you’re working on. You’ll have to think about the mobile strategy in view of how your site or client’s site will look like and function in the mobile space.

Irrespective of whether you’re designing a simple or content-heavy site, or a web app, below are some strategies that you should consider when creating a mobile web design:

1. Outline Your Mobile Website Needs

The very first strategy you should follow to create a mobile website design is, to outline the several needs of your website such as:

Each of the aforementioned list of key points contains different requirements. Decide which one best suit your project needs in kick-starting your mobile web design endeavor. And then, consider the below listed strategies.

2. Practice the Responsive Web Design Standard

Once you’ve defined the needs to build a website, next and the most important strategy requires you to practice the modern and commonly-preferred mobile web design strategy, called as Responsive Web Designs (RWD).

With plenty of devices being developed and released every now and then, you cannot predict your site accuracy by testing in a limited browsers. And rather, you’ll have to make your site optimized to adapt and adjust to any supported browser, screen size and resolution. This clearly indicates that maintaining just a single website won’t be enough, for delivering a positive user experience on all the devices.

responsive design

You need to make sure that your website meets the needs of all users, and practicing the RWD approach is the most viable way to achieve such an objective. Creating a web page using this approach, will automatically scale the page according to the mobile display it is being accessed on. In fact, RWD is the industry standard – recommended by the search engine giant Google. Thus, it makes sense to practice this web standard for your mobile web design project.

3. Do You Need to Redesign Your Design?

Using the RWD approach help you modify the look and functioning of your existing design. So, you don’t necessarily have to re-design your major brand. However, it is very important for you to pay attention to use the responsive web design approach while holding up to the modern mobile design styles.

Just as you may know that the web design trends keeps on evolving rapidly, and every year new trends are introduced. For instance, nowadays designing ghost buttons, websites with parallax-scrolling effects, good typography and video backgrounds are some of the most popular web design trends. Making your site updated with such trends will help you easily attract more customers towards your design.

4. Maintaining Simplicity is a Good Idea, But…

When it comes to converting a desktop website to a mobile version, many designers follow the general rule of thumb, and try to keep things as simple as possible. They do so because of many different reasons. Most importantly, maintaining simplicity, such as reducing file sizes helps in loading the mobile site faster. In addition, using less navigation items and removing unnecessary elements from the layout makes the design comprehensible to users. This clearly suggests how less is more.

simplicity

But in order to meet the expectations of users, merely paying attention to simplicity in web designs won’t help you succeed in your mobile web design endeavor. So, it is a good idea to maintain simplicity in your design for mobile displays, but for achieving success you need to create a fine balance between simplicity and visual aesthetics of your design.

Fortunately, CSS3 web technology provides some amazing tools that helps to add enhanced elements like drop-shadows, gradients, etc., without making the design look bulky.

5. Improve Page Load Time

The last strategy you should emphasize on, for designing a winning mobile web design is to ensure that your mobile website loads quickly. Remember, slow page load time is the primary reason that increases bounce rate. And thus, improving your load time can help you in reducing bounce rates.

Following best practices when designing a mobile site can help boost the page loading time of your mobile website. Here are a few points, you should consider in making your mobile website load time better:

Wrapping Up!

Not following any optimization plan or strategies to build a mobile web design won’t let you achieve success in your endeavor. However, reading this post thoroughly will help you learn about the most basic yet important strategies, following which you can jumpstart the process of creating mobile web designs, helping you come up with a successful end-product (i.e. a mobile web design).

Tags: , ,
Posted in Tutorials | No Comments »


Follow us on Twitter

Popular posts

Write for us and get paid!

Get paid!

If you’ve got the Skills we will pay your Bills! We'll pay you $25 for your Articles and Tutorials.

Categories

Recent Comments

  • Abhishek on - List of Best...Thanks a lot ElsbreeLatner
  • ElsbreeLatner on - List of Best...Fantastic submit, very informative. I wonder why the opposite experts of this sector do not notice t
  • Greg on - Create an AJAX...I confirm that this is not working.... User name issue...