<?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>「朱72」　shu72.com &#187; Web Design</title>
	<atom:link href="http://shu72.com/category/web-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://shu72.com</link>
	<description>the personal website of Sonya C. Wheeler</description>
	<lastBuildDate>Mon, 17 May 2010 04:43:42 +0000</lastBuildDate>
	
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Birth and death of a steampunk layout</title>
		<link>http://shu72.com/2010/03/06/birth-and-death-of-a-steampunk-layout/</link>
		<comments>http://shu72.com/2010/03/06/birth-and-death-of-a-steampunk-layout/#comments</comments>
		<pubDate>Sat, 06 Mar 2010 20:49:55 +0000</pubDate>
		<dc:creator>Sonya</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://shu72.com/?p=293</guid>
		<description><![CDATA[ The original layout for the reboot of my site was going to use a &#8220;steampunk&#8221;-like theme that I was developing in mockup for this site, but I kept having trouble figuring out how to represent the main section and the part with the entries and sidebar(s) would go. It was completely coded from scratch [...]]]></description>
			<content:encoded><![CDATA[<p><div id="attachment_307" class="wp-caption alignleft" style="width: 160px"><img src="http://shu72.com/mainsite/wp-content/uploads/2010/02/2009mockup-logo1-150x150.png" alt="logo" title="2009 mockup logo 1" width="150" height="150" class="size-thumbnail wp-image-307" /><p class="wp-caption-text">Proposed logo</p></div> The original layout for the reboot of my site was going to use a &#8220;steampunk&#8221;-like theme that I was developing in mockup for this site, but I kept having trouble figuring out how to represent the main section and the part with the entries and sidebar(s) would go. It was completely coded from scratch and used a grid based system from <a href="http://bluetrip.org/">BlueTrip CSS Grid</a>. Then later I tinkered with <a href="http://www.blueprintcss.org/">Blueprint CSS</a>, <a href="http://960.gs/">960.gs</a> and even the Adobe AIR application <a href="http://www.toki-woki.net/p/Boks/">Boks</a> for layout. The idea was scrapped completely last year when my site suffered from a minor <code>eval(base64_decode()&#8230;</code> crack and I <a href="http://shu72.com/2010/02/10/website-bombardment-and-crack-of-2009/">put the site in maintenance mode</a> for a bit.</p>
<p>From what I was working with, the mid section was still a blur to me on how it should look and it&#8217;s been so long since I&#8217;ve peeked at the code behind WordPress. Sure I&#8217;ve been sandbox testing out the various WP versions that came out since v2.04 but nothing has been put live until now. This has been the main reason why it has taken me so long to redo my site layout&#8211;from scratch. That and the usual where you code and code or edit images until you mess everything up. Then clean things up and mess it up again in a seemingly endless cycle that produces absolutely nothing and your creativity spark and interest for the original design wains. </p>
<p>I even had a little logo going that had flourishes like steam above the &#8220;7&#8221; in the &#8220;72&#8221;, but it was done in Paint Shop Pro 5.01 (an ancient version, I know). In order to really have a logo that is expandable it should be created as a .svg with layers and in a larger scale than what I need. Easier done in the <a href="http://www.gimp.org/">GIMP</a> or <a href="http://www.inkscape.org/">Inkscape</a>. That way the logo can be adjusted to what ever smaller size I need without the problems with transparency.<br />
<div id="attachment_313" class="wp-caption aligncenter" style="width: 360px"><img src="http://shu72.com/mainsite/wp-content/uploads/2010/02/2009mockup-header2.png" alt="2009 mockup header #2" title="2009 mockup header 2" width="350" height="146" class="size-full wp-image-306" /><p class="wp-caption-text">The next-to-final mockup of the header graphic.</p></div><br />
<div id="attachment_313" class="wp-caption aligncenter" style="width: 360px"><img src="http://shu72.com/mainsite/wp-content/uploads/2010/02/2009mockup-midsection1.png" alt="Midsection graphic" title="2009 mockup midsection 1" width="350" height="62" class="size-full wp-image-313" /><p class="wp-caption-text">Midsection mockup for Categories and Tags.</p></div><br />
Must really learn to use GIMP and Inkscape better and get rid of my Paint Shop Pro install. The old PSP 5.01 doesn&#8217;t handle .png/transparency images to my liking. My current new logo was created in Inkscape and then all layers scaled down and saved as a single layer .png.</p>
<p>New mockup theme (Reincarnation of a site):<br />
I decided to just hunker down and settle with modifying the Sandbox theme from <a href="http://www.plaintxt.org/">plaintxt.org</a>. Besides my last theme was an altered Sandbox as well. This will be much more productive in the long run since I don&#8217;t have to spend so much time learning and re-learning the tags and loops or figuring out how things should be displayed. Sure there is a lot of pride in creating your own theme from scratch but if you keep getting brain farts and lulls of productivity it&#8217;s time to embrace fate, settle and admit your losses and failures and gear your goals into smaller sized chunks so you can move on to other things. </p>
<p>As for the current incarnation of the site:<br />
The old design was based on the Chinese Year of the Rat 鼠 (shú, lo shu&#8230;). This was replaced with a Japanese theme and 朱 (しゅ, shiyu, shu) which is Japanese for vermilion, cinnabar, scarlet, red, bloody color. Plus&#8230;red/crimson is my favorite color. So it&#8217;s a minimalist theme with a touch of red.<br />
<div id="attachment_313" class="wp-caption aligncenter" style="width: 414px"><img src="http://shu72.com/mainsite/wp-content/uploads/2010/02/theme-oldnew.png" alt="Old theme and new theme" title="theme-oldnew" width="404" height="98" class="size-full wp-image-313" /><p class="wp-caption-text">Last theme and new theme; above fold</p></div> Now that my site reboot is out of the way here&#8217;s to a more productive year.</p>
]]></content:encoded>
			<wfw:commentRss>http://shu72.com/2010/03/06/birth-and-death-of-a-steampunk-layout/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS Rebooters to bring forth great designs soon</title>
		<link>http://shu72.com/2006/10/31/css-rebooters-to-bring-forth-great-designs-soon/</link>
		<comments>http://shu72.com/2006/10/31/css-rebooters-to-bring-forth-great-designs-soon/#comments</comments>
		<pubDate>Tue, 31 Oct 2006 15:32:52 +0000</pubDate>
		<dc:creator>Sonya</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[layouts]]></category>

		<guid isPermaLink="false">http://shu72.com/2006/10/31/css-rebooters-to-bring-forth-great-designs-soon/</guid>
		<description><![CDATA[It&#8217;s a little too late for me to jump on the band wagon for this year&#8217;s fall CSS Reboot on November 1st. There&#8217;s another one that is held during the Springtime on May 1st that I could think about. Website layouts like the ones of those who get showcased on the site take some serious [...]]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s a little too late for me to jump on the band wagon for this year&#8217;s fall <a href="http://www.cssreboot.com">CSS Reboot</a> on November 1st. There&#8217;s another one that is held during the Springtime on May 1st that I could think about. Website layouts like the ones of those who get showcased on the site take some serious thought and planning to look the way they do.</p>
<p>Sure, just about anyone can create a snazzy looking website, but this goal of rebooting is to help spread the word on keeping up with the <a href="http://www.webstandards.org/learn/faq/">web standards</a> (along with promoting <acronym title="Cascading Style Sheets">CSS</acronym> and the designers website as well).</p>
<p>Soon there will new fresh designs out there to make you lower your jaw to the floor in amazement and go, &#8220;Aww, man! I wish I though of that&#8221;. There&#8217;s no prizes or gifts for participating, just a satisfying recognition that does the ego good.</p>
]]></content:encoded>
			<wfw:commentRss>http://shu72.com/2006/10/31/css-rebooters-to-bring-forth-great-designs-soon/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Searching for the next Web2.0 trend</title>
		<link>http://shu72.com/2006/10/17/searching-for-the-next-web20-trend/</link>
		<comments>http://shu72.com/2006/10/17/searching-for-the-next-web20-trend/#comments</comments>
		<pubDate>Tue, 17 Oct 2006 10:29:23 +0000</pubDate>
		<dc:creator>Sonya</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[web trends]]></category>

		<guid isPermaLink="false">http://shu72.com/2006/10/17/searching-for-the-next-web20-trend/</guid>
		<description><![CDATA[Recently I&#8217;ve been under a brain-fog over a new website layout. Yes, I was tempted to go the trendy route with heavy gradients and fancy slick web page magic tricks. All those toys out there are pretty tempting. I suffer from this eventual bad fate of working on a layout and tweaking this, tweaking that, [...]]]></description>
			<content:encoded><![CDATA[<p>Recently I&#8217;ve been under a brain-fog over a new website layout. Yes, I was tempted to go the trendy route with heavy gradients and fancy slick web page magic tricks. All those toys out there are pretty tempting. I suffer from this eventual bad fate of working on a layout and tweaking this, tweaking that, putting a lot of time and thought into it until I finally grow tired of the design as a whole and scrap it. This is mainly because of one or more of the following (mostly all):</p>
<ol>
<li>It no longer looks the way it should after changing things around</li>
<li>It&#8217;s beyond code repair after hours, if not days, of tweaking.</li>
<li>It no longer looks right&#8212;must come up with something better.</li>
</ol>
<p>Then the vicious cycle continues from the beginning. Stumbling across a website a few weeks ago, (I forget which one), helped me to realize that I&#8217;m not the only one with this problem of a &#8220;fix it &#8216;till it&#8217;s broken&#8221; mentality in designing. It makes me feel so much better about myself to know that there are a multitude of others who&#8217;ve had layouts/designs that went from looking cool but modest to looking like a $2 hooker with way too much makeup on&#8212;<em>really trashy and increasingly butt ugly to boot</em>. I still have trouble learning how to step back from a layout project before it grows stale on me.</p>
<p>Yesterday, I came across this article titled <a href="http://www.somerandomdude.net/blog/design/drag-design/">DRAG-ing Your Design Down &#8211; How To Style Yourself To Anonymity</a> by Some Random Dude (that&#8217;s the name of the site). The author gave a long post about his opinion of the ongoing trend of Web2.0&#8217;s <i>Drop-shadows, Rounded corners, And Gradients</i> earlier this year. His site, for contrast, is rather minimal but still packs visual punch. It reminded me of one of my old weblog#8217;s minimalistic layout style of a white background and very little of the bling that is prominent with the <a href="http://en.wikipedia.org/wiki/Web_2.0">Web2.0 design trend</a>.</p>
<p><img src="http://shu72.com/images/layout_v14.png" alt="old site layout" width="200" height="124" class="img-float-right" /> I&#8217;m also guilty of the rounded corners style with the main part of my old website, but it can only be viewed in certain browsers because it is created using a Mozilla specific <acronym title="Cascading Style Sheets" class="int">CSS</acronym> property <code>-moz-border-radius</code>. Oh well, the spaceman and alien with gray colors theme of mine is quite a few years old by-the-way. Now for this site there is only a minor gradient for the background of the entries which I hope fits in nicely with the design.</p>
<p>The article has inspired me to just stick with my old weblog design. Never mind the <del>bollocks</del><sup class='footnote'><a href='#fn-37-1' id='fnref-37-1'>1</a></sup> bling-bling. Hopefully by the end of this week this site will be graced with a slightly re-vamped layout of my old weblog. This should finally allow me to concentrate on other projects.
<div class='footnotes'>
<div class='footnotedivider'></div>
<ol>
<li id='fn-37-1'>Please pardon the Sex Pistols reference. <span class='footnotereverse'><a href='#fnref-37-1'>&#8617;</a></span></li>
</ol>
</div>
]]></content:encoded>
			<wfw:commentRss>http://shu72.com/2006/10/17/searching-for-the-next-web20-trend/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Pros and cons of K2 and Script.aculo.us</title>
		<link>http://shu72.com/2006/10/07/pros-and-cons-of-k2-and-scriptaculous/</link>
		<comments>http://shu72.com/2006/10/07/pros-and-cons-of-k2-and-scriptaculous/#comments</comments>
		<pubDate>Sun, 08 Oct 2006 03:16:12 +0000</pubDate>
		<dc:creator>Sonya</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://shu72.com/2006/10/07/pros-and-cons-of-k2-and-scriptaculous/</guid>
		<description><![CDATA[I really like the K2 theme, but it combined with the current Script.aculo.us is a little too much heavy &#8220;bling-bling&#8221; for my website.  I first wanted to steer clear from K2 due to its bulky package, but settled for it in the end for the reboot of my site. I&#8217;ve noticed a severe slowdown [...]]]></description>
			<content:encoded><![CDATA[<p>I really like the <a href="http://getk2.com" title="Kubrick: version 2. Loves you like a kitten!">K2</a> theme, but it combined with the current <a href="http://script.aculo.us">Script.aculo.us</a> is a little too much heavy &#8220;bling-bling&#8221; for my website.  I first wanted to steer clear from K2 due to its bulky package, but settled for it in the end for the reboot of my site. I&#8217;ve noticed a severe slowdown and hanging of the page loadings since day one. There is also some type of bug which sometimes shows the &#8220;busy&#8221; symbol of the circling dots when the page loads and stays there for a while. When this happens the &#8220;rolling archives&#8221; slider is inoperative. This lagging is happening way too much for my comfort. I&#8217;ve turned off a few special features like the rolling archives.</p>
<p>In comparison, the Default (the older Kubrick) theme has 17 <code>.php</code> files and Classic theme has 6 <code>.php</code> files. K2 on the other hand has 40+ <code>.php</code> files, about 9 javascript files (I included the <code>.js</code> files set in <code>.php</code> files here but did not include them in the <code>.php</code> count). This includes Script.aculo.us&#8217;  Prototype framework v1.5.0_rc0. Presented in K2 as a javascript file set into a <code>.php</code> page weighting in at 56KB. I guess this is not to bad since the updated v1.5.0_rc1 would most likely jack the <code>.php</code> page weight up to 64KB&#33;</p>
<p>Not every file in K2 has to be used since it is possible to turn some features off in its theme control panel. A lot of these included functions, modules and possible plugin inclusions I&#8217;m not using yet and some may never be used. I really have no need for <a href="http://www.flickr.com/">Flickr</a> and don&#8217;t even have an account. I&#8217;ll also have to trim some of the extra <code>if</code>, <code>else</code>, and <code>if function_exists</code> out not due to extra weight to the files but because the stuff is not being use and to help ease the script reading and finding of the things I <em>do</em> use.</p>
<p>I&#8217;ll be studying the both K2 and Script.aculo.us files for awhile so I can figure out something lighter in weight and a different theme since I&#8217;m not use to using someone else&#8217;s straight out of the box layout. Hopefully I can come up with my own layout sometime soon.</p>
]]></content:encoded>
			<wfw:commentRss>http://shu72.com/2006/10/07/pros-and-cons-of-k2-and-scriptaculous/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
