CSS3 Animations

Posted by on Mar 30, 2017 in Featured, Tutorials

CSS3 Animations

Looking for a way to add a little something extra to your website design? If you’re looking for an easy way to grab the attention of your landing page traffic, then CSS3 animations might be a good option for you. They’re light weight, meaning they don’t require much bandwidth and load quickly, which makes them ideal for mobile website design. Subtle animations are better Don’t be that website. The one that makes visitors in their 40s remember flying toasters and blinking text from the 90s. Be the website that people will take seriously, but not be bored with visually. One CSS (with a little Javascript) trick you’ve probably seen a few times is where the images appear to load with a little bounce only as they come into view as you scroll. It’s called Animate on Scroll (AOS). It’s been around for a while, but only in the last few years have developers put together code libraries* of the CSS3 animation functions. My favorite CSS3 Animation library is called CSS3 Animate It. I found it to be much easier to replicate the demo and work with the given functions than other libraries, but I’m relatively new to these. You don’t need libraries to get started though, because animation functions are built into CSS3. You can head over to W3Schools.com and try their interactive tools. *A code library is a set of code developed for a specific, and often narrow purpose. CSS animations would be an example of a narrow purposed code library, where JQuery would be considered a broad purposed code...

Read More »

WordPress: How to do 301 redirects when the old URLs are index.php?variable=something

Posted by on Mar 6, 2015 in Featured, Tutorials

WordPress: How to do 301 redirects when the old URLs are index.php?variable=something

I recently had the opportunity to take over an old website for a client that was ranking pretty well for his targeted keywords. The old website was built using ModX, a CMS with which I’ve had limited experience. The developer of this site chose not to use mod rewrite to make search engine friendly (SEF) URLs, so all of the pages on the website ended with /index.php?id=123. If the website had used SEF URLs, I would have done my usual list of 301 redirects on the .htaccess file to properly forward users to pages on the new website. I quickly found out, that because of the way WordPress uses the index.php file, this way was not an option. It ends up causing an endless redirection loop as it redirects only the index.php of of the address and ignores the variable, so it essentially tries over and over to redirect to itself. I tried Googleing this one for a while, but getting meaningful results out of a search like “301 redirect wordpress index.php with variables” and other variations got me more confused than I was when I started. So, I figured I revert back to the two languages I know to see if either one could help. JavaScript offered some hope, but I’m not as strong with that as I am with PHP. I knew I would have to attack the problem as early as possible in the page serving process to keep things quick and SEO disruption to a minimum. If you’ve ever looked at the index.php file of a WordPress installation, you know that there’s not much to it. It basically points to the header.php file and the chain of events starts from there that make any given page of your website. I decided I would inject my code just before that process starts. First, I used $_GET to grab the variable from the URL and make a constant one of my own. Next, I use a series of if/then statements to assign different 301 redirects based on what the variable...

Read More »

Local SEO: Google, Bing and Yahoo Directories

Posted by on Aug 12, 2013 in Tutorials

Local SEO: Google, Bing and Yahoo Directories

Search Engine Optimization is mostly about the little things because there are so many of them. Page Titles, links and optimized copy are still among the most important aspects of SEO and are easily controlled regardless of the website owner’s skill level. Local SEO is optimizing your website to do well in searches that are specific geographic location(s). Any website whose target audience is localized should put the effort into Local SEO to increase their organic traffic. One easy, and FREE way to do it is to submit your website to the ‘Big Three’ business directories: Google, Bing and Yahoo. Yahoo Small Business Directory You’ll need to create a new Yahoo account, so find out if your business name is available (bizname@yahoo.com). If it’s not, just add your state initials to the end of it and try again. You can use your business name as your first and last name. If your business name is one word, add Inc. or the state or town name for the last name. Once you’ve created your new Yahoo account and you’re logged in go to this page and choose the FREE option: http://smallbusiness.yahoo.com/local-listings/compare-plans/ Go through the process of adding your information. You’ll need a backup email address (info@bizname.com) and you can use your cell phone for instant verification via call or text. You’ll see this if you successfully complete your profile: Bing Places You’ll need to create a new Microsoft account, but you can use your regular email account (info@bizname.com). You can use your business name as your first and last name. If your business name is one word, add Inc. or the state or town name for the last name. Go to https://signup.live.com/signup.aspx to get started. Being Microsoft, you’d expect there would be some unnecessary steps you’d have to go through to get to where you want to be, so you won’t be disappointed when you find out Bing Places is no different. Go to https://www.bingplaces.com/DashBoard to get started. Look for your business, or any business to complete the first and really only unnecessary step. Scroll to the bottom of the results and click on the ‘Create New Business’ button and a form appears that you can fill out and submit. You fill in your info and Bing creates a preview of your listing to the right. Google Local Google’s option for free business listings have shifted, changed names and expanded in recent years. For the moment, Google Local/Google Places is one of the important places where you should add your business listing. You’ll need a Google account. Either a Gmail account is required, or if you have your domain name using Google apps, you can use your regular domain email address ( info@bizname.com ). Be logged in when you visit https://www.google.com/local. Most of the screen will be a map of your local area, but in the left column, look for...

Read More »

CSS3 Box Shadow Effect

Posted by on Jun 20, 2013 in Tutorials

CSS3 Box Shadow Effect

CSS3 has been around for a few years now, but I can remember a time when many of the cool things it can do, had to be done graphically. Some things, like a flexible gradient background, couldn’t be done at all or could only be done with the help of JavaScript. The shadow effects are among the easiest to use among the new tools in CSS3. Surprisingly, you don’t need separate variations for Mozilla and Webkit (Firefox and Safari/Chrome). Unsurpisingly, this feature isn’t supported by IE8. I didn’t have a copy of IE 9 handy, so I wasn’t able to test with that, but I understand that box-shadow is supported. I’m less sure about the inset variation, but who really cares? We’re talking about IE. The main trick to remember is that if you want the inset shadow effect, you need to apply it to a div instead of an image, and that div needs to have your image as a background. One thing to keep in mind before dedicating yourself to this effect is that if you want your images to be printable or if you need to have them linked (and a transparent gif or png just won’t do for some reason), this will not work for you. Because these conditions rarely apply to anybody, you should be fine. CSS <style type=”text/css”> .img-shadow { position: relative; max-width: 100%; float: left; border:8px solid #999; } .img-shadow::before { content: “”; position: absolute; top: 0; bottom: 0; left: 0; right: 0; box-shadow: inset 0 0 12px 8px rgba(0,0,0,.7); -moz-box-shadow: inset 0 0 12px 8px rgba(0,0,0,.7); -webkit-box-shadow: inset 0 0 12px 8px rgba(0,0,0,.7); } .img-shadow img { float: left; } </style> HTML <a href=”#” class=”img-shadow”><img src=”http://champlai.wwwssr14.supercp.com/champlainwebsites.com//wp-content/uploads/2013/06/train_wheels.jpg” alt=””...

Read More »

.htaccess – Changing .php to .html and Getting Rid of www

Posted by on Jun 5, 2013 in Tutorials

This is a good one to use if you’re building your website from scratch. This is not a good one to use with a Content Management System (CMS) like Joomla or WordPress. I know Joomla has its own core htaccess file as well as third party extensions like JoomSEF. I would imagine WordPress has similar options. That being said, if you’re building a PHP site, this is a great way to hide the fact that this a PHP site and possibly causing hackers to overlook your site. There’s no SEO advantage to having a .html extension over a .php extension. The biggest drawback I can see to using this part of the script is if you commonly pass variable through your URLs (ie. filename.php?id=420&action=token). If that is the situation you are in, then you can simply strip that part out of the script. The second feature of this script is eliminating the “www.” option to get to your site. When someone types in http://www.yoursite.com, it will automatically change to http://yoursite.com. This part of the script is important to SEO because it concentrates all of your indexed pages into a single domain, making it more relevant in the eyes of Google. It also makes it much easier to track with Google Analytics and helps to eliminate “self referrals” (when your own website shows up in Analytics as a referring site). The Script RewriteEngine On RewriteBase / RewriteCond %{HTTP_HOST} !^northernseo.com$ [NC] RewriteRule ^(.*)$ http://northernseo.com/$1 [L,R=301] Options +FollowSymlinks RewriteRule ^(.*)\.html$ $1.php [nc] UPDATE This one is much better. It will take any page on your site and serve it without the www. The previous example would redirect all www. requests to the home page. If you have several pages indexed in any of the major search engines, that would be quite disruptive. This new script is seamless. RewriteEngine On RewriteBase / RewriteCond ${HTTP_HOST} . RewriteCond %{HTTP_HOST} !^northernseo\.com RewriteRule (.*)$ http://northernseo.com/$1...

Read More »

Firefox 3D Page Inspector

Posted by on Mar 3, 2013 in Tutorials

Firefox 3D Page Inspector

Over the years, I’ve heard a lot of web developers complain about Firefox. The only big complaint I agree with as being problematic is that it is a memory hog. When I code, I usually work on a PC running Windows XP. I also use a MAC running 10.6 but that’s mostly for graphics and video. Firefox is pretty slow on my MAC. I like Chrome for their web developer tools and some of the other bonus features, as well as the uncluttered layout (and the inability to clutter it up). It runs well on my MAC and my PC. I only use Safari on my phone and for testing. Internet Explorer, which I’ve loathed ever since 5.5 and is a pain in the ass to every web developer I’ve ever known, is only used for testing. When I discovered the 3D Page Inspector included in Firefox (not an add-on) recently, I was blown away. I was a little late in discovering this since it had been out for well over a year before I stumbled across it. It has proved to be the most valuable tool in my web developer toolbox ever since. When customizing a template or theme, this takes all of the guess work out of figuring out any element’s properties. It shows you the inherited properties and the over written properties. Assuming your code is well formed (no broken divs or unclosed elements) the depiction of the page in 3 dimensional stacked elements that you can spin around on an access makes selecting an element quick and easy. If you’ve left Firefox for Chrome, I’d suggest you re-install Firefox and give it another spin, even if only occasionally to spare your...

Read More »