Month: November 2016

A trick to Speed Up your Google Fonts in WordPress

Posted on by Mario

a-trick-to-speed-up-your-google-fonts-in-wordpress

As web developers, you should remember for not to ignore each small portion of the overall web page. Since those small things can produce faster load times, if you can optimize them better. Web fonts is one of the good examples, even though images are still the main thing to consider. So, in today’s article, we will reveal a method for optimizing and speeding up Google Fonts in WordPress for faster web experience.
What are Google Fonts?
Google fonts is an open source (free) directory which over 800 web font families that you can download and use it on your website. You can also download locally for print and other uses. There are many great free way to enhance the look and usability of your site in Google Fonts. No wonder that there are millions of WordPress websites utilize Google Fonts nowadays.

A good web font will give the effect of professionalism and aesthetic. However, system fonts will always win when it comes to pure performance. In fact, typography has been shown to affect conversions in a positive way. Besides, it is important to understand how Google Fonts will affect speed and performance of WordPress site.

How to Use Google Fonts in WordPress

There are two opts to add Google Fonts to your WordPress site. The first way is to grab them directly from Google. This method uses their global CDN to deliver the fonts quickly from different servers from around the globe.

  • First Method

When you add them to your site there will be an external request to fonts.googleapis.com.

google api

  • Second Method

There are also external requests to fonts.gstatic.com for the WOFF or WOFF2 versions depending upon browser support.

blog2

Host Google Fonts Locally

There are many ways that you can use to speed up your Google Fonts in WordPress. For example you may add embed code from Google fonts, host Google fonts on your own CDN, and Host Google fonts locally. But today, we are going to give brief explanation on how to host Google fonts locally on your web server.

Google-webfonts-helper is a great choice to host locally, in fact, it is a free tool. By using this tool, you can download the Google fonts locally more easily and gives you all of the CSS.

Google Fonts locally is usually suitable for audience which is in a certain geographical location and close to server. Google Fonts CDN is great; however adding those additional external requests and DNS lookups can cause delays. It implies that the method will work great if you are using fast hosting such as manages WordPress hosting from Kinsta. Below is an example on how to install Google Fonts locally.

/* roboto-regular – latin */
@font-face {
font-family: ‘Roboto’;

font-style: normal;

font-weight: 400;

src: local(‘Roboto’), local(‘Roboto-Regular’),

url(‘https:/perfmatters.io/fonts/roboto-v15-latin-regular.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */

url(‘https://perfmatters.io/fonts/roboto-v15-latin-regular.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 – latin */

@font-face {

font-family: ‘Roboto’;font-style: normal;

font-weight: 500;

src: local(‘Roboto Medium’), local(‘Roboto-Medium’),

url(‘https://perfmatters.io/fonts/roboto-v15-latin-500.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */

url(‘https://perfmatters.io/fonts/roboto-v15-latin-500.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

}

/* roboto-700 – latin */
@font-face {
font-family: ‘Roboto’;

font-style: normal;

font-weight: 700;

src: local(‘Roboto Bold’), local(‘Roboto-Bold’),

url(‘https:/perfmatters.io/fonts/roboto-v15-latin-700.woff2’) format(‘woff2’), /* Chrome 26+,
Opera 23+, Firefox 39+ */

url(‘https://perfmatters.io/fonts/roboto-v15-latin-700.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

}

A Simple Guide for Designing Better Buttons

Posted on by Mario

simple-ways-in-designing-better-buttons

In website development, the role of buttons is important in determining the next actions. Moreover, having a good button design will automatically improve your user experience. If you’d like to take a look on how to create better buttons, you can follow several steps below:

Make Buttons Look Like Buttons

With visual cues, people can determine the click-ability, then understand that an element is a button. Due to this, it is important to use proper visual signifiers on clickable elements to make them look like buttons.

  • Shape
    For a long time ago, square or square with rounded corners is the most popular button’s design. Due to this, users are very familiar with this button shape. Even though, in some cases, the button shape can be circles, triangles, and etc., depending on the style of the site or app. However, using unique ideas to replace the traditional shapes will be a bit riskier. The main point is to make sure that people can easily identify each varying shape as a button.

But what elements can help you identify icons as buttons? There are two elements that can        give clear and distinct labels to icons as buttons. First, be consistent about the shapes to              provide a more familiar experience for users. The picture below demonstrates this point              perfectly.

  • Shadows and Highlights
    Shadows will help you a lot in making the element stand out against the background. Moreover, with shadows and highlights, you can easily identify an element as a tap-able or clickable. Since the effect makes the elements look like as if they can be pressed down.

Make It Easy for Users to Interact with Buttons

The next step is to make sure that your users have a good experience when they press the buttons. This includes size and visual feedback of buttons.

  • Size and Padding
    A good button should have bigger size than a person’s tap size. This will ensure the buttons you design are large enough for people to interact with. To choose a proper size for your buttons, you can rely on the MIT Touch Lab study. This study reveals that the average size of finger pads is between 10-14mm and fingertips are 8-10mm, making 10mmx10mm a good minimum touch target size.
  • Put Buttons Where Users can Find Them
    Locate your button in an easy to find area. Don’t make your users hunt for buttons.
  • Location and Order
    When it comes to web-based apps, you should determine about which placement truly works best for users. The right way to find out is by testing. If you design mobile navigation it’s worth paying attention to the best practices for buttons location.

Google Gives Warning on Repeat Offenders of Safe Browsing

Posted on by Mario

google-gives-warning-on-repeat-offenders-of-safe-browsing

For such a long time, Safe Browsing has been protecting users from any harm on the internet, and has evolved over the years to adapt to the changing nature of threats and user harm. Today, many sites have to violate Google’s Malware, Unwanted Software, Phishing, and Social Engineering Policies show warnings until Google verifies that the site is no longer harmful. The verification can be triggered automatically, or at the request of the webmaster via the Search Console. The verification can be triggered automatically, or at the request of the web developer via the Search console.

In fact, now Google will give warning to those site owners who are maliciously breaking Google’s Safe Browsing policies over and over again. The warning is shown when a user is about to visit a site that having any violation of Google’s Malware, Unwanted Software, Phishing, and Social Engineering Policies.

The warning will stop when Google considers that the site is no longer harmful. However, a site may have to wait just long enough to get the warning removed, and get back to their old activities  and do the harmful practices right after the warning have been removed.

Due to this gap in user protection, we have adjusted our policies to reduce risks borne by end users. Safe Browsing will start to classify these types of sites as “Repeat Offenders.” Repeat offenders are websites that repeatedly switch between compliant and policy violating behavior for the purpose of having a successful review and having warnings removed.

Bear in mind, that a site can be considered as repeat offender, only if their sites intentionally publish harmful content. By this means, a site that happens to get repeatedly hacked will not be considered a repeat offender.

A site which has undergone Google warning related to an actual repeat offender has to bear this warning on their site for at least 30 days. An email will be sent to web developer’s email address associated with Search Console, when Google has identified a site as a repeat offender.