<?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>Wrayco Design &#187; Blog</title>
	<atom:link href="http://www.wraycodesign.com/archives/category/blog/feed" rel="self" type="application/rss+xml" />
	<link>http://www.wraycodesign.com</link>
	<description>Graphic Design &#38; Web Design</description>
	<lastBuildDate>Sat, 07 Aug 2010 19:17:26 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=abc</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>S3, how do I love thee&#8230;</title>
		<link>http://www.wraycodesign.com/archives/935</link>
		<comments>http://www.wraycodesign.com/archives/935#comments</comments>
		<pubDate>Sat, 07 Aug 2010 04:21:09 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[backups]]></category>
		<category><![CDATA[cloud]]></category>
		<category><![CDATA[storage]]></category>

		<guid isPermaLink="false">http://www.wraycodesign.com/?p=935</guid>
		<description><![CDATA[Ahh, new love, you remember what it felt like, don't you? I do, because I'm in love again, or at least I think I am. It's so new and fresh ...]]></description>
			<content:encoded><![CDATA[<p>Ahh, new love, you remember what it felt like, don&#8217;t you? I do, because I&#8217;m in love again, or at least I think I am. It&#8217;s so new and fresh and it&#8217;s making me happy and it&#8217;s called &#8220;S3.&#8221;</p>
<p>I know, sounds like the name for a spy or a prisoner. S3 is new in town, people have started whispering, and many have outright declared their intentions. Luckily, there is room for all of us, because the amount of space is massive.</p>
<p>Just look up. There you  have it. Sky and clouds. What is this &#8220;cloud&#8221; thing that people are taking about? I&#8217;m not really sure myself, but I do know that it seems rather limitless and it&#8217;s very inexpensive. Feels kind of like infinity, or staring out in space. What&#8217;s on the other side? I don&#8217;t pretend to know, but then, again, I&#8217;m in lurv.</p>
<p><img class="alignright size-medium wp-image-949" title="Screen shot 2010-08-06 at 9.31.40 PM" src="http://www.wraycodesign.com/wp-content/uploads/2010/08/Screen-shot-2010-08-06-at-9.31.40-PM-300x254.jpg" alt="" width="300" height="254" />It&#8217;s like I&#8217;ve had everyone&#8217;s extra luggage stuffed in my bedroom (having to keep a close eye on it) and now S3 is going to take care of it all for me. It will be safe, secure, and untouchable, and in a place so massive no one will be able to find it but me. I can get at it whenever I want to. My house can burn down and it will still be there, floating above me, out there somewhere, protected and content.</p>
<p>It&#8217;s another word for freedom, cause people, I&#8217;ve been hanging on to your luggage for years, and I want my own space back! Everytime I get a new client, I&#8217;m responsible for not only their files, but their usernames and passwords, and backups of backups. Sometimes they disappear for years only to show up on my porch and ask me if their favorite pair of purple socks is still in that duffel bag they gave me for safekeeping.</p>
<p>Heck, I&#8217;m a designer, not the keymaster, but there it is. You can&#8217;t very well get rid of that stuff in case someone comes back and needs it desperately. I can write in any contract that I&#8217;m not responsible for keeping stuff more than 2 years after a project is completed, but I keep it anyway, or try to.</p>
<p>Sometimes my extra hard drives will just give out one day, with hardly any notice, leaving me scrambling to move the data over before the last whizzy gasp and dimming of the light. Sometimes I don&#8217;t make it in time, and have to take the boxy cadaver to the specialist, who will do his best to retrive the lost items. But they are never the same, nor am I.</p>
<p>I&#8217;m sick with worry for hours. Will I get back the results of late night creative burst I haven&#8217;t yet had a chance to use? Will all my college coursework be lost in the burned out wires, never to be retrieved? But do I really want to? Doesn&#8217;t matter. I still gnash my teeth about it.</p>
<p>So back to S3, who rides up on his white horse. He hands me a rose, proposes, and I accept. I&#8217;m going to back up my website data to <a href="https://s3.amazonaws.com/" target="_blank">Amazon&#8217;s S3</a> storage service, and it&#8217;s going to happen automatically with the help of his new friend, <a href="http://pluginbuddy.com/purchase/backupbuddy/" target="_blank">Backup Buddy</a>. The operant word here is <em>automatically</em>.</p>
<p>Backup Buddy will do scheduled backups and automatically upload them to your S3 account, so I don&#8217;t have to. My shoulder muscles are relaxing just thinking about it. I have yet to get all my sites up and running with S3 and Backup Buddy, but I&#8217;m on my way.</p>
<p>This will make upgrading Wordpress that much less of a hassle. Yes, when you are in the admin window and see the upgrade announcement, it&#8217;s tempting just to press the button without backing up first and without turning off your plugins, but to avoid the white screen of death, it must be done in this order.</p>
<p>Now, at least, I&#8217;m one step closer to automatic nirvana.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/935/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>You want to edit your website?</title>
		<link>http://www.wraycodesign.com/archives/915</link>
		<comments>http://www.wraycodesign.com/archives/915#comments</comments>
		<pubDate>Sat, 07 Aug 2010 01:02:32 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[cms]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://www.wraycodesign.com/?p=915</guid>
		<description><![CDATA[When I first started out creating websites in the mid-90s, few people really thought they needed one, let alone needed to edit one. ...]]></description>
			<content:encoded><![CDATA[<p>When I first started out creating websites in the mid-90s, few people really thought they needed one, let alone needed to edit one. Times have changed.</p>
<p>These days nearly everybody wants, and even expects, to be able to make their own edits. I&#8217;m in full agreement. You shouldn&#8217;t have to call a web designer just to correct a typo in on your &#8220;about&#8221; page or anywhere else. That is why I have embraced the &#8220;content management system,&#8221; or CMS, as they are most often called.</p>
<p>In the past people who wanted to edit their own sites would have to have something custom programmed, or purchase software like Adobe&#8217;s Contribute to enable them to access their pages. Seems like now, every other month, I hear about a new CMS, or a a hosted CMS service, that gives people more options and flexility than ever when it comes to maintaining their website.</p>
<p><img class="alignleft size-full wp-image-923" title="hats-drawn" src="http://www.wraycodesign.com/wp-content/uploads/2010/08/hats-drawn.jpg" alt="" width="376" height="372" />To be a &#8220;web designer&#8221; you need to wear several different hats, some of which don&#8217;t fit very well, and there is nary a party hat amongst &#8216;em. Yes, I do the graphic design of a page, but I&#8217;m also called upon to help clients figure out what they need to put on their pages, write content, edit photos, build the design in HTML/CSS, set up a content management system, make sure everything works together, and test out the system on a variety of operating systems and browsers.</p>
<p>Following site launch, there is a period of training clients on how to use their CMS, so they can make small changes to the site themselves. Some clients find the process intimidating, while others find it intoxicating, and end up getting drunk on the power it offers them over the appearance of the site.</p>
<p>Despite controls that will prevent clients from getting in over their heads, inevitably they will run up against something they want to do but can&#8217;t and I will have to give them more access. Flash forward to 3 months later and visiting the site can sometimes yield some unpleasant surprises.</p>
<p>A carefully crafted color palette may end up marred by a client wanting to creating some really eye catching headline for their text, and they somehow managed to make it bright blue on an otherwise neutral color palette. &#8220;Bigger&#8221; and &#8220;more colorful&#8221; are the two requests clients can get caught up with.</p>
<p>It can be a slippery slope, as one of my favorite YouTube videos, &#8220;<a href="http://www.youtube.com/watch?v=qgcX0y1Nzhs">Make My Logo Bigger Cream</a>,&#8221; points out. When a client becomes particularly adamant, I ask them, &#8220;If you make everything super colorful and huge, then what is going to stand out?&#8221;</p>
<p>This usually gives them pause, and they generally back-off a little bit. But I digress. I was talking about content management systems, right? Yes, which is about giving clients control, because ultimately they are the ones who care the most about their own content. They are paying the closest attention to detail (one hopes).</p>
<p>I really like to give clients control of their own content, despite the risks of things breaking or looking funny sometimes. After all, I&#8217;m in the business of designing, rather than tinkering. I really don&#8217;t want to get paid to fix your typo. If I happen to be on your site and find it, yes, of course I will fix it.</p>
<p>For me the growth and popularity of content management systems is a godsend, and I&#8217;ve just found a service called <a href="http://www.page.ly" target="_blank">Page.ly </a> that will also maintain nightly backups of your site and keep the software updated, if you are on Wordpress. I will likely recommend it to some of my clients that would be suited to it.</p>
<p>So this brings up the next point, which CMS do I choose? Well, that depends. Do a quick Google search, and you will come up with maybe 10 that are popular, and more than a hundred all told. I have touted Wordpress on my own site and use it myself, but it&#8217;s not the only one out there, nor is it appropriate for everyone. For a small business, it can be very easy to learn and have lots of flexibility for those on small budgets.</p>
<p>It can be a pain in the ass to keep Wordpress sites and their respective plugins updated all the time. So when you multiply one site with, say 10 plugins, by 30 sites, and Wordpress gives you an update every few weeks, that&#8217;s a lot of updating. And, if you are someone like me, you&#8217;d rather be designing.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/915/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Understanding Image Formats</title>
		<link>http://www.wraycodesign.com/archives/783</link>
		<comments>http://www.wraycodesign.com/archives/783#comments</comments>
		<pubDate>Sun, 07 Mar 2010 01:19:29 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[editing]]></category>
		<category><![CDATA[formats]]></category>
		<category><![CDATA[images]]></category>
		<category><![CDATA[photography]]></category>
		<category><![CDATA[tools]]></category>

		<guid isPermaLink="false">http://www.wraycodesign.com/?p=783</guid>
		<description><![CDATA[One of  jobs of being a designer is helping clients understand the mysteries of file formats. Anyone who has spent any time around a …]]></description>
			<content:encoded><![CDATA[<p><strong>One of  jobs of being a designer is helping clients understand the mysteries of file formats.</strong> Anyone who has spent any time around a digital camera probably has heard the term &#8220;jpeg&#8221; (pronounced jay-peg) and some have also mastered the ability to email said jpeg to someone else. Beyond this, for many, the understanding gets a bit murky.</p>
<p>Take this daisy, for example. It&#8217;s a nice crisp image with clearly defined detail and bright, saturated color. Nothing much to complain about.</p>
<p><a href="http://www.wraycodesign.com/wp-content/uploads/2010/03/daisy1.jpg"><img class="size-full wp-image-785 alignleft" title="daisy1" src="http://www.wraycodesign.com/wp-content/uploads/2010/03/daisy1.jpg" alt="sharp focused image of a daisy flower" width="248" height="288" /></a>If, however, you decided you wanted to enlarge the image of the daisy to 3 or 4 times its size, you would be dismayed to see that it looks somewhat like the next picture of the daisy. It&#8217;s what those used to working with images called &#8220;pixelated&#8221; or having &#8220;jaggy&#8221; edges. Not good.</p>
<p><strong>On many occasions I have had frustrated phone calls from clients demanding to know why this happens, thinking I will be able to tell them which key to press on their keyboard to make it look pretty again.</strong></p>
<p>Alas, it&#8217;s not so simple, and the answer can end up getting very long-winded and eyes glaze over if I sneak the explanation upon someone without warning. The quickest answer is: You cannot enlarge photographic, or &#8220;raster&#8221; images without losing resolution. It&#8217;s a one-way street. You can only reduce them. But people don&#8217;t often like to hear the word &#8220;cannot&#8221; because they are sure there is a way around if they look hard enough.</p>
<p><a href="http://www.wraycodesign.com/wp-content/uploads/2010/03/Daisy2.jpg"><img class="size-full wp-image-786 alignright" title="Daisy2" src="http://www.wraycodesign.com/wp-content/uploads/2010/03/Daisy2.jpg" alt="" width="250" height="290" /></a>Yes, Photoshop does have sharpening tools, but these are really meant for situations where the image is barely out of focus. <strong>One of my clients called me in desperation recently wondering why the images she took off the web didn&#8217;t look good when printed out poster size.</strong> I launched into my explanation and could feel her eyes glazing over.</p>
<p>&#8220;But there must be a way to do it,&#8221; she pleaded. &#8220;There isn&#8217;t, unfortunately,&#8221; I replied. &#8220;Unless you can get a hold of the original images at a high resolution.&#8221; She was in a time crunch and seemed to have promised one of her higher-ups that she would deliver nice crisp images on a poster. Alas all she had was low resolution files. What to do?</p>
<p>I ended up helping her get the poster done by using the images at a smaller size and making them part of a larger design on the poster. She was relieved. There is nothing like a hands-on project to get the point across.</p>
<h2>Image Resolution</h2>
<p>Okay, now for some numbers. I hate memorizing numbers or facts, but in this case it must be done, and the numbers never change. The laws are immutable on this one. I guarantee these will be the only numbers you will have to remember. Commit them to memory.</p>
<p>When it comes to photographic or &#8220;raster&#8221; images, you are dealing in &#8220;pixels&#8221; (what you see on your monitor screen), or &#8220;dots&#8221; if you come from the printing world. First know that<strong> &#8220;resolution&#8221; is explained by how many pixels that can fit into one square inch</strong>. When it comes to contemporary monitors, that number is 72. No matter which monitor you are using the number is always 72.</p>
<p><a href="http://www.wraycodesign.com/wp-content/uploads/2010/03/Picture-25.jpg"><img class="alignright size-full wp-image-814" title="Picture 25" src="http://www.wraycodesign.com/wp-content/uploads/2010/03/Picture-25.jpg" alt="" width="260" height="240" /></a>If you were to print this image, which looks great on the monitor (72 pixels per inch), it will look like puke, pucky, shiat, whatever term you like&#8230;when printed out. <strong>That is because the printer speaks in &#8220;dots&#8221; now, and these dots look nice and crisp when you have 300 or more per inch.</strong> If you only have 72 dots per inch, the image won&#8217;t be tight and crisp. Might be acceptable in certain situations just to see what is on the page, but not for anything important.</p>
<p>If you really want to impress your friends, you will create your printed piece with images that are saved at 650 dpi (dots per inch), which is closer to museum quality. The conundrum comes in when you try to do a lot of fancy stuff in Photoshop with a large image saved at 650 dpi. You need quite a bit of RAM to be able to crank that out in any reasonable amount of time.</p>
<p>All right, now repeat after me: <strong>images for the web are 72 dpi, and images for print are at least 300 dpi.</strong> That&#8217;s it. Two numbers. Web, 72. Print, 300. Got it?</p>
<h2>File Formats</h2>
<p>We&#8217;ve already talked about jpeg images. What about the others? <strong>For the most part, jpegs will suffice in a myriad of situations.</strong> There are, however, times when someone may give you a different format.</p>
<p>Some of the more common file formats are .gif, .jpg, .png, .eps, ai, .pdf, .tif</p>
<p>Why do you need to know this? Well, let&#8217;s say you need an image for a project due at the end of the day. Your contact emails you the image, and you don&#8217;t get to it until 4 p.m., and then realize that the file won&#8217;t open in your image editing software because it&#8217;s the wrong kind of file. You call your contact back and he or she has already left for the day!</p>
<p>Here&#8217;s a quick rundown of the formats and what they are used for:</p>
<ul>
<li><strong>GIF</strong> (Graphic Interchange Format): can be a static or animated image, used on the web for basic graphic images when really small image sizes are needed. It doesn&#8217;t render gradients or photographic images well.</li>
<li><strong>JPG/JPEG </strong>(Joint Photography Experts Group): most commonly used photographic/raster image format used on the web and in low-end digital photography.</li>
<li><strong>PNG</strong> (Portable Network Graphics): newer image format that allows for transparency in an image on the web.</li>
<li><strong>EPS</strong> (Encapsulated Post Script): image format that contains information useful to printers when outputting high-end graphics.</li>
<li><strong>AI</strong> (Adobe Illustrator): A proprietary document format for vector illustrations and graphics.</li>
<li><strong>PDF</strong> (Portable Document Format): that enables viewing of multi-page documents on a variety of platforms.</li>
<li><strong>TIF/TIFF</strong> (Tagged Image File Format): High-end photographic image format that contains more information for fine-grained editing and printing.</li>
</ul>
<p>If you are dealing with <strong>image files for a logo</strong>, you will want to get it in an .eps or .ai or .pdf format, which will enable it to be scaled up or down easily without affecting resolution. If you are having it professionally printed, the printer will want your logo in one of these formats.</p>
<p>For situations where you need a <strong>high-resolution photographic image for print</strong> or editing, you should ask for a .tiff file. If you are working with smaller size images for the web, a .jpeg will do just fine.</p>
<p>If you need to <strong>email a multipage document </strong>or series of images, converting it to a PDF file will make it easy to email and also for people to view it. They will not need any particular software to view your content, except for the free Acrobat Reader, which most people have already. More and more printers like to receive materials in PDF format as well.</p>
<p>Unless you are a web designer or developer, you will likely not find yourself dealing much with creating .png files, but if you ever download or print out images from the web you may come across this format. It is used when transparency is needed, but if you print it out on its own you will likely get a plain white background.</p>
<h2>Vector Images</h2>
<p><a href="http://www.wraycodesign.com/wp-content/uploads/2010/03/vector.jpg"><img class="alignleft size-medium wp-image-811" title="vector" src="http://www.wraycodesign.com/wp-content/uploads/2010/03/vector-202x300.jpg" alt="" width="202" height="300" /></a>You&#8217;re heard the term &#8220;vector&#8221; but aren&#8217;t really sure what it means. The quick explanation is this: vector images differ from raster images in that you are not dealing with a field of pixels or dots, but a series of dots and lines. Think of farmland viewed from above. <strong>The field of sunflowers is like a raster image, and the fence surrounding them is like a vector image.</strong> The posts are the points and the metal wires in between are the lines connecting them and forming the image.</p>
<p>The advantage of vector images over raster images is that file sizes are much smaller, and you can scale them up or down at will without losing any crispness or detail in the image<strong>. This is because what happens between the dots and lines is defined by the distance between them, and the angle of the &#8220;handles&#8221; that you can angle or lengthen or shorten to set curves.</strong> When you are enlarging a raster image, for example, the computer has to &#8220;guess&#8221; how to fill in the pixels based on the colors already existing in in the image, and as of this writing, no one has yet figured out a way to take the guess work out of this process.</p>
<p>The disadvantage of vector images is that photographs are by nature raster images, and to achieve the look of a photograph in a vector format requires many hours of expert work to achieve and lots of practice and patience. If you want to see examples of this, do an online search for &#8220;gradient mesh&#8221;, which is the tool in Adobe Illustrator that can be used to achieve this effect.</p>
<p>Don&#8217;t worry if all this isn&#8217;t entirely clear. My goal is to give you a basic idea of what the various image formats do. Next, let&#8217;s look at a few image editors.</p>
<h2>Image Editors</h2>
<p>Okay, so now you know a little about what do to with your images, but what is the best way to edit them? In the not to distant past I might have given you a list of desktop image editing software, but there are now quite a few free of low cost image editors available online these days, so I&#8217;ll limit my list to those.</p>
<p>Most of them will require you to register if you want to save or store your images, but several allow you to demo their product anonymously to see which one you feel comfortable with. There are more than what I&#8217;ve listed here, but these seem to be the most prominent on the scene right now.</p>
<ul>
<li><a href="https://www.photoshop.com/express/landing.html">Adobe Photoshop Express</a> This editing system seems pretty responsive, and the tools are organized into basic categories with more available when you choose what you&#8217;d like to do, whether it&#8217;s just cropping and resizing, or decorating or emailing.</li>
<li><a href="http://www.picnik.com/">Picnik</a> Picnik has a very simple set of tools, but it&#8217;s clear and easy to navigate. It even has an &#8220;auto-fix&#8221; feature for those who don&#8217;t want to bother with doing their own fixes. It has basic resizing, rotation, cropping, exposure control, red-eye reduction and sharpening tools. No registration required to use.</li>
<li><a href="http://www.pixlr.com/">Pixlr</a> A more advanced editor that lets you upload images from your desktop or the web. It also let&#8217;s you create an image from scratch with paintbrush, pencil, paintbucket and type tools. Pixlr also has a Firefox plugin and a very basic &#8220;Express&#8221; version of their editor for those who want fewer options to choose from. I also found it to be very responsive with little wait time for image processing.</li>
<li><a href="http://www.drpic.com/">DrPic.com</a> Probably the simplest editor of the group. The page opens up to the editor and give you the option to load a picture and choose the format you want to save it in. Editing tools include resize, crop, rotate, contrast, autofix, text, blur, sharpen, frame, Polaroid, oilpaint and grayscale.</li>
<li><a href="http://www.sumopaint.com/web/">Sumo Paint</a> This is more of a tool for creating an illustration from scratch, but you can still use it with any type of existing image. It has many more &#8220;painting&#8221; features than the other editors, and quite a few effects to choose from, including 3D, reflection and lighting filters.</li>
<li><a href="http://aviary.com/tools/phoenix">Aviary Phoenix</a> Very popular editor with live previewing and layers. Could be intimidating for the novice user, but more advanced users will appreciate the thought put into this image editor. Aviary Phoenix is part of a large set of online tools made by Aviary, including a color editor, audio editor, effects editor and a vector editor.</li>
<li><a href="http://webresizer.com/">WebResizer.com</a> If all you want to do is resize an image, this tool is for you. Gives you a side by side comparison when looking to make your web images as lightweight as possible. Also allows for sharpening, rotating, exposure, contrast and saturation.</li>
</ul>
<p>My advice is to visit them all and see which one seems to be the easiest for you to work with. Have fun and don&#8217;t forget to bookmark the one you like best.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/783/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Web Security</title>
		<link>http://www.wraycodesign.com/archives/690</link>
		<comments>http://www.wraycodesign.com/archives/690#comments</comments>
		<pubDate>Thu, 10 Dec 2009 04:13:52 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[security]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://www.wraycodesign.com/?p=690</guid>
		<description><![CDATA[Web security is akin to visiting the dentist. It&#8217;s one of those necessities that you can&#8217;t ignore forever or you will end up with …]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.wraycodesign.com/wp-content/uploads/2009/12/Picture-20.jpg"><img class="alignleft size-full wp-image-799" title="Picture 20" src="http://www.wraycodesign.com/wp-content/uploads/2009/12/Picture-20.jpg" alt="" width="282" height="283" /></a>Web security is akin to visiting the dentist. It&#8217;s one of those necessities that you can&#8217;t ignore forever or you will end up with a lot of decay and cavities, and one day your formerly pretty webpage will get hacked and you will end up with a gap-toothed smile. Not a pretty picture.</p>
<p>You can protect yourself to a certain extent with regular backups of your site; but wouldn&#8217;t it be better not to let the bad guys have their way at all? Once your site has malware installed on it, any visitors to your site with PCs will likely get infected, and then Google will slap a big ugly graphic on your site&#8217;s homepage.</p>
<p>Anyone searching for you will read a warning message in the search results. Even worse, you infect hundreds of visitors before Google has a chance to notice.</p>
<p>Even if you get your site back up and running in short order, there is still the matter of clearing yourself with Google, which can take up to 2 weeks. At this point, I&#8217;d like to remind you of the old adage, &#8220;an ounce of prevention is worth a pound of cure.&#8221;</p>
<p>I have been a big fan of content management systems, especially Wordpress, but their biggest strength—the modularity of Php—is also their biggest vulnerability. In other words, this moduularity is kind of like having a number of armored plates rather than one large sheet of metal protecting you: in between the plates you can still get stabbed—if your attacker knows where to press his blade.</p>
<p>Everyone who uses Wordpress gets the same set of &#8220;plates&#8221;, and so this makes the attacker&#8217;s job that much easier. He knows where the vulnerabilities are. Larger companies with big budgets likely have devoted some time and money towards web security, and have likely plugged up their holes, or moved their plates around to keep potential attackers guessing. Small to mid-sized companies, however, are more liable to fly by the seat of their pants and hope for the best.</p>
<p>This is what web hackers are counting on, and as a result the largest growing segment of sites getting attacked is in small to mid-sized business websites. This is not good news, but fortunately there are some simple steps you can take to protect yourself. I will list some of the more common measures, but by no means is this a comprehensive list.</p>
<ol>
<li>Use strong passwords.</li>
<li>If you are logging into your site from a PC, do regular scans to make sure your machine is clean. If you get keystroke logging software on your system it doesn&#8217;t matter how many times you change your password because someone else can see everything you are doing. If possible, limit other online activities that could compromise the computer you use to access your website or web hosting.</li>
<li>For wordpress sites, research and utilize the more popular and well-reviewed security plugins.</li>
<li>Periodically search the web (or create a Google Alert on this topic) for current threats to content management systems.</li>
<li>Hire a programmer to &#8220;harden&#8221; your Wordpress installation. In other words, to make it hard enough to break in that the attacker will look for an easier target.</li>
</ol>
<p>It&#8217;s just like if you leave your house with doors and windows unlocked: it doesn&#8217;t mean that you will get robbed, but if someone with thieving intent happens by, you don&#8217;t want to inadvertently roll out the red carpet. So do the right thing and visit the dentist once in awhile and install some security measures. You won&#8217;t be sorry.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/690/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>What does Google want?</title>
		<link>http://www.wraycodesign.com/archives/346</link>
		<comments>http://www.wraycodesign.com/archives/346#comments</comments>
		<pubDate>Mon, 27 Jul 2009 21:19:14 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[guidelines]]></category>
		<category><![CDATA[search engines]]></category>
		<category><![CDATA[SEO]]></category>

		<guid isPermaLink="false">http://wraycodesign.com/blog/?p=346</guid>
		<description><![CDATA[&#8220;How do I end up No. 1 in Google?&#8221; clients ask me time after time. I smile, reminded of myself as a teenager, remembering …]]></description>
			<content:encoded><![CDATA[<p><strong>&#8220;How do I end up No. 1 in Google?&#8221; clients ask me time after time. </strong>I smile, reminded of myself as a teenager, remembering how much I wanted to know what the secret was to being &#8220;popular&#8221; in high school. In the days before blogging became commonplace, and Google was just getting rolling, people didn&#8217;t always expect to come up in the first page of search engine listings, unless you were typing in their company name directly. But then again, there weren&#8217;t as many people on the web as their are now. But it&#8217;s a relative statement, isn&#8217;t it? Hundreds of millions of webpages later, the ranks keep swelling.</p>
<p>My simple answer to this question is &#8220;Build a great website with relevant and fresh content.&#8221; <strong>Most people don&#8217;t know what a &#8220;great website&#8221; means beyond what they consider great looking and functional—a good start—but that is why they are asking me. </strong>The next thing I tell someone with a smallish company is that I recommend setting up their website on the most popular blogging and content management system, Wordpress. &#8220;But I&#8217;m not sure I want a blog,&#8221; they tell me, slightly panicked at the thought of more demands on their time. &#8220;Not necessary,&#8221; I reply. &#8220;But it will be built in and ready in case you change your mind.&#8221;</p>
<p>Why Wordpress? Why not? <strong>Search engines love it, it gives people control over their own content via an easy-to-learn interface, and it&#8217;s evolving quickly, with people worldwide developing extra features for it, all for free.</strong> Wordpress is one of many similar platforms, and there are others that are a bit more sophisticated (with a steeper learning curve), but for many of the types of sites I do, Wordpress works beautifully.</p>
<p>I used to create static websites, and really had to adhere as much as possible to certain guidelines to make my websites search-engine friendly. Now, with the advent of blogging and sites integrated on blogging platforms, it&#8217;s gotten easier to make my websites search engine friendly. <strong>Here is a basic list of Google&#8217;s guidelines of what they like to see in a website</strong> (yes, you can get banned from Google if they catch you trying to circumvent their guidelines to get a higher rank):</p>
<blockquote>
<ul>
<li>Make a site with a <strong>clear hierarchy</strong> and text links. Every page should be reachable from at least one static text link.</li>
<li>Offer a site map to your users with links that point to the important parts of your site. If the site map is larger than 100 or so links, you may want to break the site map into separate pages.</li>
<li>Create a <strong>useful, information-rich site</strong>, and write pages that clearly and accurately describe your content.</li>
<li>Think about the words users would type to find your pages, and make sure that your site actually includes those words within it.</li>
<li>Try to <strong>use text instead of images to display important names</strong>, content, or links. The Google crawler doesn&#8217;t recognize text contained in images. If you must use images for textual content, consider using the &#8220;ALT&#8221; attribute to include a few words of descriptive text.</li>
<li>Make sure that your  elements and ALT attributes are descriptive and accurate.</li>
<li><strong>Check for broken links</strong> and correct HTML.</li>
<li>If you decide to use dynamic pages (i.e., the URL contains a &#8220;?&#8221; character), be aware that not every search engine spider crawls dynamic pages as well as static pages. It helps to keep the parameters short and the number of them few.</li>
<li>Keep the links on a given page to a reasonable number (fewer than 100).</li>
<li>Review our <a href="http://www.google.com/support/webmasters/bin/answer.py?answer=114016">image guidelines</a> for best practices on publishing images.</li>
</ul>
</blockquote>
<p>In my experience, sites I develop on the Wordpress platform show up in search engine rankings the first week after they are launched, without even being submitted to Google, even if all the guidelines aren&#8217;t met (for smaller sites I don&#8217;t always use sitemaps). An easy way to find out if your site is getting crawled (and to find out if anyone else is writing about you), is to create a <a href="http://www.google.com/alerts" target="_blank">Google Alert</a> for yourself, or search terms relevant to your site.</p>
<p>If only it had been that easy to be popular.<span class="end-pic"> </span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/346/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Webpage font choice</title>
		<link>http://www.wraycodesign.com/archives/340</link>
		<comments>http://www.wraycodesign.com/archives/340#comments</comments>
		<pubDate>Mon, 27 Jul 2009 18:16:43 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[choice]]></category>
		<category><![CDATA[fonts]]></category>
		<category><![CDATA[sIFR]]></category>
		<category><![CDATA[type]]></category>

		<guid isPermaLink="false">http://wraycodesign.com/blog/?p=340</guid>
		<description><![CDATA[One thing I was told in design school was that limitations and restrictions are just as critical to good design as creativity and freedom. …]]></description>
			<content:encoded><![CDATA[<p>One thing I was told in design school was that limitations and restrictions are just as critical to good design as creativity and freedom. The first step in the design process is to mold these restrictions into a framework that you will design within. <strong>One professor told me that the more stringent the boundary, the easier it would be to design. </strong>I may have wrinkled my nose at the time, but logic dictates this to be true.</p>
<p>If someone tells you that you can only use red, rectangular shapes in your design, you may not like it, but it eliminates a lot of decision-making and experimentation. And, it is because of this that <strong>many graphic designers don&#8217;t like to design for the web</strong>. There are too many boundaries that must be respected. I won&#8217;t get into anything technical with browsers and color today, but focus on typefaces. This is the limitation that I am least fond of, to put it mildly. Part of my design training was to learn about the history, use and potential of a large number of typefaces in use since the development of the printing press. We, as young designers, discovered a whole new world of typographic communication.</p>
<p>Some typefaces were designed to be easy to read, others to grab attention, and more to convey a certain emotion. I experimented and explored and discovered meaning in their use. Today, as a web designer, I am limited to fewer fonts than I have fingers on both hands. Why? Because <strong>behind every typeface is a real person behind it that labored long and hard to design it, and naturally they should be compensated for their work.</strong> When it comes time to design something new, part of this process involves finding just the right typeface, and purchasing it for use in my work. When my work is on the web, however, with millions of people viewing it (theoretically), the typeface I choose would have only been purchased once, by me. And so&#8230;.the only typefaces that are displayed, are the ones that you have installed on your own computer, and what I, as a designer, have to choose from is the fonts that come natively installed on Mac and PC.</p>
<p>In other words, people can only view type in a font that they already have the rights to use. Without starting a discussion as to the pros and cons of this situation, I&#8217;m going to accept it and move on to what is possible right now, while remaining hopeful for the future. As things stand as of this writing, the most reliable fonts I have to choose from when designing a website (in alphabetical order) are: <strong>Arial, Helvetica, Georgia, Lucida Grande (Mac Native), Lucida Sans Unicode (PC only) Times, Trebuchet MS and Verdana.</strong> (You can see them in order of appearance below.)</p>
<p style="text-align: center;"><img class="size-full wp-image-423 aligncenter" style="margin-bottom: 1px; margin-left: 1px;" title="font-font" src="http://www.madelikethis.com/wp-content/uploads/2009/08/font-font.gif" alt="font-font" width="589" height="110" /></p>
<p>This is not to say that people don&#8217;t have other fonts installed on their computers, it&#8217;s just that they won&#8217;t all have the same ones installed. Almost everyone has the above list installed. <strong>To see what these typefaces look like in depth, visit <a href="http://www.typechart.com" target="_blank">TypeChart</a>, a handy tool for web designers making these tough decisions! </strong>This doesn&#8217;t mean that as a designer I cannot specify another font in addition to these, hoping that someone might have it installed and that it will display instead of the more basic ones, but this is a big <em>maybe</em>, isn&#8217;t it? Each typeface will display a bit differently, and may affect how you will want to style it on the page. I have found that serif typefaces like Times will need to be about one-half to a full point size larger to have the same readability as a sans-serif font like Helvetica. This is just one example of many situations a designer will come across when trying to design a readable, pleasing page.</p>
<p>Nothing stays the same forever, however, and many intrepid programmer/designers are working behind-the-scenes to remedy this wretched situation. One of them is <a href="http://www.shauninman.com">Shaun Inman</a>, who conceived of <strong>a font replacement method called <a href="http://www.mikeindustries.com/blog/sifr/" target="_blank">sIFR</a> </strong>(scalable Inman Flash Replacement) that has been developed (and is continuing to be developed further) by an dedicated group of people I&#8217;m very glad are devoted to this. This method does <strong>require Flash and javascript</strong> be installed and turned on to work, but causes no adverse affects to your page if your visitor does not have these technologies at hand. The sIFR method allows for text to be selectable (which search engines like) and stylable (which designers like), and <strong>degrades gracefully</strong> (you see a page normally if the sIFR text can&#8217;t display).</p>
<p>For clients that want sIFR text on their page, it costs a bit extra to implement, but the results can be that much more effective. And for those web designers craving one less restriction, it&#8217;s like a big blue sky after a day of rain.</p>
<p><br class="spacer_" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/340/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>8 tips for a pretty page</title>
		<link>http://www.wraycodesign.com/archives/335</link>
		<comments>http://www.wraycodesign.com/archives/335#comments</comments>
		<pubDate>Mon, 27 Jul 2009 18:00:00 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[hierarchy]]></category>
		<category><![CDATA[layout]]></category>
		<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://wraycodesign.com/blog/?p=335</guid>
		<description><![CDATA[The old adage, &#8220;Build it and they will come&#8221; is likely true for a reason, just like &#8220;Eighty percent of success is just showing …]]></description>
			<content:encoded><![CDATA[<p>The old adage, &#8220;Build it and they will come&#8221; is likely true for a reason, just like &#8220;Eighty percent of success is just showing up&#8221; can be, but when it comes to websites, neither of these holds true. In the early days of the internet, this may have been the case, but no longer. Millions of webpages exist now, so the real challenge is to make your site both a useful and an enjoyable experience. Here are several tips for achieving this goal:</p>
<ol>
<li><strong><span>Use high-quality images</span></strong>. Studies have shown the people like to look at good quality photographs or illustrations on a page. Unless your design sensibility is based on a &#8220;low rez&#8221; aesthetic, you are better off using the sharpest clearest image you can take, hire or purchase—and, the bigger the better. Just think HDTV. People love those 50&#8243; HD televisions, and people love IMAX. <strong>But, you <em>are</em> dealing with variable screen sizes, so you must compromise and think about who your viewers might be. </strong>Will they be looking at your site on an iPhone or a netbook? If so, you might want to rethink this strategy. If they will likely be using a larger screen, you will still need to consider download time, so you will need to become familiar with image optimization techniques.</li>
<li><strong><span>Generous <em>White Space</em></span></strong>. One of the simplest things you can do on a website to make it more pleasing to the eye is to make sure your boxes have a generous amount of white space around the text blocks. This makes it easier for the eye to rest on a particular image or passage. The opposite of this scenario is when you see type running almost to the edge of its containers. <strong>This makes the whole page look &#8220;gray&#8221; and the eye has no place to rest. </strong>When I see pages like this I automatically know the creator has had no design training. As you can see from the example below, with such tight margins and no hierarchy, the eye has no place to land and so just gives up.<img class="aligncenter size-full wp-image-442" style="margin-top:10px;" title="no-white-space" src="http://www.madelikethis.com/wp-content/uploads/2009/08/no-white-space.gif" alt="no-white-space" width="580" height="313" /></li>
<li><strong><span>Typography</span></strong>.What is the point of paying attention to typography? The same principle applies here, too. Your goal is to make the content as easily digestible as possible. This can be achieved with type. If you have two words together—for example, READ THIS—you may decide to make one of them bold to create interest: <strong>READ</strong> THIS. Good typography helps <em>guide</em> the reader to the important places on your page, and makes the words and letters pleasing to the eye. Knowing the difference between a hyphen, an &#8220;en-dash&#8221; (width of an &#8220;n&#8221;) and an &#8220;em-dash&#8221; (width of an &#8220;m&#8221;) will help your type look correct. A brief explanation is that hyphens are used to hyphenate words, en-dashes are used when you are defining &#8220;from&#8221; something &#8220;to&#8221; something else, like 9 a.m.–5 p.m., and em-dashes are used to set off a phrase in a sentence (see READ THIS example above).<strong><em>Some other tips</em></strong>: always use curly quotes (rather than inch marks) for quoting, an ellipsis rather than 3 periods, and utilize capitalization and small caps for titling.</li>
<li><strong><span>Hierarchy</span></strong>. All the points I am making in this list are designed to help you create a hierarchy of information on your page. Think about it. Your reader has to start somewhere, and is relying on you to let them know what is most important to read first. Newspapers do this really well. The story that the editor feels is the most newsworthy will have the largest type size and be placed highest on the page. Whether you choose to read it is up to you, but it grabs your eye first. <strong>Where will your eye wander next?</strong> Likely to a large photographic image, or a bright color or the headline that is the next size down. Also, Western readers have been trained from a young age to read from left to right, and from top to bottom. Work with what the eye does naturally, and put items in the eye&#8217;s path that you want to receive attention.</li>
<li><strong><span>Pull Quotes and Blockquotes</span></strong>. Two under-utilized tools available to draw attention to a line or paragraph of text are <em>pull quotes</em> and <em>block quotes</em>. Pull quotes are frequently used by magazine layout designers as a way of grabbing the reader&#8217;s attention quickly, as they only have a few seconds before people may close the magazine. <strong>If you can find a juicy phrase in your content and set it off in a box at a much larger size the chances of your page getting read go way up.</strong> Blockquotes serve a similar purpose but are more often used when quoting content from another source. If you don&#8217;t ever quote from other sources, you might come up with another use for your blockquote designation, and style it for the purposes of creating a small sidebar or a long pull quote.</li>
<li><strong><span>Color</span></strong>. Color is an extremely powerful attention getter, and a page designer has to be careful not to go overboard. Certain colors, like bright red or green, are very effective in small doses, and off-putting if used over too broad an area. Think of it like house painting. What works in large areas on a house will likely do the same on a page. One of my own pet-peeves (but I&#8217;m sure there will be many people who disagree) is white text on a black page. <strong>There may be certain reasons why you would want to send a particular &#8220;rock-n-roll&#8221; message with this color scheme, but it is very difficult to read text like this, especially on a monitor.</strong> I find myself navigating away from all pages designed like this for this reason only. This does not mean that you cannot reverse type out on a dark background successfully. You just have to be careful about not using too much contrast. Both too much and too little contrast will make a page hard to read. Remember, the easier a page is to read, the more time people will spend reading, as long as you know how to craft a sentence.</li>
<li><strong><span>Writing</span></strong>. Writing is perhaps the most overlooked aspect of creating a compelling website. Once you&#8217;ve designed everything so it will make people really want to read your content, you had better have something to say. <strong>Because of the large amount of effort required in building a site, people often run out of steam when it comes to assembling content, and they end up with the dreaded and entirely lame<em> &#8220;this page is under construction&#8221;</em> phrase. </strong>Fer cryin&#8217; out loud, don&#8217;t let yourself do it. Don&#8217;t announce to the world you have a website, get people to come in and click on stuff and then present them with the &#8220;under construction&#8221; message. Doesn&#8217;t matter if you found a really cutesy blinking animation of a man with his trousers down, people aren&#8217;t going to like it any better, and likely they won&#8217;t be back.</li>
<li><strong><span>Motion</span></strong>. Motion is similar to color as far as powers of seduction are concerned. Just think about those annoying mortgage banner ads with bad animations of 3D people dancing and gyrating. We can&#8217;t help but look no matter how hard we try not to. And—advertisers wouldn&#8217;t use motion if it didn&#8217;t work. The good news is that both you and I know better, and would only use it for good. <strong>So get people&#8217;s attention with motion and give them information relevent to what they are seeking.</strong> The bad news is that as of this writing the iPhone still won&#8217;t allow Flash, and if you want to appeal to the mobile market, you might as well use still imagery. That said, however, there are still all the people visiting  your site from a computer, and they might find some animation appealing. Make sure that your site has the Flash degrade gracefully so that those that don&#8217;t have it are served up a nice static image instead. You may also want to utilize more subtle motion on your site, in the form of AJAX-powered sliding menus. If I&#8217;ve learned anything from working on the web, is that there is always more than one way to achieve your goal.<span class="end-pic"> </span></li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/335/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Playing the Internet &quot;Pipes&quot;</title>
		<link>http://www.wraycodesign.com/archives/118</link>
		<comments>http://www.wraycodesign.com/archives/118#comments</comments>
		<pubDate>Thu, 16 Jul 2009 09:16:36 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[internet]]></category>
		<category><![CDATA[pipes]]></category>
		<category><![CDATA[semantic]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[yahoo]]></category>

		<guid isPermaLink="false">http://wraycodesign.com/blog/?p=118</guid>
		<description><![CDATA[&#8220;It&#8217;s a series of tubes!&#8221; goes the now infamous saying of former internet regulator and U.S. Senator Ted Stevens when trying to come up …]]></description>
			<content:encoded><![CDATA[<p>&#8220;It&#8217;s a series of tubes!&#8221; goes the now infamous saying of former internet regulator and U.S. Senator Ted Stevens when trying to come up with an analogy a few years back. Like wildfire, his description was adopted worldwide in chatrooms, web forums, and comedy shows. And I quote:</p>
<blockquote><p><strong>“It&#8217;s a series of tubes.</strong> And if you don&#8217;t understand, those tubes can be filled and if they are filled, when you put your message in, it gets in line and it&#8217;s going to be delayed by anyone that puts into that tube enormous amounts of material, enormous amounts of material.”</p></blockquote>
<p>Now that he&#8217;s been thoroughly ridiculed for his lack of understanding of the subject, it might just be time to re-examine his description. He may not have been totally accurate for 3 years ago, but I think that his description is now coming of age—or is it just life imitating &#8220;art&#8221;?</p>
<p><strong>Yahoo has created something called &#8220;Pipes&#8221;, and it seems like it is just the beginning of what is being called next generation of the internet, &#8220;The Semantic Web.&#8221;</strong> I&#8217;ve worked as a web designer for several years, but I&#8217;m a newbie like everyone else when it comes to Yahoo Pipes.</p>
<p>The web started out being about hyperlinking information&#8230;kind of like one thread connecting to a single location, and another thread connecting to another (<em>Will I be ridiculed for this description?</em>), but the staggering amount of data that has made it&#8217;s way online in the last 20 years has set the stage for a new kind of web, one that makes sense of this massive amount of information. <strong>And the best part is you don&#8217;t have to do a heck of a lot of work to get the information you are seeking.</strong></p>
<p><img class="alignright size-full wp-image-265" title="MyPipe" src="http://www.madelikethis.com/wp-content/uploads/2009/07/MyPipe.jpg" alt="MyPipe" width="350" height="380" /><a href="http://pipes.yahoo.com" target="_blank">Yahoo Pipes</a> is an online application that lets anyone take their favorite data feeds, for example, apply some filters to it (allow red but don&#8217;t allow blue), and then get a list of what&#8217;s left, either in a browser or delivered as a feed. How marvelous! And that&#8217;s just the beginning.</p>
<p>I can&#8217;t claim to understand all that is possible with this, but I know that it&#8217;s going to blow my mind when I do. I&#8217;ve just created my first Pipe that acts as a job-feed, and I have to say my mind is still reeling. I feel as if I&#8217;m stepping into the future of the web and I love it.</p>
<p>They even have their own <a href="http://blog.pipes.yahoo.net/" target="_blank">blog</a>. Their video documentation leaves a bit to be desired, but it&#8217;s possible to find some people sharing their skills on YouTube.</p>
<p>It&#8217;s fun that they do it on graph paper, as if you were gonna sketch out plans for a house, but the best part is actually connecting the pipes. If you haven&#8217;t tried it, I won&#8217;t spoil it for you.<span class="end-pic"> </span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/118/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
