jQuery and Ajax – Ready to use code snippets for every day

Note: this article doesn’t use the $ shortcut for the jQuery object.

Send data using the GET method

jQuery.get() is a shorthand AJAX function, which loads data from the server using a HTTP GET request. The following snippet shows how to send two values to a page named mypage.php.

jQuery( document ).ready(function() {
	jQuery.get( "mypage.php", { name: "John", time: "2pm" } )
		.done(function( data ) {
		alert( "Data Loaded: " + data );
	});
});

Send data using the POST method

Similar to jQuery.get(), jQuery.post() loads data from the server using a HTTP POST request. The code below demonstrates how to send a POST request to page.php when button is clicked.

jQuery("button").click(function(){
    jQuery.post("page.php", function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

Retrieving text from a webpage

The jQuery.load() method makes it extremely easy to retrieve text from a specific webpage. The method allows to only fetch a specific part of the document, so you don’t have to get the whole page and parse it afterwards.

<ol id="new-projects"></ol>
 
<script>
jQuery( document ).ready(function() {
	jQuery( "#new-projects" ).load( "/resources/load.html #projects li" );
});
</script>

Get all values from form and send it to a page

Here’s a super handy snippet that I use very often. It works very simply: once the user clicks on #submit, the data from #form is serialized and sent to a remote page using the POST method.

jQuery( document ).ready(function() {
	jQuery( "#submit" ).click(function() {
		 jQuery.post( "https://yoursite.com/yourpage.php", jQuery('#form').serialize())
			.done(function( data ) {
			alert(data);
		}); 
		return false;
	});
});

Retrieve JSON data

Back in the early days of AJAX, data sent by a server was mostly formatted as XML. Nowadays, most modern applications use JSON as the format for data from the server.

The getJSON() method loads JSON-encoded data from the server using a GET HTTP request. The example below shows how to use jQuery to retrieve JSON-encoded data.

jQuery.getJSON( "http://yoursite.com/test.json", function( data ) {
        alert(data);
});

Once you get your JSON from the server, use the JSON.parse() method to turn the data into a JavaScript object:

jQuery.getJSON( "http://yoursite.com/test.json", function( data ) {
        var obj = JSON.parse(data);
        jQuery( "#container" ).html(obj.name + ", " + obj.age);
});

Web development trends you should apply to your future project

1. Attention Demanding Web design

One of the biggest design trends is turning simple again and so we can say that the website design is going back to its basics. In the present age, developers have to consider many factors when they are designing a website like it should be interactive, easy to understand and use. It is important to enhance the flow of the customers. A few things to consider are:

Hamburger menus

The experts have said that the navigation layout must be avoided from the desktop because of the following reasons:

  • Only 27% of the customers use the menus that are hidden. The reason is that rest of them consider it a waste of their time
  • 21% of the task difficulty will be increased because of the hidden menu and so customer will ignore such kinds of sites
  • The average time required to accomplish the task will be lowered in mobiles by 15% and in desktops by 39%

Parallax scrolling

As the online competition is increasing so it is very important for the website owners to make sure that, their website is quick to access and easy to utilize by the customers. So the expert developers have said that parallax scrolling should be removed from the website. It will increase the loading time of the sites and cause a reduction in the ranking of the peak organic search engines.

Reduction in navigation links

Since the past few years, most of the web pages had at least 7 navigation options. Recently, the number has reduced to 3 or 4 and the reason is that it attracts the customers because of the increased functionality. It has been noticed that customer avoid the sites that have several ads and product suggestions. So the developers are focusing on reducing the navigation options and the links that they provided at the end of the web page to ensure that their customer will not go away.

Online testing

Now the place of guesswork has been taken over by testing. It has been proved by several studies that the idea of the most experienced person is not always the best. So the website developers should test the sites before that can be uploaded for the customers.

This is the reason that now you will come across many testing software, tools, and techniques that are accessible online. Some of the largest developers and even Google is now testing the sites before loading them.

Iteration

In the past developers used to upload and website and then they never touched it again for ages. However, now as the trends, rules, and regulations of the websites changes from minute to minute, it is very important to upgrade the web site on regular basis.

Keep in mind that it a website is not up to date it might attract hackers and it will be vulnerable to viral attacks. So to ensure that your customers will access a secure site it is important that you keep the codes and the security tight.

Performance

While developing a website the top priorities of the developers should be:

  1. Conversion
  2. Optimization
  3. Usability
  4. Visibility

Recently, it has been noticed that the mobile application will not be the big thing anymore. As most of the people have several apps on their phone but they will only utilize the few that they require the most. So it is better options that the developers do not waste their time and money on developing applications that the customers will not even consider using.

2. Increase ROI with E-commerce

Recently, the demands of the customers are increasing especially from the e-commerce sites. Everyone wants to have the site that will allow him or her to order to product from any location at any time. As well as they want the order to be delivered at their doorstep in limited time. it is almost impossible to accomplish.

Big Data

Most of the business owners are obsessed with using the data of their customers to increase their revenue. As the social media marketing, emails and online rating provide them a chance to attract more customers.

Consistency in brand experience

It is important that the customers have the best experience from the brand. In order to make it possible the developers must be able to provide the accessibility of the site to several platforms, channels, and devices. It might seem like a difficult task but if the developers are able to make it possible, they will notice their site reaching new heights of success.

Personalized experience

Personalization in the website and the menu is very important to increase the experience of the customers. The reason is that it will allow you to track the activity of your target customers and so they will get the opportunity to add new features and specification to the site that will attract customers repeatedly. Personalization gives clients the idea that site has been specially developed for them and they will find it hard to ignore.

The future in mobile eCommerce

Most of the chatting applications are taking the place of the social media platforms. The reason is that they are easy to control and get engaged with the people that we require. Apart from that, it also depends on the type of company that we have.

It has been proved by several studies that soon conversations commerce will have a better place in the industry and it will be the best source to enhance the online ranking. Most of the e-commerce platforms are focusing on developing the messaging strategy to engage their customers.

One of the funniest concepts that might be introduced soon is that our devices will take the decision. We all know that with the passage of time our devices are getting smart so there is no doubt that they will do the job with little information.

3. CSS: the next wave

In order to enhance the e-commerce conversions and productivity of the site, it is important for the developers to pay attention towards the mobile-first technology. The major trends for CCS in 2017 are:

CSS Flexbox

It is one of the most reliable layout modes that were first developed as the part of CSS3. It will allow the designers to manipulate the component of the web according to their requirements. It will allow the website to perfectly fit the web page. Some of the amazing features about the Flexbox are:

  • In order to pervert the overflow, it will make the items to automatically adjust on the screen. there would be no free space
  • CSS Flexbox can be optimized for the layout that on one-dimensional
  • It is perfect for the components of the websites that are small

CSS variables

In the beginning, when the CSS variables were introduced they were not very important. Recently, they have been able to grab the attention of the developers because of the following amazing features

  • There are numerous customization options that will allow the developers to add colors and change the size of the site according to their requirements
  • It would be easier to maintain the larger projects because the CSS coding is very small and minimized
  • In order to create a better mobile responsive interface for the users, it will allow the developers to change the variables by loading them in the JavaScript

CSS Grid

The CSS grid is the latest layout that has removed all the limitations that we once had to face regarding the size and structure of the site. It will allow the developers to design a dynamic layout and add as many altering options on the site as they like. Recently, it is has been supported by only a few browsers but it has been expected that soon the technology will show amazing results like:

  • The overlapping of the elements on the site will be reduced
  • It is perfect for the optimization of the layouts that are two-dimensional
  • CSS grid is perfect for the websites that have large layouts

Bottom line

Not every trend might be according to the genre of your website so you have to make sure that you select the one that will compliment your site in the best possible way. It is important that you hire the top developer and designer that can work in collaboration to provide you the services that you require. It is the time that you provide your customers with the best online experience.

Want to know more? You can follow mkels.com for more design and development news.

This is a guest post by Richard Kiew.

Web development trends you should apply to your future project

1. Attention Demanding Web design

One of the biggest design trends is turning simple again and so we can say that the website design is going back to its basics. In the present age, developers have to consider many factors when they are designing a website like it should be interactive, easy to understand and use. It is important to enhance the flow of the customers. A few things to consider are:

Hamburger menus

The experts have said that the navigation layout must be avoided from the desktop because of the following reasons:

  • Only 27% of the customers use the menus that are hidden. The reason is that rest of them consider it a waste of their time
  • 21% of the task difficulty will be increased because of the hidden menu and so customer will ignore such kinds of sites
  • The average time required to accomplish the task will be lowered in mobiles by 15% and in desktops by 39%

Parallax scrolling

As the online competition is increasing so it is very important for the website owners to make sure that, their website is quick to access and easy to utilize by the customers. So the expert developers have said that parallax scrolling should be removed from the website. It will increase the loading time of the sites and cause a reduction in the ranking of the peak organic search engines.

Reduction in navigation links

Since the past few years, most of the web pages had at least 7 navigation options. Recently, the number has reduced to 3 or 4 and the reason is that it attracts the customers because of the increased functionality. It has been noticed that customer avoid the sites that have several ads and product suggestions. So the developers are focusing on reducing the navigation options and the links that they provided at the end of the web page to ensure that their customer will not go away.

Online testing

Now the place of guesswork has been taken over by testing. It has been proved by several studies that the idea of the most experienced person is not always the best. So the website developers should test the sites before that can be uploaded for the customers.

This is the reason that now you will come across many testing software, tools, and techniques that are accessible online. Some of the largest developers and even Google is now testing the sites before loading them.

Iteration

In the past developers used to upload and website and then they never touched it again for ages. However, now as the trends, rules, and regulations of the websites changes from minute to minute, it is very important to upgrade the web site on regular basis.

Keep in mind that it a website is not up to date it might attract hackers and it will be vulnerable to viral attacks. So to ensure that your customers will access a secure site it is important that you keep the codes and the security tight.

Performance

While developing a website the top priorities of the developers should be:

  1. Conversion
  2. Optimization
  3. Usability
  4. Visibility

Recently, it has been noticed that the mobile application will not be the big thing anymore. As most of the people have several apps on their phone but they will only utilize the few that they require the most. So it is better options that the developers do not waste their time and money on developing applications that the customers will not even consider using.

2. Increase ROI with E-commerce

Recently, the demands of the customers are increasing especially from the e-commerce sites. Everyone wants to have the site that will allow him or her to order to product from any location at any time. As well as they want the order to be delivered at their doorstep in limited time. it is almost impossible to accomplish.

Big Data

Most of the business owners are obsessed with using the data of their customers to increase their revenue. As the social media marketing, emails and online rating provide them a chance to attract more customers.

Consistency in brand experience

It is important that the customers have the best experience from the brand. In order to make it possible the developers must be able to provide the accessibility of the site to several platforms, channels, and devices. It might seem like a difficult task but if the developers are able to make it possible, they will notice their site reaching new heights of success.

Personalized experience

Personalization in the website and the menu is very important to increase the experience of the customers. The reason is that it will allow you to track the activity of your target customers and so they will get the opportunity to add new features and specification to the site that will attract customers repeatedly. Personalization gives clients the idea that site has been specially developed for them and they will find it hard to ignore.

The future in mobile eCommerce

Most of the chatting applications are taking the place of the social media platforms. The reason is that they are easy to control and get engaged with the people that we require. Apart from that, it also depends on the type of company that we have.

It has been proved by several studies that soon conversations commerce will have a better place in the industry and it will be the best source to enhance the online ranking. Most of the e-commerce platforms are focusing on developing the messaging strategy to engage their customers.

One of the funniest concepts that might be introduced soon is that our devices will take the decision. We all know that with the passage of time our devices are getting smart so there is no doubt that they will do the job with little information.

3. CSS: the next wave

In order to enhance the e-commerce conversions and productivity of the site, it is important for the developers to pay attention towards the mobile-first technology. The major trends for CCS in 2017 are:

CSS Flexbox

It is one of the most reliable layout modes that were first developed as the part of CSS3. It will allow the designers to manipulate the component of the web according to their requirements. It will allow the website to perfectly fit the web page. Some of the amazing features about the Flexbox are:

  • In order to pervert the overflow, it will make the items to automatically adjust on the screen. there would be no free space
  • CSS Flexbox can be optimized for the layout that on one-dimensional
  • It is perfect for the components of the websites that are small

CSS variables

In the beginning, when the CSS variables were introduced they were not very important. Recently, they have been able to grab the attention of the developers because of the following amazing features

  • There are numerous customization options that will allow the developers to add colors and change the size of the site according to their requirements
  • It would be easier to maintain the larger projects because the CSS coding is very small and minimized
  • In order to create a better mobile responsive interface for the users, it will allow the developers to change the variables by loading them in the JavaScript

CSS Grid

The CSS grid is the latest layout that has removed all the limitations that we once had to face regarding the size and structure of the site. It will allow the developers to design a dynamic layout and add as many altering options on the site as they like. Recently, it is has been supported by only a few browsers but it has been expected that soon the technology will show amazing results like:

  • The overlapping of the elements on the site will be reduced
  • It is perfect for the optimization of the layouts that are two-dimensional
  • CSS grid is perfect for the websites that have large layouts

Bottom line

Not every trend might be according to the genre of your website so you have to make sure that you select the one that will compliment your site in the best possible way. It is important that you hire the top developer and designer that can work in collaboration to provide you the services that you require. It is the time that you provide your customers with the best online experience.

Want to know more? You can follow mkels.com for more design and development news.

This is a guest post by Richard Kiew.

WordPress action hooks and filters: practical examples

Prevent automatic image compression

By default, WordPress compresses jpg images when you upload them onto your blog. This is useful because it saves bandwidth and loading time, but sometimes you may prefer to have full quality images (for example, if you’re a photographer using WordPress to showcase your work).

Paste the code below into your functions.php file to remove automatic compression of images.

add_filter('jpeg_quality', function($arg){return 100;});

Source: http://www.wprecipes.com/prevent-wordpress-to-compress-your-jpg-images

Add target=”blank” to all links

I’ve never been a fan of target="blank" links, but I’m always surprised to see how clients love them. So if you need to transform all links to target="blank" links, here is an easy solution.

This function has to be pasted in your functions.php file.

function autoblank($text) {
	$return = str_replace('<a', '<a target="_blank"', $text);
	return $return;
}
add_filter('the_content', 'autoblank');

Source: http://www.catswhocode.com/blog/snippets/add-target_blank-on-all-link

Remove the “read more” jump

On WordPress blogs, when you click on a “Read more” link, it automatically drops to the point in the article you theoretically just got to the end of. If you don’t really like that jump, simply paste the following code into your functions.php file to get rid of it.

function wdc_no_more_jumping($post) {
     return '<a href="'.get_permalink($post->ID).'" class="read-more">'.'Continue Reading'.'</a>';
}
add_filter('excerpt_more', 'wdc_no_more_jumping');

Source: http://wpshout.com/wordpress-functions-php/

How to show an urgent message in the WordPress admin area

When writing custom WordPress themes or plugins, you might want to inform users that something important needs to be done, perhaps due to an upgrade, e.g. You need the user to update a setting, or check that their settings have been transposed correctly. Here is a ready-to-use hook to display a custom message to admins.

function showMessage($message, $errormsg = false){
	if ($errormsg) {
		echo '<div id="message" class="error">';
	} else {
		echo '<div id="message" class="updated fade">';
	}

	echo "<p><strong>$message</strong></p></div>";
}  

function showAdminMessages() {
    showMessage("You need to upgrade your database as soon as possible...", true);

    if (user_can('manage_options') {
       showMessage("Hello admins!");
    }
}

add_action('admin_notices', 'showAdminMessages'); 

Source: http://www.wpdoctors.co.uk

Looking for WordPress hosting? Get 50% off HostGator WP plans with coupon catswhocode!

Automatically replace words in your posts

Imagine this: your blog was named “myblog” and for some reason you renamed it “mysuperblog”. Don’t manually edit your posts to replace every single occurence! Instead, paste this useful hook into your functions.php file and let it do the work for you.

function replace_text_wps($text){
    $replace = array(
        // 'WORD TO REPLACE' => 'REPLACE WORD WITH THIS'
        'wordpress' => '<a href="#">wordpress</a>',
        'excerpt' => '<a href="#">excerpt</a>',
        'function' => '<a href="#">function</a>'
    );
    $text = str_replace(array_keys($replace), $replace, $text);
    return $text;
}

add_filter('the_content', 'replace_text_wps');
add_filter('the_excerpt', 'replace_text_wps');

Source: http://wpsnipp.com/

Add custom page navigation to WooCommerce

WooCommerce, like WordPress, doesn’t use page navigation by default. This can be changed easily on WordPress with the WP PageNavi plugin. When using WooCommerce, it requires a little hack to work.

The first thing to do is to install the WP PageNavi plugin. Once done, simply open your functions.php file and paste the following code in it.

remove_action('woocommerce_pagination', 'woocommerce_pagination', 10);
function woocommerce_pagination() {
		wp_pagenavi(); 		
	}
add_action( 'woocommerce_pagination', 'woocommerce_pagination', 10);

Source: WP Snacks

Quick maintenance mode

Sometimes, you need to put your blog on hold while performing some maintenance. Many plugins are allowing you to do so, but here is a simpler solution: just paste the following snippet into your functions.php file and save it. Your blog is now unavailable to anyone except administrators. Don’t forget to remove the code when you’re done with the maintenance!

function cwc_maintenance_mode() {
    if ( !current_user_can( 'edit_themes' ) || !is_user_logged_in() ) {
        wp_die('Maintenance, please come back soon.');
    }
}
add_action('get_header', 'cwc_maintenance_mode');

Remove the URL field from the comment form

The default comment system receives very often a lot of spam. If you’re having this problem on your site, the following filter can be a good help in order to prevent spam.

function remove_comment_fields($fields) {
    unset($fields['url']);
    return $fields;
}
add_filter('comment_form_default_fields','remove_comment_fields');

Source: http://www.wprecipes.com/how-to-remove-the-url-field-from-wordpress-comment-form/

Remove comments autolinks

If someone leaves a comment containing a URL on your WordPress blog, the URL will be automatically transformed to a link by WordPress. This can be useful, but personally I don’t like to see many links in comments, especially when they’re a bit spammy.
Removing autolinks is pretty easy: just paste the following code into your functions.php file. Once you’ve saved the file, you’ll notice that autolinks have disappeared.

remove_filter('comment_text', 'make_clickable', 9);

Source: http://www.wprecipes.com/wordpress-hack-remove-autolinks-in-comments

Any other WordPress hooks or filters you find really useful? Let me know in a comment!

WordPress action hooks and filters: practical examples

Prevent automatic image compression

By default, WordPress compresses jpg images when you upload them onto your blog. This is useful because it saves bandwidth and loading time, but sometimes you may prefer to have full quality images (for example, if you’re a photographer using WordPress to showcase your work).

Paste the code below into your functions.php file to remove automatic compression of images.

add_filter('jpeg_quality', function($arg){return 100;});

Source: http://www.wprecipes.com/prevent-wordpress-to-compress-your-jpg-images

Add target=”blank” to all links

I’ve never been a fan of target="blank" links, but I’m always surprised to see how clients love them. So if you need to transform all links to target="blank" links, here is an easy solution.

This function has to be pasted in your functions.php file.

function autoblank($text) {
	$return = str_replace('<a', '<a target="_blank"', $text);
	return $return;
}
add_filter('the_content', 'autoblank');

Source: http://www.catswhocode.com/blog/snippets/add-target_blank-on-all-link

Remove the “read more” jump

On WordPress blogs, when you click on a “Read more” link, it automatically drops to the point in the article you theoretically just got to the end of. If you don’t really like that jump, simply paste the following code into your functions.php file to get rid of it.

function wdc_no_more_jumping($post) {
     return '<a href="'.get_permalink($post->ID).'" class="read-more">'.'Continue Reading'.'</a>';
}
add_filter('excerpt_more', 'wdc_no_more_jumping');

Source: http://wpshout.com/wordpress-functions-php/

How to show an urgent message in the WordPress admin area

When writing custom WordPress themes or plugins, you might want to inform users that something important needs to be done, perhaps due to an upgrade, e.g. You need the user to update a setting, or check that their settings have been transposed correctly. Here is a ready-to-use hook to display a custom message to admins.

function showMessage($message, $errormsg = false){
	if ($errormsg) {
		echo '<div id="message" class="error">';
	} else {
		echo '<div id="message" class="updated fade">';
	}

	echo "<p><strong>$message</strong></p></div>";
}  

function showAdminMessages() {
    showMessage("You need to upgrade your database as soon as possible...", true);

    if (user_can('manage_options') {
       showMessage("Hello admins!");
    }
}

add_action('admin_notices', 'showAdminMessages'); 

Source: http://www.wpdoctors.co.uk

Looking for WordPress hosting? Get 50% off HostGator WP plans with coupon catswhocode!

Automatically replace words in your posts

Imagine this: your blog was named “myblog” and for some reason you renamed it “mysuperblog”. Don’t manually edit your posts to replace every single occurence! Instead, paste this useful hook into your functions.php file and let it do the work for you.

function replace_text_wps($text){
    $replace = array(
        // 'WORD TO REPLACE' => 'REPLACE WORD WITH THIS'
        'wordpress' => '<a href="#">wordpress</a>',
        'excerpt' => '<a href="#">excerpt</a>',
        'function' => '<a href="#">function</a>'
    );
    $text = str_replace(array_keys($replace), $replace, $text);
    return $text;
}

add_filter('the_content', 'replace_text_wps');
add_filter('the_excerpt', 'replace_text_wps');

Source: http://wpsnipp.com/

Add custom page navigation to WooCommerce

WooCommerce, like WordPress, doesn’t use page navigation by default. This can be changed easily on WordPress with the WP PageNavi plugin. When using WooCommerce, it requires a little hack to work.

The first thing to do is to install the WP PageNavi plugin. Once done, simply open your functions.php file and paste the following code in it.

remove_action('woocommerce_pagination', 'woocommerce_pagination', 10);
function woocommerce_pagination() {
		wp_pagenavi(); 		
	}
add_action( 'woocommerce_pagination', 'woocommerce_pagination', 10);

Source: WP Snacks

Quick maintenance mode

Sometimes, you need to put your blog on hold while performing some maintenance. Many plugins are allowing you to do so, but here is a simpler solution: just paste the following snippet into your functions.php file and save it. Your blog is now unavailable to anyone except administrators. Don’t forget to remove the code when you’re done with the maintenance!

function cwc_maintenance_mode() {
    if ( !current_user_can( 'edit_themes' ) || !is_user_logged_in() ) {
        wp_die('Maintenance, please come back soon.');
    }
}
add_action('get_header', 'cwc_maintenance_mode');

Remove the URL field from the comment form

The default comment system receives very often a lot of spam. If you’re having this problem on your site, the following filter can be a good help in order to prevent spam.

function remove_comment_fields($fields) {
    unset($fields['url']);
    return $fields;
}
add_filter('comment_form_default_fields','remove_comment_fields');

Source: http://www.wprecipes.com/how-to-remove-the-url-field-from-wordpress-comment-form/

Remove comments autolinks

If someone leaves a comment containing a URL on your WordPress blog, the URL will be automatically transformed to a link by WordPress. This can be useful, but personally I don’t like to see many links in comments, especially when they’re a bit spammy.
Removing autolinks is pretty easy: just paste the following code into your functions.php file. Once you’ve saved the file, you’ll notice that autolinks have disappeared.

remove_filter('comment_text', 'make_clickable', 9);

Source: http://www.wprecipes.com/wordpress-hack-remove-autolinks-in-comments

Any other WordPress hooks or filters you find really useful? Let me know in a comment!

Design tips for creating a website logo

Keep It Simple

Think about the world’s most popular brands. You can probably picture the logos for brands like Apple, Windows, McDonald’s, Adidas, Twitter, Dove, and more, all just by hearing the names. What do all of these brand logos have in common? They’re simple.

Simple logos almost always outshine complicated ones because:

  • They’re easy to remember.
  • They scale better across multiple screens and mediums.
  • They communicate a clear message.

Designing a logo isn’t as easy as it sounds, no matter how simple the finished product appears. The simplicity comes in the form and colors. You don’t want too many lines so that it’s hard to distinguish the image at a small size, and you want to limit your logo to one or two colors. The concept, however, might be a little more complicated and may require some careful thought to develop something unique, creative, and in line with the brand’s message.

Tell a Story

Every logo communicates a message. The FedEx logo, for example, has a professional look. The Baskin Robin’s logo is more playful, and the Monster logo communicates power and energy. You should be aiming to connect the emotions of the logo with the company’s message.

Though your logo’s story starts there, it can go far beyond initial emotions. Some logos use hidden meanings to tell stories apart from the obvious. If you look closely at the Tostitos logo, for example, you’ll see two people sharing a bowl of salsa and chips.

A more obvious use of hidden meanings come in the use of negative space. Notice how the Bronx Zoo logo incorporates animals and the city skyline.

Not every logo has to come with a hidden image or meaning, but you should leverage your logo to tell a story about your brand or your client’s brand.

Care about the Colors

Color is a crucial aspect of logo design, but it often gets ignored by new designers. Your color choice can help tell your story and communicate your brand’s message. Every color connects with a different emotion, though it’s important to remember your target audience’s age, gender, and other demographics to choose a color that resonates with them.

Start by looking at your competition to see what colors their logos are. Trying to stand out by going off the beaten path may not actually work in this case because your message will be similar to other brands in your industry. Take these examples of color psychology in logo design:

  • Blue: Tech companies often use blue logos. Dark blue is a marker of trust, loyalty, and confidence while light blue communicates goals and ambition.
  • Red: Restaurants and food brands commonly choose red because it helps stimulates appetite. It also communicates excitement and power.
  • Pink: Pink is a choice among feminine brands like Cosmopolitan and Victoria’s Secret. It communicates love and sensitivity.
  • Green: Green is a popular choice for brands that want to communicate a connection to the earth or send a message of balance and growth. Organic brands, for example, commonly choose green. Other brands with green logos include BP and Starbucks.
  • Purple: Companies like Yahoo! and Hallmark choose purple logos to communicate creativity and originality. Purple is also used to communicate wealth.
  • Orange: Orange gives the impression of warmth and optimism. It also communicates freedom, new ideas, and social goals.

Choose one color to focus on that helps tell the brand’s story. Sometimes a second color is used for contrast, but as you study logo design, you’ll find that most logos focus on a single color to elicit a specific emotion in their target audience.

Make it Timeless

When designing a logo, you want it to be timeless. That doesn’t mean you’ll never update it to look more modern, but if you do update it, it should take the same basic form and function as the original. That means avoiding tendy looks or pop culture references since they won’t last.

Use the Right Tools

You may be surprised at how much of a difference the right software can make in designing logos. If you’re already a web developer, you may be able to get started with logo design using the web design software you already have. Adobe Photoshop, for example, has all the tools you need to design a logo. However, you might consider adding Adobe Illustrator to your arsenal if you’re planning on creating a lot of logos.

Designing websites and designing logos go hand-in-hand because both work to emulate the brand’s message. As you start to design your own logos, keep these tips in mind.

This is a guest post by Robert Mening.

Design tips for creating a website logo

Keep It Simple

Think about the world’s most popular brands. You can probably picture the logos for brands like Apple, Windows, McDonald’s, Adidas, Twitter, Dove, and more, all just by hearing the names. What do all of these brand logos have in common? They’re simple.

Simple logos almost always outshine complicated ones because:

  • They’re easy to remember.
  • They scale better across multiple screens and mediums.
  • They communicate a clear message.

Designing a logo isn’t as easy as it sounds, no matter how simple the finished product appears. The simplicity comes in the form and colors. You don’t want too many lines so that it’s hard to distinguish the image at a small size, and you want to limit your logo to one or two colors. The concept, however, might be a little more complicated and may require some careful thought to develop something unique, creative, and in line with the brand’s message.

Tell a Story

Every logo communicates a message. The FedEx logo, for example, has a professional look. The Baskin Robin’s logo is more playful, and the Monster logo communicates power and energy. You should be aiming to connect the emotions of the logo with the company’s message.

Though your logo’s story starts there, it can go far beyond initial emotions. Some logos use hidden meanings to tell stories apart from the obvious. If you look closely at the Tostitos logo, for example, you’ll see two people sharing a bowl of salsa and chips.

A more obvious use of hidden meanings come in the use of negative space. Notice how the Bronx Zoo logo incorporates animals and the city skyline.

Not every logo has to come with a hidden image or meaning, but you should leverage your logo to tell a story about your brand or your client’s brand.

Care about the Colors

Color is a crucial aspect of logo design, but it often gets ignored by new designers. Your color choice can help tell your story and communicate your brand’s message. Every color connects with a different emotion, though it’s important to remember your target audience’s age, gender, and other demographics to choose a color that resonates with them.

Start by looking at your competition to see what colors their logos are. Trying to stand out by going off the beaten path may not actually work in this case because your message will be similar to other brands in your industry. Take these examples of color psychology in logo design:

  • Blue: Tech companies often use blue logos. Dark blue is a marker of trust, loyalty, and confidence while light blue communicates goals and ambition.
  • Red: Restaurants and food brands commonly choose red because it helps stimulates appetite. It also communicates excitement and power.
  • Pink: Pink is a choice among feminine brands like Cosmopolitan and Victoria’s Secret. It communicates love and sensitivity.
  • Green: Green is a popular choice for brands that want to communicate a connection to the earth or send a message of balance and growth. Organic brands, for example, commonly choose green. Other brands with green logos include BP and Starbucks.
  • Purple: Companies like Yahoo! and Hallmark choose purple logos to communicate creativity and originality. Purple is also used to communicate wealth.
  • Orange: Orange gives the impression of warmth and optimism. It also communicates freedom, new ideas, and social goals.

Choose one color to focus on that helps tell the brand’s story. Sometimes a second color is used for contrast, but as you study logo design, you’ll find that most logos focus on a single color to elicit a specific emotion in their target audience.

Make it Timeless

When designing a logo, you want it to be timeless. That doesn’t mean you’ll never update it to look more modern, but if you do update it, it should take the same basic form and function as the original. That means avoiding tendy looks or pop culture references since they won’t last.

Use the Right Tools

You may be surprised at how much of a difference the right software can make in designing logos. If you’re already a web developer, you may be able to get started with logo design using the web design software you already have. Adobe Photoshop, for example, has all the tools you need to design a logo. However, you might consider adding Adobe Illustrator to your arsenal if you’re planning on creating a lot of logos.

Designing websites and designing logos go hand-in-hand because both work to emulate the brand’s message. As you start to design your own logos, keep these tips in mind.

This is a guest post by Robert Mening.

Kickassd giveaway: 1 year of hosting, domain and whois protection to win!

About Kickassd

Kickassd is a relatively new company, created in early 2015. Since its inception, they focused on a thing that many cheap hosting providers are lacking: quality.

Let’s check together the strong points of Kickassd:

Kickassd has moved into the cloud. They are one of the very few shared / WordPress hosting providers that offers a high availability (HA) environment. This mitigates the most common causes for downtime in the shared hosting industry.

Fast disaster recovery. In case something bad happens to your site, Kickassd makes restoring an entire server from backup only a few minutes. Traditional shared hosts can take days to full y restore data when things go bad.

Many locations: Currently Montreal (Canada) and Frankfurt (Germany). Chicago (USA), Amsterdam (Netherlands), and Singapore are all planned for later in 2017.

Only pure SSD storage. This offers greatly enhanced performance, stability, and uptime for services and websites.

Performance: Kickassd offers a highly tuned, and high performance environment capable of handling much higher traffic then your regular shared hosting provider at a very competitive price.

Adaptable environments: Their shared and WordPress hosting works much the same way as a VPS. Every account is isolated, has its own resources and can scale as needed. Kickassd have eliminated the need for people to go through the stressful and costly process of moving to a VPS. Simply scale your account and keep enjoying all the perks of their shared environment!

The perks: Free SSL, free MagicSpamPro, free server level caching, free OpCode caching, and free R1Soft backups into cloud.

24/7 support by phone, e-mail, ticket, and Live Chat (chat and phone during business hours only). Kickassd staff are friendly and professional, and you will not get any generic canned replies.

More cool stuff: Kickassd invites every customer to their Slack chat where they are free to chat with support, ask questions and chat with other Kickassd members. Server monitoring also reports direct into the main channel so if there is a problem you know about it as quick as they do. Slack is a real time chat that is available for PC, Mac, browser, Android, and Iphone.

How to enter the giveaway

Feeling lucky? In order to get 1 year free of Little Kicker, Domain, Whois Protection and free basic hardening and optimization for the site if it is WordPress, just leave a comment below to let me know you’re in. In one week (May 4), the winner will be randomly chosen and will receive his prize directly from Kickassd.

And if you’re not the lucky one this time, no worries: CatsWhoCode have an exclusive deal which allows you to get 50% off first year of SSD hosting with Kickassd. Simply enter code CWC50! at checkout.

Good luck!

Kickassd giveaway: 1 year of hosting, domain and whois protection to win!

About Kickassd

Kickassd is a relatively new company, created in early 2015. Since its inception, they focused on a thing that many cheap hosting providers are lacking: quality.

Let’s check together the strong points of Kickassd:

Kickassd has moved into the cloud. They are one of the very few shared / WordPress hosting providers that offers a high availability (HA) environment. This mitigates the most common causes for downtime in the shared hosting industry.

Fast disaster recovery. In case something bad happens to your site, Kickassd makes restoring an entire server from backup only a few minutes. Traditional shared hosts can take days to full y restore data when things go bad.

Many locations: Currently Montreal (Canada) and Frankfurt (Germany). Chicago (USA), Amsterdam (Netherlands), and Singapore are all planned for later in 2017.

Only pure SSD storage. This offers greatly enhanced performance, stability, and uptime for services and websites.

Performance: Kickassd offers a highly tuned, and high performance environment capable of handling much higher traffic then your regular shared hosting provider at a very competitive price.

Adaptable environments: Their shared and WordPress hosting works much the same way as a VPS. Every account is isolated, has its own resources and can scale as needed. Kickassd have eliminated the need for people to go through the stressful and costly process of moving to a VPS. Simply scale your account and keep enjoying all the perks of their shared environment!

The perks: Free SSL, free MagicSpamPro, free server level caching, free OpCode caching, and free R1Soft backups into cloud.

24/7 support by phone, e-mail, ticket, and Live Chat (chat and phone during business hours only). Kickassd staff are friendly and professional, and you will not get any generic canned replies.

More cool stuff: Kickassd invites every customer to their Slack chat where they are free to chat with support, ask questions and chat with other Kickassd members. Server monitoring also reports direct into the main channel so if there is a problem you know about it as quick as they do. Slack is a real time chat that is available for PC, Mac, browser, Android, and Iphone.

How to enter the giveaway

Feeling lucky? In order to get 1 year free of Little Kicker, Domain, Whois Protection and free basic hardening and optimization for the site if it is WordPress, just leave a comment below to let me know you’re in. In one week (May 4), the winner will be randomly chosen and will receive his prize directly from Kickassd.

And if you’re not the lucky one this time, no worries: CatsWhoCode have an exclusive deal which allows you to get 50% off first year of SSD hosting with Kickassd. Simply enter code CWC50! at checkout.

Good luck!

10 things to do right now for a better WordPress site

Use a caching plugin

Caching makes dynamic websites a lot faster to load, so you should definitely implement it on your WordPress install if you haven’t already. Many free and premium plugins offer caching: WP Rocket, WP Super Cache, and more. My favorite and the one used on all my sites is W3 Total Cache.

Stay updated

Every day, hundreds of WordPress websites get hacked because the site owner didn’t keep his install up to date. This includes the WordPress core and all plugins and themes you’re using.

Also – if you don’t use a theme or a plugin, always delete it from your server. Need help with upgrading? The Codex has an extensive article about it.

Optimize your images

Images are generally over 50% of the total weight of a web page. In order to increase your site loading speed and ensure a comfortable user experience on mobile devices, optimizing images is a must.

The easiest way to do is to install and use WP Smush. Available in both free and premium versions, this super handy plugin will reduce the size of your images without altering their quality.

For more information and additional tips, check out my image optimization guide.

Reduce spam by using Disqus

Comment spam is definitely a nuisance. It adds valueless content to your site and can hurt your SEO because of the spammy links. While there are countless options to reduce comment spam (captchas, Akismet, etc.) the most efficient in my opinion is to use Disqus, a plugin that replaces WordPress native commenting feature by an independent, JavaScript based comment system.

Warn your visitors about old posts

One thing extremely annoying with blogs is outdated content. If you started blogging a few years ago, there’s no doubt that your blog features posts that are now completely outdated.

While the best solution to the problem would be to keep every post on your blog up to date, it can be a tremendous amount of work. In that case, the best you can do is to warn your readers that the post they’re reading is old and might not be up to date. If you’d like to do that automatically, you can find a great code snippet on WP Engineer.

Use a modern theme

A great WordPress theme looks good, but is also optimized for speed/SEO, and provides a great user experience to your readers. If you’re looking to create your own theme, check out my tips for creating awesome WordPress themes. If you prefer not spending time on developing your own theme, feel free to browse my lists of fastest WordPress themes, themes for web development and web design or give a try to Meridian Themes, a new premium theme vendor which specializes in beautiful and usable themes.

Look out for broken links

Broken links are hurting your SEO and provide a negative experience to your readers.

To find out broken links on your site, you can either use this handy tool or even better, the Broken Link Checker plugin which finds broken links and allows you to remove them by a single click.

Always keep mobile devices in mind

In 2017, more than 50% of people are accessing internet from a mobile device. So it should go without saying that your site has to be well-optimized for smartphones and tablets.

Mobile optimization consist of mostly two things: Speed optimization, since sites are often accessed from WiFi connections which aren’t always the fastest ever; and responsive design, which ensures that visitors get a readable and usable site regardless of the device they’re using.

Use a quality server

To check your server speed, there’s a great tool called Pingdom. Simply enter your site url and Pingdom will let you know everything about your server performances: general grade, load time, faster than X % of other sites, page size and the number of requests. If your grades are low, you should think about moving your site to a better server.

I’ve listed below my current top 4 web hosting companies for WordPress.

Name Pros Price (Starting at)
WP Engine Managed WordPress Hosting. 100% made for WordPress! $29/month
Vidahost Great quality, very fast. Hosting CatsWhoCode. Super fast support. £2.99/month
HostGator WordPress specific hosting. Cheap but still good. $4.99/month
Kickassd High performance SSD hosting for cheap. $7.99/month
InMotion Hosting Cheap but still good. $4.99/month

Looking for more choices? DesignBombs has an interesting article about managed WordPress hosting, as well as a WPEngine coupon and their own comparison of the current best WordPress themes.

Don’t forget promotion

Writing great posts should be the priority of a blogger, but promoting the content you’ve created should always come as the close second. Promoting your blog posts will attract new visitors and clients, and could lead some of your best articles to go viral.

Hope this list will help you to improve your WordPress website quality! Any other tip you’d like to add? Feel free to post them in the comments.

10 things to do right now for a better WordPress site

Use a caching plugin

Caching makes dynamic websites a lot faster to load, so you should definitely implement it on your WordPress install if you haven’t already. Many free and premium plugins offer caching: WP Rocket, WP Super Cache, and more. My favorite and the one used on all my sites is W3 Total Cache.

Stay updated

Every day, hundreds of WordPress websites get hacked because the site owner didn’t keep his install up to date. This includes the WordPress core and all plugins and themes you’re using.

Also – if you don’t use a theme or a plugin, always delete it from your server. Need help with upgrading? The Codex has an extensive article about it.

Optimize your images

Images are generally over 50% of the total weight of a web page. In order to increase your site loading speed and ensure a comfortable user experience on mobile devices, optimizing images is a must.

The easiest way to do is to install and use WP Smush. Available in both free and premium versions, this super handy plugin will reduce the size of your images without altering their quality.

For more information and additional tips, check out my image optimization guide.

Reduce spam by using Disqus

Comment spam is definitely a nuisance. It adds valueless content to your site and can hurt your SEO because of the spammy links. While there are countless options to reduce comment spam (captchas, Akismet, etc.) the most efficient in my opinion is to use Disqus, a plugin that replaces WordPress native commenting feature by an independent, JavaScript based comment system.

Warn your visitors about old posts

One thing extremely annoying with blogs is outdated content. If you started blogging a few years ago, there’s no doubt that your blog features posts that are now completely outdated.

While the best solution to the problem would be to keep every post on your blog up to date, it can be a tremendous amount of work. In that case, the best you can do is to warn your readers that the post they’re reading is old and might not be up to date. If you’d like to do that automatically, you can find a great code snippet on WP Engineer.

Use a modern theme

A great WordPress theme looks good, but is also optimized for speed/SEO, and provides a great user experience to your readers. If you’re looking to create your own theme, check out my tips for creating awesome WordPress themes. If you prefer not spending time on developing your own theme, feel free to browse my lists of fastest WordPress themes, themes for web development and web design or give a try to Meridian Themes, a new premium theme vendor which specializes in beautiful and usable themes.

Look out for broken links

Broken links are hurting your SEO and provide a negative experience to your readers.

To find out broken links on your site, you can either use this handy tool or even better, the Broken Link Checker plugin which finds broken links and allows you to remove them by a single click.

Always keep mobile devices in mind

In 2017, more than 50% of people are accessing internet from a mobile device. So it should go without saying that your site has to be well-optimized for smartphones and tablets.

Mobile optimization consist of mostly two things: Speed optimization, since sites are often accessed from WiFi connections which aren’t always the fastest ever; and responsive design, which ensures that visitors get a readable and usable site regardless of the device they’re using.

Use a quality server

To check your server speed, there’s a great tool called Pingdom. Simply enter your site url and Pingdom will let you know everything about your server performances: general grade, load time, faster than X % of other sites, page size and the number of requests. If your grades are low, you should think about moving your site to a better server.

I’ve listed below my current top 4 web hosting companies for WordPress.

Name Pros Price (Starting at)
WP Engine Managed WordPress Hosting. 100% made for WordPress! $29/month
Vidahost Great quality, very fast. Hosting CatsWhoCode. Super fast support. £2.99/month
HostGator WordPress specific hosting. Cheap but still good. $4.99/month
Kickassd High performance SSD hosting for cheap. $7.99/month
InMotion Hosting Cheap but still good. $4.99/month

Looking for more choices? DesignBombs has an interesting article about managed WordPress hosting, as well as a WPEngine coupon and their own comparison of the current best WordPress themes.

Don’t forget promotion

Writing great posts should be the priority of a blogger, but promoting the content you’ve created should always come as the close second. Promoting your blog posts will attract new visitors and clients, and could lead some of your best articles to go viral.

Hope this list will help you to improve your WordPress website quality! Any other tip you’d like to add? Feel free to post them in the comments.

The ultimate guide to your WordPress Vlog theme

In order to have a successful vlog, you need to find a WordPress theme that is designed for this purpose. The reason for this is that you want to be able to customize your layout, and have the best possible support for your videos. It needs to be fast, reliable and truly video focused. There are lots of quality WordPress themes for vlogs, but I want to take you through one that I believe has all of the essentials, and is easy to use.

Following the example from Meks and their Vlog WordPress theme, we can cover what you need to look for in a quality theme that is designed for video-centric content.

Show off your video with great UI design

Okay so you need a WordPress theme with a great UI that will make your videos stand out. Vlog has a “video carousel” that will display your latest and most popular videos.

As soon as someone comes to your website they will be able to see your best work with one click. If it’s your personal blog that can be your latest clip, otherwise for businesses it can be your most popular tutorial. The best part about having this is that if you use the demo importer, you can get the layout with no hassle at all.

Don’t let your visitors be distracted by anything else while they are watching your content. Yes, that is possible, just select “cinema mode” on Vlog and enjoy videos in their full potential. Want to watch one clip after another or save something for later. Vlog lets you do that as well, by selecting “watch later”.

Having a UI that supports your video content can also allow your viewers to browse through categories, and latest videos. Just create featured playlists. Group all of your videos to make them more accessible, so if you are a nature vlogger you can group videos by animals, breeds, habitats. The choice is yours.

This is all just on the home page. Don’t forget you need to focus your individual posts on your videos too. The Vlog theme showcases your videos within each post, making them easily sharable, available and elegant.

The above is what I think of as absolutely necessary for any vlogger to have on their website.

Customize every pixel of your Vlog

For those who are happy with keeping it simple and sticking to the demo, you won’t go wrong, but for those who like to polish every last corner of their website, Vlog by Meks gives you that opportunity too. Important to remember, select a theme that matches your WordPress ability that way you can make the most out of it.

Looking at the Vlog theme by Meks, the magic happens in the Admin section of your website, which can be found under the theme’s WordPress options. Here you can do a number of things like customize your header, adjust your social menu, and select your background color, just to name a few.

Vlog also offers you the option of playing with website typography, translating the website, and monetizing it by adding different advertising.

Under the hood of your Vlog theme

So far we have covered why it’s important to have a WordPress Vlog theme that will look great, and how to make it just the way you like it. But, for video content especially you need to focus on performance as well.

WordPress supports plenty of video sources on its own, making it very easy for you to embed it into a page or a post by simply pasting the URL to a video. Vlog theme goes one step beyond.
Whether you host your videos on YouTube, Vimeo, DailyMotion, JWPlatform, Facebook, Wistia, Twitch, just to name a few, the theme will automatically detect it and display it properly to fit all of the layouts. There is no need for custom fields to enter video sources, IDs, API keys, or to define custom post types for videos. Simply paste the video URL into your post content editor and the Vlog theme will know what to do next.

This is great for many reasons, but especially because you can be sure you won’t lose any content after you switch to another theme, or the other way around, switching your old theme to Vlog. Once you make the switch to Vlog you will have everything in place, with no need to go through each existing post providing additional detail to make it work. Easy, right?

Also, it’s a well known fact how much iframes may slow down page loading, not to mention what happens if there is more than one iframe on a single page. Vlog takes care of that as well. Video iframe will be loaded only after you click to play a video, making your website way faster than the average.

Conclusion

To create a modern, clean, video centric website you need to invest in a quality theme. It needs to support different video formats, and have easy video integration. Add to that multiple layout options, and total control of the look of your website. Not to forget how important it is to have easy content migration and website performance. Okay so it’s a lot, but a great vlog theme will get you there.

Get yourself a WordPress theme focused on vlogging and enter the age of vlogs!

This is a guest post by Nevena Tomovic.

The ultimate guide to your WordPress Vlog theme

In order to have a successful vlog, you need to find a WordPress theme that is designed for this purpose. The reason for this is that you want to be able to customize your layout, and have the best possible support for your videos. It needs to be fast, reliable and truly video focused. There are lots of quality WordPress themes for vlogs, but I want to take you through one that I believe has all of the essentials, and is easy to use.

Following the example from Meks and their Vlog WordPress theme, we can cover what you need to look for in a quality theme that is designed for video-centric content.

Show off your video with great UI design

Okay so you need a WordPress theme with a great UI that will make your videos stand out. Vlog has a “video carousel” that will display your latest and most popular videos.

As soon as someone comes to your website they will be able to see your best work with one click. If it’s your personal blog that can be your latest clip, otherwise for businesses it can be your most popular tutorial. The best part about having this is that if you use the demo importer, you can get the layout with no hassle at all.

Don’t let your visitors be distracted by anything else while they are watching your content. Yes, that is possible, just select “cinema mode” on Vlog and enjoy videos in their full potential. Want to watch one clip after another or save something for later. Vlog lets you do that as well, by selecting “watch later”.

Having a UI that supports your video content can also allow your viewers to browse through categories, and latest videos. Just create featured playlists. Group all of your videos to make them more accessible, so if you are a nature vlogger you can group videos by animals, breeds, habitats. The choice is yours.

This is all just on the home page. Don’t forget you need to focus your individual posts on your videos too. The Vlog theme showcases your videos within each post, making them easily sharable, available and elegant.

The above is what I think of as absolutely necessary for any vlogger to have on their website.

Customize every pixel of your Vlog

For those who are happy with keeping it simple and sticking to the demo, you won’t go wrong, but for those who like to polish every last corner of their website, Vlog by Meks gives you that opportunity too. Important to remember, select a theme that matches your WordPress ability that way you can make the most out of it.

Looking at the Vlog theme by Meks, the magic happens in the Admin section of your website, which can be found under the theme’s WordPress options. Here you can do a number of things like customize your header, adjust your social menu, and select your background color, just to name a few.

Vlog also offers you the option of playing with website typography, translating the website, and monetizing it by adding different advertising.

Under the hood of your Vlog theme

So far we have covered why it’s important to have a WordPress Vlog theme that will look great, and how to make it just the way you like it. But, for video content especially you need to focus on performance as well.

WordPress supports plenty of video sources on its own, making it very easy for you to embed it into a page or a post by simply pasting the URL to a video. Vlog theme goes one step beyond.
Whether you host your videos on YouTube, Vimeo, DailyMotion, JWPlatform, Facebook, Wistia, Twitch, just to name a few, the theme will automatically detect it and display it properly to fit all of the layouts. There is no need for custom fields to enter video sources, IDs, API keys, or to define custom post types for videos. Simply paste the video URL into your post content editor and the Vlog theme will know what to do next.

This is great for many reasons, but especially because you can be sure you won’t lose any content after you switch to another theme, or the other way around, switching your old theme to Vlog. Once you make the switch to Vlog you will have everything in place, with no need to go through each existing post providing additional detail to make it work. Easy, right?

Also, it’s a well known fact how much iframes may slow down page loading, not to mention what happens if there is more than one iframe on a single page. Vlog takes care of that as well. Video iframe will be loaded only after you click to play a video, making your website way faster than the average.

Conclusion

To create a modern, clean, video centric website you need to invest in a quality theme. It needs to support different video formats, and have easy video integration. Add to that multiple layout options, and total control of the look of your website. Not to forget how important it is to have easy content migration and website performance. Okay so it’s a lot, but a great vlog theme will get you there.

Get yourself a WordPress theme focused on vlogging and enter the age of vlogs!

This is a guest post by Nevena Tomovic.

Top 10 lightweight CSS frameworks for building fast websites in 2017

Pure CSS


Only 3.8KB minified and gzipped, but packed with features! Pure CSS has been my lightweight framework of choice for over a year now. Want to see it in action? Check out this tutorial I wrote last year.
Info & download: https://purecss.io/

Beauter


I haven’t yet had the chance to test Beauter in a project, but I can’t wait. This tiny (~4KB compressed) CSS framework not only provides you with tools to speed up front-end development, it provides them in a beautiful and clean manner.
Info & download: http://beauter.outboxcraft.com/

Mini.css


A lightweight (7kb Gzipped) framework for crafting a fast site easily.
Info & download: https://chalarangelo.github.io/mini.css/

Milligram


Milligram provides a minimal setup of styles for a fast and clean starting point. With only 2kb gzipped, this tiny but powerful framework is in the top three of the lightweight framework available.
Info & download: https://milligram.github.io/

Dead Simple Grid


Not really a framework but just a simple grid layout that can be used in every project. 250 bytes of CSS code.
Info & download: https://github.com/mourner/dead-simple-grid

Siimple


Siimple is a minimal CSS framework for flat and clean designs. It’s lightweight but packed with features and looks awesome out of the box.
Info & download: https://siimple.juanes.xyz/

Min


Super lightweight and has the particularity to be compatible with super old browsers like IE 5.5 and Opera 9.
Info & download: http://mincss.com/

Lotus


Super small (1.8kb minified + gzipped) but packed with everything you need: Grid, media queries, forms, and more.
Info & download: http://goatslacker.github.io/lotus.css/

Skeleton


With only 400 lines of code, Skeleton is light as a feather. Yet, it features a grid, typography, forms, media queries… all you need for building a quality site in no time.
Info & download: http://getskeleton.com/

Picnic CSS


With a size of only 3kb when gzipped, Picnic is for sure lightweight, but also has everything you need for creating a great looking, functional website.
Info & download: https://picnicss.com/

Any other lightweight framework you like? Leave a comment below.

Top 10 lightweight CSS frameworks for building fast websites in 2017

Pure CSS


Only 3.8KB minified and gzipped, but packed with features! Pure CSS has been my lightweight framework of choice for over a year now. Want to see it in action? Check out this tutorial I wrote last year.
Info & download: https://purecss.io/

Beauter


I haven’t yet had the chance to test Beauter in a project, but I can’t wait. This tiny (~4KB compressed) CSS framework not only provides you with tools to speed up front-end development, it provides them in a beautiful and clean manner.
Info & download: http://beauter.outboxcraft.com/

Mini.css


A lightweight (7kb Gzipped) framework for crafting a fast site easily.
Info & download: https://chalarangelo.github.io/mini.css/

Milligram


Milligram provides a minimal setup of styles for a fast and clean starting point. With only 2kb gzipped, this tiny but powerful framework is in the top three of the lightweight framework available.
Info & download: https://milligram.github.io/

Dead Simple Grid


Not really a framework but just a simple grid layout that can be used in every project. 250 bytes of CSS code.
Info & download: https://github.com/mourner/dead-simple-grid

Siimple


Siimple is a minimal CSS framework for flat and clean designs. It’s lightweight but packed with features and looks awesome out of the box.
Info & download: https://siimple.juanes.xyz/

Min


Super lightweight and has the particularity to be compatible with super old browsers like IE 5.5 and Opera 9.
Info & download: http://mincss.com/

Lotus


Super small (1.8kb minified + gzipped) but packed with everything you need: Grid, media queries, forms, and more.
Info & download: http://goatslacker.github.io/lotus.css/

Skeleton


With only 400 lines of code, Skeleton is light as a feather. Yet, it features a grid, typography, forms, media queries… all you need for building a quality site in no time.
Info & download: http://getskeleton.com/

Picnic CSS


With a size of only 3kb when gzipped, Picnic is for sure lightweight, but also has everything you need for creating a great looking, functional website.
Info & download: https://picnicss.com/

Any other lightweight framework you like? Leave a comment below.