<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Clobeca Web Design Blog &#187; Website Design Blog</title>
	<atom:link href="http://www.clobeca.com/webdesignblog/topics/website-design-blog/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.clobeca.com/webdesignblog</link>
	<description>Blogs on web design, web development, and SEO.</description>
	<lastBuildDate>Mon, 26 Oct 2009 17:20:03 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Copyright insanity?</title>
		<link>http://www.clobeca.com/webdesignblog/2009/10/copyright-insanity/</link>
		<comments>http://www.clobeca.com/webdesignblog/2009/10/copyright-insanity/#comments</comments>
		<pubDate>Mon, 26 Oct 2009 17:14:52 +0000</pubDate>
		<dc:creator>Peter Alcivar</dc:creator>
				<category><![CDATA[Website Design Blog]]></category>

		<guid isPermaLink="false">http://www.clobeca.com/webdesignblog/?p=179</guid>
		<description><![CDATA[As a self-employed web application developer and professional photographer, I understand the importance of protecting one&#8217;s intellectual property, and fully support copyright protection as a very important part of that. But some folks seem to want to go too far. The Copyright Term Extension Act of 1998 (also known as the Sonny Bono Protection Act [...]]]></description>
			<content:encoded><![CDATA[<p>As a self-employed web application developer and professional photographer, I understand the importance of protecting one&#8217;s intellectual property, and fully support copyright protection as a very important part of that. But some folks seem to want to go too far. The Copyright Term Extension Act of 1998 (also known as the Sonny Bono Protection Act and the Mickey Mouse Protection Act) extended existing copyright protection by 20 years. Given the increase in the human life span over the last century, it makes sense to extend such protection, in order to ensure that the artist and his or her heirs may benefit maximally from their creative work.</p>
<p>That&#8217;s all well and fine, but some people would like to take this to ridiculous limits. The late Sonny Bono (at the time a member of Congress who obviously had a vested interest in extending copyright) wanted copyright protection to last forever. The late Jack Valenti, then president of the Motion Picture Association of America, wanted to extend it to the even more absurd &#8220;forever less one day&#8221;.</p>
<p>The CTEA was lobbied heavily by the US entertainment industry, including Disney. Certainly Disney has an interest in protecting its intellectual property, and Mickey Mouse et al. continue to be major cash cows for them. On the other hand, I find it quite disingenuous on Disney&#8217;s part to want to extend copyright protection indefinitely. Consider how much money Disney has made from producing animated films based on fairy tales by Hans Christian Andersen, for example. I wonder how much money Disney paid his descendants for the rights to The Little Mermaid? How about Snow White, Cinderella, Peter Pan, Robin Hood? Perhaps there would be no way to extend protection those sources which are already in the public domain or whose authors are long forgotten. But consider that in the Information Age, everything that&#8217;s ever written can exist everywhere at once. Who knows, words or images that I create may well persist for decades or longer, buried in someone&#8217;s browser cache or server backup somewhere. Certainly I wouldn&#8217;t mind it if my great-great-great-great-great-great-great-great-grandchildren benefit from my work, but maybe they need to get up and do some creating themselves.</p>
<p>Imagine the other effects indefinite copyright extension would have, especially given our overly-litigious society. An art history book, with its copious reproductions of classic art works, would cost as much as a medical education, once the writer got done paying royalties. Coffee table books would become a thing of the past. Classical sheet music for your child the piano student would go through the roof. Eventually, writers would not be able to string a single sentence together, because someone had already written those same words.</p>
<p>The Book of Ecclesiastes describes this scenario best: There is nothing new under the sun.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.clobeca.com/webdesignblog/2009/10/copyright-insanity/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>This is the best of all possible times</title>
		<link>http://www.clobeca.com/webdesignblog/2009/10/this-is-the-best-of-all-possible-times/</link>
		<comments>http://www.clobeca.com/webdesignblog/2009/10/this-is-the-best-of-all-possible-times/#comments</comments>
		<pubDate>Sat, 03 Oct 2009 19:11:22 +0000</pubDate>
		<dc:creator>Peter Alcivar</dc:creator>
				<category><![CDATA[Website Design Blog]]></category>

		<guid isPermaLink="false">http://www.clobeca.com/webdesignblog/?p=172</guid>
		<description><![CDATA[&#8220;Are you crazy?&#8221; you may ask. All of the news media say that this is the worst recession since the Great Depression. Unemployment is near 10% and the world economy is tanking. So what&#8217;s an entrepreneur to do? The answer: Get out there and market your heart out! Business is cyclical; this recession may be [...]]]></description>
			<content:encoded><![CDATA[<p>&#8220;Are you crazy?&#8221; you may ask. All of the news media say that this is the worst recession since the Great Depression. Unemployment is near 10% and the world economy is tanking. So what&#8217;s an entrepreneur to do? The answer: Get out there and market your heart out! Business is cyclical; this recession may be worse than others in the recent past, but this too shall pass. To be sure, we have felt the pinch. We&#8217;re not running out and buying new cars today, and we&#8217;re holding off from some home maintenance until it&#8217;s absolutely necessary. But eventually, people&#8217;s cars will break down irreparably; furnaces will need replacement; houses will need a new coat of paint or a new roof; and at that point, we will have to bite the bullet and make those purchases that we are not making now. When that time comes, will you be ready?</p>
<p>Now is the best time to polish up your marketing. If you have some funds to advertise, use them. Update your website, print up new business cards and brochures. If you don&#8217;t have a lot of funds for advertising, there are still inexpensive ways to make your business known. Get out and network. Join your local chamber of commerce. Join a word-of-mouth referral group. Attend meetings and events regularly. If you don&#8217;t have work right now, you need to be finding ways to get your business known. It is of no benefit to anyone to sit and watch all the financial news channels and bemoan the state of the economy. Listening to the prophets of doom will not help the economy to improve, and it certainly will not get your phone ringing.</p>
<p>Eventually, people will want the types of products or services you provide, but they won&#8217;t be calling you unless they know you exist. Call, write or email your past customers. Let them know about your other products and services. Maybe they need something they don&#8217;t know you provide. Ask them for referrals. If you&#8217;re in real estate, most of your colleagues are probably either getting out of the business or sitting around complaining about how bad things are. You could join them, or you could be making phone calls. Prices are low; interest rates are low. Let your past clients know that this is a great time to be snapping up investment properties.</p>
<p>Our web design business is having its busiest year yet. We&#8217;re by no means out of the woods, but we&#8217;re also not standing still. Dr. Ivan Misner, founder of Business Networks International (BNI), a referral group to which we belong, says it best: <a style="color:black" href="http://www.bni.com/successnet2005/successnet05/May_2008/founder.shtml" target="_blank">I refuse to participate in a recession!</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.clobeca.com/webdesignblog/2009/10/this-is-the-best-of-all-possible-times/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Internet ripoffs&#8211;will we ever learn?</title>
		<link>http://www.clobeca.com/webdesignblog/2009/09/internet-ripoffs-will-we-ever-learn/</link>
		<comments>http://www.clobeca.com/webdesignblog/2009/09/internet-ripoffs-will-we-ever-learn/#comments</comments>
		<pubDate>Tue, 01 Sep 2009 18:24:08 +0000</pubDate>
		<dc:creator>Peter Alcivar</dc:creator>
				<category><![CDATA[Website Design Blog]]></category>

		<guid isPermaLink="false">http://www.clobeca.com/webdesignblog/?p=169</guid>
		<description><![CDATA[There are few things that get me as pissed off as Internet scams and unsolicited commercial email, better known as spam. Today, one of my respected colleagues posted a link in Facebook to a website called &#8220;TIME Insider&#8221; that claims that Google is hiring people to work from home.  The site is made to look [...]]]></description>
			<content:encoded><![CDATA[<p>There are few things that get me as pissed off as Internet scams and unsolicited commercial email, better known as spam.</p>
<p>Today, one of my respected colleagues posted a link in Facebook to a website called &#8220;TIME Insider&#8221; that claims that Google is hiring people to work from home.  The site is made to look like something from TIME Magazine, but it quickly becomes apparent that there is no connection.  First, the URL appears to be a page in a subdirectory of the main site, but there are no other pages on the site. The links in the navigation bar all point to the same page, so the whole site is clearly a single page intended to &#8220;report&#8221; on the main page of the signup page. The &#8220;news report&#8221; specifically states that Google is hiring people to work for them and claims that no experience is necessary. The &#8220;report&#8221; even features a section titled &#8220;<span>How To Apply For A  Google Job&#8221;</span> with links to the signup page.<br />
<span><br />
The &#8220;news report&#8221; first says that Google is asking for $2 to cover shipping and handling of their &#8220;work from home kit&#8221;.  Further down, it says the amount is $2.95.  It also states that the kit is distributed through &#8220;local websites&#8221; in your area.  Isn&#8217;t that the whole point of the Internet?  There&#8217;s no such thing as &#8220;local&#8221;!</span></p>
<p>Once one follows the link to the signup page, the form asks for the mark&#8217;s signup information.  At the bottom of the page is a disclaimer that specifically states <span>&#8220;Google™ does not endorse or sponsor this site and is in no way affiliated with this offer.&#8221;  But wait, the original &#8220;breaking news&#8221; report specifically said Google is doing the hiring and implied that you will be a Google employee: </span><em>&#8220;We understand the psychology of working from home and we want to give our employees tasks that are simple and easy, and reward them generously in order to keep them motivated.&#8221;</em></p>
<p>So $2.95 is all that stands between me and being a part of a $220 billion company.  I can work for Google, no job applications or interviews required.  And I don&#8217;t even have to leave home!  Who wouldn&#8217;t jump at that?</p>
<p><span><strong>If it sounds too good to be true, it probably is.</strong> We have heard this sentence so often, it has become part of our collective consciousness.  I wouldn&#8217;t be surprised to see it encoded into our DNA, if we could only spell it using just the letters G, A, T, and C.  And yet, people fall for this crap every day.  Someone must be falling for these ripoffs, or they would soon stop.  If I send out a million emails or get a million hits on my website, and only one tenth of one percent of the viewers answer the ad, I&#8217;ve got 1000 suckers.  In this case, almost $3000.  Not a bad return for my investment of registering a couple of domains and throwing up a couple of web pages.  Next week, I&#8217;ll have to register a couple of new domains, change a little of the wording, and throw the pages back up.  Of course, I&#8217;ll also have to stay a step ahead of Google&#8217;s and TIME&#8217;s lawyers, and maybe move around a lot too.  Great way to raise my family.</span></p>
<p><span>As users of the Internet, we must learn to separate legitimate businesses from the ripoffs.  Some scams are especially easy to spot.  We&#8217;ve all gotten these emails, usually from Nigeria and sometimes specifically addressed from Nigeria or some other country, in which a long-lost relative has died and left us millions of dollars, and all they need are a bank account and an advance payment of a few hundred dollars (or more) to cover the costs of getting the big payoff to us.  Usually the person writing the email is a lawyer or a &#8220;barrister&#8221;, which is another word for lawyer.  No matter how you feel about lawyers, we can all agree that they are usually very well educated, and since language is their business, they should be pretty good at written English.  So why is their grammar so terrible?  Even if I had a huge sum of money that I needed to convey to a person in another country, whose language I was unfamiliar with, I would make sure I hired a representative who was fluent in that language.<br />
</span></p>
<p><span>Other scams are a little harder to spot.  They make the page look like a news report (TV infomercials have been notorious for this too).   They throw in the name of a well-known </span><span>successful </span><span>company, like Google.  They do their spelling and grammar homework.  But before even getting to the signup page, it was obvious the rest of the site was missing.<br />
</span></p>
<p>The Internet can be a valuable asset in creating a business, or for doing business.  In some cases, it can be the entire business.  We depend upon it.  Some of our clients have created entire business models around nothing but a website or a web application.  But they are delivering true value to their customers.  They charge a fair price for what they deliver.  There&#8217;s no bait-and-switch.  Their websites list contact information and, if applicable, a refund policy.  If they ask for your credit card number, make sure the page has an SSL certificate, and if you have any doubts, check that the certificate is actually assigned to the business as it represents itself, and that it is traceable to a certification authority, such as Verisign or Thawte, and not a self-signed certificate.  This last part is easier now, because most modern browsers will warn you if it isn&#8217;t.</p>
<p>It all comes down to supply and demand.  The more we all learn to spot the ripoffs and ignore them, or perhaps even report them to the authorities where appropriate, the fewer ripoffs will show up.  Maybe someday, we&#8217;ll only get wanted email in our inbox.  Wouldn&#8217;t that be nice?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.clobeca.com/webdesignblog/2009/09/internet-ripoffs-will-we-ever-learn/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>A story of an online business venture with a happy outcome and why.</title>
		<link>http://www.clobeca.com/webdesignblog/2009/07/a-story-of-an-online-business-venture-with-a-happy-outcome-and-why/</link>
		<comments>http://www.clobeca.com/webdesignblog/2009/07/a-story-of-an-online-business-venture-with-a-happy-outcome-and-why/#comments</comments>
		<pubDate>Thu, 16 Jul 2009 22:36:12 +0000</pubDate>
		<dc:creator>Catherine Alcivar</dc:creator>
				<category><![CDATA[E-commerce web solution]]></category>
		<category><![CDATA[Website Design Blog]]></category>
		<category><![CDATA[What's New At Clobeca Web Design]]></category>

		<guid isPermaLink="false">http://www.clobeca.com/webdesignblog/?p=149</guid>
		<description><![CDATA[Recently, our client, Barrington Motor Works LLC, located in Barrington, New Hampshire has sold 300 BMW Restoration and Service manuals within just a month after we implemented e-commerce functionality by integrating it with PayPal using simply PayPal’s “Click here to buy now” button to their site.  I think that they got those orders quickly and [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_164" class="wp-caption alignright" style="width: 236px"><a href="http://www.barringtonmotorworks.com"><img class="size-full wp-image-164" title="motorworkrestoration" src="http://www.clobeca.com/webdesignblog/wp-content/uploads/2009/07/motorworkrestoration.jpg" alt="www.barringtonmotorworks.com" width="226" height="191" /></a><p class="wp-caption-text">www.barringtonmotorworks.com</p></div>
<p>Recently, our client, Barrington Motor Works LLC, located in Barrington, New Hampshire has sold 300 BMW Restoration and Service manuals within just a month after we implemented e-commerce functionality by integrating it with PayPal using simply PayPal’s “Click here to buy now” button to their site.  I think that they got those orders quickly and for that number is a successful story, especially, with the current economy.</p>
<p>Before we added ecommerce to their website, they had already gotten some phone calls by new customers who wanted to order the manual after we launched their website, but after e-commerce was added to their site, they were getting more orders.  Now they are getting international orders, so yesterday we had to add different buying options for their customers in different regions.  Each region such as the United States, Canada, Europe, Asia, etc., has different shipping cost.  It was necessary to set up different configuration for each “Click here to buy now” button.</p>
<p>Christopher and Barbara Betjemann started restoring and constructing BMW motorcycles as a hobby for twenty years.  Later in 1999 they decided to open Barrington Motor Works, LLC to share what they “learned and knew about the vintage BMW motorcycle with other BMW vintage motorcycle enthusiasts.”  To learn more about them, please visit their website at <a onclick="window.open('http://www.barringtonmotorworks.com/','pop_press','width=1040,height=650,scrollbars=yes,resizable,toolbar=yes')" href="#">http://www.barringtonmotorworks.com/</a>.</p>
<p>Later in the fall of 2007 we had the pleasure of meeting Christopher and Barbara Betjemann.  They had found us offering our website design and web development services on the Internet.  They sent us an inquiry with a request for a project proposal to redesign and rebuild their existing website.  Our meeting went really well.  It was a start of a good business relationship.  It is really a blessing to win the chance to work with such wonderful people.  They were very happy with the new look we created and functionality we built for their website.  We custom designed and developed the site with a content management system that allows them to update their web pages and photo gallery.</p>
<p>We launched their website in February 2008.  Not long after that they were actually getting some phone calls from around the world about their BMW restoration services.  The Betjemanns already had an established clientele in the USA and Europe.  The new website actually moved their business further.  Later they were getting inquiries from China. They then told us how happy they were with the website, because it was getting them new customers.  It really makes us happy when we learn about clients who are happy with our work.  Our goal is always to make our clients happy with our work.  That is really important.</p>
<p>Last year the Betjemanns were also working on having their BMW Restoration and Service Manual published by a local publisher, so they could start selling it and promoting it through their new website.  They then finally advertised it on their website.  They came to see us again to discuss about how they could sell their BMW Restoration and Service Manual online.  They were also telling us that after they advertised their manual through their website, they were getting order requests.  They were ecstatic about that, and they thanked us.  They expressed how much they love the web graphic design, how perfect the color scheme is (they thought it just fit well with the branding they had expected), and how much they like the functionality of being able to update their website.  We thanked them also for giving us the opportunity to work with them.  Now they wanted to offer their customers convenience by providing them the  capability to order the manual and pay it online using a credit card through their website.  We advised them on the different merchant services such as PayPal and Authorize.net since having an e-commerce requires a payment gateway.</p>
<p>This year by early spring the Betjemanns finally decided to have us implement e-commerce for their website using PayPal, but they wanted to start with selling their BMW Restoration and Service Manual online only within the US.  They wanted to first see how it would turn out.  In June 2009 we added e-commerce on their website.  We then found out how busy they’ve been due to the number of orders they’ve been getting, and just a few days ago, they requested to allow their customers outside of the US to order online through their website instead of just through a phone call and also the capability for them to add new products they want to sell online since they wanted that, too.  We implemented this capability early this week.</p>
<p>This is actually one of the most successful online business venture stories we’ve had the opportunity to be involved with since we’ve operated our business in 2004.   To me it’s the most positive outcome in all the businesses we’ve had the chance to work with.</p>
<p>It is quite an inspiration.  Why is theirs very successful while there are other online businesses out there that are still trying to make it?  I do believe that attitude and experience matter.  The Betjemanns are very positive and confident about their goals for their online business and what it would take.  They’ve also had a well-established network of friends and business relationships here in the US and Europe for years before they launched their online business.  That certainly helps.  Barrington Motor Works has been around, but they are new in the online business.  However, years of having a good networking connections make a difference, and that puts them at a high advantage.  They already have a built-in market to start with.  For new online businesses that don’t have an established market sphere would need to do some aggressive marketing to be visible and spend more on traditional and online-marketing.</p>
<p>The BMW Restoration Manual as a product is very unique.  It still has some competition but not a lot though.  There is actually only one BMW Restoration Manual by a different author that is sold at Amazon.com.  However, the Betjemanns’ BMW Restoration and Service Manual is listed on Amazon also.  This is actually not an authorized listing.  The Betjemanns did not authorize Amazon to list their book.  Their book is not available for purchase in Amazon.com.  What their company, Barrington Motor Works, sells is the BMW /2 Restoration and Service Manual they (the Betjemanns) wrote.  They only sell it online through their website.  There aren’t many BMW /2 Restoration Manuals published out there.  The /2 refers to the class or model of BMW.  If you go to Google, and if you type in BMW restoration manual, their website will come up on the first page of the query.</p>
<p>The less competition you have with your product the higher chances you will get new customers.  For businesses with high competition, especially, those whose services and products are similar with other companies would have to compete with how unique theirs are versus the others.  What makes theirs special than the others?  There are a lot of choices out there for consumers.  It’s just not the type of products.  It is also the type of service the customers get.  As business owners we always need to be aware and sensitive about customers’ needs.  We also need to fine tune and improve our services and processes.  No matter how excellent your product is customers will go to other providers if you don’t provide them the service that meets their need.</p>
<p>The Barrington Motor Works Company has an extraordinary product that attracts to BMW enthusiasts – their customer base, and the fact that they’ve had a network of continuous good business relationships over the years is a testament that they also provide excellent service to their customers.   Their website is content rich with information and photo galleries that display photos of their work, services such as engine work, specialty products such as vintage plates, and more.  A professionally built user-friendly website with aesthetically pleasing look that conveys the right identity of the company and presents a well-organized content will most likely grab visitors’ and prospective customers’ interests, especially, those who are BMW enthusiasts such as in this case.  They will want to always visit and find out more of what that website has for them.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.clobeca.com/webdesignblog/2009/07/a-story-of-an-online-business-venture-with-a-happy-outcome-and-why/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Optimizing Images for the Web</title>
		<link>http://www.clobeca.com/webdesignblog/2009/07/image-optimization-for-the-web/</link>
		<comments>http://www.clobeca.com/webdesignblog/2009/07/image-optimization-for-the-web/#comments</comments>
		<pubDate>Sun, 12 Jul 2009 03:51:10 +0000</pubDate>
		<dc:creator>Peter Alcivar</dc:creator>
				<category><![CDATA[Web Application Development Blog]]></category>
		<category><![CDATA[Website Design Blog]]></category>
		<category><![CDATA[Website Maintenance Blog]]></category>

		<guid isPermaLink="false">http://www.clobeca.com/webdesignblog/?p=100</guid>
		<description><![CDATA[With the proliferation of content management systems that allow users to build or edit their own websites, it has become important to understand how to optimize images for display in web pages. Have you ever browsed to a web page with pictures on it and then sat waiting while the pictures s-l-o-w-l-y fill in, even [...]]]></description>
			<content:encoded><![CDATA[<p>With the proliferation of content management systems that allow users to build or edit their own websites, it has become important to understand how to optimize images for display in web pages. Have you ever browsed to a web page with pictures on it and then sat waiting while the pictures s-l-o-w-l-y fill in, even though you have a high-speed connection? Or did you ever see an image that loads quickly, but is very fuzzy and lacking in detail, maybe showing large patches of the same color rather than a smooth transition from one color to the next? Another thing I see all too often on the web are photographs that are clearly distorted&#8211;the subjects are either too tall and narrow or too short and wide. All of these are examples of images that have not been optimized for the web.</p>
<h2>Target Audience</h2>
<p>This article is intended for anyone who occasionally needs to update web content, as well as anyone who is interested in the subject. I&#8217;ve tried to keep the technical jargon to a minimum, but the subject requires some basic concepts that you will just have to suffer through. It does not assume any knowledge of HTML or programming; however, any of these, plus knowledge of basic arithmetic is helpful. Familiarity with digital photography and the use of an image processing program such as <a href="http://www.adobe.com/products/photoshop/photoshop/" target="_blank">Photoshop</a>, <a href="http://www.adobe.com/products/photoshopelwin/" target="_blank">Photoshop Elements</a> or <a href="http://www.acdsee.com/" target="_blank">ACDSee</a> would be very helpful. You might also want to check out <a href="http://picasa.google.com/" target="_blank">Picasa</a>.</p>
<p>If you suffer through this entire thing, it is my hope that this will help you get a good start optimizing images so that your pages display optimally for your viewers.</p>
<div style="background-color:#dfdfdf; border:1px #7f7f7f solid; padding:5px">HTML allows you to display an image along with text on a web page. The HTML tag for an image allows you to specify the height and width of that image independently of the actual image size. This means that you can upload a file that&#8217;s one size and display it as either smaller or larger than it would normally. This is a useful capability if used in moderation, as it allows us to tweak the look of a page to get it just right, but it&#8217;s a bad idea to make large changes to an image size, for reasons that I&#8217;ll explain later.</div>
<h3>Why is this even a problem?</h3>
<p>Like the rest of the electronics field, digital cameras have come a long way. I bought my first digital camera in 1998. It cost me about $300 and produced an image size of 640&#215;480 pixels&#8211;about 1/3 of a megabyte. Not very good for producing prints, but actually quite adequate for web images. Now it&#8217;s common to find a consumer-grade digital camera that produces 10 megapixel images for about $150. These cameras can now produce decent-sized prints up to 8&#215;10 or so, but they are overkill for web images. So we&#8217;re seeing more and more images being uploaded to the web that are more appropriate for printing.</p>
<h2>Definitions</h2>
<p>First, some definitions. Digital images are made up of pixels. A <em>pixel</em> is a single dot of color, and an image is made up of thousands or even millions of them, arranged in a rectangular grid. For example, an image might be 2400 pixels wide by 3000 pixels tall, or 2400&#215;3000. Multiplying these dimensions together gives us a total <em>image size</em> of 7.2 megapixels.</p>
<p><em>Aspect ratio</em> is the ratio of the width of an image to the height. A 4&#215;5 image has an aspect ratio of 4:5. An 8&#215;10 image has an aspect ratio of 8:10.</p>
<h3>What is this, a math class?</h3>
<p>If you remember your middle school math (bear with me for just a bit), these ratios are just another way of expressing a fraction, so the equivalent fractions are 4/5 or 8/10 respectively. Again remembering math class, we know that we can always reduce a fraction by dividing the top and bottom numbers of a fraction by the greatest common divisor (GCD), which is the greatest number that evenly divides both numbers. In the case of 4/5, the GCD is 1 which gives us the same value again. In the case of 8/10, the GCD is 2. Dividing both the top and bottom of 8/10 by 2 results in 4/5. All of this is to say that a 4&#215;5 image and an 8&#215;10 image have the same aspect ratio.</p>
<p>Aspect ratio is important because by not preserving the aspect ratio, an image gets distorted. We&#8217;ve all been to an amusement park and seen those fun house mirrors that make you look like either tall and thin or short and chubby. You get pretty much the same effect when you change the aspect ratio of an image. Have you ever seen an image gallery that shows images like that? Some badly designed websites allow users to upload their own images, but do not pay attention to the aspect ratio and just force the picture to fill a rectangle of a given size.</p>
<div style="background-color:#dfdfdf; border:1px #7f7f7f solid; padding:5px">
<p>Photographs come in a number of standard sizes: 4&#215;6, 5&#215;7, 8&#215;10 are the most common. Another standard that has become quite common in the past few years is 4&#215;5.33, which actually corresponds to an aspect ratio of 3:4. This is due to a lot of consumer-grade digital cameras coming in that aspect ratio. Professional digital cameras mostly follow the aspect ratio 2:3 which matches the aspect ratio of 35mm film.</p>
<p>These common aspect ratios have worked their way into web media as well. I&#8217;m often asked for a web image in either 5&#215;7 or 8&#215;10 format, even though there are very few web pages that display an image that large. What the client is actually specifying is probably the aspect ratio.</p>
<p>So what do you do when you have an image in one aspect ratio and you need to display it in a different aspect ratio? The same thing photographers have done since the days of film and darkrooms: cropping. <em>Cropping</em> is the act of cutting out a part of a larger image. Originally it was done by choosing what part of a negative to print, and now it&#8217;s done digitally by most image processing programs. Typically it will involve cutting off either the top and bottom or the sides of your image, so if capturing your own photographs, make sure you leave enough room for cropping. If you hire a professional photographer to create images for you, make sure you specify the aspect ratio in your instructions.</div>
<p>The next term I&#8217;m going to define is <em>resolution</em>. This is a concept that causes a lot of confusion, because it means different things to different people. A capture device such as a digital camera might have a spec defined as resolution, such as 3 megapixels or 2048&#215;1536 resolution. Strictly speaking, this is not resolution; it is image size. True resolution is a measure of the number of pixels per unit of length, such as pixels per inch or pixels per centimeter. By this definition, a capture device does not specify resolution (actually it can, but that&#8217;s really a measure of the minimum feature size that can be captured by the device, which is outside of the scope of this article). Normally, a display device has resolution. For example, most computer flat screen displays have a fixed resolution of about 100 pixels per inch. Older CRT monitors actually have variable resolution. A typical professionally produced photographic print has a resolution of about 300 pixels per inch. A laser printer might have a resolution of 300-1200 pixels per inch.</p>
<p>Here&#8217;s where the math comes in. Suppose you want to display your portrait on your web page. The computer screen has a resolution of 100 pixels per inch, and you want that image to show up on the screen at 4&#215;5 inches. You require an image that is 4&#215;5 inches times 100 pixels per inch, or 400&#215;500 pixels. Suppose your professional photographer provided you with an 8&#215;10 image file intended for printing. As I said above, printing requires 300 pixels for inch, so 8&#215;10 times 300 pixels comes to 2400&#215;3000 pixels. At the native resolution of 100 pixels/inch, though, the image would try to display at 24&#215;30 inches. You can certainly use that file on your site&#8211;HTML lets you specify the size at which the image is displayed on the page, but the page will load very slowly and will consume much more bandwidth than you need.</p>
<p>I previously defined <em>image size</em>. Again, image size is the size of the image in pixels, either as a pair of numbers (400&#215;500) or their product (200000). To further confuse matters, let us introduce the concepts of file size and image compression. <em>File size</em> is the number of bytes (or kilobytes or megabytes) that a file takes up either on your computer&#8217;s hard drive or on the web server&#8217;s hard drive. In the absence of compression, image files get very big very quickly. It takes 3 bytes to define each pixel in an image (8 bits each of red, green and blue), so a (relatively small) 200000 pixel image takes up 600 kB (kilobytes). Our 8&#215;10 print image would be 2400 x 3000 x 3 = 21,600,000 bytes—almost 22 megabytes. Even on a 12 megabit per second broadband connection, that file would take at least 15 seconds to download on a good day. Not something you&#8217;d want to put on your web page!</p>
<p>Image compression is a way to reduce the <em>file size</em> of an image (in bytes) without reducing the <em>image size</em> (in pixels). Without getting into detail, this is done by performing certain mathematical operations (algorithms) on the image. There are two basic types of compression: <em>lossless</em> and <em>lossy</em>. <em>Lossless</em> compression, as its name implies, is a means to reduce an image file size without losing any information. The algorithms involved are completely reversible, so you never lose anything from the original image. An example of lossless compression is a zip file. Ever put a Word document into a zip file? What you get out of it is exactly what you put in.</p>
<p><em>Lossy</em> compression is a type of compression that is not completely reversible. As the name implies, some amount of detail in the image gets lost and can&#8217;t be retrieved. The algorithms involved are much more complex. They actually examine areas of the image and decide where it can take things out that the viewer won&#8217;t miss. Lossy compression is obviously something you can&#8217;t do with text files. It wouldn&#8217;t be much help if when you unzipped the Word file containing your resume, random words were missing from it. So why would anyone want to use it? Because the resulting file size is much smaller, depending on the degree of compression. As an example, the hypothetical 400&#215;500 pixel image I mentioned earlier has an uncompressed size of 600 kB. Typical lossless compression might give us 300 kB, or a 50% reduction in file size. JPEG compression, as demonstrated in some real-world samples below, can get us anywhere from 75% to 98% reduction in file size, depending on how much quality we&#8217;re willing to sacrifice.</p>
<h2>Image Size</h2>
<p>You will need some kind of image processing program in order to optimize your images. I mentioned a number of them above. Each has its own set of features, some more than others, but they all should perform the same basic tasks: cropping and resizing images and saving them with variable amounts of compression. They should all work with the JPEG image file format, which is the common format produced by all nearly digital cameras, and is also used by the web for photographic quality images.</p>
<h2>Image File formats</h2>
<p>Images come in many different file formats. Some are proprietary, supported only by the program that uses them, and others are standards, supported by many programs. Web browsers support only a few image file formats. The most common format used for photographic-quality images is JPEG. The JPEG format is useful for photographic images because it allows for the simultaneous display of millions of colors, and because it also provides a high degree of image compression. JPEG also gives us the ability to choose how much image compression to use, in exchange for image quality. For example, Photoshop&#8217;s Save For Web tool allows you to save a file on a scale from 0 to 100, with 100 being the highest quality, and 0 being the smallest file size.</p>
<p>There are other file formats supported by the Web as well. GIF and PNG are two other formats supported by all Web browsers, but as this article is primarily concerned with photographic images, we won&#8217;t discuss them here.</p>
<div id="attachment_112" class="wp-caption alignnone" style="width: 298px"><img class="size-full wp-image-112" title="SaveForWeb" src="http://www.clobeca.com/webdesignblog/wp-content/uploads/2009/07/SaveForWeb.jpg" alt="Save For Web (Photoshop)" width="288" height="363" /><p class="wp-caption-text">Save For Web (Photoshop)</p></div>
<p>Here is a detail of the Save For Web dialog box. You can either use the pulldown on the left to select quality (Maximum-Low), or fine-tune it by selecting the Quality pulldown on the right.</p>
<div id="attachment_111" class="wp-caption alignnone" style="width: 376px"><img class="size-full wp-image-111" title="ACDSee" src="http://www.clobeca.com/webdesignblog/wp-content/uploads/2009/07/ACDSee.jpg" alt="ACDSee JPEG Options dialog" width="366" height="433" /><p class="wp-caption-text">ACDSee JPEG Options dialog</p></div>
<p>Here is the equivalent function, as seen in the image organizer program ACDSee Pro from ACD Systems. Just move the slider control between Best compression and Best quality.</p>
<p>Look at the images below. They are from the same original file, all processed by Photoshop Save For Web, at different quality levels. The first image has been saved at the highest setting of 100. The file size is 135 kilobytes. The second image has been saved at 60 quality and has a file size of 40 kB. Still pretty good image quality with no blatant JPEG artifacts. The third image is at 30 quality, file size 19 kB and is starting to show some degradation. By the time we get to the fourth image, 10 quality and file size 12 kB, we see some very obvious JPEG artifacts all around. As a practical matter, I&#8217;ve saved more than two-thirds of the file size going from 100 to 60, with no appreciable loss of quality, but only another one-sixth of the file size going to 30, with a big drop in quality. As a professional photographer advertising my work, I might be inclined to go with one of the first two, but I would not use either of the last two images. The thing to remember is that the degree of compression as well as the perceived loss of quality is highly dependent on the image content, so your mileage may vary. The point is to experiment and see what you get.</p>
<div id="attachment_110" class="wp-caption alignnone" style="width: 410px"><img class="size-full wp-image-110" title="DSC_4325_100" src="http://www.clobeca.com/webdesignblog/wp-content/uploads/2009/07/DSC_4325_100.jpg" alt="Maximum quality (100), 135 kB" width="400" height="500" /><p class="wp-caption-text">Maximum quality (100), 135 kB</p></div>
<div id="attachment_108" class="wp-caption alignnone" style="width: 410px"><img class="size-full wp-image-108" title="DSC_4325_060" src="http://www.clobeca.com/webdesignblog/wp-content/uploads/2009/07/DSC_4325_060.jpg" alt="High quality, 40 kB" width="400" height="500" /><p class="wp-caption-text">High quality, (60), 40 kB</p></div>
<div id="attachment_107" class="wp-caption alignnone" style="width: 410px"><img class="size-full wp-image-107" title="DSC_4325_030" src="http://www.clobeca.com/webdesignblog/wp-content/uploads/2009/07/DSC_4325_030.jpg" alt="Medium quality (30), 19 kB" width="400" height="500" /><p class="wp-caption-text">Medium quality (30), 19 kB</p></div>
<div id="attachment_106" class="wp-caption alignnone" style="width: 410px"><img class="size-full wp-image-106" title="DSC_4325_010" src="http://www.clobeca.com/webdesignblog/wp-content/uploads/2009/07/DSC_4325_010.jpg" alt="Low quality (10), 12 kB" width="400" height="500" /><p class="wp-caption-text">Low quality (10), 12 kB</p></div>
<h2>What did we learn today?</h2>
<p>I hope that this article has helped you gain an understanding of the basics of image optimization for the web, particularly the tradeoffs involved. For image compression, there&#8217;s no right answer that fits all applications. I&#8217;ve shown you how you can reduce the size and therefore bandwidth requirements of your image files while still displaying a high quality image. If you expect your website to receive a huge amount of of traffic, then it behooves you to squeeze every bit of performance out of those pages, and image optimization plays a major part of that, in addition to good web design practices overall. You may want to err more towards the high compression end of the scale and sacrifice a small amount of quality. If, on the other hand, you are in the visual arts field or otherwise need to display the sharpest, highest quality image possible, then you need to bite the bullet and scale your compression more towards the higher quality end. Regardless of where you are on the compression scale, there is no excuse whatsoever for displaying distorted, &#8220;funhouse&#8221; images. That can be handled by appropriately cropping the picture.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.clobeca.com/webdesignblog/2009/07/image-optimization-for-the-web/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Career Day at SHS in May 2009</title>
		<link>http://www.clobeca.com/webdesignblog/2009/06/career-day-at-somersworthhighschool-in-may2009/</link>
		<comments>http://www.clobeca.com/webdesignblog/2009/06/career-day-at-somersworthhighschool-in-may2009/#comments</comments>
		<pubDate>Mon, 29 Jun 2009 00:11:56 +0000</pubDate>
		<dc:creator>Catherine Alcivar</dc:creator>
				<category><![CDATA[Website Design Blog]]></category>
		<category><![CDATA[What's New At Clobeca Web Design]]></category>

		<guid isPermaLink="false">http://www.clobeca.com/webdesignblog/?p=1</guid>
		<description><![CDATA[Last May I was one of the speakers at Somersworth High School’s Career Day in New Hampshire.  Representing Clobeca Web Design I was very honored to accept the school&#8217;s invitation to speak about careers in Computer Graphics, specifically, relating to Website Design. There was a good turn out of students attending my presentation.  Students seemed [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-medium wp-image-26" title="careersinwebdesign" src="http://www.clobeca.com/webdesignblog/wp-content/uploads/2009/06/careersinwebdesign1-200x300.jpg" alt="careersinwebdesign" width="200" height="300" />Last May I was one of the speakers at Somersworth High School’s Career Day in New Hampshire.  Representing Clobeca Web Design I was very honored to accept the school&#8217;s invitation to speak about careers in Computer Graphics, specifically, relating to Website Design.</p>
<p>There was a good turn out of students attending my presentation.  Students seemed to be paying attention.  I was amazed.   I brought some books relating to web design and programming.  My focus was to talk about what it would be like to be in this industry.  What it would take to get there.  I showed them our web design and web development portfolio.  Besides showing examples of our work, I discussed about what involves in producing a web site or web application product using a flowchart.  I explained each area such as gathering information from the customer, project management, the design production, the programming process, etc.  I also touched on web marketing.  I also stressed on education.  I talked about how to obtain the skills in computer graphics such as going to a technical school, getting an associates degree, bachelor’s degree, and master’s degree at a college or university.  I provided statistical information on the different pay scales based on the years of experience, specialty (web designer versus software programmer), and location such as in a city or state.  I wanted to give them some idea about how much a web designer or web development makes in this economy based on the different factors. I talked about the challenges of owning a business, being a freelancer versus being a full time employee.  I, especially, stressed the importance on networking even starting when they are in high school as well as how important it is to keep good friendships, to get a good working relationship with your co-workers, customers, supervisors, and so on and so forth.  I wanted them to realize that networking and keeping long-term relationships play a big role in reaching your goals in the future.  Sometimes friends in high school could be a great help later on when you are looking for a job.  Maybe their friends have contacts to people who might be in their type of industry.</p>
<p>What an opportunity it was for me to share with the students my knowledge about web design.  I did talk to them about my personal experiences being in this career field in computer graphics such as how to deal with situations relating to customers, meeting deadlines, and the challenges in meeting project goals.   I provided them with some realistic scenarios and examples of things that they might deal with in this type of work.</p>
<p>At the end of each session, (there were three of them total, which took place the whole morning) I did have a few students asking me questions, gave me some good feedback, and thanked me for my presentation.  They said I presented some really good useful information.</p>
<p>The computer department’s teacher –in-charged was quite helpful in providing me with the necessary tools I needed to make my presentation run smoothly.</p>
<p>I would definitely do this presentation again if the school would invite me the next time they have a career day.</p>
<p><em>By<a title="Catherine Alcivar, Web Designer" href="http://www.clobeca.com/aboutus/webgraphicdesigner.html" target="_self"> Catherine Alcivar</a></em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.clobeca.com/webdesignblog/2009/06/career-day-at-somersworthhighschool-in-may2009/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
