Tuesday, January 28, 2014

Why you should "optimize" your photos

The most common problem with websites created by non-professionals is that the photos placed on the website aren't optimized for the web. What optimizing a photo does is make it loads as quickly as possible without reducing the quality of photo as seen online. Not optimizing photos causes the following problems:

1. Your web page will load slooooowly. Everyone who visits your site doesn't have high speed Internet as many connect through 3G, 4G or a weak wifi signal and a few have dial-up. Even those with high speed Internet expect your entire site to load instantly and it won't without optimizing the photos.

2. Search engines, Google included, take into account how quickly your website loads when they determine ranking. You don’t want your website penalized because you failed to spend a few minutes to optimize the photos.

3. In rare cases your site has so many photos that aren’t optimized that you go over the resources allowed by your hosting company. Even for unlimited bandwidth providers (which isn’t really true), this is typical of their terms of service: We expressly reserve the right to review every Account for excessive space and bandwidth utilization, and to terminate or apply additional fees to those Accounts that exceed allowed levels.

So, that’s the “why” you want to optimize photos and the next question is “how”. First, web pages deal in the width and height of a photo in pixels. Those dimensions are critical. The concept of “dpi” (i.e. dots per inch) doesn’t apply in the online world because the concept of an “inch” is only for printing. Therefore, only changing the dpi of a photo without changing the width and height in pixels actually does literally nothing online.

The first step to optimize a photo is to reduce the width and height to the actual dimensions at which you’d like to display it. That should be done by a combination of cropping the photo, if needed, and “resampling” the image. To get technical for a second, there’s difference between resizing an image and resampling an image. When you resize an image, you do not change the number of pixles in the width and height but change the “dpi” (which does nothing online). When you resample an image, you change the number of pixels in the width and height (which is what you need to do).

So once you have the photo the correct width and height in pixels, you’ve done most of the work to optimize it. The next piece is to change the “quality” or “compression” of the photo. Naturally, you’d think that the higher the “quality”, the better the image would look online but that’s not true. Maximum quality is overkill. We recommend “high” quality. There are a number of pieces of software that ask you about the quality when you save an image (e.g. photoshop) and you should pay attention to that when you save the image. If you don’t have that type of software or want to take an easy method, clients of DomainNameSanity.com can simply use the online image optimizer that’s part of the “settings” on the file manager to automatically optimize the photo after you have set it to the proper width and height in pixels.

Finally, I’d like to demonstrate what we’ve been talking about to show three photos. Below is a photo we took in Glacier Bay in Alaska. We’re going to show them all to you as 400 pixel wide by 300 pixel tall images.

Sunday, January 26, 2014

How to create your own blog

DomainNameSanity.com has created its first blog. We have significant technical resources from in-house tech people and we could have used any service or system we wanted to build our own blog. So, why did we use Google's free Blogger.com service? The answer is "simple". We've been recommending this service to our customers for 10 years. We thought that if it's the right solution for our clients, then it's the right solution for us. Everything that we're going to do to create this blog requires no programming or HTML expertise so don't be frightened away.

We're not going to walk you through the steps of setting up your Blogger.com account and creating the blog because Google does a wonderful job of doing that. However, we are going to give you a few pointers to help to integrate your blog with your website.

When we setup our blogger.com account, we didn't want the Internet address to be at the blogger.com domain name because we want our visitors to know the DomainNameSanity.com domain name. Blogger makes that very simple. Therefore the first thing we did was to go to "design" and then "settings" and set the "Publishing Blog Address" as "blog.domainnamesanity.com". If you're a DomainNameSanity.com client, we'd be happy to setup that redirect for you. Blogger will give you two CNAME records that need to be setup. Just send those to us. Once it's setup, you'll create a link on your website to the blog page.

The next important item is to link back to your website from your Blog. We wanted a horizontal navigation that was below the page "header" (which is the most common navigation method). Blogger has a series of Gadgets that you can add to your blog. One of them is called "Link List". You will "Configure Link List" as follows:
  • In the "title" section, just write "navigation"
  • Leave the "number of items to show in list" blank
  • In "Sorting", leave it as "Don't Sort" since you can do that manually right sequence on your own
  • In "New Site Name", enter the name of the navigation link (e.g. home).
  • In the "New Site URL", place the full internet address for hat link starting with http://
  • Once that's setup, then go back to "Design", "Templates", "Customize" and "Advanced" to set the colors for the navigation to the way you like it.

    We also wanted to tie our Blog to our Facebook account. On the "Design" and "Layout" page, we added an HTML/JavaScript gadget. We used a tool from Facebook to generate the HTML code for an IFRAME to Facebook and placed that code into the HTML/JavaScript gadget. You can visit https://developers.facebook.com/docs/plugins/like-button/ to get that HTML code. By the way, we used that same code on the top of DomainNameSanity.com to place a "like" for Facebook.

    This entire process took us about 2 hours to setup including getting the colors the way we wanted it and researching all of the steps above. Hopefully, these steps will help you get the job done quicker. We'd appreciate your feedback on this article, your Liking us on Facebook and giving us ideas for future articles.Thank you.

    What should we write about?

    While DomainNameSanity.com has been helping the technically challenged build websites since the year 2000, our New Year's resolution for 2014 was to create a blog to provide tips, ideas and advice on this subject. We'll be reviewing our history of questions that has been asked of us over the years for ideas. However, we'd very much appreciate your giving us your comments on what you'd like to read about.