Good Info

Uncategorised

Gutenberg Plugin – get used to it

Right off the bat, I like the collapsing menus in Gutenberg.

Gutenberg is a new "plugin" for WordPress that drastically rebuilds the interface for posts and pages. It's a plugin now, but it's more of a way for the powers that be to test the interface and see if the community is accepting. Also, to test the waters for compatibility I would guess. It's a clever way of trying something new, that is for certain, and you have to appreciate that.

And like I said, I appreciate the collapsing post menu items. Currently, you have the option to turn off the side board items completely under menu items but if you're like me, you turn them all on and scroll down to them. The new interface functions much like the widgets menu items, where they collapse and you can choose to have specific ones "unfolded" to see the options that come with it. Clever.

Wait! What's this? Each paragraph automatically becomes a section you can move around without copy+paste? Ok, that's pretty cool. Sections have their own options (basically text CSS options if a text section).

winnipeg web site host and builder

The image block pretty much gives you all the options that you'd have in the media gallery for an image. Handy, if you want to edit the alt tags, and if you don't want to engage a popup into the media library (simply said, it's faster).

There's also layout blocks which allow you to set columns and more for the text layout.

Such as this handy two column block.

Visual and text editing are still there via a toggle at the top left.

Inline images. I haven't figured out text wrapping yet.

Below is a cover image, that you have a few more CSS tricks to play with than a standard image, like fixed background positioning.

Manual excerpts are a great option – taking that functionality away from the SEO plugins that normally give it to you. From what I've read, Gutenberg is about taking some of the most commonly desired and implemented plugin functionalities found in themes and puts them into a plugin so the themes don't have to do that anymore. Makes sense to me as it seems themes are stretching way too far into functionality for my liking.

Right now Gutenberg is a plugin which allows you to write posts to test it out. It's very easy to see this being the standard for WordPress further down the line. This is a blogger's update. It's streamlined editing. BUT I could see coders screaming that there's no need for every paragraph to be a section unto itself. And what about
backwards compatibility? How about an option to use the older interface?

For myself, the old interface was easy to teach to clients who were Microsoft Word users – there were many similarities. With this one, I'll actually have to TEACH them how to use this interface. Big deal for me.

So maybe it's just growing pains as WordPress develops and we have to be more willing to let go of our current work habits as the web itself develops. We'll see. Watch for this to be battled out in the comments of many sites in the months
to come.

Clouds and Google News&Updates

Google and WordPress – let’s talk integrations

How to integrate some Google Apps and services into a WordPress site.

Google Products you Need to Integrate Today

Google has so many free and great options that can integrate and support your site that you absolutely have to have a Gmail account these days. Remember the golden age when you had to be INVITED to get a Gmail account from some in-the-know tech guru that you knew? Good times that changed the times. Ok, I’ll presume you’re logged into your Google account at this point and let’s get started.

Google Analytics

Site visitor tracking is absolutely the number one product to get running on your site, the sooner the better. Eventually, you’ll be done playing with all the shiny new plugins and features and want to know HOW your site is doing, and Google Analytics is the king in this regard. Yes, I know Jetpack also provides site visit stats, which is great, but analytics gives you so much more that if you are at all serious about measurements eventually you have to go to Google Analytics. So head on over to google.com/analytics and sign in.

Bottom right is the gear ADMIN icon, click on that, and you’ll see a list of properties you’ve got running. Don’t worry if there isn’t any yet, that’s why we’re here. There are three new columns that should pop up. On the left one is a drop down menu, select that and choose to Create New Account. You just entered the rabbit hole.

You’ll have to fill in some info about your site – basically fill in what you know, and accept the emails you want to receive about additional analytics emails to you – then at the bottom click Get Tracking ID. This is a number like “UA-xxxxxxxx”. Copy that, you’ll need it when you head back to WordPress.

Yeah, I know that there is a bit of script code that goes along with that if you want to MANUALLY add it to your site but if you know how to do that, you probably don’t need this tutorial.

What we’re going to do is suggest some plugins that handle that bit for you. Actually, it seems EVERY plugin and theme wants to do this for you if you provide them that number. Don’t. Choose one method of putting it into your site and stick with it for all your sites. That way you’ll remember where it is if you need to change it in the future (you probably won’t, but still).

A simple plugin that will provide some user data is Google Analytics Dashboard for WP. After you put in your UA code and authorize it, you’re all set. Google Analytics will start tracking your data and this plugin gives you a dashboard chart of visits for the last week and a quick way to get to your analytics page to look deeper.

Google Analytics Dashboard for WP (GADWP)

Monster Insights is another plugin you might like, it’s from the people that brought us Yoast SEO. There’s also addons that can track Adsense and Adwords inside this plugin.

Google Analytics for WordPress by MonsterInsights

Basically, most of these Analytics plugins give you an easy way to insert your UA code and pull a little data from Analytics for you.

If you’re more serious though, you’ll go to analytics to see the data. And once you get more serious there’ll be more scripts from Google to insert onto your site. To handle these I use the header and footer plugin to control these tracking scripts and keep them all in one space. IF it’s a really serious site that has lots and lots of tracking codes, use Google Tag Manager (which you can find at the login window for Google Analytics). That’s a whole tutorial unto itself so we won’t go there.

Head, Footer and Post Injections

Google XML Sitemaps

A sitemap file contains a list of all the pages on your site and is used by search engines to index your site and figure out where things are on your site. Google XML Sitemaps is a free WordPress plugin that creates a sitemap file for your website so your site can be indexed more quickly by search engines. If you’re a Google Webmaster user, it’s one of the requirements to having a healthy website for search engines.

Going an extra mile, this plugin automatically creates and submits your new sitemap file to the major search engines (Google, Yahoo! and Bing) every time there’s a change (e.g. you publish a blog post). Yoast SEO plugin also has this capability but this is a one-trick pony plugin and I like that type of pony.

Google XML Sitemaps

Google Page Speeds Insights

Google has a tool to help you see how fast your site pages are loading and to give you tips on how to speed up your site. Now, you could go to Google Page Speed page and manually enter your page but this is an integration blog post, let’s get it right into our nice friendly WordPress backend.

Google Pagespeed Insights

There’s two steps beyond installing and activating this plugin. You’ll need to create a Google API key (the plugin walks you through that under OPTIONS) AND you’ll have to enable the PageSpeed Insights API in the same Google Console. Don’t overthink creating this key, leave most of the options alone and just follow the instructions at the plugin page and you’ll be good.

Then it’ll run. This may take awhile depending on the size of your site as it is checking every page and post. When it’s done, you’ll have every page and post of your site mapped out and graded for speed with suggestions on how to improve speed right in your WordPress backend.

Best feature? You can sort it by the speed grade to see your worst offenders.

I did hit some instances where selecting DETAILS didn’t resolve due to server speed – which was also the biggest thing holding back that site speed too so it made sense – but just go back and try again.

Beyond Analytics…

Google Apps Login

Google Apps Login

You can also set up your site login to use Google Apps Login via this plugin. Takes some configuring but if you users are Google users you can save them a password. Also, you can then setup the next handy plugin.

Google Docs

Google Drive Embedder

Want to embed a Google Doc from Drive right into WordPress post? There’s a plugin for that. Google Drive Embedder.

Google Images

Uploadcare: Add media from anywhere

This handy little plugin let’s you add images from your Google Drive to your media library. AND with a shortcode, users of the site can upload images to your connected Google Drive as well. Bonus features: not just your Google image library, it allows image uploads from a lot of online storage locations like Facebook, Instagram, Dropbox, etc.

Google Calendar

Google Calendar is one of the company’s core tools. Event sites, such as a community centre, could have their event coordinator create a public Google Calendar, update it as necessary, and have it displayed on their site to make it easy for their people to keep people up to date as to what’s going on at the centre. I’d love it if my community centre would do this as I wouldn’t have to call them so dang much.

Simple Calendar – Google Calendar Plugin

With the Google Calendar Events plugin, you can display your full calendar as a WordPress post or page or, as shown below, by using a widget. Here’s some of this plugins great features:

  • Display events from any public Google Calendar.
  • Keep managing events in Google Calendar.
  • No need to create events in WordPress or create/educate a new user.
  • Out-of-the-box designs that match your theme’s look and feel.
  • Fully responsive and mobile-friendly monthly grid and list views.
  • Customize event content display using simple tags. No coding required.

Google Fonts

All four of these plugins (Easy Google Fonts, Google Fonts for WordPress, Google Font Manager and Google Typography) enable you to add and use any of the 600+ Google Fonts on your website. Their features vary a bit so give them a look and grab the one that fits you best. And DON”T USE TOO MANY PER SITE. That looks like garbage and cheapens your site. Pick a few and stick with it.

I don’t always use Google Fonts, but when I do I use:

Easy Google Fonts

Last One – Google Reviews

I’m a huge believer in Google Reviews driving organic traffic for local business – if you can get the reviews in the first place. If you’ve managed to do that, why not put the reviews right on your page instead of driving them off you site? Google reviews have more credibility than testimonials (that you *koff* place “without edits” onto your site, yeah, right). And here’s an additional tip about making it easy for people to leave a review in Google Reviews.

Google Places Reviews

Technology and Hardware

Tiny Photoshop Menus – how did this happen?

Suddenly, and without explanation, my adobe CC Photoshop install started giving me really small, really tiny, menus. Top bar menu, tool menus, palettes, everything menu related, is now reduced in size to almost unusability. Even the intro screen is tiny. The images are fine, and oddly enough, when clicking on a menu item the drop down list is normal sized but everything else is shrunk. And my and my new progressive lens don’t like it one bit.

How did this happen? What feature did I accidentally turn on?

Being a new windows user, with a new computer (Surface Pro 4), with a new version of Photoshop, I had a lot of options out there to search for the culprit. The one thing I knew, I didn’t do this intentionally. So here’s how I started the troubleshooting search.

Here’s the fixes I found to the tiny Photoshop menu problem:

So how did I fix this? A lot of searching. Some head scratching. And trying different terms to my search.

In Photoshop CC 2014, you have the option to activate experimental components—features that haven’t been officially incorporated into Photoshop—with the caveat that these features might not be fully production-ready yet. Ok, so far so good. One of the experimental features lets you scale Photoshop’s interface @200% to accommodate a high-density display (Note: it’s available—and necessary—only on Windows; hiDPI display has been on Mac Retina displays since CS6). The Surface Pro 4 falls into that category. Taadaa! I’m on the right track, I hope.

A quick search and I was able to access experimental features, just choose Edit > Preferences > Experimental Features. then turn off the scaling feature. But I have CC 2015 and that preference option wasn’t there. What the heck?

Knowing this, I have a bit more info to add to my search terms in Google. Search term “photoshop cc 2015.5 experimental options” to find out where they moved that to? Turns out, they didn’t, it’s just gone. And a post on Adobe’s own FAQ’s resulted in this answer:

In Photoshop CC (2015), HiDPI support on Windows is no longer an Experimental Feature (now called Technology Previews). This feature is enabled by default, but you can revert to the pre-HiDPI support look by:

  1. Choose Edit > Preferences > Interface.
  2. In the Text section, find the UI Scaling drop-down box.
  3. Change if from “100%” to “200%”.
  4. Restart Photoshop.

menu options photoshop tiny small menu fix

Yeah! I had no idea that there were experimental features to turn on, and I suggest that if you actually work with Photoshop and depend on it for a living, never turn on experimental features. I’m presuming that in the last update to Creative Cloud Adobe turned the HiDPI preference on automatically. Which, I’m going to say, is stupid. Options should never be turned on by default but rather explained as to why you should turn it on, how, and how to turn it off if necessary. By Adobe turning on this feature in the update it cost me two hours of work time. I’m only a tiny bit bitter about that.

I guess it’s more that Photoshop started taking advantage of the better screen HiDPI than actually turning on that feature. It was still set to 100%, the default, but that default took on new meaning with the advantages of HiDPI. All good now, back to normal and a little bit better and smarter for it.

Anyone else ever hit this problem?

lets encrypt wordpress integration Hosting Services

From HTTP to HTTPS using Let’s Encrypt & Really…

How do you add a security certificate to your site?

First off, let’s answer the why behind that question. 

SSL provides your browser with a way to verify that the site you’re trying to get to, is in fact, the site that you are trying to get to. You’d think that was a given when you enter in a URL but not in today’s world with so many ways for hackers to highjack your internet voyage. I’m not going to get into the technical details of how it does this as many people have explained it better than I could ever describe. Let’s just say it verifies that you site, is your site, and move onto other reasons why you should have it installed on your site.

Google announced several months ago sites that have SSL will be rewarded in the rankings. Which, essentially, punishes those that don’t have it in Google rankings.

Now let’s get into the how.

Previously getting a SSL certificate was an enormous hassle. Yes, yes it was, don’t argue with this point. I know some of my tech friends will say how easy it is,  but to me, if I have to touch the command line for anything, it’s no longer “easy”. Easy for coders, yes, everyone else, it was migraine waiting to happen even to power users. Add to that that it was expensive for smaller businesses who really didn’t have sensitive data and it wasn’t worth the time or money.

Enter Let’s Encrypt. An open source SSL provider that other developers have made handy tools for and has been embraced by the open source community. NOW we have a tool that’s relatively easy to implement. You still have some work to do, and an understanding of the ramifications of switching, but it won’t require you to take a coding course in network security and your clients won’t get steamrolled into buying expensive certificates from resellers. Love it! Go to their site and support these fine folks.

lets encrypt ssl certificate open source security site hosting

Here’s how we’ve implemented SSL using Let’s Encrypt on this very site.

  1. Get it on cPanel. This may require specifically making the request to your hosting provider if it’s not turned on your cPanel already. It takes some configuration on the backend in WHM so not all host providers have it installed by default. They should, but that’s another argument. Suffice to say, if you’re with a big hosting provider they either have it or don’t, and your “pleases” and “thank you’s” won’t change that till they change on their own. Also, it’s not in their interest to offer free SSL certificates as they are resellers or affiliates to companies that sell SSL certificates. Basically, don’t hold your breath waiting for it to happen if they haven’t already. There are benefits to knowing your hosting company on a personal level. let’s talk.
  2. Go into Let’s Encrypt on cpanel.
    old skin of cpanel showing where the lets encrypt icon is located
  3. Select the site you want to have SSL, agree, and you’re done. Not too many options here.
  4. That’s it. No, seriously. Your site now has https and a functioning SSL certificate that’s auto-renewed, free. Wow.
  5. Tweaks need to be done to your WordPress install at this point to make sure it’s displaying the https and that people can’t get to the http version of your site. Also, we don’t want to lose any Google juice in this process – one of the main reasons to have https is Google is starting to penalize sites that don’t have SSL – so let’s deal with those issues.
  6. Verify that the https is working, so go to that version of your site.
  7. Now login as you normally would.
  8. In your Dashboard > General Settings, you need to change the default WordPress Address (URL) and the Site Address (URL) to the https version. That basically tells your site to always use https even if links to your site use http. You’ll have to log back in after you save these changes.
  9. Add this plugin. Really Simple SSL, activate it and you’re done.The plugin handles most issues that WordPress has with ssl. All incoming requests are redirected to https. If possible with .htaccess, or else with javascript. The site url and home url are changed to https if you skipped step 8. I like to do that myself for some peace of mind. IF you need help installing a plugin (lord save me from the loons) then how did you get to this step? Seriously, you’re jumping too far ahead with your WordPress skills and you don’t need to worry about SSL.
  10. Last step, let Google know that you’ve made this change.
    – Google Analytics (choose the site, Admin > Property Settings > Default URL and select https). If you don’t do this step you’ll be tracking the old non-ssl version of your site which will be non-existent at this point.
    – Google Webmaster Tools doesn’t allow you to simply make the change like Analytics. You’ll have to set up a new site but that’s pretty easy as you’ve already set up the verification code required if you’re running Google Webmaster Tools.
    – Google Adwords. Hooboy-this is a “not fun” doozy of a situation. If you’ve installed the plugin above, your site should handle the redirecting that Adword campaign URL’s will send your way. The better solution is to run a bulk find (http) and replace (https) in the campaigns to get them sending to the correct URL.  HOWEVER, if you do this, you may be corrupting your historical ad data! Adwords is much less useful without historical data so you’ll want to preserve that. What you really need to do is to pause all campaigns, duplicate them, THEN do the find and replace mentioned previously, and start the new campaigns. Considering how large some adwords campaigns get this is a bit duanting to say the least. I told you it wasn’t fun.
    – Final Note to Google: You’d think with the push from Google to get SSL on all sites they’d make it easier throughout their properties to reflect sites making this change but, umm, nope. Google, you can do better in this regard.

Congrats! You now have that beautiful lock beside your URL in the toolbar with the HTTPS! Your site won’t run up red flags as being insecure and you’ll be able to sleep better knowing you didn’t have to spend hundreds of dollars to get it done. Thank you to the Let’s Encrypt team and the Really Simple SSL team for their work. Donate to their work, they deserve it.

I’m sure there’s points I’ve overlooked with this tutorial so feel free to comment away at me and let’s get the dialogue happening here.

Need Help? Contact me for a consult on switching to HTTPS.

Name:*
Your thoughts for us:
Word Verification:
wordpress is awesome WordPress Related

Moving Posts between WordPress Sites

Movement is a sure sign that something is alive. WordPress is no different and occasionally you’ll need to move posts to another blog (!) OR perhaps you’re moving to WordPress from another platform. Here’s how to do this wisely.

Moving posts or pages between WordPress sites couldn’t be any easier. In the site you want to move posts FROM, go to your Dashboard, look under Tools, and select Export (note the Import option too, we’ll be there shortly). It’s from here you can select what you want to export. If you’ve done your job correctly with Categories, you can filter posts pretty easily for the exact content you need to move. Or All Content, who’s to judge here? At any rate, it exports an XML file filled with all the info for the next step.

In the site you want to BRING your content to, go to your Dashboard, look under Tools, and select Import. Navigate to that XML file you just created, select it, and import it. Keep in mind this keeps the posts as the same published status as before, same publication date, and (if you selected it) the same images uploaded into the new site. In fact, the only option you get when importing this file is to re-assign the author if you want to.

PRO TIP: Don’t forget to delete the old content on the old site, if needed, an export doesn’t remove the content, you have to do that following the export if that’s your cup of tea.

 

the lake lousie canoe shot for google reviews - bizarre I know, sorry SEO and SEM

Google Review link generator – make it easy for…

google review techniques

Here’s a quick SEO Tip: get people to review your business on Google+ to show Google you’re real and that real people are aware you exist. Don’t use fake reviews.

But people aren’t reviewing your site, so how do you encourage them. By asking them and sending a direct link to where they post a review on Google. Not as easy as copy pasting though as javascript is in use on the review page so instead use this site to get the direct link:

https://supple.com.au/tools/google-review-link-generator/

This tool that let’s you build a link that goes directly to the “add a review” section of your business listing on Google. Google ranking is affected by how many reviews you get in this business listing. Outperform competition by sending people a direct link to how they review you on google in a newsletter.
Historically, this direct link to the review popup window has been elusive. Google deliberately tries to prevent companies soliciting reviews to prevent false reviews, spam reviews, or bot generated reviews. All well and good for getting quality reviews on your Google Business listing, but what if I want to encourage my real and actual customers to submit a review when they can’t be bothered to click on more than one button? People are lazy after all and we don’t want to waste their time. Google changes how the reviews are made and the code behind it often to confound the bots so a direct link will get broken often, even if you are able to find it.
Supple.com, while generating the link, will also email notify you if the process changes so you can make a new direct link to the review pop-up. Now that’s handy!
I don’t suggest you flood the Google Reviews with fake reviews, that doesn’t help anyone. Rather send the link to your email base or include it on your website to make it easier for quality people to review your business.
taking the plunge into small site hosting SEO and SEM

The Speed Force: How to Optimize WordPress for Better…

Having a site that loads fast is the holy grail of web site owners. It’s the stuff of legends but we have faith that fast sites are attainable. In this post we hope to point you in the right direction to speeding up your site in a variety of manners which should be included in your processes for creating your content, managing your sites, server setups, and in code development.

Why is it Important?

Page load times are a “probable influence” on organic rankings according to Google. While you might demonstrate a correlation between particular speed metrics and search ranking, you can’t outright PROVE a causality relationship, since other unmeasurable factors are still at play. For all intents and our purposes though, speed matters to Google rankings, and for one very good reason – fast loading sites are enjoyable sites.

Speed matters for End Users

Google wants each search result to be a good experience for their users. So while relevant content is the most important factor for page rankings, the speed at which a user gets their webpage on screen IS critical for the experience to be pleasurable, and that is a factor that Goolge considers for page rank too. The problem is that sites with a lot of content may be great experiences and some sites with little content may be a pile of dung – pure size and speed can’t be the sole determining factor in optimal site speed. Optimization is the buzzword here. Do your best at optimizing that page load time and Google and your users will reward you.

Google is pretty mum on what it is actually ranking in terms of site speed (some suspect it’s the “time to first byte” loading speed) regardless, speed IS a consideration you should take seriously for many reasons including page ranking, customer experience and better conversion rates.

 

What’s this “Page Load Time” stuff?

Think of page load time as the complete journey. From the server assembling and fulfilling the requests to the networks that deliver it, to finally popping up on your screen where you can interact with the page. Let’s use a family going on a trip as our analogy for determining page load time:

  • The server gets the page ready to deliver and figures out how to deliver it (planning your trip and getting the kids into the car),
  • How often you’re making those deliveries (how many trips you need to make).
  • How much you’re delivering (how many passengers and cargo),
  • How fast its delivered (speed bumps and the speed limits on the road),

Optimizing each of these factors is ideal for page load time (and for the family). To confuse matters when people say”page load time” for a website, they may mean one of two measurements: “document complete” time or “fully rendered” time. Google might not distinguish between the two for page rankings but users certainly do. People want to get on with it, and will start to interact with a page before it’s completely on the screen. For our purposes we’re primarily going to focus on “document complete” as the page load time. “Fully rendered” has factors such as the browser being used and the users computer which we have no control over.

Now, page load time is measured in milliseconds. That’s a thousandth of a second. Humans can detect problems at 100 milliseconds. That’s right, above 1/10 of a second we start to notice (relative to expectations of course). Anything below that 1/10 of a second is deemed as instantaneous by our brains (kids response time is measured in days but expectation time is 1/100 of a second which may explain some parental frustration).

Interesting fact: Usain Bolt’s reaction time out of the starting blocks in the 100-meter final in Rio was 0.155 of a second and he wasn’t the fastest starter! He was 7th of 8 runners. He won his races in the first twenty meters of the run, decimating everyone with his phenomenal ability to get to top speed faster than anyone else in the world. Try to beat his reaction time here.

So fast response time matters but page load time is like the full hundred meters. Response time is one factor among many.

So let’s Start with the Content

Now a picture is worth a 1,000 words and impacts load time just as much. As good as WordPress is at developing thumbnails and as good as the plugin SmushIt or WordPress is at compressing them on the fly, always START with the smallest possible image that is the largest you need (upsizing is bad for image quality, just trust me on that). That’s in terms of pixel dimensions or physical dimensions. Just keep in mind, images are the single worst site element for dragging page load time down, so let’s begin our speed journey there.

Get the Physical Size Right

Don’t take a 300X300 pixel image and stretch it to 2000X2000 pixels. Conversely, don’t use a 300X300 pixel image when all you need are 30X30 pixels.

icon speed test gifTake this icon. I saved it at 1081 X 1081 pixels and am presenting it at 300 X 300 pixels. What a waste! Yes, WordPress gives me some auto-generated thumbnail options that are closer to the size I wanted, 500X500 pixels to be precise, but even if I use the 500 pixel thumbnail image and drag and shrink it down to 300 pixels, I’m still loading up the 500 pixel image, apx. 30% waste in load time for this image. And the original, which I’ll never use, is taking up server space!

PRO TIP: Start with as close to the correct physical pixel size image as you need, every time, for massive page load time savings.

 

 

 

Use the Right File Format for the Image

You’r a lot about different file formats, people get pretty emotional about this topic. Be a Vulcan, don’t let emotions rule your decisions. Each file format has their own benefits when it comes to how many kilobytes you want to shave off the image.

GIF: no matter how you pronounce it, this format is much better at handling large non-gradient images. Like logos and icons – that have solid blocks of colour. It also supports transparent pixels, so you don’t have to use a PNG for that.

JPG: great for photos. You can also save them using different levels of file compression (which results in image degradation). I always compress till I can notice, than back off a bit. PRO TIP: I use 8 as my default in Photoshop and go from there.

PNG: great for photos that need transparency, not so great with big blocks of colour, you’ll get a slightly larger PNG than you would a GIF in that case. PNG’s are great, but only use them if you have a need for transparency, otherwise JPG compresses the file much better.

 

Tests with Flat Colour Images

PNG size test
This transparent PNG’s file size is 22.6 kb at 250X250 pixels and uses the RGB colour space.
gif spped test
This GIF is 2.26 kb at 250X250 pixels and uses very narrow Index colour space without transparency.
250X250 pixels
This GIF’s file size is 1.5 kb at 250X250 pixels and uses an even narrower Index colour space where the colour white ahs been replaced with transparent pixels (you can’t tell but there’s no white in the icon image, the white from the background is showing through).

 

This JPG image is 250x250 pixels, uses the RGB colour space, is 16.8 kb, and has no transparency options.
This JPG image is 250×250 pixels, uses the RGB colour space, is 16.8 kb, and has no transparency options. I purposely pushed the compression too far and it is starting to get artefacts (ugly additional pixels) and the image isn’t as crisp as it should be.
Max quality JPG is 283 kb in file size.
Max quality JPG is 283 kb in file size. Image retains all quality but is far larger file size than it needs to be.
MidHigh quality JPG is 115 kb in file size.
MidHigh quality JPG is 115 kb in file size. No noticeable image quality loss and less than half the file size. But how small of a file size can you go before the image starts to go bad?
Low quality JPG is 69 kb in file size.
Low quality JPG is 69 kb in file size. You can start to see some degradation of the image if you look close. Blacks are turning gray and the image loses crispness. The colours also start to lose some vibrancy or saturation.
Lowest quality JPG is 48kb in file size.
Lowest quality JPG is 48kb in file size. Noticeable suffering of image quality in the floor, legs and solid colour areas.
PNG is 718 kb in file size.
PNG is 718 kb in file size. Top notch image, just huge in file size.
GIF is 147 kb in file size.
GIF is 147 kb in file size. You can notice some blocking happening in areas that are supposed to be gradients.

Use Excerpts

Do you have a page that shows the first chunk of bunch of your posts? Consider crafting excerpts. When that page is formed it has to process those pages, grab the first bit of each, assemble it and present it. If you have excerpts, that same page quickly grabs the excerpt, and only the excerpt, and knows exactly how to use it. Not a big problem for actual content delivery time, but the process to get that page ready to show is sped up considerably by crafted excerpts.

 

Lots of Comments?

IF you have a ton of comments on a blog post consider breaking them into pages. Text is small though, so you’d better have a LOT of comments to make this worthwhile as you’ll LOSE visitors for every additional click they have to make through your site. Find this under your DASHBOARD-> SETTINGS -> GENERAL

saved as a really small gif by the way
saved as a really small gif by the way…

Caching

Caching is… well, bothersome, but necessary. A webpage on WordPress is made up of many parts that get assembled and presented to the viewer as the whole page. Fine and dandy, but if you have a lot of parts and calls to the server, this puts a strain on the server which slows down the page load time. Caching assembles and stores the final assembled page beforehand, and serves the complete page when the call is made to the server. No building it on the fly so it speeds up page load time.

It’s great for the front end but I’ve run into so many issues with the back end that it makes me debate it’s worth for small business sites. I’ve had it conflict with many other plugins, there are ongoing security issues with the most popular caching plugins, and I don’t believe small sites should bother with the hassle it may bring to your site.

Many speed site testing sites look for caching and knock down your rating for not having caching turned on, they presume that it’s always a good thing, which may not always be the case. Google doesn’t care. They measure speed, not how you get there, so try caching out carefully and intentionally and make your own judgements as to it’s worth. On pure speed, yes it’s a good thing, on hassles it brings your the administrator sorting out conflicts, maybe not so much.

I have a few sites running Comet Cache, it seems to be a pretty stable, simple, non-conflicting cache plugin. It also allows you to clean up your database occasionally. Which is also a also a good thing to do – purging all those revisions and trashed posts will make your database easier to deal with for the active pages and posts.

Browser Caching

On the other end of the equation, why should the browser be getting new elements each page view if your page elements don’t change often? Let the users browser pick up some of the heavy lifting by storing elements on their side and re-using them when needed for set amount of time (it’s good to reload old elements occasionally in case a change is missed).

You can configure your web server to set caching headers and apply them to all cacheable static resources. It’s pretty easy if you have access to the .htaccesss file, just add the code below and adjust as you see fit. There’s probably plugins that do this too but I haven’t bothered to look for them.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/xjavascript “access 1 month”
ExpiresByType application/xshockwaveflash “access 1 month”
ExpiresByType image/xicon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##
Obviously, you can set your own time limits to when you think these will need to be re-sent to the user. Browser caching works if assets on your pages aren’t reloaded each time a user visits your site.

Expiry Headers

Another want most page speed analyzers ask of your site is to add expiry headers. These are basically instructions for the browser on how long they should hang onto elements of your site before asking for a fresh new copy. Images tend not to change too often, so why retrieve them every time when a visitor comes back? Setting expiry headers manually involve editing your .htaccess file. And since we don’t like coding manually, we use a plugin for it. Far Future Expiry Header does the writing to .htaccess for you (FYI: in iThemes Security, there’s an option to prevent plugins from writing to the .htaccess file, oops, so if you notice this isn’t working check there first). Far Future Expiry also lets you turn on gzip compression, another oft suggested speed boost trick, though it depends on your server if this actually works. That is, even if you write to your .htaccess to enable gzip compression, the server may not allow it and won’t pick up on those instructions.

CDN

Content Delivery Networks is another way to speed up the delivery of your site’s resources. Essentially, it spreads your site out to other servers that are able to deliver faster speeds for specific types of content (images, live streaming, etc). And another benefit to using a CDN from @levi_mccormick on twitter pointed out to me:

One reason a CDN can speed up loading is allowing more simultaneous connections. Browsers limit connections per domain.

Again, this is best used for larger sites with thousands and thousands of page views where those milliseconds add up. It’s fairly easy to implement, but again, it does require some experience and can cause caching issues. It’s a way to prevent bottlenecks of high demand content as well. For small business sites, the speed increase is minimal and may not be worth your while to implement. Like most of these WordPress speed boost tips, you have to consider the effort to results ratio and decide if it’s worthwhile to you.

Read more about CDN on Wikipedia. Google, Amazon, and WordPress.com all offer some form of CDN. My only advice is to use CDN intentionally and watch for possible problems during implementation and down the line. Know what you’re doing or don’t do it at all.

Hosting

Your domain name provider and your site host play a large factor in how fast your site gets delivered. You can test this out with the Waterfall measurement found at https://gtmetrix.com/ which takes a look at how fast your host resolves your domain name and gets it pointed your your site (among many other measurements of what’s happening at your site).

AMP

AMP (or Accelerated Mobile Pages) is a protocol for speeding up mobile presentations of your site. If a large portion of your viewers are on mobile devices than you should absolutely implement AMP on your site. It essentially builds an instant loading cache version of your page that is screaming fast on mobile devices.

AMP consists of three parts: MP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML. The AMP JS library ensures the fast rendering of AMP HTML pages (it does this by using best javascript practises for mobile and getting rid of the bad that may be on your site) . The Google AMP Cache can be used to serve cached AMP HTML pages (it’s a CDN for mobile pages, see above).

Tutorials on the technical can be found here.

As you can tell, Google is a huge promoter of AMP, believing mobile is the future. Google will penalize your rankings for NOT having AMP if your site is searched for on mobile. So this tip is almost mandatory if you like page rankings on mobile searches.

Full disclosure: I haven’t delved too deeply in AMP specs or manual implementation. I let this plugin take do the hard work for me. It generates the AMP cache files automatically and does what needs to be done.

GZIP Compression

Compressing things always ends up making them smaller and load faster. GZIP is a server side compression that sends smaller components to the brower that uncompresses them at the client side. Many cache plugins or minify plugins offer a way turn turn this on but but this speed boost might not work for you if your server does not have either mod_deflate or mod_gzip installed.

In cPanel you can turn gzip compression on via the Optimize Site panel.

Know the Plugin Hogs

Sometimes a simple little plugin can kill your site speed. Say for example, it conflicts with another plugin or is just a resource hog but how would you know? Install P3 Performance scanning plugin, test and then remove the big offending plugins. [UPDATE: this plugin hasn’t been updated in awhile and is reported to NOT to work, and even break, some sites running WP 4.7 – USE WITH CAUTION. I’m looking into altermatives].

For example, on one site I found out the plugin being using for 301 redirects was accounting for HALF of the entire sites plugin processing! Unacceptable, especially since other plugins offer the same service for much less load on your server. Of course if it’s a killer, must have, plugin that’s using up your resources, you may have to live with it.

 

Pre-Rendered Pages

This was brought up at the WordPress meetup where I presented the above information. I’m definitely going to look into it and I’ll let you know my thoughts on it in the future with an update to this blog post.

 

 

Have any awesome tips for speeding up a site? Let me know with a comment. This post is just to get the dialogue rolling!

provencher bridge News&Updates

WordCamp Winnipeg Presentation 2016 – Marketing Magic

October 22, 2016, I presented what I know about WordPress and marketing to a bunch of really great people, who know way more about WordPress and marketing than I do.

Yeah, that’s not scary at all.

Twitterific @rodsalm

Here’s a link to the prezi where you’ll find the links.

Notes for the presentation:

1 & 2 Marketing Magic

It occurred to me a while ago that a good analogy for marketing is magic. People’s attitudes towards magic and marketing are the same. I’ve actually heard people say “apply some marketing magic to it and it’ll work”. When done right it seems effortless and easy and wondrous. So at a surface level that analogy works.

But there’s a deeper level to magic. The mechanics, the presentation, the audience. This too is a pretty good analogy, so I’m going to use that today to show how some marketing magic can benefit your efforts, specifically using that wonderful stage we call WordPress. First off,  let’s start with what we’re trying to accomplish on that stage and talk about our plan.

3. The Performance Plan

The more a magician plans, the better the performance. So too with marketing. And this path is the latest roadmap in a long line of road maps that marketers keep re-drawing to give logic to the mystery. To give credit to the the in-bound funnel by HubSpot is a pretty good way to explain what digital marketing looks like. (Inbound Maketing – Marketing efforts that get customers to come to you). They have a free certification course so you can learn all of their marketing jargon.

Lots of Marketing Jargon

Content Marketing – Marketing based on giving customers advertising (content) they may actually want to look at.

The drive for content is making people do stupid things just so they can have content. I shot a video for a client, a case study. Our supplier’s marketing department PAID us to use the footage for themselves. Great. Not really branded for them, but whatever, it works. THEM our competitors are using the video from our suppliers as their NEW content on their own website. Unedited. With our brand in shown in it, AND a voiceover saying what a good job WE did. Like I said, stupid. Don’t fall into the trap of requiring QUANTITY of content, always shoot for QUALITY of content.

Landing Pages – Specific purpose page that you drive customers too. Having a dedicated page for each goal/conversion makes it easier to track what marketing activities are working. It’s easy to track results, landing pages help figure out how you got there. Some companies will build these for you as part of their packages, BUT their pages are part of their system, so if you leave their eco-sphere, they go away. Better to build your own in WordPress.

Growth Driven Design – ongoing small continuous improvements versus “build and forget”. We see this in development all the time, incremental improvements. Your marketing efforts can be done this way too – constantly improving and getting better through smaller efforts AND big showy product launches. It comes down to your business culture and environment as to what will work for you.

4 & 5 & 6

So when picking your plan you have to decide what kind of magician you’re going to be.

The Vegas Show to the Street Performer, to a large extent this is large business vs. small but not entirely. It’s more about attitude. Every business WANTS to be the big Vegas show, but that might not work for their industry or their people! Choose a marketing attitude that fits and WORKS for your resources. A street magician’s act may not work in a massive venue and the improv needed for a street magician’s ever changing landscape may not work for a big business marketing efforts. Don’t fight it. Know what stage works best for your business.

  1. Connections.

Let’s drill down into a magician’s trick to figure out what marketers should be doing.

Magicians connect with their audience in some way and use their audience to elicit true emotional responses everyone can relate to. IF you use good, true emotions to tell your story, this WILL create action from your audience. Think WestJet Santa. Think the recent lost Lego toy story from their customer service department. Think only the big guys can do this? Think again. I’m going to show you how, right now, how a small business can make an emotional connection to a customer.

But first, I need a beautiful assistant. Cause that’s also something magic and marketing have in common.

I’ve seen your work. It’s awesome, right? And you use markers, inks, and digital tools in your work? Great. What if I told you that I have an illustration device that instantly allows you to correct any mistake you make while drawing? Would that be cool? Ok, I can do better than that, what if I were to tell you that it’s purposely priced for an artist’s budget? Would you be interested? Ok, I can do better than that, what if were to tell you that this new device is ecologically green, used by professionals everywhere, and that if you want, I’ll have one of my sales guys deliver it to you NOW so you can start using it right away? What would you say to that? Great, you can sit down now and we’ll make that happen.

Here’s what’s I did.

  • I’ve done my research, I know what my customer is about.
  • I’ve tailored my marketing pitch to that particular customer.
  • I’ve gotten my audience emotionally interested in the product.

In sales terms, she’s a hot lead. Now’s the time for marketing to hand off to sales the customer interaction. Ryan, you’re my sales guy, take this pencil and make that sale.

Woohooo, you go tiger, she’s ready to buy that thing.

In the end, all the marketing and magic can’t fix a crappy product.

  1. Where to perform.

Ok, now in terms of magic and marketing you get to choose where you perform. I choose one to one marketing with my target audience. To the audience here, I was broadcasting, hopefully, you were also broadcasting on twitter for me. I’m cashing in on the SEO and SEM boost all these keywords will give me on my site, where the notes and presentation live.

Three stages. One performance. That’s my small business equivalent of a Vegas show.

I’ll show you a little bit later about how these stages can all live and interact on your WordPress site.

9 Know your audience – CRM

So if you get nothing else from this talk, remember this “Know Your Audience.” A Customer Relationship Management system will do that for you. CRM’s helps to manage all of your company’s interactions with existing and potential customers. It acts as a hub for your customer’s contact details to keep them accessible, searchable, and manageable. In addition, a high-end CRM boasts features such as calendars, task management, email marketing, website form creation, data analysis, and automation of contacting and marketing to your clients.

You can run CRM’s through your WordPress sites or run your CRM through a service provider or set up a GPL CRM system like SugarCRM. There are so many options here and you’ll have to do your own research to see what suits you best. Look for systems that integrate with your WordPress marketing systems. Too often CRM’s are set up for sales people and not marketing people and it becomes very frustrating for marketing purposes. Don’t let that happen to you.

10.

The importance of a CRM system, even for small businesses, can’t be overstated. A business absolutely NEEDS to track customer interactions and information.

  1. Tracking and Metrics

If you don’t track what you’re doing in marketing you’re letting your ticket window take all the credit.

“I sold 500 tickets yesterday, what did you do?”

“ummmmm, I don’t know.”

“Pffft, marketing? That’s why salespeople get bonuses and marketing people get free muffins.”

Track your efforts and the results of your efforts if you want credit for them.

12.

Ok, time to put some of this into the WordPress frame of reference.

13.

You all know and love WordPress and know all the good reasons to use it. For marketing purposes, one point I want you to consider is ownership of the data you create. I don’t like the idea of being tied to one vendor for eternity because it’ll be a fight to get my own data from them if I leave them. Your marketing data should remain your intellectual property – so WordPress allows you to keep that in-house, and that’s a very good thing.

14.

Which brings us back to that CRM thing. The more your customer data can live in WordPress the better off you are. It allows you to integrate other systems and change them easier when you need to.

Here’s an integration that lives outside of WordPress. Woohooo, it ties your email campaign info directly to your CRM. MailChimp and SugarCRM. Sweet. Not cheap, and now you’re tied in pretty heavy with these systems.

  • The more pieces that are supporting your CRM the more open it is to breaking.
  • The fewer pieces you have the more dependent you are on those pieces.
  1.  & 17.

There are CRM plugins that turn WP into a full-fledged CRM. These aren’t robust CRM systems by a long shot, don’t allow for much customization, but may be exactly what a small business needs to get a CRM working for them. I’ve heard good things about these two.

Measuring. To find out what you’re doing on your site you have to measure what’s going on. The big daddy of all this is Google analytics, JetPack has a plugin that shows basic site usage on the dashboard, but if you’re at all serious about tracking your marketing successes you have to dive into Google. To measure your efforts you have to put in a tracking code for your measurement tool. But once you start getting into it, you’ll need analytics tag, adwords tags, social media tags, remarketing tags, etc, etc, it turns into a pain really fast. But there are plugins to help you with this. BUT there’s so much overlap, trying to find what plugin does what with what tag is nuts.

  1. 20. & 21.

Enter Google tag manager. Here’s how it works. You enter all your tags into the manager. It gives you ONE tag that you insert into your header (I use the Header and Footer plugin for that). Then you don’t have to use tag insertion plugins or plugins with that feature. One spot, easy peasy.

22.

Skystats is a newer plugin, kinda cool. It gives you a dashboard of analytics and social media data right in WordPress. Good for weekly presentations where people just want an overview. The free version only gives past 30 days though. Still trying this one out.

23.

Email marketing is extremely effective. Build that CRM list and use it. It also forces you to have and create good content. And oh so measurable.

Remember, all the stuff you want people to do NEEDS to happen on your site. Lead people to your stage where you can control the magic and present it how you want to and NOT be dependent on other stages.

25.

Which ties into OGP. Use this plugin. Basicallyc it adds a nice snippet of a page, to the page, that social media sites use when showing a link to that page. OGP is your flyer in the digital world. Have it installed and then look good when people share your pages on social media.

Speaking of social media, here’s a quick rundown on social media sites and why they matter to marketing. Oh, use HootSuite. Just, yeah, just use Hootsuite if you have more than one social media account.

Again, use those uncontrollable pages to drive people to your stage. I always tell clients if they are going to use a social media channel, own that channel, drive people to your site often, and run a feed of it through your site via a plugin.  If you create content on social media, it becomes THEIR content with all of THEIR ever-changing rules. That’s stupid. Control and own your content. Put content on YOUR site than parse it out to your social media channels to draw people to your stage. It’ll live forever on your site so years later it is still working for you. Old content on social media is dead media. Social media is a ravenous monster that eats up all of your content. And gives you shit in return.

Use Social Media to get people to your stage where you control the performance.

Facebook is to your business what Coca-Cola is to corner stores. They’re USING your brand. Co-branding only helps the biggest brand!

Ok, now Facebook is the TV of this generation. It hits the largest possible audience, yet allows for hyper-targeting models. LOVE the targeting potential of Facebook. I use it for customer research when not using the ads. Consider: Facebook can tell you how many female college educated single women, between 20 and 50, who love horses, living within 10 miles of a particular riding stable? IS it 100% accurate, no. Is it THE most accurate least expensive demographic assessing tool ever? You betcha.

27.

Twitter is great for instant interactions and an awesome way to slow down or stop a pissed off client from further damaging your brand. Ads? Meh.

28.

LinkedIn is stupidly important for sales people, it’s replaced cold calling. Yet really stubbornly hard to wire into WordPress in a meaningful way AND it doesn’t play nice with almost all CRMs. That’s why it’s important to use LinkedIn to draw people back to your stage.

29.

Pinterest! Not just for stay at home moms. Don’t discount this one for B2B. It has REAL value as a link building tool.

30.

Ditto for Instagram. There are plugins that let you run feeds of Pinterest and Instagram through your WordPress site. Their API changes often so these plugins great broken all the time. Ugh.

  1. & 32

Use Yoast plugin or equivalent to make sure you’re not driving away Google. Don’t be a slave to it, but know what it’s trying to do for you.

33.

Ok, I’ve talked about good content. SEO is like having good design in your flyers, it gets your efforts in front of more people. But SEM? Search engine marketing is highly effective at targeting VERY specific customers IF you have good SEO practices with good content.

SEM is becoming the norm. People accept Google ads in search results and being valid responses to their queries. And more and more page space on google is being used for advertising.

Consider this, I’m a hand-made soap store, there’s one in Wolseley. And I want to show up on the front page of a google search for “bath soap stores”

Take a look at this screenshot. What chance does a small business have at cracking the organic listings? Zilch. Or it’ll take massive amounts of effort and time. I’m not saying it can’t be done. I’m saying prepare for a fight that you might not win! OR you can buy SEM ads and be right there at the top for as long as you can afford it. I ask my clients “what do you have, time (SEO) or money (SEM)?” Both are wasted unless you have good content on your stage.

34.

I’ve quickly zoomed through a lot of information, sorry about that, but if I can leave you with just three ideas, I want you to remember this about WordPress Marketing Magic.

1. KNOW your Audience.
2. TELL wonderful stories.
3. And keep it on YOUR Stage.

provencher bridge News&Updates

Review This! Why you should REALLY care what people…

In the world of hyper SEO competition it takes a lot of effort to get a site to dominate the search rankings or to get on the front page. Google is getting ever more clever at filtering out the junk and stopping the so-called blackhat SEO experts from dominating the SERPS (search engine ranking positions). Google just wants to bring you the best results – ad or regular searches – for your terms entered and are happy when you get there!

Reviews are one way Google makes sure their search results fit what you are looking for by ensuring authenticity. Read more “Review This! Why you should REALLY care what people say about your business.”