How to set up e-mail for your domain if you are forwarding your domain to a server that doesn’t have e-mail

So let’s say you’re starting up a website, for example, a website that sells things using Big Cartel. You decide that you want to use your own domain instead of one of their sub-domains and Big Cartel instructs you to forward your domain to them. This makes things nice and easy but wait, Big Cartel doesn’t support e-mail hosting!

But how are we going to use e-mail with our own domain when the domain is being forwarded to a server that doesn’t support e-mail?!

A lot of people are not aware that you can forward your e-mail to a separate server than the server that you are hosting your website at. You used to be able to use Google Business Apps to use Gmail for your own domain’s e-mail for free but now they charge for those services. Luckily there is a website that offers the same kind of service for free called Zoho! Zoho offers a lot more services than e-mail but for now we’ll just focus on that.

I’m going to assume that you have already forwarded your domain to a hosting service such as Big Cartel. Also note that I’ll be using Namecheap for my domain registrar so the directions for your’s may be slightly different but you should get the idea for the most part. So let’s get started!

First, you’re going to want to go to Zoho.com and sign up for a free e-mail hosting account.

It's going to ask you for your existing domain address.

It’s going to ask you for your existing domain address.

And some user account information.

And some user account information.

The Zohomail ID is going to be your e-mail handle for your domain. So here we are creating hello@trippykittypizza.com.

Next, Zoho is going to ask that you verify that you own the domain.

Zoho does a pretty good job at explaining things.

Zoho does a pretty good job at explaining things.

Here’s what Zoho’s directions say to verify your domain:

The general steps to validate your Domain using CNAME method are listed below. If your Specific provider is listed above, you can use the link to follow the specific instructions for the provider.

  1. Log in to your account with your Domain registrar. (Your Domain’s Administrative DNS Host).
  2. Open your Domain Management Page to update the DNS Records (DNS Manager or DNS Control Pane or Advanced DNS editor).
  3. Locate the option to add CNAME records (Generally found under DNS Records, you can also consult the help page of your registrar in case you are not clear).
  4. In the Name/ Host/ Alias/ CNAME add the code generated in Zoho zb********
  5. In the Value/ Points To/ Destination field add zmverify.zoho.com
  6. If the TTL is editable, reduce the TTL to 300 seconds or the minimum possible value recommended by your Registrar.
  7. Click Save or Add Record option to save the CNAME Records.

So here’s what my domain settings looked like in Namecheap at that point:

After you’re finished with that and you have saved the changes you can click the verify button. If you did everything right you should get this screen:

Success!

Success!

It should bring you to a couple of screens where you can add users and groups, just click next through both of those until you hit the Change MX Records screen. Click Proceed to Point MX.

Change MX Records

Change MX Records

So now we’re getting to the actual e-mail forwarding part. On that same Namecheap screen, under Mail Settings, you’re going to want to check “User”, and “I will specify my own MX records”. Then click Save Changes. You should now have some empty text boxes under that area.

So far so good!

So far so good!

You’re going to want to put Zoho’s server information into those boxes like so: (Update: You’ll want to set the TTL’s as low as your domain registrar will allow to avoid any e-mail delays. I have since discovered that Namecheap will allow you to set the TTL to as low as 60.)

It’ll ask you about e-mail migration and mobile e-mail setup but you can skip those and just proceed to your e-mail. At this point you will be presented with your Inbox! Sweet! And just to make sure everything is working fine, send an e-mail to your new e-mail address from another one.

For some reason it thought I was spam. :|

For some reason it thought I was spam. :|

And at this point you’re pretty much finished! But wait! Let’s go ahead and set up IMAP so that we can check our e-mail from a desktop application such as Mozilla Thunderbird or on a mobile device!

On your Inbox screen, click Settings in the upper right-hand corner. Then, on the left side, click Email forwarding and POP/IMAP. Under IMAP Access there should be something that says Status. Click Enable.

It will then allow you to access your e-mail using IMAP and give you all of the server information to do so! The only thing left to do is setup your e-mail client!

Using Thunderbird, Click on the menu button in the upper right-hand corner go to Options -> Account Settings. In the lower left-hand corner click Account Actions and then click Add Account.

Thunderbird will probably try to figure out the server details on it's own but it will fail.

Thunderbird will probably try to figure out the server details on it’s own but it will fail.

Put all of the server details that Zoho provided to you into Thunderbird and click Done.

If you didn’t receive any error messages then everything worked and it should begin syncing your e-mail!

Woo!

Woo!

And that’s it! You now have your domain pointing to one server for hosting and another for e-mail! You don’t even have to go back to the Zoho website to check your e-mail if you don’t want to since we have an e-mail client set up. Zoho pretty much acts as the middle-man behind the curtains for your e-mail!

And that’s a FREE way get e-mail service with your own domain when your hosting provider doesn’t support e-mail. Of course your domain registrar probably offers an e-mail hosting solution but they more than likely charge for it and who wants to pay for e-mail?

I hope you found this tutorial useful! Feel free to leave any questions or comments below!

Slide-Out Instagram Widget

For awhile now I’ve been using a slide-out Facebook widget on the Five Fifteen website that I found here: http://www.richosoft-support.co.uk/fortune/slideoutfacebook.html. It’s worked out pretty good for me so far, however I wish I had one just like it for Instagram. I looked around and all of the solutions I found were either overly complicated or cost money. So I decided to just modify the code for the Facebook one and make it work for Instagram!

Tab in

Tab out

I’m not going to go too much into the code seeing as I didn’t write it from scratch rather than just modify someone else’s code. It uses a website called Intagme which allows you to place an Instagram widget on your page, which is cool, but we want it to slide out!

So to start off you want to download the following zip file:

1.) Unzip it, and upload instagme-widget.js and instagme-widget-plain.png to your server.

2.) Go to intagme.com.

3.) Put either your instagram username in the username box or a hashtag in the hashtag box.

4.) Fill out the rest of the form like so:

  • Widget Type: Grid
  • Thumbnail Size: 100
  • Layout: 3 x 3
  • Photo Border: No
  • Background Color: (Leave Blank)
  • Photo Padding: 0
  • Sharing Buttons: (Whichever you perfer, Yes is recommended)

5.) Click “Get Code”.

6.) You should get a code that looks like this:

You need the URL from that code, specifically the part after “?u=”.
So in this case, the part we need is “Zml2ZWZpZnRlZW5wcmludGluZ3xpbnwxMDB8M3wzfHxub3wwfHVuZGVmaW5lZHx5ZXM=”.

7.) Put this code on your website, but with your own long mess of numbers and letters we got above, perferably right before the closing </body> tag:

And that’s it! I even included the Instagram tab image I made to match the Facebook one!

There are some improvements I need to make to it, mostly to make it more compatible with the Facebook widget. For example, when the page is loaded and if you hover your cursor over the Facebook tab first, before you hover over the Instagram one, and then hover over the Instagram tab, the Facebook tab will be visable ontop of the Instagram widget. Another issue is that both tabs are position “fixed” on the page, the Facebook one being set to 21% from the top of the page and the Instagram one being set to 10%. This means that if the browser window is resized, the tabs will more than likely overlap. But these are just two very small issues. I’ve been using both widgets on my website just fine.

Let me know what you think!

Simple image gallery that generates thumbnails

While I was designing the website for Five Fifteen, I wanted to keep it really simple. One of the problems I ran into was that I needed a nice image gallery but I didn’t want to have to write a line of code for every image in my gallery, nor did I want to edit HTML every time I added a new image. One of my options was to use a gallery script available online, however most of those require databases and multiple files and that just seemed like an overkill for what I wanted. So, I decided to write my own!

This code loops through all of the images in a folder, checks to see if a thumbnail has already been generated, if not, it generates one with the specified dimensions, and displays the image.

This code has a couple of cool features:

  • It dies quietly. If an error occurs it just doesn’t display the images rather they outputting a bunch of ugly error messages. It will print a small subtle message in the HTML comments letting you know that something went wrong.
  • It can be used to create multiple galleries from different folders all on the same page simply by calling the makeGallery function again with a different directory.
  • It automatically generates thumbnails for the images.
  • It will attempt to create the thumbnails folder if it doesn’t already exist.
  • You can customize how your images are displayed by changing $imgOutput.

To use the gallery you just upload some images into the folder and call the makeGallery function like this:

As mentioned above, you can change $imgOutput to customize how your images are displayed. With that, you can use the following shortcodes to display data:

%galleryDir% – Current gallery’s directory path.
%fileName% – Current image’s filename.
%thumbFolder% – Thumbnail directory path for the current gallery.
%imgExt% – The image extension.
%thumbSize% – Thumbnail Size.
%img% – Current image path.
%thumb% – Current thumbnail path.

Of course there’s some features I could add in there and I may do so in the future but this does a pretty dang good job for what I need. I can just throw some images in a folder and this code does the rest!

Bonus points: I combine this with fancyBox for a real nice, professional looking gallery. Enjoy!

See this code in action here: http://fivefifteenprinting.com/gallery.

Iowa Tree Specialist

Here’s a small one-page website I was hired to build for a local tree service company. The website features a jQuery slideshow, Facebook activity feed, and a custom script I made that makes the background automatically change depending on what season it is.

This website is also optimized for mobile devices. The Facebook feed is hidden, background changes to a solid blue color, the header image adjusts to fit the screen, and the margin at the bottom of the page is removed. So that this page will look good no matter what device it is viewed on.

Gmail Trick

Here’s a random little tip/trick:

When e-mailing someone with a Gmail.com e-mail address you can add a plus sign (+) to the end of their username and put whatever you want and it will still end up in their inbox!

So if you send e-mail to kodie+isacooldude@gmail.com it will end up at kodie@gmail.com!

This can also be used in combination with filters to sort e-mail easily. For example, I could set up a filter where anything sent to kodie+junk@gmail.com gets sent directly to my junk folder and then give that e-mail to any website that requires an e-mail address even though I probably won’t want to read anything they send me.

Unfortunately some websites look at the plus sign as an invalid character in an e-mail address and won’t let you use it. :(

Also, Gmail doesn’t care about periods (.) in the username. So kodie@gmail.com, k.odie@gmail.com, and k.o.d.i.e@gmail.com all go to the same inbox.

All of the e-mail addresses I’ve used as examples here are the same as far as Gmail is concerened.

Even this one:
kodie+is.a.totally.nice.dude.with.a.really.long.email.address@gmail.com 😉

Try it for yourself!