Steps for Transferring a Domain

It just took me a month to figure out how to transfer my domain from one web hosting service provider to another. My new web host has a beautiful set of instructions on their site, including a video, on how to complete the transfer. However, it's missing some pertinent information, and it took me forever to figure it out. In the process my website "disappeared" off the internet. I'm putting this post together so it doesn't happen to you!

Step 1: Make Copies and Backups

Important! Always keep an up-to-date copy of your site on your computer or on a backup hard drive just in case something blows up and you lose what's online. This is important in general, not just when transferring your domain from one web hosting service provider to another.

Before you even begin the transfer process, set up an account with your new web host and copy the files and folders of your site to their server so it's ready to go once the transfer is complete. You will need to tell them which folder to point your domain to anyway, so this will make you prepared.

Step 2: Make Sure Your Domain is Renewed

No transfer of your domain can occur if your domain is about to expire. Make sure it is all paid up. You can find this out by going back to your domain registrar. Most web hosting service providers can do this for you and usually build it into your fee, so if you're unsure, talk to them.

Step 3: Request a Cancellation

You can't just automatically stop having an account with your current web host. You need to request a cancellation of your account, which usually takes a few days or a few weeks. Each web host has their own method of cancellation, so contact your current web host to find out what you need to do.

Step 4: Disable WHOIS Privacy

It's very frustrating having to rely on your domain registrar to do everything for you, so I found a work around. You can actually go in and make changes to your own domain. You can do this by going to manage.opensrs.net. Here you can sign in to your domain. If you don't know your user name and password for your domain, you can get it from your current web host or your domain registrar.

Once you're signed in, go to Domain Extras in the navigation bar at the top. Underneath your Authorization Code, you will find a section that shows if you have WHOIS Privacy enabled or disabled. If you have it enabled, disable it, otherwise one of your future steps in this process won't work. I found this out the hard way!

WHOIS has all the information of every single domain that exists. In order to keep that information private when you purchase a domain, you can purchase privacy (WHOIS Privacy). So when someone searches your domain using WHOIS, your personal information, which you have associated with your domain, won't be viewed by anybody who decides to investigate you on WHOIS.

So why would we want to disable this? It's a temporary disable. You can enable it again once your domain transfer is complete. In order for a confirmation email to be sent to the email address listed in your domain admin, you need to allow your new web host access to this email address. With WHOIS Privacy enabled, the default email address is yourdomain@contactprivacy.com, which you can't access.

So, temporarily disable WHOIS Privacy.

Step 5: Name Servers

A name server, as I understand it, is basically just a server that hosts a network, and it translates computer information into human-readable information, such as a number. For example, I'm sure you've probably heard of a DNS server. DNS stands for Domain Name System. The most important function of DNS servers is to translate domain names and hostnames into IP addresses. An IP address is a number that is assigned to each device (example: a computer) that participates in a network. In this case, our network is the Internet.

Contact your new web hosting service provider and find out what their name servers are. They should have two and they should look something like this:

ns1.webhostname.com
ns2.webhostname.com

Go back to manage.opensrs.net, and go to Name Servers in the navigation bar. There should already be two name servers in the top two fields. You want to replace them with the ones you just got from your new web host. 

Step 6: Transfer Your Domain

Your new web hosting service provider will likely have their own procedure for transferring your domain from your old web host to them. Make sure you find out what their procedure is and follow their steps.

You will need one piece of info, though. Your domain Authorization Code (also affectionately referred to by the techies as "auth code"). You can find your Authorization Code by going back to manage.opensrs.net and going to Domain Extras. It's located above the WHOIS Privacy stuff.

Step 7: Confirm the Transfer

Once you complete your new web host's steps for transferring, an email will be sent to the email address you have under Admin in your domain. The email will ask for confirmation to proceed with the transfer. (This is why we disabled the WHOIS Privacy.)

If you're not sure which email address you have set up for your domain, you can go to manage.opensrs.net, and find it under Admin.

The confirmation email will likely have a link or more instructions on how to confirm the transfer. Just follow these steps or link.

Once you confirm the transfer, the new web host will take a couple of days to make the transfer happen.


I hope this helps somebody because I sure could have used instructions like this during my process. I have to say, though, I learned a heck of a lot about what goes on in the back-end world. It's a lot for a creative, non-techie mind to wrap itself around, but hopefully I've laid it out as simply as possible for you. Good luck with your own domain transfers! May the force be with you! ;)

Baby Boy Notecard

My friends’ baby is almost a year old, so I thought I should probably get cracking on sending that baby gift that I bought when he was born. Along with it, I wanted to send one of my hand-made note cards. And why not post about it on my blog? So, here’s step by step of how I put it together.

Over the years I’ve accumulated a bunch of odds and ends of scrapbook-making stuff; scrap paper, corners, ribbons, knickknacks, etc. I usually pick this stuff up when it’s on sale at Michael’s or DeSerres or stores like that, or I save it off of stuff that I've gotten and don't need anymore. I'm big on the second R of Reduce, Reuse, Recycle. I also keep my eyes open for when blank note cards go on sale. So, I have this stash of craft supplies and hoard them until I need to use them, such as this occasion.

Step 1

When I make a note card, I pick a “centerpiece” and then build off of that. I chose a 3D snail sticker because it’s blue and green for the stereotypical boy look, and the pastel colours are very baby-like. 

Step 2

The next step is gathering together any other elements that may go with this. I usually pick way too many things, but I gather them all together anyway.

Step 3

Then I roughly lay them out on a blank note card and piece it together to get an idea of how I want it to look. I have a habit of wanting to add a whole bunch of stuff to a card, so I have to keep reminding myself that less is more because otherwise it starts to look messy. So, for this baby boy card I picked a blue and white striped paper for the background, and a couple of sticker corners that had similar blue and green colours in them to match the blue and green of the snail.

White note card, striped paper, corner stickers, and 3D snail sticker

Step 4

Next, I measure out how big I want the striped paper to be on the front of the note card. 

Measuring how big I want the background striped paper to be

I usually cut it out using an Exacto knife, but today I was in a hurry and didn’t feel like dragging out the cutting board, so I just used scissors.

Cutting out the striped paper

I used a glue stick to glue the paper, but after I took the photo, I discovered that it was dying and had to pick a blob of glue off the stick and spread it on with my fingers. I’m not afraid to roll up my sleeves and get dirty, but I don’t recommend this spreading with fingers method because dying glue stick glue doesn’t spread very easily and can remain lumpy. And via Murphy’s Law, 5 minutes later I found double sided tape. 

Gluing the striped paper

Step 5

Then I add the corners. Not complicated stuff. They’re stickers.

Adding the corner stickers

Step 6

Then I add the snail to the middle. 

Adding the snail

Step 7

For the final touch, I busted out my fancy-shaped hole punchers. My favourite for baby note cards is the foot one. I punched out a couple of little blue feet, and double-sided taped them to the inside of the card for a little “aww” factor.

Fancy-shaped hole puncher

Sticking the little blue feet to the inside of the note card

Tada! A baby boy note card! 

Front

Inside

Now to package it up with the gift and send it before the little guy turns one. Heh.

What I Learned While Making My Site Mobile-Friendly

First of all, if anyone says to you "just 'throw together' a mobile-friendly version of your site", don't be fooled! It takes longer than you think! If you have a deadline, try and give yourself as much time as possible.

Sorry, I don't mean to scare you. I'm just trying to give you a heads up. It's actually quite easy, but time consuming.

I'm writing this with the assumption that whomever is reading it already generally knows how to go about making their site handheld-compatible. If not, note that you need to make a separate CSS file that manipulates your HTML to display according to handheld specs. You call your mobile CSS file with a media query, which ascertains the screen width of the browser and then uses the appropriate CSS file. Google it, and I'm sure you'll find lots of stuff. :)

Media Query
I tried to use this media query in my HTML <head> tag for calling my mobile CSS file:
<link rel="stylesheet" type="text/css" href="css/mobile_style.css"  media="handheld, only screen and (max-device-width:480px)"/>
But for whatever reason, it just wasn't working.

I found this website to help me out, and I ended up using the author's suggestion for a media query:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<link media="only screen and (max-device-width: 480px)" href="/css/mobile-style-home.css" rel="stylesheet" />

It worked.


Start from the Bottom Up
I basically just made a duplicate of my desktop CSS, named it something new, then altered it to make it my mobile version. I found it was easiest to start from the bottom and work my way up, as in starting from the background and working my way "up" to the stuff in the foreground. I commented code out if necessary because sometimes making changes to one thing affects another and you don't get the full result of the change you just made. As you get the results you want, un-comment your stuff back in little by little.


Use % Instead of em/px/pt
When you're designing for a handheld device, you need to keep in mind that the user will likely rotate their device when looking at your site. That means you need to design your site to react to whatever the width of the screen happens to be. We call that responsive web design, because your site "responds" to a change of screen width.

One good way to do this is to use % instead of em, px, or pt when setting up widths, paddings, and margins. For example, if you set the width of your main page container to 100%, it will always be 100% of the width of the browser window, no matter what the size of the browser window. So when the user switches from portrait to landscape, the width will go from being 100% of the width in portrait rotation, to 100% of the width in landscape rotation.


Don't Use <br/> All Over the Place
Okay, this one might be obvious, but I should point it out in any case. In my defense, when I built my site last year, it was one of the last assignments of my graduating year, I was exhausted from not having really slept for the last two years, and I think I concentrated a bit too much on the design, rather than the coding. So, I put a bunch of <br/>'s in some places where, if I had just taken the time to create a new <div> and add a margin or some padding, my life would have been easier creating the mobile version of my site. But, hind sight is 20/20 and you usually don't learn from laziness until it's too late. haha.

So, moral of the story: don't use <br>'s all over the place.

On the same note as above, it's a good idea to keep the mobile version of your site in mind when you're initially designing and building your site. Save yourself some hassle and design it and code it properly and appropriately so that when you go to make the handheld version it will be easier.


Lightbox May Not Be Your Friend
Don't get me wrong. I love me some Lightbox. I like that the user can cycle through a series of images or portfolio pieces without returning back to a main screen or anything. I actually used Fancybox on my site because Lightbox was giving me issues when I originally made my site. It was conflicting with other Javascript I was using. Fancybox fixed that. However, that said, have you ever viewed a site that uses Lightbox or an equivalent on your smart phone? It's tiny and unintuitive. On the desktop, when you mouse over the image, arrows show up indicating previous and next options. There's no such thing as mousing over on a handheld device. And where it showcases your image in a nice large frame on a desktop, the frame just doesn't get big enough on a handheld device and it doesn't do your image justice.

My solution for now was to just create a new page for the portfolio pieces. So, for example, if you choose a thumbnail on the portfolio page under the Flash section, it takes you to the "Flash Page" where large images of my work are displayed. I used anchor tags too, so that if you click on my Story Time Clock thumbnail, for example, it will take you to the Story Time Clock section of my Flash page. In that section you have the option of launching the actual Flash Story Time Clock page if you want. This was as close as I could get to showing a sequence of images of a portfolio piece without making the user return to the main Portfolio Page after viewing each piece, and still make it mobile-friendly.


Using an Emulator
The Opera Emulator I was using was proving to be a bit glitchy. I think with any emulator/simulator, it's a good idea to always test your work on the real thing. I tested mine on my iPhone. I'm not rich enough to own multiple devices, so for now I'll rely on my friends' feedback as they test my site on their devices. If you test my site on your device, please let me know if you find any glitches. I would greatly appreciate it.


Responsive Images
So, around midnight on Sunday night, I realized that although my idea of making a separate page for each section of my portfolio was pretty good, how was I going to make my images change depending on the rotation of the handheld device? I was overjoyed to discover that you can make your images responsive as well as your <div>'s! Not only that, but it's the easiest thing to do EVER!

I found this site online that explains it more in-depth than I do here and gives you other options too.

So, all you have to do is create a class for your images.
Example: .imageContainer {}

Wrap each of your images in a <div> with this class.
Example:
<div class="imageContainer"> <img src="../images/myexample.jpg" alt="My Example"> </div>
NOTE: Make sure that your <img src> code does NOT include the width and height, or else the responsive part won't work.

Give your imageContainer class a width in percent, so that it will be responsive when the user rotates the device.
Example:
.imageContainer {
    width: 98%;
}
This will make sure your imageContainer is always 98% of the parent <div>. 

Back in your mobile CSS, make sure the rule for your images has this code:
img {
max-width: 100%;
}
This means that the maximum width of your image will always be 100% of its parent. And since its parent is the imageContainer, which we just made responsive by telling it to have a width of 98% of its parent, the width of your image will change when the width of your imageContainer changes. You don't need to define the height
because the default is to keep the aspect ratio intact as the image changes.

How freaking cool is that?!! It's so simple! Yet so awesome!

One thing to note, though, is that if you have some funky CSS mouse overs happening on the images that you're using this max-width code on, it will break your funky CSS rollovers. I know, because it broke mine. haha. I accidentally added the max-width code to one of my thumbnails, which uses the z-index to bring one image on top of the other on mouse over. With the max-width code added, I had thumbnails all over the freaking place! haha!

My next goal is to create a tablet-happy version of my site. Right now, my site gets cut off at the bottom, as my friend and former class mate Laura Vanderkraan pointed out for me. (Check out her site and hire her! She's graduating from Humber College soon!) So, I'll let you know what I learn from that another time.

My Attempt at Gingerbread Superheroes

My husband absolutely adores gingerbread. LOVES it. So for his birthday and Christmas and any other occasion that comes up, I make him some gingerbread cookies. The challenge for me is always trying to figure out new ways to decorate the little shapes.

Back in the beginning of December, my husband sent me this site: Sugar Swings! Serve Some.  It's a blog written by a very talented working mom who makes some amazing sugar creations for her friends and family. The post my husband happened to find was about how she made gingerbread superheroes. They are so cute! I had to try it!

So, I did. My plan was a little foiled, though, as you will see. I had allotted the last couple of weekends before Christmas as my "baking weekends", but something always happens so I end up cramming it all into one day, usually on the 23rd or Christmas Eve. Sigh. Right on queue, it happened again this year. I was put onto a project at work that had some mental timing. I ended up working until 2am or later every single night for three weeks straight, including my "baking weekends". Miraculously, I was given the 23rd off, so I baked like a fiend all day and at about 1am I started decorating my husband's gingerbread people. So, there's no fancy colours or anything, but I did my best with my white sugar icing to imitate Sugar Swings' little gingerbread superheroes. I have some of those animal cookie cutters from IKEA too (I think they're discontinued now - I couldn't find them on their site to include them in my post), so it was a mishmash of creatures. Anyway, here's what I came up with.

This is my PG13 gingerbread cookie. I come from a family that hunts.

Reed Richards of the Fantastic 4

Spiderman… Icing is hard to work with, people!

Green Lantern

The Flash

Superman. His curl sort of melded into his eye.

This is supposed to be Catwoman. But if my husband's reaction is any indication of my lack of skill with icing – "What's the one with the tie supposed to be?" – then, it will need explaining. That line down her middle is supposed to be her zipper. I originally had some provocative cleavage there, but it really just looked like a big blob on her chest, so I took it off and put that "zipper". I know. I know. Fail.

Wonder Woman

Batman. He did used to have eyes, but the icing tends to have a mind of its own. When it started oozing over his eyes, I gave up and just filled it all in. Bats are blind anyway.

Next year, I'll do my best to use colours and thicker icing. And next year hopefully, cross my fingers, I won't have to do it at 1am.

Why Developing for the iPhone Drives Us Batty

Back in June when I was working at Rogers, I was assigned with the task of creating a mobile-friendly microsite. One of the magazines that Rogers Publishing creates was going to have a QR code on the cover and they wanted their readers to be directed to this microsite when they scanned it with their phones.

From what I learned in school, to convert an HTML/CSS site to a mobile-friendly version, you just dumb down the CSS a lot and presto! It's ready for a hand-held device. Kinda sorta.

I ran into some issues. It worked when I tested it in a simulator, but on my iPhone, it didn't. Surprise, surprise.

I learned from my coworker that Opera has a mobile emulator (which you down download here) and used it to test my progress.

I have an iPhone 4, so I figured I better test it on my phone just in case and sure enough, issues. I played with my CSS as far as my knowledge would take me and then let a CSS-whiz coworker take a look. I think she basically redid a lot of my code because I'm a total noob at this stuff still, but the most important things I learned from everything is: why the iPhone drives developers batty and the use of !important.

I scoured the internet to find a solution for the discrepancy between my site working in an emulator, but not on my iPhone. I came across this article, which explains that because Apple is full of themselves and knows that their iPhone is capable of displaying a full web page because its resolution is so magnificent, its mobile browser refuses to read the lovely mobile-friendly CSS you've just written.

I think Apple missed the point. As an iPhone user myself, I hate having to zoom in on a web page my phone has decided is just fine to display in the desktop version, completely disregarding that my astigmatic eyeballs don't do well with 3pt type. Just because the iPhone can display desktop versions of sites doesn't mean it should.

The work around is that you have to force the iPhone to display your site in its mobile layout. From what I understand, the iPhone does read your mobile CSS, because its browser is still recognized as a mobile browser, but it overrides that recognition and goes back to the desktop version. In order to force the iPhone to stick with your mobile CSS, you have to use !important in your CSS.

This is a pretty good article explaining the use of !important. Basically, what !important does is, when written within one of your CSS rules, it tells the browser that that rule is the most "!important" and to display this rule regardless of anything else in the code or other CSS files like your desktop CSS.

So, for example, keeping the width of the page narrow is very important for making your CSS work on an iPhone:

#PageContainer {

          width: 320px !important;

          background-color: #666;

}

By adding !important as I did above, it forces the mobile browser to display the PageContainer's width as 320 pixels regardless of anything else within your CSS that might be conflicting with it.

I used !important for other elements besides the width, but I think it's best to play with your CSS and see where you need it since your site may be different from my mine. I used the width as an example because that's where I was having the most frustrating time.

In conclusion, less is more on all mobile devices, including iPhones. It makes usability friendlier and easier to navigate. When the iPhone tries really hard not to read your lovely mobile-friendly CSS, use !important in your CSS rules to force it  to display the way you want it.

Hope this helps somebody!