<?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>Perry Internet Consulting LLC &#187; Website Design</title>
	<atom:link href="http://blog.perryweb.com/category/website-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.perryweb.com</link>
	<description>Website Design, Website Development and WordPress Coaching</description>
	<lastBuildDate>Tue, 07 Feb 2012 17:36:46 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>An Oldie, but a Goodie &#8211; Why does my website look different on different computers?</title>
		<link>http://blog.perryweb.com/2009/03/an-oldie-but-a-goodie-why-does-my-website-look-different-on-different-computers/</link>
		<comments>http://blog.perryweb.com/2009/03/an-oldie-but-a-goodie-why-does-my-website-look-different-on-different-computers/#comments</comments>
		<pubDate>Fri, 13 Mar 2009 19:33:12 +0000</pubDate>
		<dc:creator>Marsha Perry</dc:creator>
				<category><![CDATA[Website Design]]></category>
		<category><![CDATA[Websites 101]]></category>

		<guid isPermaLink="false">http://blog.perryweb.com/?p=476</guid>
		<description><![CDATA[I first posted this article two years ago.  I&#8217;ve received emails about it as recently as last week.  It&#8217;s an issue that I still deal with every, single day as a website developer.  Websites look different in different conditions.  And here&#8217;s why . . . ***************** Have you ever noticed that your website looks different [...]]]></description>
			<content:encoded><![CDATA[<p>I first posted this article two years ago.  I&#8217;ve received emails about it as recently as last week.  It&#8217;s an issue that I still deal with every, single day as a website developer.  Websites look different in different conditions.  And here&#8217;s why . . .</p>
<p style="text-align: center;">*****************</p>
<p>Have you ever noticed that your website looks different on someone else’s computer?  It’s not wildly different but it’s just not the same.  The colors might be darker or lighter.  Maybe you can’t see as much of the home page without scrolling down.  The font might even look like it’s a slightly different size.</p>
<p>These differences are normal and can be caused by a number of different factors:</p>
<ul>
<li><strong>Browsers</strong> – The most popular web browser is Internet Explorer (IE) but there are a number of others.  Also each browser has different versions.   Websites can look different on different browsers or even on different versions of the same browser.</li>
<li><strong>Screen Size</strong> – Different screen sizes can cause your website to be displayed differently.  The same goes for different screen resolution settings on the same size browser.</li>
<li><strong>Computer Types</strong> – The most popular computer operating systems come from Microsoft.  However Apple has a large and devoted following.  Websites can look very different when viewed on computers with different operating systems.  In my experience this causes the largest differences in website presentation.</li>
<li><strong>Color, Brightness and Contrast Settings</strong> &#8211; These settings vary from computer to computer and just like all the other factors in this article can cause websites to look different.</li>
</ul>
<p>So what’s a person to do?  Part of my job is to keep all of these factors in mind.  I look at your website in different browsers and in different screen resolutions.  So while your website may look slightly different on different computers – it will look good on 99% of them.</p>

<div class="jwsharethis">
<p>Share this: 
<br />
<a href="mailto:?subject=An%20Oldie%2C%20but%20a%20Goodie%20%26%238211%3B%20Why%20does%20my%20website%20look%20different%20on%20different%20computers%3F&amp;body=http%3A%2F%2Fblog.perryweb.com%2F2009%2F03%2Fan-oldie-but-a-goodie-why-does-my-website-look-different-on-different-computers%2F">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/email.png" alt="Share this page via Email" /></a> 
<a target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fblog.perryweb.com%2F2009%2F03%2Fan-oldie-but-a-goodie-why-does-my-website-look-different-on-different-computers%2F&amp;title=An+Oldie%2C+but+a+Goodie+%26%238211%3B+Why+does+my+website+look+different+on+different+computers%3F">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/su.png" alt="Share this page via Stumble Upon" /></a> 
<a target="_blank" href="http://digg.com/submit?url=http%3A%2F%2Fblog.perryweb.com%2F2009%2F03%2Fan-oldie-but-a-goodie-why-does-my-website-look-different-on-different-computers%2F&amp;title=An+Oldie%2C+but+a+Goodie+%26%238211%3B+Why+does+my+website+look+different+on+different+computers%3F">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/digg.png" alt="Share this page via Digg this" /></a> 
<a target="_blank" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fblog.perryweb.com%2F2009%2F03%2Fan-oldie-but-a-goodie-why-does-my-website-look-different-on-different-computers%2F&amp;t=An+Oldie%2C+but+a+Goodie+%26%238211%3B+Why+does+my+website+look+different+on+different+computers%3F">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/fb.png" alt="Share this page via Facebook" /></a> 
<a target="_blank" href="http://twitter.com/intent/tweet?text=I+like+http%3A%2F%2Fblog.perryweb.com%2F2009%2F03%2Fan-oldie-but-a-goodie-why-does-my-website-look-different-on-different-computers%2F&amp;title=An+Oldie%2C+but+a+Goodie+%26%238211%3B+Why+does+my+website+look+different+on+different+computers%3F">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/twitter.png" alt="Share this page via Twitter" />
</a></p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.perryweb.com/2009/03/an-oldie-but-a-goodie-why-does-my-website-look-different-on-different-computers/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Flash in a Nutshell</title>
		<link>http://blog.perryweb.com/2008/12/flash-in-a-nutshell/</link>
		<comments>http://blog.perryweb.com/2008/12/flash-in-a-nutshell/#comments</comments>
		<pubDate>Mon, 08 Dec 2008 09:17:34 +0000</pubDate>
		<dc:creator>Marsha Perry</dc:creator>
				<category><![CDATA[Techno Terms]]></category>
		<category><![CDATA[Website Design]]></category>
		<category><![CDATA[Websites 101]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://blog.perryweb.com/?p=265</guid>
		<description><![CDATA[Do you ever hear people talking about Flash on the web and wonder what the heck it is?  Wonder no more.  Flash is a sort of animated image.  In the olden days of the web it was used just to make moving pictures.  Now it&#8217;s also used for things like contact forms and in menu [...]]]></description>
			<content:encoded><![CDATA[<p>Do you ever hear people talking about Flash on the web and wonder what the heck it is?  Wonder no more.  Flash is a sort of animated image.  In the olden days of the web it was used just to make moving pictures.  Now it&#8217;s also used for things like contact forms and in menu systems.</p>
<p>Here are some examples of Flash used in websites:</p>
<ul>
<li><a title="Meadows RV Park" href="http://www.meadowsrv.com/" target="_blank">Meadows RV Park</a> &#8211; Do you see the rotating image at the top of the page?  That&#8217;s Flash.  What about the silhouette of the bucking horse?  That&#8217;s an animated gif.  As with many things in website design, there&#8217;s more than one way to accomplish a goal.  Animated gifs are better for small images like the bucking horse.</li>
<li><a href="http://www.followyourheartfinejewelry.com/index.php" target="_blank">Follow Your Heart Fine Jewelry</a> &#8211; The image slide show on this page is done with Flash.  It&#8217;s also the technology behind the cool magnifying glass functionality on <a href="http://www.followyourheartfinejewelry.com/jewelry.php" target="_blank">this page</a>.</li>
<li>I&#8217;m a huge fan of the <a href="http://www.jacquielawson.com/" target="_blank">Jacquie Lawson</a> animated eGreetings.  The cards are powered by . . . you guessed it!  Flash.</li>
</ul>
<p>If you&#8217;re not seeing any of these Flash items it would be a good bet that you don&#8217;t have a Flash player installed on your computer.  Adobe, the same company that brings you PDFs, owns the software that makes and plays Flash.  The player is free and can be downloaded from the <a href="http://get.adobe.com/flashplayer/" target="_blank">Adobe website</a>.</p>
<p>Have you ever been at a website and it says that you don&#8217;t have the most current version of Flash?  I don&#8217;t know about you, but that makes me wonder what version of Flash I do have.  You can find out what version of Flash is installed on your computer by going to <a href="http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15507" target="_blank">Flash Version Test page</a> on the Adobe website.</p>
<p>For now I&#8217;m using version 9 and I think I&#8217;ll stay there for awhile.  WordPress is reporting that there&#8217;s an incompatibility between the &#8220;add media&#8221; functions of WordPress and Flash 10.  (See item three on <a href="http://wordpress.org/support/topic/164999" target="_blank">this page</a>.)</p>
<p>That&#8217;s Flash in a nutshell.</p>
<ul></ul>

<div class="jwsharethis">
<p>Share this: 
<br />
<a href="mailto:?subject=Flash%20in%20a%20Nutshell&amp;body=http%3A%2F%2Fblog.perryweb.com%2F2008%2F12%2Fflash-in-a-nutshell%2F">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/email.png" alt="Share this page via Email" /></a> 
<a target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fblog.perryweb.com%2F2008%2F12%2Fflash-in-a-nutshell%2F&amp;title=Flash+in+a+Nutshell">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/su.png" alt="Share this page via Stumble Upon" /></a> 
<a target="_blank" href="http://digg.com/submit?url=http%3A%2F%2Fblog.perryweb.com%2F2008%2F12%2Fflash-in-a-nutshell%2F&amp;title=Flash+in+a+Nutshell">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/digg.png" alt="Share this page via Digg this" /></a> 
<a target="_blank" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fblog.perryweb.com%2F2008%2F12%2Fflash-in-a-nutshell%2F&amp;t=Flash+in+a+Nutshell">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/fb.png" alt="Share this page via Facebook" /></a> 
<a target="_blank" href="http://twitter.com/intent/tweet?text=I+like+http%3A%2F%2Fblog.perryweb.com%2F2008%2F12%2Fflash-in-a-nutshell%2F&amp;title=Flash+in+a+Nutshell">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/twitter.png" alt="Share this page via Twitter" />
</a></p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.perryweb.com/2008/12/flash-in-a-nutshell/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Petrified</title>
		<link>http://blog.perryweb.com/2008/09/petrified/</link>
		<comments>http://blog.perryweb.com/2008/09/petrified/#comments</comments>
		<pubDate>Sat, 13 Sep 2008 01:37:55 +0000</pubDate>
		<dc:creator>Marsha Perry</dc:creator>
				<category><![CDATA[Website Design]]></category>
		<category><![CDATA[Websites 101]]></category>

		<guid isPermaLink="false">http://blog.perryweb.com/?p=208</guid>
		<description><![CDATA[Petrified.  That&#8217;s how some people feel when they think about their new website.  Even thinking about revamping an existing site can be overwhelming.  What if I do the wrong thing?  There are so many choices how do I know what to do?  Where do I start? Here are some guiding principles that will help start [...]]]></description>
			<content:encoded><![CDATA[<p>Petrified.  That&#8217;s how some people feel when they think about their new website.  Even thinking about revamping an existing site can be overwhelming.  <em>What if I do the wrong thing?  There are so many choices how do I know what to do?  Where do I start?</em></p>
<p>Here are some guiding principles that will help start your project moving forward.</p>
<ul>
<li style="margin-bottom: 10px;"><strong>Websites are a work in progress. </strong> Websites are designed to be easy to change.  You can change colors, photos, text and website hosts.  You can add newsletters, shopping carts and photo sideshows.  Sites grow and change as your goals change.  Understanding this concept will help you realize that it&#8217;s OK to try something out and change it later if it doesn&#8217;t work.  You don&#8217;t have to worry that you&#8217;re missing something.  If you think of a feature that you&#8217;d like to add later, you can have it added later.
</li>
<li style="margin-bottom: 10px;"><strong>Focus on your goals.</strong> A website should support you in meeting your business and personal goals.  When you&#8217;re contemplating adding features to your website ask yourself how those features will help you meet your goals.  If it doesn&#8217;t help you achieve your goals then you don&#8217;t really need it.
<p>Are you concerned that you&#8217;re not familiar enough with website development to know what features to ask for?  Then just tell your website developer your business goals.  Ask your developer how they can help you.</p>
</li>
<li style="margin-bottom: 10px;"><strong>Think in phases.</strong> If you have a large wish list of changes for your website try to break them down into groups or phases.  You don&#8217;t need to do everything at once.  One of my customers needed their website totally revamped.  One year we updated the website design.  The next year we updated the website software.  The customer was able to make progress at a pace and annual budget that worked for them.
</li>
<li style="margin-bottom: 10px;"><strong>Trust Yourself. </strong>I&#8217;m sure you have favorite websites.  You like some features and not others.  You like some layouts and not others.  Since your website will be a reflection of you all of these preferences are important information.  They give you a place to start.
</li>
</ul>
<p>You can do this.  You really can.  Just take it one step at a time and your website will start to come together.</p>

<div class="jwsharethis">
<p>Share this: 
<br />
<a href="mailto:?subject=Petrified&amp;body=http%3A%2F%2Fblog.perryweb.com%2F2008%2F09%2Fpetrified%2F">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/email.png" alt="Share this page via Email" /></a> 
<a target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fblog.perryweb.com%2F2008%2F09%2Fpetrified%2F&amp;title=Petrified">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/su.png" alt="Share this page via Stumble Upon" /></a> 
<a target="_blank" href="http://digg.com/submit?url=http%3A%2F%2Fblog.perryweb.com%2F2008%2F09%2Fpetrified%2F&amp;title=Petrified">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/digg.png" alt="Share this page via Digg this" /></a> 
<a target="_blank" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fblog.perryweb.com%2F2008%2F09%2Fpetrified%2F&amp;t=Petrified">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/fb.png" alt="Share this page via Facebook" /></a> 
<a target="_blank" href="http://twitter.com/intent/tweet?text=I+like+http%3A%2F%2Fblog.perryweb.com%2F2008%2F09%2Fpetrified%2F&amp;title=Petrified">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/twitter.png" alt="Share this page via Twitter" />
</a></p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.perryweb.com/2008/09/petrified/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Do Not Try This at Home &#8211; Part One</title>
		<link>http://blog.perryweb.com/2008/08/do-not-try-this-at-home-part-one/</link>
		<comments>http://blog.perryweb.com/2008/08/do-not-try-this-at-home-part-one/#comments</comments>
		<pubDate>Tue, 19 Aug 2008 03:27:59 +0000</pubDate>
		<dc:creator>Marsha Perry</dc:creator>
				<category><![CDATA[Recommended Products/Companies]]></category>
		<category><![CDATA[Techno Terms]]></category>
		<category><![CDATA[Website Design]]></category>
		<category><![CDATA[Websites 101]]></category>

		<guid isPermaLink="false">http://blog.perryweb.com/?p=196</guid>
		<description><![CDATA[A week ago The Wall Street Journal posted an article that bothers me a great deal. The title of the article is How to Create a Successful Web Site For Nothing (or Almost Nothing). The article starts out: Have you got eight hours and $10? Then you can build a Web site for your business. [...]]]></description>
			<content:encoded><![CDATA[<p>A week ago The Wall Street Journal posted an article that bothers me a great deal.  The title of the article is <a href="http://www.wsj.com/article/SB121803326363016929.html?mod=psp_editors_picks" target="_blank">How to Create a Successful Web Site For Nothing (or Almost Nothing)</a>. The article starts out:</p>
<blockquote><p>Have you got eight hours and $10? Then you can build a Web site for your  business.</p></blockquote>
<p>Right.</p>
<p>Let&#8217;s start out by talking about the white elephant in the room.  I&#8217;m a website developer and I earn my living by helping people with their websites.  If everyone could make their own website with so little time and effort then I&#8217;d be out of a job.   That&#8217;s true.  It&#8217;s also true that I&#8217;m not in this for the money.  If I was I&#8217;d still be working for a corporation and earning about three times as much as I am now.  I like getting paid, but the main reason I&#8217;ve chosen this profession is that it allows me to help people.  I &#8220;get&#8221; this whole website thing.  I get a kick out of giving people a hand with websites.</p>
<p>And the fact is that as a professional website developer I&#8217;m in a good position to judge the veracity of the above claim.  Can you make a website with just $10 and eight hours?  Yes.  Can you make a <strong>good</strong> website for $10 and eight hours?  Probably not.</p>
<p>Let&#8217;s look at the first three points in the article.</p>
<p><strong>STEP ONE:  Get a Website Address</strong></p>
<p>This is where the $10 comes in.  This is also the only point in the article that I think is correct.  <a href="http://blog.perryweb.com/?p=12">As I&#8217;ve said before</a> GoDaddy is a fine place to register your domain name and the cost right now is about $10.</p>
<p><strong>STEP TWO &#8211; Find a Home</strong></p>
<p>In this step the article is talking about finding a website host. It advocates using a free service for this.</p>
<blockquote><p>They often make money by charging for premium services or running ads on your  Web pages.</p></blockquote>
<p>Do you really want ads for another company running on your business website?  In this situation you&#8217;ll often have no control of the ads featured on your site.</p>
<p>You&#8217;ll also have to configure the settings at your domain name registrar to point to your website host.  Chances are that I lost about 80% of you with that sentence.  Let&#8217;s hear the same thing from the article:</p>
<blockquote><p>Visit your domain-name registrar and tweak your settings so that your Web  address points to the service you&#8217;ve chosen. The hosting service will give you  instructions on how to do this.</p></blockquote>
<p>Still clear as mud?  Think of it like this, you&#8217;ve got your domain name from GoDaddy or another company right?  OK, so now you have to tell GoDaddy where your website &#8220;lives&#8221;.  You have to give it the address (called a DNS server) of your website host.  Is it rocket science.  Nope.  Does this sound technical, intimidating and scary to most people?  Yes.  Most people I know would rather wait 3 hours in line at the DMV rather than attempt switching their DNS.</p>
<p>The article makes no mention of a website host&#8217;s most important qualification &#8211; their up time.  As I&#8217;ve mentioned in a <a href="http://blog.perryweb.com/?p=6">previous post on hosting</a>, if a website host has a server go down then your website goes down too.  Some website hosts have a very nonchalant attitude about up time.  &#8220;Your website is down?  OK, well we should have that fixed in the next 48 hours or so.&#8221;  If a host does that there is nothing you can do.  Nothing.  You can&#8217;t sue them.  You can&#8217;t make them go faster.  Sometimes you can&#8217;t even get updates.  All you can do is wait and wish your website were hosted somewhere else.</p>
<p>Never select a website host based only on price.</p>
<p><strong>STEP THREE:  Build Your Site</strong></p>
<blockquote><p>Once you&#8217;ve got a host, you&#8217;ll want to design your site. The good news: Most of  the free hosting services provide tools that let you build a site quickly,  without lots of technical know-how.</p></blockquote>
<p>The article is speaking of website templates.  A lot of website hosts, free or otherwise, provide website templates.  In the biz we call these &#8220;cookie cutter&#8221; websites.  If you use a template and aren&#8217;t able to change it your website won&#8217;t be unique.  Why is that important?  Isn&#8217;t your business unique?  Doesn&#8217;t it deserve a website that shows how special it (and you) are?  If you don&#8217;t think that&#8217;s important what sort of message are you sending to your customers?</p>
<p>What if you want to add a &#8220;share this page feature&#8221; or a photo slide show?  Here&#8217;s what the article says about that:</p>
<blockquote>
<p class="times">Most of these services don&#8217;t offer an easy, one-click way to  add flourishes such as shopping carts or more than two columns on a page; that,  too, takes some know-how. Mostly, you just arrange pictures, text and other  elements, and that&#8217;s it. And, sometimes, even doing that can be tricky for  nontechies.</p>
</blockquote>
<p class="times">In other words, you get what you pay for.  In this case it&#8217;s a simple site that looks like other websites.</p>
<p class="times">The article does point out that there are some free services that allow you to copy and paste HTML into your site do do some more advanced functions.  What&#8217;s HTML you ask?  Again, in my experience working with real business people in the real world, about 50% of people freak out at the sight of HTML.  If you&#8217;re feeling brave you can view HTML and <a href="http://blog.perryweb.com/?p=112">see what things look like in my world</a>.  Again, this is too much for about half of my customers.  Most of my customers that can do it don&#8217;t want to do it.  It makes them nervous.  It makes them anxious.  It takes them too much time.</p>
<p class="times">Visit this site again on Friday as we analyze <a href="http://blog.perryweb.com/?p=197">the last four points of the article</a>.</p>
<p class="times">I&#8217;ll also tell you about one of my customers who was bound and determined to do her website herself.  I&#8217;ll tell you about her experiences before we started working together and what her life is like now that I&#8217;m her website developer.</p>

<div class="jwsharethis">
<p>Share this: 
<br />
<a href="mailto:?subject=Do%20Not%20Try%20This%20at%20Home%20%26%238211%3B%20Part%20One&amp;body=http%3A%2F%2Fblog.perryweb.com%2F2008%2F08%2Fdo-not-try-this-at-home-part-one%2F">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/email.png" alt="Share this page via Email" /></a> 
<a target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fblog.perryweb.com%2F2008%2F08%2Fdo-not-try-this-at-home-part-one%2F&amp;title=Do+Not+Try+This+at+Home+%26%238211%3B+Part+One">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/su.png" alt="Share this page via Stumble Upon" /></a> 
<a target="_blank" href="http://digg.com/submit?url=http%3A%2F%2Fblog.perryweb.com%2F2008%2F08%2Fdo-not-try-this-at-home-part-one%2F&amp;title=Do+Not+Try+This+at+Home+%26%238211%3B+Part+One">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/digg.png" alt="Share this page via Digg this" /></a> 
<a target="_blank" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fblog.perryweb.com%2F2008%2F08%2Fdo-not-try-this-at-home-part-one%2F&amp;t=Do+Not+Try+This+at+Home+%26%238211%3B+Part+One">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/fb.png" alt="Share this page via Facebook" /></a> 
<a target="_blank" href="http://twitter.com/intent/tweet?text=I+like+http%3A%2F%2Fblog.perryweb.com%2F2008%2F08%2Fdo-not-try-this-at-home-part-one%2F&amp;title=Do+Not+Try+This+at+Home+%26%238211%3B+Part+One">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/twitter.png" alt="Share this page via Twitter" />
</a></p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.perryweb.com/2008/08/do-not-try-this-at-home-part-one/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Fixed Width vs. Flexible Width &#8211; Part Two</title>
		<link>http://blog.perryweb.com/2008/03/fixed-width-vs-flexible-width-part-two/</link>
		<comments>http://blog.perryweb.com/2008/03/fixed-width-vs-flexible-width-part-two/#comments</comments>
		<pubDate>Fri, 14 Mar 2008 10:48:00 +0000</pubDate>
		<dc:creator>Marsha Perry</dc:creator>
				<category><![CDATA[Website Design]]></category>
		<category><![CDATA[Website Planning]]></category>

		<guid isPermaLink="false">http://blog.perryweb.com/?p=138</guid>
		<description><![CDATA[On an earlier post I explained the difference between flexible and fixed width website designs. &#8220;But how do you switch between the two?&#8221; was a question one reader asked. The differences between the two styles are huge. In order to make the change you need a new website design. The Problem &#8211; Appearance The two [...]]]></description>
			<content:encoded><![CDATA[<p>On an earlier post I explained <a href="http://blog.perryweb.com/?p=133">the difference between flexible and fixed width website designs</a>.   &#8220;But how do you switch between the two?&#8221; was a question one reader asked.   The differences between the two styles are huge.    In order to make the change you need a new website design.</p>
<p><strong>The Problem &#8211; Appearance<br />
</strong></p>
<p>The two issues to consider here are the design&#8217;s appearance  and the underlying code. We&#8217;ll deal with the website appearance first.   Let&#8217;s take a look at the <a href="http://www.perryweb.com/Dickens/" target="_blank">Charles Dickens</a> website again.  Here it is as it normally looks on my monitor:</p>
<p><img src="http://www.perryweb.com/blog/wp-content/uploads/2008/03/031008_cd_reg.gif" alt="Charles Dickens" /><br clear="all" /></p>
<p>And here&#8217;s how it would appear on a larger screen.</p>
<p><img src="http://www.perryweb.com/blog/wp-content/uploads/2008/03/031008_cd_sm.gif" alt="Charles Dickens" /><br clear="all" /></p>
<p>Do you see how the website is designed to flex in the middle section?  The website title is centered while the areas on either side expand.  The main section of the body expands also while the sidebars stay the same size.  A lot of planning went into how this website would look no matter what the screen size.</p>
<p>Here&#8217;s one of my favorite examples of a flexible design.   My company helped <a href="http://www.schrenzel.com/" target="_blank">STS Recruiting</a> with a new website design.   Here&#8217;s how the site looks on my monitor:</p>
<p><img src="http://www.perryweb.com/blog/wp-content/uploads/2008/03/sts1.jpg" alt="STS Recruiting" /><br clear="all" /></p>
<p>And here&#8217;s the &#8220;flexed&#8221; view:</p>
<p><img src="http://www.perryweb.com/blog/wp-content/uploads/2008/03/sts2.jpg" alt="STS Recruiting" /><br clear="all" /></p>
<p>The background in the top right area repeats.  No matter what the screen size it looks fine because of the nature of the design.  Below the header area (that&#8217;s a website term for the top area of the website) the left-hand column stays the same width while the rest of the site expands.</p>
<p>Let&#8217;s take another look at the fixed width website, <a href="http://www.washingtonwinemaker.com/blog/" target="_blank">Washington Winemaker</a>:</p>
<p><img src="http://www.perryweb.com/blog/wp-content/uploads/2008/03/031008_ww_reg.jpg" alt="Washington Winemaker" /></p>
<p>It&#8217;s a beautiful website.  But there&#8217;s really no way to &#8220;flex&#8221; the design.  The photo is a fixed size and it would lose its impact if there were more white space on either side.   This design isn&#8217;t built to expand.</p>
<p><strong>The Problem &#8211; Code </strong></p>
<p>Now let&#8217;s  consider the HTML code that is the basis for all websites.  I try not to write a lot about HTML as that can freak people out.  <a href="http://blog.perryweb.com/?p=112">If you&#8217;d like to see HTML click here</a>.   If you&#8217;d rather pass on that just think of HTML as something like computer code.  That code has to be written differently for the different types of designs.  I could tell you more but your eyes would start to glaze over and you&#8217;d require emergency coffee.  It&#8217;s boring and it&#8217;s technical and just trust me on this one &#8211; <strong>the code for these two types of designs is a lot different</strong>.</p>
<p>What this means is that you&#8217;ve got to build either type of site from the ground up.</p>
<p><strong>Making the Switch </strong></p>
<p>What if you still want to make the switch?  That&#8217;s no problem but it does mean that you&#8217;ll need a new website design.</p>
<p>If you have a blog then you pick a new template that has a flexible design.  If you have a standard website or a custom blog template then you have your website developer (that would be me) develop a new design.</p>
<p>And all of that is OK.  It&#8217;s not unusual for websites to get a new design every year or so.   This website is on it&#8217;s fourth design.  (And I&#8217;m planning the fifth version now.)  Things change.  Businesses grow.   Websites need a new design every few years.  It&#8217;s a normal cycle.</p>

<div class="jwsharethis">
<p>Share this: 
<br />
<a href="mailto:?subject=Fixed%20Width%20vs.%20Flexible%20Width%20%26%238211%3B%20Part%20Two&amp;body=http%3A%2F%2Fblog.perryweb.com%2F2008%2F03%2Ffixed-width-vs-flexible-width-part-two%2F">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/email.png" alt="Share this page via Email" /></a> 
<a target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fblog.perryweb.com%2F2008%2F03%2Ffixed-width-vs-flexible-width-part-two%2F&amp;title=Fixed+Width+vs.+Flexible+Width+%26%238211%3B+Part+Two">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/su.png" alt="Share this page via Stumble Upon" /></a> 
<a target="_blank" href="http://digg.com/submit?url=http%3A%2F%2Fblog.perryweb.com%2F2008%2F03%2Ffixed-width-vs-flexible-width-part-two%2F&amp;title=Fixed+Width+vs.+Flexible+Width+%26%238211%3B+Part+Two">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/digg.png" alt="Share this page via Digg this" /></a> 
<a target="_blank" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fblog.perryweb.com%2F2008%2F03%2Ffixed-width-vs-flexible-width-part-two%2F&amp;t=Fixed+Width+vs.+Flexible+Width+%26%238211%3B+Part+Two">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/fb.png" alt="Share this page via Facebook" /></a> 
<a target="_blank" href="http://twitter.com/intent/tweet?text=I+like+http%3A%2F%2Fblog.perryweb.com%2F2008%2F03%2Ffixed-width-vs-flexible-width-part-two%2F&amp;title=Fixed+Width+vs.+Flexible+Width+%26%238211%3B+Part+Two">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/twitter.png" alt="Share this page via Twitter" />
</a></p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.perryweb.com/2008/03/fixed-width-vs-flexible-width-part-two/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Fixed Width vs. Flexible Width</title>
		<link>http://blog.perryweb.com/2008/03/fixed-width-vs-flexible-width/</link>
		<comments>http://blog.perryweb.com/2008/03/fixed-width-vs-flexible-width/#comments</comments>
		<pubDate>Tue, 11 Mar 2008 04:46:28 +0000</pubDate>
		<dc:creator>Marsha Perry</dc:creator>
				<category><![CDATA[Website Design]]></category>

		<guid isPermaLink="false">http://blog.perryweb.com/?p=133</guid>
		<description><![CDATA[Website designs are either fixed width or flexible width. (Other terms for flexible width designs are relative, elastic or liquid designs.) We&#8217;ll talk about which design style is better later. For right now let&#8217;s take a look at each style. Fixed Width Designs Fixed width website designs have a constant width. No matter what size [...]]]></description>
			<content:encoded><![CDATA[<p>Website designs are either fixed width or flexible width.  (Other terms for flexible width designs are relative, elastic or liquid designs.)   We&#8217;ll talk about which design style is better later.  For right now let&#8217;s take a look at each style.</p>
<p><strong>Fixed Width Designs</strong></p>
<p>Fixed width website designs have a constant width.  No matter what size screen you have the website will always be the same width.  <a href="http://www.washingtonwinemaker.com/blog/" target="_blank">Washington Winemaker</a> is an example of a fixed width design.</p>
<p>This is how it looks on my screen with my usual settings.</p>
<p><img src="http://www.perryweb.com/blog/wp-content/uploads/2008/03/031008_ww_reg.jpg" alt="Washington Winemaker" /><br clear="all" /></p>
<p>Here&#8217;s how it would look on a larger screen or with different settings.  Note the gray area on each side of the site.  See how it&#8217;s increased?</p>
<p><img src="http://www.perryweb.com/blog/wp-content/uploads/2008/03/031008_ww_sm.jpg" alt="Washington Winemaker" /><br clear="all" /></p>
<p>No matter how large your screen the website will always be the same width.  The gray area will get larger but not the website design.</p>
<p><strong>Flexible Width Designs</strong></p>
<p>Flexible width designs expand with the screen size.   The design of this <a href="http://www.perryweb.com/Dickens/" target="_blank">Charles Dickens</a> site will expand to fill the screen.  Here&#8217;s how it looks on my screen.</p>
<p><img src="http://www.perryweb.com/blog/wp-content/uploads/2008/03/031008_cd_reg.gif" alt="Charles Dickens" /><br clear="all" /></p>
<p>And here&#8217;s how the same website would look on a larger screen.</p>
<p><img src="http://www.perryweb.com/blog/wp-content/uploads/2008/03/031008_cd_sm.gif" alt="Charles Dickens" /><br clear="all" /></p>
<p>The middle section of this website expands to fill the larger area.   It&#8217;s flexible, liquid and elastic.  It will keep going no matter how large the screen.</p>
<p><strong>Which is better?</strong></p>
<p>To be honest each style has its advantages.</p>
<p>Fixed width designs give you more control.  In the world of website design, <a href="http://blog.perryweb.com/?p=14">where your website will look different on different computers</a>, that&#8217;s no small thing.  It gives the designer better layout control and it gives the owner more confidence on the look and feel of the site.</p>
<p>Flexible width designs make the best use of available space.  It&#8217;s important to show get as much of the website <a href="http://blog.perryweb.com/?p=11">above the fold</a>  (visible without scrolling down) as possible.  Flexible designs do that.</p>
<p>So the answer is that&#8217;s there&#8217;s no right answer.  Think about what you want your website to do, think about the design and make the choice that&#8217;s right for you.</p>

<div class="jwsharethis">
<p>Share this: 
<br />
<a href="mailto:?subject=Fixed%20Width%20vs.%20Flexible%20Width&amp;body=http%3A%2F%2Fblog.perryweb.com%2F2008%2F03%2Ffixed-width-vs-flexible-width%2F">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/email.png" alt="Share this page via Email" /></a> 
<a target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fblog.perryweb.com%2F2008%2F03%2Ffixed-width-vs-flexible-width%2F&amp;title=Fixed+Width+vs.+Flexible+Width">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/su.png" alt="Share this page via Stumble Upon" /></a> 
<a target="_blank" href="http://digg.com/submit?url=http%3A%2F%2Fblog.perryweb.com%2F2008%2F03%2Ffixed-width-vs-flexible-width%2F&amp;title=Fixed+Width+vs.+Flexible+Width">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/digg.png" alt="Share this page via Digg this" /></a> 
<a target="_blank" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fblog.perryweb.com%2F2008%2F03%2Ffixed-width-vs-flexible-width%2F&amp;t=Fixed+Width+vs.+Flexible+Width">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/fb.png" alt="Share this page via Facebook" /></a> 
<a target="_blank" href="http://twitter.com/intent/tweet?text=I+like+http%3A%2F%2Fblog.perryweb.com%2F2008%2F03%2Ffixed-width-vs-flexible-width%2F&amp;title=Fixed+Width+vs.+Flexible+Width">
<img border="0" src="http://blog.perryweb.com/wp-content/plugins/jw-share-this/twitter.png" alt="Share this page via Twitter" />
</a></p>
</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.perryweb.com/2008/03/fixed-width-vs-flexible-width/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

