6 ways to Make your WordPress Website Mobile-Friendly

By Hopinfirst on September 15, 2018

Studies are showing how consumers are spending more time connecting to the Internet through mobile devices compared to desktop computers. This trend has already been taken into consideration by internet giants, opting them to advise that mobile-friendly websites are going to get more ranking points. This mobile-first index is an important shift in search engine optimization, and must really be taken into consideration by businesses as they maintain and develop their websites.

To help you in ensuring that you do not get left behind on this shift in website development, we will be sharing 6 effective ways on how to make your WordPress website mobile-friendly. The following tips can help you easily make your site significantly friendlier for mobile users.

#1. Images, CSS, and HTML optimization

There are basically two primary considerations in making your site mobile-friendly: designing your site to fit a smaller screen while keeping it visually delightful and making the most out of objects without causing performance issues on less capable devices – in short, it’s balancing user experience and site performance.

Images, an important element for any website, should be optimized for mobile. Of course, images should be smaller to ensure that it will look fine on a small screen. There are tools that can help compress images to a smaller file size. You should also control the use of images, and that you should remove photos that do not exactly add value to your pages. Remove unnecessary photos that could just weigh your website down. and Even then, the photos that will stay on the site should be lightweight. You should also consider that most users browsing through mobile would more often use cellular data, and it would cost them a huge amount of their data allocation if you retain a number of high-resolution images.

It’s also recommended that you compress the HTML and the CSS of your website in order to keep your page running smoothly on mobile. If not optimized for mobile, the page would have design and performance issues on handheld devices. Make sure that you tweak your settings so that everything works perfectly. It would be great if you make use of a trusty cashing plugin that can help you out.

#2. The Help of Responsive Plugins

There’s a wide range of plugins that can help improve your site’s functionality on mobile devices. Here are some plug-ins that you should consider using to improve your site’s mobile-responsiveness:

Any Mobile Theme Switcher

This plug-in helps provide themes for your mobile website that is different from what would appear on desktop web browsers. First, it detects whether the visitor is using a mobile device or not, and would alter the design to your desired theme.

Call Now Button

A straightforward plugin, it adds a mobile-integrated call button on your website, which can really capture the attention of mobile users. This is very helpful in raising customer call-ins for inquiries, setting appointments, or basically just to bring customers in touch with your business.

Cornerstone Page Builder

This plug-in provides a lot of ways to include various elements to your website.

Dynamic Widgets

It helps you manage widgets on mobile sites and allows you to choose for what pages on your site these widgets would appear so that the overall performance of your clients’ phone won’t be affected

Favicon by Real Favicon Generator

This makes your mobile site flexible to the screen size to make sure that it runs smoothly across various mobile devices.

Max Mega Menu

This plug-in manages the menu of your mobile website. This feature helps make your mobile site easy to navigate, considerably improving the experience of your site’s visitors.

Mobile app Plugin

If you want to easily transform your website into a mobile website or create mobile app out of your website, this is an excellent plug-in that you should consider using.

Smush Image Compression and Optimization

This keeps your photos looking great while keeping file size manageable, ensuring that your images would load quickly on mobile devices without compromising quality.

WordPress Mobile Pack

This plugin helps you come up with a great mobile website and has a number of themes that can help you set up your mobile website.

WP Touch

It ensures that visitors using mobile devices will be directed to your mobile site. Your mobile site would also adjust to the screen size of the device that being used.

Plugins are very helpful especially when keeping a mobile website smart. Make sure that you make use of decent plugins and that your site works smoothly.

#3. Pop-ups are a no!

 

While it is understandable that popups are marketing strategies, they must not lead to a bad user experience, especially on mobile sites. That is why these should be taken down for mobile websites. Popups and interstitials that cover the whole screen are already bothersome for desktop computers, but it is even worse if on mobile. Sites that make use of pop-ups and interstitials loses points from Google, so make sure that you avoid making use of these in your mobile website.

#4. The use of AMP (Accelerated Mobile Pages)

Google’s Accelerated Mobile Pages project makes mobile content load faster. Google sets optimization standards that greatly improve the loading speed of an optimized site. The fast loading, coupled with standardized formats, improve the customer experience to a great degree.

An “AMPed” site will surely be mobile-friendly the way Google wants a site to be. Furthermore, AMP websites are expected to rank higher in the results page. So, aim to have your website abide by AMP standards.

#5. Full-Fledged Mobile App Consideration

Earlier, a plugin that can help transform your site to an app has been discussed, which is vital because mobile apps are also evolving in a fast pace. There are mobile apps for various needs, and having a dedicated app for your site is a brilliant idea.

While some businesses only have websites, a number of businesses maintain both mobile website and mobile app. While doing the latter is an added challenge, it’s quite rewarding as the app version of websites are more engaging, and could help you improve the user experience of your customers without being limited by any web browser.

Mobile Friendly Test

Google has a mobile-friendly test which can help you assess which areas of your mobile website will need more work. You may also make use of Google Analytics which provides you with the ability to determine what kind of mobile devices your visitors use. This can help you prioritize as to what device you will need to optimize best.

Make sure to utilize this helpful tool to determine what you need to do to make your site mobile-friendly.

#6. True Shift in Search Rankings

With Google’s mobile-first index, being mobile friendly is a necessity for business that are engaged in websites. While the SEO is not revolving on only making your site mobile-friendly, it is a significant factor for ranking.

Our tips above can help you step up your mobile-friendliness game so make sure that you spend time in adding the above tips to your website management initiatives. SEO now heavily involves mobile-friendliness so make sure that you are not left behind.

Perhaps the best way to conclude this is that WordPress itself is finding ways to help WordPress sites more compatible for mobile. Your actions plus that of WordPress itself can work hand-in-hand to help you reach the desired goal in the search engine results pages.

Author Bio:- A true expert in web design and mobile app development, Kenneth Sytian is a web designer in the Philippines and owner of Sytian Productions. His no-nonsense approach to design and a decade of solid experience is a winning combination for his clients.

How to Stop Hotlinking on a WordPress website step-by-step

By Hopinfirst on September 15, 2018

What is hotlinking?

Pirates have long since stopped looking like Johnny Depp on an old fashioned ship.  The internet houses thieves everywhere.  Internet image piracy is known as “hotlinking” and it happens when a site unrelated to your own, links to an image or other resources, without permission, while still letting you host it on the world wide web.  Why is this bad?  When sites don’t host their own images, your bandwidth is drained by visitors who are not coming to your site.

You can check for hotlinking by looking at the source code in the developer tools on your internet browser.

Blocking the Pirates

Like most WordPress security solutions, all you need is a simple bit of .htaccess code to block outside sources from stealing your images, videos, pdfs, and other files.

First, using an FTP client navigate to your root folder and open your .htaccess file. (create one if you do not see an .htaccess file in your root directory.)

Second, copy and paste the below code into the .htaccess file. Make sure it goes above any existing rules or coding.

# STOP HOTLINKING

<IfModulemod_rewrite.c>

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://([^.]+\.)?example\.com [NC]

RewriteRule\.(gif|jpe?g?|png)$ – [NC,F,L]

</IfModule>

After pasting the coding, you need to tailor the code to your specific site.

To do that, just replace the example.com with your domain. If your TLD is not .com but something else, make sure to change that. See an example below.

 

So, what does this code do?

It checks to see if the refer is not empty and then it determines if the refer is from your domain or not.

Finally, it checks to see if there is a request for the file types listed in the code.  In our base code, it checks for gifs, jpegs, and pngs.  This portion of the code can be altered to include any file type you want to protect from outside users. If there is a match for any of the mentioned criteria, the site stealing your resource displays a 403 Forbidden response.

Tailoring to Your Site

There are a few tweaks you need to make to the code we provided to make it work for your site.  As mentioned above, the most important change you need to make is changing the example domain to your domain name and the “top level” of your domain.  The top level is your .com, .net, .biz, etc.

This is the time you also want to add any file extensions to your coding.  For example, if you want to protect Zip files as well, you go to line five and add a forward slash followed by “.zip” into the appropriate section code.  After you have added all of your preferred extensions, save and upload the file to the server.

Checking to see if your new security measures work is easy.  All you have to do is refresh the page of the thieving website, and your browser should display a hotlink protection message.

Further customization

If you want to customize your security even further, there is a snippet of code that allows you to customize the response the pirate’s website provides when you block their hotlink.

To use this code, replace the above provided code you pasted into your .htaccess file with the code below.

# STOP HOTLINKING

<IfModulemod_rewrite.c>

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://([^.]+\.)?example\.com [NC]

RewriteCond %{REQUEST_FILENAME} !hotlink.gif [NC]

RewriteRule\.(gif|jpe?g?|png)$ /hotlink.gif [NC,R,L]

</IfModule>

NOTE: do not paste under first code, but completely delete and replace it!

You still need to make the same customizations with the first code as you did with second one.  Change your domain name and top-level domain.  Change or add to the file extensions to include all types of resources you want to protect.  Finally, replace the part of the code that says “hotlink.gif” with the file name you want to use in response to your pirates.  Be sure to also include the link path to this file or image on the server.

You can use any image you want; it is a perfect opportunity to get creative, and maybe even redirect those visitors to your site instead!

That is all there is to it.  Choose your preferred code snippet and protect your resources from internet pirates.

Author:

Emin is a Los Angeles-based web designer at Amberd Web Design Studio, on his free time he enjoys writing web design related tutorials, reading books and drawing.

How to Add a Favicon to Your WordPress Site?

By Hopinfirst on September 15, 2018

Favicon stands for Favorite icon. It is the tiny image which represents your website in a browser’s favorite menu, tabs and wherever else it is represented visually. Even a small detail can make a big difference in how your website is seen. Having a favicon is good for gaining brand recognition and building trust with the visitors.

In this article we will show you how to include a favicon on your website. First we will talk about why you should add as favicon and then how to add one to your WordPress site.

Why to Add a Favicon to Your website?

A Favicon is part of your website’s identity and is good for user experience. Below are some of the reasons to use Favicon to your site:-

  • Easy to identify in Web Browsers

A favicon helps your site to be more recognizable in web browsers. Generally users open more than one website in their browsers. If you have used a favicon in your site then it will help the users to identify your site among many other open tabs.

In the above image you can easily identify the tab for WordPrax site by the logo alone. You can also identify the other sites from their favicons. Otherwise you have to make an effort to read the beginning of the site. Clicking on every tab is certainly not the best option.

  • Looks more Professional

If you have added a favicon to your Website then it will look more professional and trustworthy. Many of the customers may be relying on this small detail to take their decision to purchase something.

Now we will discuss about how to add a favicon to your WordPress site.

How to Add a Favicon to WordPress Site

There are many ways to add a favicon to your WordPress site. Lets talk about them one by one.

Method 1: Using the Customizer

This is the most easy option to add a favicon to WordPress and has been around since WordPress 4.3. Just activate it in your theme and you can simply add favicons via:

Appearance > Customize  in WordPress backend. Here just click on the ‘Site Identity’.

Here, you can change site’s title, description and other thing related to your site including the favicon. To change this just click on the ‘Select File’ button to upload your favicon file.

If the file is too large then WordPress will ask you to crop it to the appropriate size. Otherwise just save it. Now you can preview your favicon in action. Finally just save and publish.

Method 2: Using Your Theme Options

Sometimes option to change the favicon is not present in the Customize then you can still find it in your theme settings. Now a days the themes come with lots of options and they are not standardized. Hence you should first check this option within your theme as this is one of the easy option.

Method 3: Adding a Favicon using Plugin

If your theme doesn’t have a built in option then you can also use a plugin. We are giving you some options:-

Now we will describe how to add a favicon using the All In One Favicon which is one of the most popular solution.

Just install the plugin and go to the Settings under Settings > All in one Favicon.

This plugin provides support for GIF, ICO, PNG files and Apple Touch Icons. It will also help you to define different paths for icons used in the frontend and backend. You just need to paste the paths of your already present favicons in the WordPress media library. Otherwise you can use the buttons to upload your files and the plugin will automatically insert their paths. Then save the changes.

Method 4: Adding a Favicon using Code

If your WordPress version is old then you have to add a favicon manually. First try this in a local development site to check whether it is working fine. To do so, first you have to upload your favicon files to the site’s root folder. You can also use a subfolder but remember the file path for later use. Make sure there is no other favicon files present there.

After the upload, you can add the favicon to the WordPress site either by adding certain code in your header file i.e header.php or functions.php. We are giving a code for use in functions.php.

function add_favicon() {

echo ‘<link rel=”shortcut icon” type=”image/png” href=”‘.get_template_directory_uri().’/assets/favicon.png” />’;

}

add_action(‘wp_head’, ‘add_favicon’);

If you are using an ICO file then use the below version:-

function add_favicon() {

echo ‘<link rel=”shortcut icon” type=”image/x-icon” href=”‘.get_template_directory_uri().’/assets/favicon.ico” />’;

}

add_action(‘wp_head’, ‘add_favicon’);

Just replace the part after href= with the location of your favicon files and this code will work for your site.

Conclusion

Although favicons are small design details but they make a big difference in the opinion about a website. Favicon helps in making your site more professional and help it to stand out in so many browser tabs and ultimately enhancing the user experience and brand recognition.

We have discussed how adding a favicon will be beneficial and four ways to add them to your WordPress site. You can choose any options but the favicon will always have a great effect on your website’s perception. And this is one of the most important thing to get while running a business website.

Contact Us for Free Consultation

Are You Planning to outsource Digital Tansformation services? Feel free for work-related inquiries, our experts will revert you ASAP,