<?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>Mudbug Media &#187; Design</title>
	<atom:link href="http://mudbugmedia.com/blog/category/design/feed/" rel="self" type="application/rss+xml" />
	<link>http://mudbugmedia.com/blog</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Fri, 27 Jan 2012 20:02:18 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Why &lt;table&gt; Can Still Be Useful and When It Should Be Used</title>
		<link>http://mudbugmedia.com/blog/2011/09/29/why-table-can-still-be-useful-and-when-it-should-be-used/</link>
		<comments>http://mudbugmedia.com/blog/2011/09/29/why-table-can-still-be-useful-and-when-it-should-be-used/#comments</comments>
		<pubDate>Thu, 29 Sep 2011 19:57:42 +0000</pubDate>
		<dc:creator>Linda Phan</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[data presentation]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[html tables]]></category>
		<category><![CDATA[pseudo-selectors]]></category>
		<category><![CDATA[table layouts]]></category>
		<category><![CDATA[tables]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://mudbugmedia.com/blog/?p=3657</guid>
		<description><![CDATA[When left with the daunting task of designing and presenting large amounts of data for a webpage, I sometimes find myself returning to table-based markup for these reasons: Presenting Organization, especially for side by side comparisons (think of a spreadsheet) Quick and Easy to Read Data – Humans are always inclined to find balance and [...]]]></description>
			<content:encoded><![CDATA[<p>When left with the daunting task of designing and presenting <a title="See Example" href="http://www.w3schools.com/browsers/browsers_stats.asp" target="_blank"><strong>large amounts of data</strong></a> for a webpage, I sometimes find myself returning to table-based  markup for these reasons:</p>
<ul>
<li><strong>Presenting Organization</strong>, especially for side by side comparisons (think of a spreadsheet)</li>
<li><strong>Quick and Easy to Read Data</strong> – Humans are always inclined to find balance and organization in what they see. Why not help everyone along and make things easier?</li>
</ul>
<p><span id="more-3657"></span></p>
<h3>Sample Table 1</h3>
<table class="blog-sample" width="30%">
<tbody>
<tr>
<th colspan="2">Mr. Blobby&#8217;s Ice Cream</th>
</tr>
<tr>
<td width="20%"><strong>Facebook</strong></td>
<td width="80%">483 Likes</td>
</tr>
<tr>
<td><strong>Twitter</strong></td>
<td>389 Tweets</td>
</tr>
<tr>
<td><strong>Blog</strong></td>
<td>407 Visits</td>
</tr>
</tbody>
</table>
<p>Some of the more challenging projects Mudbug has helmed, such as <a href="http://www.aboutstryker.com/" target="_blank"><strong>About Stryker</strong></a>, require a lot of thought, process and planning. Mudbug has developed many useful online forms and <a href="http://mudbugmedia.com/services/applications.php">applications</a> where mounds of information have to be presented in a concise and quick-to-process manner.</p>
<p>There are instances where <a href="http://mudbugmedia.com/services/websites.php">web designers</a> can use a <a title="What is a div?" href="http://www.apaddedcell.com/what-div" target="_blank"><strong>div</strong></a> element to present the information like a spreadsheet. However, relying on your stylesheet to lay out actual content can become problematic, especially if there is a large amount of data to display. In this case scenario, it&#8217;s just more practical to use tables. Tables are semantically proper if they are used for the purpose of presenting <a title="View Example" href="http://www.recetasderechupete.com/calendario-de-temporada/" target="_blank"><strong>data</strong></a> and exist to lay out actual content while style sheets do the styling.</p>
<p>Tables can also be styled to make data more presentable, as well as look nice. When you create a table that has many styles, the markup can get quite messy with added classes and id&#8217;s. CSS3 can help clean up some of the code with the use of <a title="See More on Selectors" href="http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/" target="_blank"><strong>new pseudo-selectors</strong></a>, where the designer can assign specific styles to specific rows or cells just by targeting where they are, rather than what data they contain. With these new pseudo-selectors, you can, for example, target a corner of a table without having to add classes to your markup that explicitly define what and where a corner is.</p>
<h3>Sample Table 2 with Pricing Example</h3>
<table class="blog-sample-2" width="80%">
<tbody>
<tr>
<th colspan="5">Travel Packages</th>
</tr>
<tr>
<th>Accomodations</th>
<th>Standard</th>
<th>Premium</th>
<th>Deluxe</th>
</tr>
<tr>
<td>Complimentary Snack and Drinks</td>
<td>✓</td>
<td>✓</td>
<td>✓</td>
</tr>
<tr>
<td>Lunch Menu Items</td>
<td></td>
<td>✓</td>
<td>✓</td>
</tr>
<tr>
<td>Luxury First Class Seats and Movie</td>
<td></td>
<td></td>
<td>✓</td>
</tr>
<tr>
<td>Price</td>
<td>$180</td>
<td>$220</td>
<td>$500</td>
</tr>
<tr>
<td>Choose Package</td>
<td><a href="#">Select</a></td>
<td><a href="#">Select</a></td>
<td><a href="#">Select</a></td>
</tr>
</tbody>
</table>
<h3>Sample Table 3 with Scrollable Data</h3>
<div id="table-wrapper">
<div id="table-header">
<div id="head1">Design</div>
<div id="head2">Marketing</div>
<div id="head3">Programming</div>
</div>
<div id="tbody">
<table class="blog-sample-3">
<tbody>
<tr>
<td class="td1">Shannon Betti</td>
<td class="td2">Scott Zeitzer</td>
<td class="td3">Gabe Martin-Dempesy</td>
</tr>
<tr>
<td class="td1">Theresa Fischbach</td>
<td class="td2">Cory Zeitzer</td>
<td class="td3">Sean McCann</td>
</tr>
<tr>
<td class="td1">Ashley Segari</td>
<td class="td2">Rachel Haffner</td>
<td class="td3">Clovis Mello</td>
</tr>
<tr>
<td class="td1">Stephanie DuBois</td>
<td class="td2">Chris Cook</td>
<td class="td3">Emily Geglia</td>
</tr>
<tr>
<td class="td1">Laura Hill</td>
<td class="td2">Temple Ruff</td>
<td class="td3">Justin Bantuelle</td>
</tr>
<tr>
<td class="td1">Whitney Lutz</td>
<td class="td2">Bertha Chicas</td>
<td class="td3">Carl Fink</td>
</tr>
<tr>
<td class="td1">Vanessa Herbert</td>
<td class="td2">Brianna Smith</td>
<td class="td3">Michael Misshore</td>
</tr>
<tr>
<td class="td1">Elise Hotard</td>
<td class="td2">Melissa Stroup</td>
<td class="td3">Roy Mumaw</td>
</tr>
<tr>
<td class="td1">Linda Phan</td>
<td class="td2">Antonio Felguerez</td>
<td class="td3"></td>
</tr>
<tr>
<td class="td1">Vasu Tummala</td>
<td class="td2"></td>
<td class="td3"></td>
</tr>
</tbody>
</table>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>As with any type of design markup choices, there are pros and cons to using tables:</p>
<p><strong>Pros:</strong></p>
<ul>
<li>Can help provide structure to copious amounts of data information</li>
<li>Can be styled to enhance data presentation beyond its default organized structure</li>
<li>Screen readers can scan the information better than if the content was ordered in divs</li>
<li>Can help organize form fields because of the inherent alignment of cells</li>
</ul>
<p><strong>Cons:</strong></p>
<ul>
<li>Rigid structure</li>
<li>Tables, commonly used in email newsletters, can prove to be quite problematic to style and structure across email clients</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://mudbugmedia.com/blog/2011/09/29/why-table-can-still-be-useful-and-when-it-should-be-used/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Redesigning the Mudbug Media Site</title>
		<link>http://mudbugmedia.com/blog/2011/06/16/redesigning-the-mudbug-media-site/</link>
		<comments>http://mudbugmedia.com/blog/2011/06/16/redesigning-the-mudbug-media-site/#comments</comments>
		<pubDate>Thu, 16 Jun 2011 13:40:48 +0000</pubDate>
		<dc:creator>Laura Hill</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[1140 grid]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[new website]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://mudbugmedia.com/blog/?p=3410</guid>
		<description><![CDATA[Recently, I was given the task of revamping our own site. As anyone in the web design field can tell you, keeping your own image up-to-date is vital, but somehow always gets pushed to the back burner while clients take the foreground. While we have been using html5 and css3 for our clients, our own [...]]]></description>
			<content:encoded><![CDATA[<p>Recently, I was given the task of revamping our own site. As anyone in the web design field can tell you, keeping your own image up-to-date is vital, but somehow always gets pushed to the back burner while clients take the foreground. While we have been using html5 and css3 for our clients, our own <a href="http://mudbugmedia.com" target="_blank">mudbugmedia.com</a> was lacking in modern syntax and best practices. For those of you not familiar with our old site, here are a few features that were a little embarrassing.<span id="more-3410"></span></p>
<p>We knew we didn’t want to completely change the look and feel, since our branding is fairly new and something that our audience is familiar with. But adding a few subtle textures, gradients and cross-hatchy bubbles [thanks, <a href="http://mudbugmedia.com/team/amy-morvant" target="_blank">Amy</a>!] gave more depth to our site and helped liven up our 3 year old design.<br /><a href="http://mudbugmedia.com/blog/wp-content/uploads/2011/06/old-site.png"><img class="aligncenter size-full wp-image-3411 colorbox-3410" title="Old Mudbug Site" src="http://mudbugmedia.com/blog/wp-content/uploads/2011/06/old-site.png" alt="" width="674" height="389" /></a><br />We added a newer, better slider [thanks, <a href="http://nivo.dev7studios.com/" target="_blank">nivo slider</a>!] with images, captions and links that can be easily updated so we stay current.</p>
<p>The bottom portion of our site was reworked so that more dynamic content could be showcased. Our latest tweets and most recent work are featured, as well as the new Employee Spotlight section (which is constantly rotating to give you an idea of who Mudbug actually is). And in case you were wondering that very question, our <a href="http://mudbugmedia.com/team/" target="_blank">team page</a> has improved exponentially, as we all have new pictures. [thanks, <a href="http://mudbugmedia.com/team/vasu-tummala" target="_blank">Vasu</a>!]<a href="http://mudbugmedia.com/blog/wp-content/uploads/2011/06/old-site.png"><br /></a><a href="http://mudbugmedia.com/blog/wp-content/uploads/2011/06/new-site.png"><img class="aligncenter size-full wp-image-3412 colorbox-3410" title="New Mudbug Site" src="http://mudbugmedia.com/blog/wp-content/uploads/2011/06/new-site.png" alt="" width="762" height="569" /></a><br />But the biggest change we made to our site, and definitely the most time consuming, was the widening of the entire site by about 200px. Our original site was about 950px wide, which is pretty standard for 2007, but for a company that specializes in web sites, 950px seems a little limited. Keeping in mind that our audience has various sized monitors and not everyone may appreciate having to scroll to reach the entirety of our site, we began searching for options. Our search led us to dynamic grid systems, allowing the website to flow along a grid, adjusting to any sized monitor or handheld device.  <a href="http://cssgrid.net/" target="_blank">1140 grid</a> boasts a 12 column layout which ‘will adapt itself to work on just about any monitor, even mobile.’</p>
<p>As we began implementing this grid, we noticed more than a few hiccups. While the 1140 grid is in fact fluid down to 320px, there is a pretty hefty amount of set up. Since the grid not only flows, but resizes images if need be, all pixel widths had to be stripped from images. We also had to tediously wrap the contents of our site in divs denoting which column width should be used. Even after all this, there were still more issues with the flow of the grid at certain ‘breaking points’.</p>
<p>Luckily, a little research into media queries allowed us to bypass the glitches in those ‘breaking points’ and customize user experience every step of the way.</p>
<p>As we have gotten more and more requests for mobile, ipad and various monitor size compatibility, 1140 grid has increasingly become part of our set up for new sites, and thanks to media queries, we can offer audiences an optimized experience regardless of screen size.</p>
]]></content:encoded>
			<wfw:commentRss>http://mudbugmedia.com/blog/2011/06/16/redesigning-the-mudbug-media-site/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Email Signature Best Practices</title>
		<link>http://mudbugmedia.com/blog/2011/06/06/email-signature-best-practices/</link>
		<comments>http://mudbugmedia.com/blog/2011/06/06/email-signature-best-practices/#comments</comments>
		<pubDate>Mon, 06 Jun 2011 16:49:13 +0000</pubDate>
		<dc:creator>Vasu Tummala</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[design best practices]]></category>
		<category><![CDATA[Email]]></category>
		<category><![CDATA[signature]]></category>

		<guid isPermaLink="false">http://mudbugmedia.com/blog/?p=3350</guid>
		<description><![CDATA[Compared to Tweets, Texts, and Status Updates, e-mail might seem boring and as old as time itself. However, for any kind of in-depth back-and-forth communication, they’re a necessity that we must still live with for the time being (sorry Google Wave). Beyond the content, the most important part of any message is the signature. What [...]]]></description>
			<content:encoded><![CDATA[<p>Compared to Tweets, Texts, and Status Updates, e-mail might seem boring and as old as time itself. However, for any kind of in-depth back-and-forth communication, they’re a necessity that we must still live with for the time being (sorry Google Wave). <span id="more-3350"></span></p>
<p>Beyond the content, the most important part of any message is the signature. What looks like little more than a mere valediction might be considered a boring component, but with a little careful planning, design, and a heaping spoonful of testing, the signature can play a vital role in professional communication.</p>
<p>Being concise is key. Besides your name, you can include contact information, a reminder of who you are and what you do, provide links to social media, and remind your client what your company is all about. Go further than that, and you risk overwhelming anyone reading the message, creating clutter through the reply chain, and risk the viewer ignoring the content all together. However, while you’re not limited to just plain text, (with each bit of relevant information on one line), there are some best practices to keep in mind.</p>
<p>For starters, forget about images. There’s temptation to throw all your branding into the  signature, show off a fancy new logo, and leverage existing branding from social media services to captivate the eye. But images in emails are wrought with peril. In most email clients (like email programs and webmail services), images don’t load by default and the viewer needs to manually allow them to be shown. Go overboard, and maybe nothing will be seen in your signature other than a box with a big red X in it. Even if they do work, they often fail to come along for the ride in subsequent replies, leaving a long chain of responses littered with the carcasses of what was once your fancy new logo.</p>
<p>So images won’t do, just text I’m afraid; but that doesn’t mean it has to be boring. With careful and judicious use of web-safe fonts, varying font sizes, custom coloring and accents (like borders), you can create a signature that will work in every email client, look clean and non-distracting, and convey a bevy of information.</p>
<p>But before you go HTML &amp; CSS crazy and make something that’s elegant but requires a lot of engineering work, don’t forget about what you have to support. As far as email programs, you need to ensure that everything looks proper in four different flavors of Microsoft Outlook (2003/Express, 2007, 2010, Windows Live Mail), Apple Mail, iPhone, iPad, Android, Blackberry OS5, and Blackberry OS6. Things get trickier when you consider webmail services like Yahoo Mail, Hotmail, and Gmail. Not only do you need to test there, but you need to test each in all the popularly used browsers: IE8, IE9, Firefox 3.6, Firefox 4, Safari, and Chrome. Add it all up, and a simple signature with little more than lightly styled text and accents needs to checked in no less than 30 different email clients! Before you go overboard with what you’re planning, keep in mind, you won’t have your entire web development arsenal at your side (css wizardry, conditional stylesheets, etc), you need to ensure it works everywhere, and every-time you make the slightest change, it resets the counter on the 30 tests you have to look forward to.</p>
<p>So don’t let lack of image support, limited CSS support, and proliferation of email clients be a deterrent when creating an email signature. With a little planning, concise and effective design, and patience for compatibility testing, you can create an engaging finale to whatever it is you’re saying.</p>
]]></content:encoded>
			<wfw:commentRss>http://mudbugmedia.com/blog/2011/06/06/email-signature-best-practices/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Spirit of the Season</title>
		<link>http://mudbugmedia.com/blog/2010/12/30/the-spirit-of-the-season/</link>
		<comments>http://mudbugmedia.com/blog/2010/12/30/the-spirit-of-the-season/#comments</comments>
		<pubDate>Thu, 30 Dec 2010 19:29:31 +0000</pubDate>
		<dc:creator>Amy Morvant</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Holiday Cards]]></category>
		<category><![CDATA[Holiday Season]]></category>
		<category><![CDATA[King Cake]]></category>
		<category><![CDATA[Mudbug Media]]></category>
		<category><![CDATA[New Orleans]]></category>

		<guid isPermaLink="false">http://mudbugmedia.com/blog/?p=2408</guid>
		<description><![CDATA[&#8220;It&#8217;s the holiday season,&#8221; and I know Andy Williams is crooning on your playlist. Spreading joy is contagious this time of year, and rightly so. As the year draws to a close, it gives us the opportunity to reflect upon our journeys, express gratitude, and celebrate life, via an assortment of customs and traditions, spanning [...]]]></description>
			<content:encoded><![CDATA[<p>&#8220;It&#8217;s the holiday season,&#8221; and I know Andy Williams is crooning on your playlist.</p>
<p>Spreading joy is contagious this time of year, and rightly so. As the year draws to a close, it gives us the opportunity to reflect upon our journeys, express gratitude, and celebrate life, via an assortment of customs and traditions, spanning across the globe. It&#8217;s a season steeped in nostalgia, dusting off customs that have habitually become less conventional. It&#8217;s a time of sending cards instead of shooting emails.</p>
<p><span id="more-2408"></span></p>
<p><img class="size-full wp-image-2409 alignright colorbox-2408" title="Holiday Cards by Mudbug Media" src="http://mudbugmedia.com/blog/wp-content/uploads/2010/12/holiday-cards-blog.png" alt="Holiday Cards by Mudbug Media" width="151" height="328" />This year, we abandoned our mice and grabbed pencils instead, deciding to capture the holiday spirit with warm wishes and a calendar for the new year. Our calendar highlights each season with illustrations of traditions we anticipate and relish every year. These events are only a taste of what makes New Orleans unique. We hope it makes our local clients grin and encourages our clients nationwide to come sample the many things we love about our home. As a starting point, we&#8217;ve offered our personal favorites for each season. Beyond that, we celebrate virtually everything from andouille to zydeco, so there&#8217;s rarely a dull time to drop in for a bite.</p>
<p>We hope you have a joyous holiday season. Once you&#8217;ve hugged your last guest farewell and packed away your holiday decorations, resolve to continue to celebrate life, prosperity and friendship into the next year. We will likewise await the new year, and a fresh slice of king cake soon thereafter.</p>
<p> </p>
]]></content:encoded>
			<wfw:commentRss>http://mudbugmedia.com/blog/2010/12/30/the-spirit-of-the-season/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Progressive Enhancement</title>
		<link>http://mudbugmedia.com/blog/2010/11/30/progressive-enhancement/</link>
		<comments>http://mudbugmedia.com/blog/2010/11/30/progressive-enhancement/#comments</comments>
		<pubDate>Tue, 30 Nov 2010 21:50:08 +0000</pubDate>
		<dc:creator>Linda Phan</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[enhancement]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[progressive]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[websites]]></category>

		<guid isPermaLink="false">http://mudbugmedia.com/blog/?p=2237</guid>
		<description><![CDATA[What is it and why should we use it? When building websites, there are two popular approaches to problem-solving: graceful degradation and progressive enhancement. In short, graceful degradation follows the idea that websites will &#8220;degrade gracefully&#8221; on platforms that do not support newer web enhancements and makes use of the best available web semantics to aide [...]]]></description>
			<content:encoded><![CDATA[<h2>What is it and why should we use it?</h2>
<p>When building websites, there are two popular approaches to problem-solving: graceful degradation and progressive enhancement. In short, graceful degradation follows the idea that websites will &#8220;degrade gracefully&#8221; on platforms that do not support newer web enhancements and makes use of the best available web semantics to aide its degradation. Progressive enhancement, on the other hand, begins its approach with very basic information (HTML) and works its way up in user experience by adding layers of complexity to &#8220;enhance&#8221; the usability of a website. Users who do not have browsers that support these enhancements, however, can still access the website&#8217;s information with the compromise of a less unique user experience. As new solutions are introduced to meet the needs and standards of both the users and web developers, progressive enhancement becomes more important to delivering the best websites and results.</p>
<p><span id="more-2237"></span></p>
<h2>What is the difference between the two?</h2>
<p><strong>Graceful Degradation</strong></p>
<p>With graceful degradation, websites are built with a reactive process. Once a website is built and gets tested, web developers often find that it may not work properly in mobile devices or older browsers. Presentation can often degrade in less capable browsers. At times, by adding a &#8220;fix,&#8221; new problems can be created. Moreover, finding ways to support the same features can become very time consuming and costly, and most developers end up dropping support for user agents (browsers) that cannot support their features. It does take time and practice, but many web developers usually create clever solutions to work around these issues as they vary for every situation. However, no matter what solution a developer chooses, it most often results in minor amounts of degradation, from browser to browser or mobile devices.</p>
<p><strong>Progressive Enhancement</strong></p>
<p>With progressive enhancement, websites are built following a progressive process, starting with a solid foundation, and, if time and budget allows, more features are added to enhance it. If we strip the website of all its layers, it can still function properly, be able to yield better results and is able to be read by SEO search spiders. For users who carry capable browsers that can support enhanced features of a website, the experience is more rewarding. This approach however does not discriminate the user from being able to access the website&#8217;s information if enhanced features are disabled. Progressive enhancement helps web designers and developers tackle compatibility problems early on in development as each layer of complexity is added on, from HTML, to CSS, to Javascript and Flash. We adopt the idea that not every browser or platform is created equal. Presentation, however, is important, whether it is with font choices, content organization, animation or just plain English.</p>
<p>There is no right or wrong in either approach. Sometimes web designers and developers use a bit of both methods. Perhaps progressive enhancement, however, has the slight edge when it comes to delivering better results. To quote Sean, our Web Technology Director, &#8220;It&#8217;s the difference between teaching a class at a high level, then helping the students who are lagging behind…versus teaching a basic class, and giving more advanced assignments to the students who can handle it. In the graceful degradation class, some students will fail; with progressive enhancement, everyone should pass.&#8221;<img class="size-full wp-image-2246 alignright colorbox-2237" title="Progressive Enhancement: Oh Christmas Tree, oh Christmas Tree ..." src="http://mudbugmedia.com/blog/wp-content/uploads/2010/11/Screen-shot-2010-11-30-at-3.48.11-PM.png" alt="Progressive Enhancement: Oh Christmas Tree, oh Christmas Tree ..." width="315" height="249" /></p>
<p> </p>
<p>So the main question is, if every user is allowed access to basic information of a website with the features disabled, what would it look like?</p>
<p><strong>See what this page looks like in plain text:</strong> <a href="http://mudb.ug/1z" target="_blank">See Example</a></p>
<p> </p>
<p>Progressive Enhancement: A tree is still essentially a tree, but with decorations, it becomes a Christmas tree.</p>
]]></content:encoded>
			<wfw:commentRss>http://mudbugmedia.com/blog/2010/11/30/progressive-enhancement/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Why the World Needs Design</title>
		<link>http://mudbugmedia.com/blog/2010/11/18/design-principles-in-everyday-life/</link>
		<comments>http://mudbugmedia.com/blog/2010/11/18/design-principles-in-everyday-life/#comments</comments>
		<pubDate>Thu, 18 Nov 2010 15:40:22 +0000</pubDate>
		<dc:creator>Samantha Barnes</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Creativity]]></category>
		<category><![CDATA[Graphic]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Process]]></category>

		<guid isPermaLink="false">http://mudbugmedia.com/blog/?p=2180</guid>
		<description><![CDATA[Design solves problems. How? Well, that stems from the objective definition of a designer. A proper designing mind requires an intuitive knowledge of the audience, a basic understanding of the psychology behind their behaviors, and a fine-tuned creative mind that seeks out solutions.  Thus, a designing mind can see the objective solution to a problem [...]]]></description>
			<content:encoded><![CDATA[<p>Design solves problems. How? Well, that stems from the objective definition of a designer. A proper designing mind requires an intuitive knowledge of the audience, a basic understanding of the psychology behind their behaviors, and a fine-tuned creative mind that seeks out solutions.  Thus, a designing mind can see the objective solution to a problem and then focus on devising another solution to convince an audience that it suits a need. A designer can see the question, form a hypothesis, and produce a theory. When applied, a designer formulates solution B to makes solution A have appeal. Therefore, design is an essential force in solving problems.</p>
<p><span id="more-2180"></span></p>
<p>If design is about finding solutions and creating them to have appeal, then it is logical to conclude that appeal, the subjective part of the theory, is important. Why?</p>
<p>Ask yourself this:</p>
<p>• How many books have you decided to read because of the cover?</p>
<p>• When you buy a car, how much does the color and design factor into your choice?</p>
<p>• How inclined are you to take a website’s information and content seriously—or even read it—if it appears ill-designed?</p>
<p>The truth is, designers are the same. We know how you think because we are just like you. Remember, from statement #1, we have to know the psychology behind behaviors. So, what makes us different? I need design, but why do I need a designer?</p>
<p>Designers live for a personal triumph that most people forget: beautiful and unexpected things are born from creativity and inspiration. We are actually motivated by the challenge to merge creativity and inspiration to produce an appealing solution.</p>
<p>Design is a necessary thing, but do not mistake it for a simple task. Designers are fine tuned professionals trained to find the appealing solution for you, similar to a doctor that is trained to find tumors or fractures and then prescribe a course of treatment. Designers employ a process. We tap into our ideas, drain them dry of all possibilities, and then go back to the problem and ask it to walk the border of our brains, between the left and the right, to present a final result that rings true.</p>
<p>Design may be subjective, but it is objective fact that the world needs design. Designers are able to see the objective problem and address it in a subjective manner, which can convince an audience of its efficacy. It is a balancing act to be able to employ both sides of your brain to produce a solution, serve a need, and make the world a bit grander in the process, but we, designers, get really nerdy about it. It is what we are happy to do. And honestly, who wants a boring solution to a problem when you can have a beautiful aide to life?</p>
<p>Do you have anything to add? Why do you think the world needs design?</p>
]]></content:encoded>
			<wfw:commentRss>http://mudbugmedia.com/blog/2010/11/18/design-principles-in-everyday-life/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Scalable Design in a Mobile World</title>
		<link>http://mudbugmedia.com/blog/2010/09/15/scalability-and-design-in-a-mobile-world/</link>
		<comments>http://mudbugmedia.com/blog/2010/09/15/scalability-and-design-in-a-mobile-world/#comments</comments>
		<pubDate>Wed, 15 Sep 2010 17:52:57 +0000</pubDate>
		<dc:creator>Vasu Tummala</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Browser]]></category>
		<category><![CDATA[Cache]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[Resolution]]></category>
		<category><![CDATA[Scalability]]></category>
		<category><![CDATA[Size]]></category>

		<guid isPermaLink="false">http://mudbugmedia.com/blog/?p=1701</guid>
		<description><![CDATA[Remember a couple months ago, when Apple announced the iPhone 4 - with its double-resolution, 960x480 pixel “Retina” display - and everyone in the audience went ‘ooh’ and ‘ahh’?

All I could think about at that moment was, “Wait. What? How are they going to pull that off without everything exploding?” What would he announce next? Cats and dogs living together in harmony?]]></description>
			<content:encoded><![CDATA[<p><a href="http://mudbugmedia.com/blog/wp-content/uploads/2010/09/icon-small.jpg"></a>Remember a couple months ago, when Apple announced the iPhone 4 &#8211; with its double-resolution, 960&#215;480 pixel “Retina” display &#8211; and everyone in the audience went ‘ooh’ and ‘ahh’?</p>
<p>All I could think about at that moment was, “Wait. What? How are they going to pull that off without everything exploding?” What would he announce next? Cats and dogs living together in harmony?</p>
<p><span id="more-1701"></span></p>
<p>The advantage that Steve Jobs kept hammering home was that by doubling the number of dots on the screen that create what you see (aka pixels) while keeping the screen the same size, text on the screen would look as good as it does on paper. This is something display engineers have been trying to achieve for decades.</p>
<p>And Jobs was right; text looks great. But because text has no intrinsic size, when you make a font size larger, it still looks great. We all know what happens when you try to resize an image; it gets blurry and pixelated and all around nasty. Instead of gaining detail, you lose it.</p>
<p>So when I heard about this Retina display &#8211; which basically doubles the density of everything (think of the difference between skim milk and mmm whole milk) &#8211; my thoughts turned to images. Text would look better, but images would look worse.</p>
<h2>SCALABILITY AND DESIGN IN A MOBILE WORLD</h2>
<p><a href="http://mudbugmedia.com/blog/wp-content/uploads/2010/09/iphone.jpg"><img class="alignleft size-full wp-image-1721 colorbox-1701" title="iphone" src="http://mudbugmedia.com/blog/wp-content/uploads/2010/09/iphone.jpg" alt="" width="244" height="427" /></a>So what’s this have to do with mobile web and application design? Well, the iPhone 4’s not the first phone to have a high-resolution screen. In the Android world, screens can be anywhere from 3” to nearly 5” with a variety of resolutions, and screen densities to match. What the iPhone 4 did, along with this year’s bevy of Android phones in all shapes and sizes, was bring a certain situation to a head that user interface designers had been dancing around for years &#8212; Scalability.</p>
<p>Mobile users have become accustomed to special websites and apps that fill the screen and are tailor made for their given device. You don’t resize windows or adjust things to your preference; you expect it to be perfect. So what do you do when you have to design something tailor made for screens between 3” and 5,” that varies from 120dpi to 326dpi, and needs to display on phones from six different manufacturers? That’s the very problem I had when I sat down to redesign the mobile template for our Docsites, a design option for some of our specialty clients.</p>
<p>This redesign was for a template that’d be in use for hundreds of websites. So, in addition to the display scalability problem, there were also issues of color and content scalability – as well as the need to keep the site petite so it would load quickly on slow mobile connections. One design for dozens of different screen types, for hundreds of websites. Piece of cake…</p>
<h2>BROWSER POWER AND CSS3</h2>
<p>One of the great things about designing for the mobile Web is the modernity of the browsers that you find on a phone. iPhones, Androids, and even Nokia’s Symbian based phones have browsers based on WebKit, the same core that powers Safari and Chrome &#8212; the most modern browsers on the web. Blackberry, prior to the new OS6-powered Torch (which uses WebKit as well), is pretty antiquated. However, it could be worse (I’m looking at you Windows Mobile). Even as bad as the Blackberry browser is, it’s still more predictable and less buggy than the #1 browser on the desktop web &#8212; the 10 year old IE6. Because of these advanced, nimble, powerful mobile browsers, you can count on modern features like CSS3, SVG, and HTML5, which are web technologies perfectly suited for tackling the three design considerations needed to create our scalable website.</p>
<p><a href="http://mudbugmedia.com/blog/wp-content/uploads/2010/09/Scalable.jpg"><img class="alignright size-medium wp-image-1702 colorbox-1701" title="Scalable" src="http://mudbugmedia.com/blog/wp-content/uploads/2010/09/Scalable-300x300.jpg" alt="" width="300" height="300" /></a>Throughout 2010, CSS3, an update to the language that designers use to style websites, has been gaining popularity and use &#8211; thanks to modern browsers, such Safari, Chrome, and Firefox on the desktop, as well as the iPhone and Android in the mobility space. Even Internet Explorer 9 and Blackberry OS6 have joined the party as of this month. For designers this is a huge win, as the more CSS3 support there is, the more creative we can be in a shorter amount of time.</p>
<p>Making buttons or other assets with any personality, such as color gradients and rounded corners, used to require opening up a graphics programs like Photoshop, Fireworks, or Illustrator. But with CSS3, artwork that used to require an expensive program and hours of work can now be done in much less time and with just a few lines of styling code. Not only does this eliminate tedious design tasks, it also allows the designer to focus more on the design than the implementation. It requires less upkeep as you add more buttons and headers. Likewise, because the design is defined in CSS, rather than absolute pixels, it’s easy to adapt to other websites, change colors, and modify for any need.</p>
<p>You can also make text more interesting by adjusting text shadow properties to give you a nice drop shadow or a subtle letterpress look &#8212; again, without relying on fixed, absolute graphics. CSS3 also supports multiple backgrounds, allowing you to layer and position additional assets into a button or header when you can’t do it all in just CSS. When you put all these features together, you have the power to design, maintain, and make portable website elements without the use of images. A button made for website A, can be tweaked in just minutes to work on website B, while still looking bespoke, and without requiring anyone to open any programs and hunt for the original artwork. And because there are no files generated, the website will load much faster.</p>
<h2>WINNING THE IMAGE BATTLE: RESOLUTION VERSUS SIZE</h2>
<p>Scalable Vector Graphics (or SVG) are a type of graphic that has existed in the digital graphics realm since the dawn of the industry, but have never really been seen in a web browser. In general, vector graphics don’t define an image by using fixed pixels, but instead use coordinates and math. As a result, when you resize a vector image, shapes get recalculated and redrawn at a larger size, and there is no quality loss. While complicated images like photographs can’t be represented as vectors, illustrations, such as icons, can be.</p>
<p>As more and more high-resolution screens come to market, the importance of maintaining high quality graphics with detail becomes difficult. Non-vector (or bitmap) icons that might look fine on a normal computer screen will look blurry and jagged on a high-resolution screen, such as professional monitors, or newer iPhones and Android phones. With vectors though, no matter the screen size or resolution, icons will look razor sharp and perfectly detailed. The advantage here is that you don’t have to settle for cruddy looking graphics on high-resolution screens, nor do you need to create multiple versions of the same icons for low and high resolutions. One graphic, with all needed information displayed at any size, is used instead, so there’s no need to go back and make higher quality artwork in the future. As screens get better and more detailed, so will your icons without any work down the road.</p>
<p><a href="http://mudbugmedia.com/blog/wp-content/uploads/2010/09/doctors.jpg"><img class="aligncenter size-full wp-image-1718 colorbox-1701" title="doctors" src="http://mudbugmedia.com/blog/wp-content/uploads/2010/09/doctors.jpg" alt="" width="615" height="180" /></a></p>
<h2>CACHE, CAPTURE, AND SAVE</h2>
<p>Lastly, HTML5, an update to the core language that defines every webpage ever created, provides us with an incredibly useful feature for this design: Offline Storage. Despite CSS3 and SVG reducing the number of files that are needed to create a website, there are still going to be some required. Icons, photos, and maps, for example, are all things that still need images to be downloaded every time you go to a site, or do they?</p>
<p>HTML5’s spiffy new offline storage feature allows for something called a Cache Manifest. A Cache Manifest list is a list of files that you instruct the browser to download in a normal manner, but then retain and save to the hard drive, or into a phone’s internal storage. Using this feature, any icons, photos, or maps, for example, can be saved without ever needing to be re-downloaded again. Every time you visit the site after the first time, those large files won’t need to be downloaded.</p>
<p>Combine that with CSS3 styles and SVG graphics and you have a site that downloads quickly, looks great on any phone (no matter the size), can be easily updated, and can almost self-maintain over the years as technologies advance.</p>
]]></content:encoded>
			<wfw:commentRss>http://mudbugmedia.com/blog/2010/09/15/scalability-and-design-in-a-mobile-world/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>It&#8217;s All About Design</title>
		<link>http://mudbugmedia.com/blog/2010/09/07/its-all-about-design/</link>
		<comments>http://mudbugmedia.com/blog/2010/09/07/its-all-about-design/#comments</comments>
		<pubDate>Tue, 07 Sep 2010 20:32:51 +0000</pubDate>
		<dc:creator>Laura Hill</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[YouTube]]></category>

		<guid isPermaLink="false">http://mudbugmedia.com/blog/?p=1674</guid>
		<description><![CDATA[The old-fashioned way of getting to know the people behind a product or service is becoming obsolete. Sad as this may be - we can’t go back; and understanding how design affects your desired audience’s ‘rapid decision making,’ may mean the difference between sinking or swimming.]]></description>
			<content:encoded><![CDATA[<h2>EVERYONE ON THE WEB IS DISOBEYING THEIR MOTHER</h2>
<p>The good news is: we can’t help it. &#8230;Of course, I’m referring to the fact that the general web-surfing public ‘judges the book by its cover’.  No doubt, if the capabilities of the Internet continue to expand at the current rate, we might just be nestled into our Wall-E style hover chairs by the end of this year.</p>
<p>The old-fashioned way of getting to know the people behind a product or service is becoming obsolete. Sad as this may be &#8211; we can’t go back; and understanding how design affects your desired audience’s ‘rapid decision making,’ may mean the difference between sinking or swimming.</p>
<p><span id="more-1674"></span></p>
<h2>IT’S ABOUT DESIGN!</h2>
<p>As humans, we rely on our senses (sight, taste, touch, smell, feeling) to make judgments and decisions. Surprisingly, our decision-making is based on the feelings conveyed, rather than on the actual information presented. The way something is designed causes an almost involuntary reaction in our brains. This reaction determines how we feel about said thing, and thus heavily (HEAVILY), weighs on our decision-making process.</p>
<p>This is why people are willing to pay more for ice cream packaged in round containers than in square, why Coke always beats Pepsi (even when blind taste tests have proven Pepsi to be the tastier beverage), or why a single gas pump can be seen as solely responsible for all of the oil in the Gulf…</p>
<p><a href="http://mudbugmedia.com/blog/wp-content/uploads/2010/09/98466566.jpg"><img class="aligncenter size-medium wp-image-1678 colorbox-1674" title="Good Gas Pump" src="http://mudbugmedia.com/blog/wp-content/uploads/2010/09/98466566-199x300.jpg" alt="" width="199" height="300" /></a></p>
<p>Even when that one gas pump has clearly been obeying the rules and just wants to help give you gas to get where you’re going.</p>
<h2>GETTING THERE&#8230;</h2>
<p>And speaking of getting to where we’re going… All this matters because (in such a fast-paced market, where you only have a few seconds to grab your audience’s attention) DESIGN is our/your only chance! Don’t doubt that the hover chairs are coming; and if your presence on the web doesn’t convey your value (VISUALLY), you can be sure they’ll zoom right past, filled with consumers watching YouTube and enjoying a tasty beverage (probably a Coke).</p>
<h2>COMING SOON:</h2>
<h3>EVERYONE ON THE WEB IS DISOBEYING THEIR MOTHER: PART 2</h3>
<p>-OR-</p>
<h3>A DESIGNER’S GUIDE ON MAKING YOUR AUDIENCE DISOBEY THEIR MOTHERS</h3>
<p> </p>
<p> </p>
]]></content:encoded>
			<wfw:commentRss>http://mudbugmedia.com/blog/2010/09/07/its-all-about-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mudbug Design Awards</title>
		<link>http://mudbugmedia.com/blog/2010/06/30/mudbug-medals/</link>
		<comments>http://mudbugmedia.com/blog/2010/06/30/mudbug-medals/#comments</comments>
		<pubDate>Wed, 30 Jun 2010 20:54:46 +0000</pubDate>
		<dc:creator>Scott Zeitzer</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[analytics]]></category>
		<category><![CDATA[Baton Rouge]]></category>
		<category><![CDATA[Best of the Web Awards]]></category>
		<category><![CDATA[Choose Ochsner]]></category>
		<category><![CDATA[ecommerce]]></category>
		<category><![CDATA[Facebook]]></category>
		<category><![CDATA[Gambit Magazine]]></category>
		<category><![CDATA[graphic designers]]></category>
		<category><![CDATA[HADAKI]]></category>
		<category><![CDATA[iPad]]></category>
		<category><![CDATA[marketing strategy]]></category>
		<category><![CDATA[Mudbug Media]]></category>
		<category><![CDATA[New Orleans]]></category>
		<category><![CDATA[Ochsner Health System]]></category>
		<category><![CDATA[Ursuline Academy]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://mudbugmedia.com/blog/?p=1384</guid>
		<description><![CDATA[I am extremely excited and pleased to share that the 2010 Gambit Magazine Best of the Web Awards recognized three Mudbug Media clients as the Best of New Orleans.  An ecommerce website we designed for HADAKI earned a third place recognition, while Ursuline Academy’s website and Ochsner Health System’s Choose Ochsner campaign were recognized as [...]]]></description>
			<content:encoded><![CDATA[<p>I am extremely excited and pleased to share that the <a href="http://bestofneworleans.com/" target="_blank">2010 Gambit Magazine Best of the Web Awards</a> recognized three Mudbug Media clients as the Best of New Orleans.  An ecommerce website we designed for HADAKI earned a third place recognition, while Ursuline Academy’s website and Ochsner Health System’s Choose Ochsner campaign were recognized as the Best School Website and Best Online Ad Campaign, respectively.</p>
<p><span id="more-1384"></span></p>
<p>Here’s a look at our trifecta of award winning efforts:</p>
<h2><a href="https://hadakishop.com/" target="_blank">HADAKI</a></h2>
<p>The website we designed for lifestyle bag manufacturer HADAKI is a great example of <a href="http://mudbugmedia.com/blog/2010/04/28/checking-out-ecommerce/" target="_blank">ecommerce</a> at work.  The site looks beautiful and displays the wide variety of high fashion bags and accessories HADAKI has to offer, but the most important thing about that particular website – and the reason I think it won a bronze medal – is the integrated checkout feature.</p>
<p><a href="http://mudbugmedia.com/blog/wp-content/uploads/2010/06/hadaki-cart.jpg"><img class="alignright size-medium wp-image-1000 colorbox-1384" src="http://mudbugmedia.com/blog/wp-content/uploads/2010/06/hadaki-cart.jpg" alt="HADAKI" width="300px" height="276px" /></a>Application developer <a href="http://mudbugmedia.com/team/michael-misshore" target="_blank">Michael Misshore</a> implemented the latest ecommerce technology to make sure the site’s checkout feature was seamlessly integrated into every visitor’s experience.  After all, any retail outlet is only as good as its checkout line.  In the online world, there really isn’t much use for an ecommerce website that doesn’t make it easy for a customer to actually purchase products online.</p>
<p>Over 50 percent more visitors have checked out HADAKI&#8217;s site since we revamped the shopping cart, evidence that this site has become more profitable as well as award winning.</p>
<h2><a href="http://ursulineneworleans.org/" target="_blank">Ursuline Academy</a></h2>
<p>Ursuline Academy’s website has the honor of being recognized as the best school website in the New Orleans area.  I think this is true primarily because of the level of customization our designers and developers were able to bring to the site.</p>
<p><a href="http://mudbugmedia.com/blog/wp-content/uploads/2010/06/ursuline-homepage.jpg"><img class="alignleft size-medium wp-image-1000 colorbox-1384" src="http://mudbugmedia.com/blog/wp-content/uploads/2010/06/ursuline-homepage.jpg" alt="Ursuline" width="300px" height="276px" /></a>Although we chose WordPress as a CMS to allow for easy content updates, you’d never be able to tell because of the specifically tailored design.  Visiting Ursuline’s website is just like visiting the school.  You get the same up-to-date information that you would find on a bulletin board in the hall outside the office on Ursuline’s Uptown campus.</p>
<p>The website features a traditional design, good functionality, easy navigation, a surplus of current information and really shows off the school’s personality and culture.  The news feature combines the immediacy of daily announcements with the wide reach of the Internet.  Alumni, supporters and parents have an convenient way to keep up with special events, sports championships, reunions and announcements.</p>
<h2><a href="http://www.ochsner.org/" target="_blank">Choose Ochsner</a></h2>
<p>The Choose Ochsner online ad campaign for Ochsner Health System was a success on a number of levels.  Working in conjunction with <a href="http://www.bohanideas.com/" target="_blank">Bohan Advertising</a>, our graphic designers, lead by design manager <a href="http://mudbugmedia.com/team/ashley-segari" target="_blank">Ashley Segari</a>, created a successful ad campaign featuring four custom ads and a landing page designed by Mudbug Media.<a href="http://mudbugmedia.com/blog/wp-content/uploads/2010/06/choose-ochsner.jpg"><img class="alignright size-medium wp-image-1000 colorbox-1384" src="http://mudbugmedia.com/blog/wp-content/uploads/2010/06/choose-ochsner.jpg" alt="Ochsner" width="300px" height="276px" /></a></p>
<p>We also ran a host of analytics on the campaign to monitor its direction and determine overall effectiveness.  Media and Analytics Strategist <a href="http://mudbugmedia.com/team/chris-cook" target="_blank">Chris Cook</a> determined that the initial phase of the Choose Ochsner ad campaign generated over 18 million impressions in the New Orleans and Baton Rouge areas between its January debut and April finale.</p>
<p>Since it opened in 1942, Ochsner Health System has become one of the most widely recognized healthcare providers in the region, but they still need to keep the public updated on technological advances and new options as they become available.  The Choose Ochsner campaign was created to highlight the wide range of specialties and services that support this familiar brand’s motto, “Healthcare with Peace of Mind.”</p>
<h2>Taking Pride in our Work</h2>
<p>All three of these awards represent outstanding online achievements for our clients, but my favorite thing these awards bring to light is the impressive span of our service offerings.  We have in-house solutions for all your ecommerce, design, development, analytics and marketing strategy needs right here at Mudbug Media.</p>
<p>We didn’t need to outsource a single bit of code, design or development to complete these outstanding and award winning projects.  I think that just goes to show the depth and breadth of the talent, creativity and ability of our team.  I congratulate everyone on their excellent effort, creativity and passion for their work.</p>
<p>Mudbug Media truly understands what it means to be an ditigal agency.  We’re not your father’s ad agency.  We’ve always been online and we know what it takes to integrate the online world with traditional media.  If you’re looking for someone to truly get your message across all of today’s media &#8211; from newspapers to iPads &#8211; give us a call, send an email, a tweet or write on our Facebook wall.  We’d love to win some awards for you.</p>
]]></content:encoded>
			<wfw:commentRss>http://mudbugmedia.com/blog/2010/06/30/mudbug-medals/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>From Cufon to Typekit</title>
		<link>http://mudbugmedia.com/blog/2010/05/27/from-cufon-to-typekit-evolution-of-web-fonts/</link>
		<comments>http://mudbugmedia.com/blog/2010/05/27/from-cufon-to-typekit-evolution-of-web-fonts/#comments</comments>
		<pubDate>Thu, 27 May 2010 22:12:23 +0000</pubDate>
		<dc:creator>Vasu Tummala</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[Arial]]></category>
		<category><![CDATA[Cufon]]></category>
		<category><![CDATA[EOT]]></category>
		<category><![CDATA[EOT format]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[Font Squirrel]]></category>
		<category><![CDATA[Google Chrome browser]]></category>
		<category><![CDATA[Internet Explorer]]></category>
		<category><![CDATA[Java Script]]></category>
		<category><![CDATA[OpenType]]></category>
		<category><![CDATA[Safari]]></category>
		<category><![CDATA[sIFR]]></category>
		<category><![CDATA[Times New Roman]]></category>
		<category><![CDATA[TrueType]]></category>
		<category><![CDATA[Typekit]]></category>

		<guid isPermaLink="false">http://mudbugmedia.com/blog/?p=1161</guid>
		<description><![CDATA[Before the advent of Typekit and technologies like Cufon and sIFR, designers were stuck using only the fonts that came bundled with the average computer, so the Internet mostly looked like a gigantic Word Document written in Times New Roman and Arial. A plain looking website is fine if it functions primarily as an information [...]]]></description>
			<content:encoded><![CDATA[<p>Before the advent of <a href="http://typekit.com/" target="_blank">Typekit</a> and technologies like <a href="http://cufon.shoqolate.com/generate/" target="_blank">Cufon</a> and <a href="http://www.mikeindustries.com/blog/sifr" target="_blank">sIFR</a>, designers were stuck using only the fonts that came bundled with the average computer, so the Internet mostly looked like a gigantic Word Document written in Times New Roman and Arial.</p>
<p>A plain looking website is fine if it functions primarily as an information distribution platform. But if you really want your business or personal website to stand out and stay modern, few things work better and more intrinsically than an inventive and stylistic font.</p>
<p><span id="more-1161"></span></p>
<p>The ability to successfully implement custom fonts has evolved over the years from a basic concept that didn’t really work to a seamless technology that can be added to any website.</p>
<h2>Evolution of Online Fonts<a href="http://mudbugmedia.com/blog/wp-content/uploads/2010/05/Boring-Header3.gif" target="_blank"><img class="alignright size-medium wp-image-1234 colorbox-1161" title="Boring Header" src="http://mudbugmedia.com/blog/wp-content/uploads/2010/05/Boring-Header3-300x278.gif" alt="Boring Header" width="300" height="278" /></a></h2>
<h2><a href="http://mudbugmedia.com/blog/wp-content/uploads/2010/05/Interesting-Header1.gif" target="_blank"><img class="size-medium wp-image-1235 alignleft colorbox-1161" title="Interesting Header" src="http://mudbugmedia.com/blog/wp-content/uploads/2010/05/Interesting-Header1-300x288.gif" alt="Interesting Header" width="300" height="288" /></a></h2>
<p>In the late 90s, Internet Explorer began allowing custom fonts that were translated into the proprietary EOT format.  The problem was that it was insanely difficult to actually put a font into the EOT format because Microsoft’s EOT tool never worked and there were licensing headaches. Designers were basically taunted by an option that remained just out of reach.</p>
<p>That started to change in 2007 when Apple’s Safari web browser began to support custom web fonts using traditional TrueType and OpenType formats, but with a 2 percent market share, that still meant the Internet still looked pretty uniformly bland.</p>
<p>About five years ago sIFR came out, a font replacement technology that relies on Flash to generate custom fonts.  The next step was Cufon, which uses Javascript, but both technologies were slow to load and often a pain to work with.  With the performance problems and complexity involved, these two technologies didn’t budge the web very far from its uniform font beginnings.</p>
<p>In 2009 Firefox and Google’s <a href="http://mudbugmedia.com/blog/2009/07/23/google-chrome-os-kind-of-a-big-deal/" target="_blank">Chrome</a> browser finally decided to join the party and support TrueType and OpenType fonts &#8211; opening the doors to widespread font customization &#8211; but there are still lingering problems.</p>
<h2>Licensing Speed Bumps</h2>
<p>It&#8217;s been one year since 100 percent of the browsers finally achieved web font (aka @font-face) support, but there are still licensing problems.  While there are countless fonts made by an absurdly large number of font foundries, few of them are licensed for embedding.</p>
<p>Embedding fonts used to just mean distributing them in files like PDFs, but now it also means you can’t distribute and provide them to a website viewer.  The licensing agreements for the vast majority of the fonts out there were drafted when the web didn’t even exist.  So in the 80s and early 90s, only being able to use a font with the ultimate goal of printing on paper wasn’t a big deal.  However, as viewing content shifted from paper to the screen, this limitation proved to be a huge stumbling block for everyone in the creative industry.</p>
<p>So the progress on the font front over the past year has really been made in licensing. <a href="http://www.theleagueofmoveabletype.com/fonts/5-blackout" target="_blank"><img class="alignleft size-full wp-image-1252 colorbox-1161" title="Blackout Font" src="http://mudbugmedia.com/blog/wp-content/uploads/2010/05/Blackout1.jpg" alt="Blackout" width="292" height="71" /></a>One of the biggest advances came when Adobe approved all of their licensed fonts for web use, giving designers everywhere a grab bag of font options to immediately begin using legally.</p>
<p>A website called <a href="http://www.fontsquirrel.com/" target="_blank">Font Squirrel</a> popped up shortly thereafter, offering an online conversion tool that lets you convert any font that you have a license for &#8211; or any royalty free font &#8211; into a format that Safari, Chrome and Firefox can use.</p>
<p>You can also export the font to a format that Internet Explorer can use, finally making good on the promise of the EOT format.</p>
<h2>Typekit</h2>
<p>The last piece of the puzzle is Typekit, which came out in September 2009.  Typekit went to all the big font foundries out there and worked out licensing deals with many of them &#8211; the first big push of commercial fonts online. In other words, Typekit led the charge in updating licensing agreements from a pre-web world to the modern world.</p>
<p style="text-align: left;"><a href="http://www.theleagueofmoveabletype.com/fonts/4-chunk" target="_blank"><img class="size-medium wp-image-1205 alignleft colorbox-1161" title="Chunk Font" src="http://mudbugmedia.com/blog/wp-content/uploads/2010/05/Chunk1-300x220.jpg" alt="Chunk" width="300" height="220" /></a>Not only did they handle all of the licensing issues, but they also hold all of the fonts on their servers all around the world and distribute them from their end.  So now designers have all these fonts to use and the licensing has been worked out. There are servers set up all over the world to distribute the fonts so the load time and performance are quick to the point where you finally don’t see delays or performance issues.</p>
<p>So now there really is no reason to stick with the same boring fonts website after website.  There are far too many options out there and everyone has the ability to create custom fonts, so the variety can be truly endless.</p>
]]></content:encoded>
			<wfw:commentRss>http://mudbugmedia.com/blog/2010/05/27/from-cufon-to-typekit-evolution-of-web-fonts/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

