<?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>David Siegfried</title>
	<atom:link href="http://www.davidsiegfried.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.davidsiegfried.com</link>
	<description>web designer/front-end developer</description>
	<lastBuildDate>Sun, 22 Aug 2010 12:56:22 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Back to my web roots</title>
		<link>http://www.davidsiegfried.com/2010/08/back-to-my-web-roots/</link>
		<comments>http://www.davidsiegfried.com/2010/08/back-to-my-web-roots/#comments</comments>
		<pubDate>Sun, 22 Aug 2010 12:56:22 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.davidsiegfried.com/?p=78</guid>
		<description><![CDATA[Here and there I do a little pro-bono project as I imagine many web designer/developer types are prone to do. I am not sure what it is about the web but occasionally it demands of us our time and effort on something we know will never pay out. I don&#8217;t think you&#8217;d see the same [...]]]></description>
			<content:encoded><![CDATA[<p>Here and there I do a little pro-bono project as I imagine many web designer/developer types are prone to do. I am not sure what it is about the web but occasionally it demands of us our time and effort on something we know will never pay out. I don&#8217;t think you&#8217;d see the same thing from professionals in other fields. Imagine a free surgery, a free day in court; those things just don&#8217;t happen (and if they do I&#8217;m going to say with some assurance not as often as a free website happens).</p>
<p>I think this is because information, as Jeff Veen once famously (in my mind) said, wants to be free and those of us working on the web want to make it free. I also think this is because at our roots web designer/developers also want to make things for people who would appreciate them, money or no. We just all had to make a living too. And if this is not the case for most designer/developers out there it is at least the case for me. I do occasionally enjoy helping a good cause or a poor but deserving organization to a good website. I also generally like to see how fast I can do it.</p>
<p>When free is going on, why not try for a bit of speed? I think either of these projects took less than 6 hours, and without having to build in wordpress or any fancy jquery bells and whistles, these two sites harken back to my roots. When web pages were hypertext documents, the written word with links, a couple pictures here and there and a lot of love, quickly. The difference now of course, theses sites validate as XHTML Transitional, include stylesheets, not mustly old table structure and look considerably better than the pro-bono sites I had built when I was a young lad with fresh eyes to the web. Here&#8217;s to going back to my roots and a couple of old fashioned, pro-bono sites.</p>
<p><a href="http://pakkisteam.org"><img class="size-medium wp-image-79 alignnone" title="pakkisteam" src="http://www.davidsiegfried.com/wp-content/uploads/2010/08/pakkisteam-300x214.png" alt="" rel="postID78"  /></a></p>
<p><a href="http://lindelemedia.com"><img class="alignnone size-medium wp-image-80" title="lindelemedia" src="http://www.davidsiegfried.com/wp-content/uploads/2010/08/lindelemedia-300x217.png" alt="" rel="postID78"  /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidsiegfried.com/2010/08/back-to-my-web-roots/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Thoughts on An Event Apart</title>
		<link>http://www.davidsiegfried.com/2010/08/thoughts-on-an-event-apart/</link>
		<comments>http://www.davidsiegfried.com/2010/08/thoughts-on-an-event-apart/#comments</comments>
		<pubDate>Thu, 12 Aug 2010 04:25:30 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Personal]]></category>

		<guid isPermaLink="false">http://www.davidsiegfried.com/?p=76</guid>
		<description><![CDATA[I posted earlier last month about my excitement involving my chance to attend An Event Apart in Minneapolis this year. I just wanted to take a couple minutes and write my thoughts, impressions and opinions about the conference. As this was my first conference and I had heard so much about the quality (and of course the major [...]]]></description>
			<content:encoded><![CDATA[<p>I posted earlier last month about my excitement involving my chance to attend An Event Apart in Minneapolis this year. I just wanted to take a couple minutes and write my thoughts, impressions and opinions about the conference. As this was my first conference and I had heard so much about the quality (and of course the major names in web design, development, UX and content strategy) I was, at times, excited, nervous and delighted.</p>
<h3>First impression</h3>
<p>Nothing sets the stage for a promising day of learning like a gorgeous hotel in the middle of my favorite big city. The Hilton Minneapolis not only provided a great location, fantastic conference rooms and decent wifi (I never had any issues while others may have). An it never hurts that the first thing I had a chance to eat was a spectacular omelet, and while we are on the subject of food and venue, I&#8217;d like to make a note. There was so much delicious food available both days, I could have gone there just to eat. I was seriously in epic food heaven. I also found myself riding the escalators to the open 2nd floor balcony and gazing out at the busy city streets in-between speakers just because I could. The setting and food both get some erroneous amount of stars because they both pleased me.</p>
<h3>Speakers, teachers, comedians, story tellers</h3>
<p>So, the real reason to be there was not the plethora of food. The real reason to be there was because some of the largest brains in all of web design, front-end development, UX and content strategy. The beauty of the whole thing was that these people were not only extremely knowledgeable, they were approachable, gracious and generally good humored, fun folks. While some talks were drier than others, many of the talks kept me not only interested in subject matter but entertained as well.</p>
<p>I enjoyed every presentation but allow me to mention some highlights.</p>
<p>Ethan Marcotte (<a href="http://twitter.com/beep">@beep</a>) has been leading the charge for the last few months with a principal he calls adaptive design. The ideas that a <strong>flexible grid</strong> + <strong>flexible images</strong> + <strong>CSS3 media queries</strong> = a <strong>design for</strong> <strong>all screen sizes and mediums</strong> is one of the best ideas I have ever heard of in web design. I think, to the point that he is making, this is finally a design structure that is native to the web. No longer forced to stand in the shadow of print design this is a place where web design can be what it needs to be, it&#8217;s own unique type of art and science. Fighting screen sizes with a fixed layout has been a folly for years, fighting devices with a fixed layout is rather silly and honestly I had been hesitant to do it because it seemed so much like a losing battle. Finally, though I had been playing with this already, Ethan&#8217;s demonstration is a point I can look at and say, this is when it all changed, this is when web design stood up, got out of print designs shadow and moved on.</p>
<p>The other presentation I will mention, though there were many memorable ones (and if I had a mind to I could write many many paragraphs about each presentation), is the presentation by Minnesota native and epic content strategist Kristina Halvorson (<a href="http://twitter.com/halvorson">@halvorson</a>). As someone who does not specialize in the content strategy game (but wishes I had a much, much better grasp on it) I was absolutely floored by her presentation. Something that I battle with when dealing with clients is that I have no plan set in stone for how clients should attack their own content and how I should help them with it. Kristina helped by providing me with some tips on actually providing some direction, an outline and a process surrounding how a client could tackle their content and how I can get involved in assisting them in that process. It doesn&#8217;t sound like a lot, but some direction I obtained from her presentation plus knowing she has a book out on the subject is going to give me a lot better grounding in content strategy as I try to help clients attain their content goals moving forward.</p>
<h3>The personal touch</h3>
<p>One of the bigger things at the conference for me was the after party. The food was great, the speakers were awesome but you know me, I just want a beer. Well, not really. I really enjoyed hearing from others in the field and getting the &#8220;community&#8221; part of the web community figured out — and in person, not on twitter for once. I had the chance to talk to a lot of great folks, not near as many as I would have liked but, most importantly I got up a little courage to follow up with one of the presenters.</p>
<p>In my mind I am still the youngest one in the room. Was that the case at AEA MN? I suppose there could have been younger people or people my age all around, usually not, but it happens. I am sure whatever the case I am not that much younger or that much less experienced, but, it can get to feel that way. Fortunately I was inspired by another young person (still older than I am by a bit) who has really made a name for herself with her knowhow and success. I sat down to talk to Whitney Hess because I have found myself inspired by her success and notoriety. Would I like to be working at her level, well, I am not sure, but having the community know who you are and respect your thoughts would be a really nice thing. It was really easy to see how Whitney has achieved what she has. She was instantly friendly, open, smart, funny and really everything you would expect someone working at her level would be. We chatted about a lot of different things, but what I took from the conversation and the whole night was this:</p>
<ul>
<li>Essentially, being worried about getting out there and shaking hands is all in my head. I don&#8217;t look young, I don&#8217;t feel young, that is a barrier I have provided for myself. Even if you feel, or actually are 12, get out there.</li>
<li>If you&#8217;ve had a successful project you have something to teach someone.</li>
<li>Don&#8217;t expect the people with more experience to be unfriendly or unwelcoming of you and your ideas. I think at some level we all have a desire to pass on what we know and learn from those who know less.</li>
<li>And by the way, get your twitter handle on a card and hand it out in social situations. Great way to have people remember you by connecting afterwards on twitter.</li>
</ul>
<p>That was my experience with An Event Apart. Really a great group of people attending the conference, an awesome line up of presenters (although, I do still wish I could have had the chance to see Andy Clarke&#8217;s talk), and just generally an excited, passionate atmosphere that has carried on for me weeks afterward. I am still excited to be working on the web as a part of the web standards movement. It is an exciting time to be a web designer/developer.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidsiegfried.com/2010/08/thoughts-on-an-event-apart/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Everybody WordPress for the Weekend</title>
		<link>http://www.davidsiegfried.com/2010/07/everybody-wordpress-for-the-weekend/</link>
		<comments>http://www.davidsiegfried.com/2010/07/everybody-wordpress-for-the-weekend/#comments</comments>
		<pubDate>Tue, 20 Jul 2010 03:46:26 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[WordPress Development]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[widget]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.davidsiegfried.com/?p=71</guid>
		<description><![CDATA[So when I am not too busy on the weekend I&#8217;ll take a few hours to to sit down and work on a &#8220;just-for-fun&#8221; web project. Sometimes it is something for me, sometimes it is a learning project or a design project with no real aim, but recently my friend James Krantz and I have [...]]]></description>
			<content:encoded><![CDATA[<p>So when I am not too busy on the weekend I&#8217;ll take a few hours to to sit down and work on a &#8220;just-for-fun&#8221; web project. Sometimes it is something for me, sometimes it is a learning project or a design project with no real aim, but recently my friend James Krantz and I have been working on a wordpress custom WordPress site. The intent with the site is to give it as gift to some old friends of ours. They are currently using a blogger blog and we both think it is holding back their potential and creativity so we are building them a new wordpress site.</p>
<p>James and I occasionally team up on little projects as he has a knack for developing complicated back-end systems (including ruby on rails, ajax and php) where as I specialize in front end development, design and theming WordPress sites. In this case James is building a custom plugin that acts as a rating system for the blog posts. I am developing an adaptive layout and turning it into a WordPress theme but I am not going to let James have all the fun and do all the complicated development. So, when I needed a custom widget I gave it a go myself.</p>
<p>What I needed was a widget that would list all the authors who work on the blog with some easy to set options. Right now it has the ability to show or not show the number of posts, include or exclude the admin account and include or exclude people who have not published a post. I think there is room to add more functionality in the future but essentially the widget enacts this function:</p>
<pre><code>wp_list_authors( $args );
</code></pre>
<p>Read more about this function in the <a href="http://codex.wordpress.org/Function_Reference/wp_list_authors">wordpress codex</a>.</p>
<p><code>There are more features that could be added in the future but, for the moment the widget is just supporting what I feel are the most important options. The widget admin panel looks something like this:</code></p>
<p><img class="alignnone size-full wp-image-73" title="list-authors admin" src="http://www.davidsiegfried.com/wp-content/uploads/2010/07/list-authors-admin.jpg" alt="" rel="postID71"  /></p>
<p>It&#8217;s pretty simple but, to me, being able to make some simple functionality an easy to use widget is worth the time. I also know there are others who do not have the time to build such a widget. This widget also allows for users of a blog to add, change or edit setting in their sidebars, which is an important feature of WordPress. So, for your downloading pleasure, here is the code of my widget. Just install it like a WordPress widget and check the widgets menu area to title it and make changes. Enjoy!</p>
<p>download link: <a href="http://www.davidsiegfried.com/wp-content/uploads/2010/07/list-authors.zip">list-authors</a></p>
<p>Also, I will be adding this to a developer page at some point so check for updates if you are hoping for some more features.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidsiegfried.com/2010/07/everybody-wordpress-for-the-weekend/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HTML5 for Web Designers Review</title>
		<link>http://www.davidsiegfried.com/2010/07/html5-for-web-designers-review/</link>
		<comments>http://www.davidsiegfried.com/2010/07/html5-for-web-designers-review/#comments</comments>
		<pubDate>Sat, 10 Jul 2010 21:40:13 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Book Review]]></category>
		<category><![CDATA[A Book Apart]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Jeremy Keith]]></category>

		<guid isPermaLink="false">http://www.davidsiegfried.com/?p=67</guid>
		<description><![CDATA[I waited the full ten days for the shipping of A Book Apart&#8217;s first &#8220;brief book&#8221; HTML5 for Web Designers by Jeremy Keith. A Book Apart is a joint venture by Jeffery Zeldman, Mandy Brown and Jason Santa Maria dedicated to making short books, 90 pages in this case, for the folks on the front [...]]]></description>
			<content:encoded><![CDATA[<p>I waited the full ten days for the shipping of A Book Apart&#8217;s first &#8220;brief book&#8221; <em>HTML5 for Web Designers </em>by Jeremy Keith. <a href="http://books.alistapart.com/">A Book Apart</a> is a joint venture by Jeffery Zeldman, Mandy Brown and Jason Santa Maria dedicated to making short books, 90 pages in this case, for the folks on the front lines creating websites for a living. Because I match this target audience I thought I could weigh in on the book and the direction A Book Apart is taking.</p>
<p>I decided to just get my thoughts out on the book, the scope, depth and the idea of these short focused books.</p>
<h3>The Format</h3>
<p><a href="http://www.flickr.com/photos/davidsiegfried/4781308076/?addedcomment=1#comment72157624341428367"><img class="size-medium wp-image-68 alignright" title="html5-for-web-designers" src="http://www.davidsiegfried.com/wp-content/uploads/2010/07/html5-for-web-designers-300x225.jpg" alt="" rel="postID67"  /></a></p>
<p>The idea of a shorter more digestible book format is a winner for me, but it has its certain trade-offs. I think a book that I could read in just an hour and a half or so has a lot of worth because it is very obtainable for busy people. I generally group web design/development books into either &#8216;hammock readers&#8217; and &#8216;desk readers&#8217;, where the desk readers are books I have to work my way through lesson by lesson at my computer and hammock readers are those I read here and there in my free time but can take a few weeks reading at leisure. I think <em>HTML5 for Web Designers </em>has to be a part of a new subset. Even with a very short attention span you can set a couple hours and a simple goal of finishing the book while sipping some ice tea and taking it easy and be done before you know it. The book might not have all the examples you want, all the background info you might be curious for, but it gets you the basics and tells you where else you can look if you still need more information. And honestly, the fact that it is in print makes a difference for me, I don&#8217;t have he capital for an Ereader and sitting at the computer reading a pdf is a real drag.</p>
<p>For reiteration sake I think the format works, quick, to the point and something I can tackle in a couple hours without loosing focus.</p>
<h3>Jeremy Keith</h3>
<p>I have read a book by Mr. Keith before, I am actually currently working through his Dom Scripting book to reiterate my knowledge of the DOM and JavaScript to much success. Jeremy has a clear precise and very thorough approach to topics whilst maintaining a dually practical and theoretical viewpoint on the subject. For this book you can tell at times he had to cut himself off a little and leave a few things for further investigation, that being the point of a shorter book however, it seems to have went just fine and he even snuck in at least one bit of &#8220;whimsy&#8221;, a word that floats around the A Book Apart webpage, that made me laugh. I think they did get the right guy for this book.</p>
<h3>The Book, Apart?</h3>
<p>Trying to deal with the topic that as is pointed out covers a spec that is 900 full pdf pages in one tiny little book is a daunting premise, but, as the scope is directed at someone just on the design/front-end development end of things it becomes a bit more manageable. Like everyone I have seen a lot of HTML5 hub-ub around the blogosphere and even seeping into the higher traffic spaces like youtube but there were things of which I still had little understanding.  I had read about the semantics of HTML5 spec (of which there is an entire chapter dedicated) in some detail and have been using class names to simulate semantics like <em>article</em>, <em>section</em>, and <em>hgroup</em> for the last year or so. However things like canvas and all its potential are still a little lost on me. Jeremy gave me a little better grounding but it seems like something like canvas really needs its own book. I understand the basic intentions but I would not be sure after reading even how to begin working with it. Jeremy does have a chapter dedicated to using HTML5 today, but, I am not sure after reading this that I am really in any hurry to do anything but play with HTML5 right now. As things solidify towards 2012 and what sounds like the first version of implementation of the language I am sure I will be ready to make the move, but, I wont be using it for client projects until that time, at least, I don&#8217;t believe I will.</p>
<p>This book, though brief and at times missing some detail I&#8217;d like was high level and written with a standards compliment front-end developer in mind. More importantly has me very excited for HTML to become the norm on the web.</p>
<h3>Favorites/Final Thoughts</h3>
<p>My two favorite sections of the book were surprisingly the history of HTML section and the semantics section. I am a sucker for history and semantic mark-up so this might lead to a bit of a bias but I feel these areas were well flushed out and really contributed to my understanding of the goals of HTML5. It is not just a new language for the sake of a new language or to kill flash or any such nonsense, it is a new language to improve the internet for all users in many ways.</p>
<p>My last point is on the clarity I am finding in the web world this week and is only half related to my new understanding of HTML5 provided by this book. On Thursday on <a href="http://5by5.tv/bigwebshow/11">The Big Web Show</a> I watched Nicole Sullivan explaining that a good stylesheet is made out of many reusable widgets or pieces. So basically, if I have a certain type of arrangement of content I could potentially copy that and move it into another page in a different place on the page and not have to restyle based on its movement. There was a place in the semantics section of Jeremy Keiths book where I got that same idea in my head. HTML5 is working to create documents that are chunks of code that can exist anywhere in a web document and not have to be recoded or restyled. Clearly the Web is moving this way from everything I have been seeing and it is a result of content management systems and a whole host of really smart designers/developers who understand the potential power and flexibility the web STILL has as a medium (plenty of potential is, as of yet, unrealized). Personally the prospect (and practice) of this idea is a thrilling one.</p>
<p>Great job to everyone involved on this book, it was an enlightening experience in many ways and I look forward to more.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidsiegfried.com/2010/07/html5-for-web-designers-review/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Organize your CSS</title>
		<link>http://www.davidsiegfried.com/2010/07/organize-your-css/</link>
		<comments>http://www.davidsiegfried.com/2010/07/organize-your-css/#comments</comments>
		<pubDate>Fri, 02 Jul 2010 15:04:22 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Front-end Development]]></category>

		<guid isPermaLink="false">http://www.davidsiegfried.com/?p=58</guid>
		<description><![CDATA[I have been looking for ways to improve my stylesheets ever since I started writing them. The first stylesheets I had written were disorganized, unstructured and when I look back at them I usually don&#8217;t like what I see in so many ways. Writing CSS is one thing, writing good CSS is another thing. I [...]]]></description>
			<content:encoded><![CDATA[<p>I have been looking for ways to improve my stylesheets ever since I started writing them. The first stylesheets I had written were disorganized, unstructured and when I look back at them I usually don&#8217;t like what I see in so many ways. Writing CSS is one thing, writing good CSS is another thing. I have been working on this list for a while and I&#8217;d appreciate additions and feedback!</p>
<h3>Starting with helpful comments</h3>
<p>A great way to start a CSS document is to start it with a comment about various styles that go into this document. If you are familiar with wordpress, wordpress requires a comment to tell what sort of theme it is and who wrote it. I encourage another set of comments that list the fonts, colors and other mandatory style choices such as font weights and border thickness around images. Here is one I did a few sites ago:</p>
<pre>/* Fonts:
 * Header Font: Chollaunicase
 * Paragraph Font: Helvetica, "Helvetica Neue", Arial, sans-serif
 *
 * Colors:
 * background grey
 *         #CCCCCC
 *         rgba: 204,204,204,1
 * Logo Purple:
 *         #662d91
 *         rgba: 102,45,145,1
 * Nav Blue:
 *         #29ABE2
 *         rgba: 41,171,226,1
 * p grey:
 *         #4D4D4D
 *         rgba: 77,77,77,1
 * Highlight Orange:
 *         #F15A24
 *         rgba: 241,90,36,1
 * borders red:
 *         #ED1C24
 *         rgba: 237,28,36,1
 */</pre>
<p>Getting started with a section that explains some of these choices might keep you or another designer sane later in the game if maintenance is required.</p>
<h3>Let Eric Meyer help, please</h3>
<p>I hardly need to explain this one if you have ever heard of or created a reset style sheet. I have yet to find a need to make any additions to Eric Meyer&#8217;s reset stylesheet and it makes everything so much easier when you have it implemented. Save yourself time and energy and use this on every project. <a href="http://meyerweb.com/eric/tools/css/reset/">Eric Meyers Reset Stylesheet</a>.</p>
<h3>Validate</h3>
<p>Validation, not just for HTML anymore. The W3C also has a validation service for your CSS which doesn&#8217;t only help you make sure all your css is up to snuff (sorry browser hacks and css3 browser specific styling will not be valid) but it also makes suggestions based on styles you have repeated. I have used this at times to remove duplicate lines of CSS to create much leaner stylesheets. These suggestions can sometimes hinder your organization so I usually take them with a grain of salt, I am not a computer and I can not always make sense out of oddly organized CSS.</p>
<h3>Organize those styles</h3>
<p>I have found it very helpful to organize my stylesheets in a sort of mirror to the way I have organized my XHTML, with certain exceptions. I use a few different comments and indentations to do this allow me to demonstrate.</p>
<pre>/*-----------------------------------------------------
    #header  //houses the .logo, .nav and .search-field
-----------------------------------------------------*/</pre>
<p>First, I use giant comments to denote major sections of my CSS. I use the &#8220;#&#8221; selector or &#8220;.&#8221; selector to note whether the parent of this section is a ID or a Class attribute followed by the name of the class or ID tag and an explanation. I will use these for every section of my document when it is applicaable. NOTE: It is often worth while to create a miscelanious section for styles that work across the board such as fonts and other oft-used styles.</p>
<pre>/*----------------------------------------------
    #header //houses the .logo, .nav and .search-field
----------------------------------------------*/
#header{
   background: transparent url(img/header-background.gif) 0 0 no-repeat;
   border: 1px solid red;
   float: left;
}
   .nav ul{
      float: left;
      list-style-type: none;
      padding: 0 5px 10px 0;
    }
      .nav ul a{
         font-weight: bold;
         text-decoration: none;
       }
          .nav a:hover{
             text-decoration: none;
          }</pre>
<p>This part of my organization is where I copy the indentation from my HTML. I know that .nav is always contained in #header so for ease of reading later I will just use the same indentation I am using in my HTML elements. This way I avoid that long, hard to follow, vertical line of CSS and instead I have something indented that gives me a hint of structure without having to keep looking at the HTML. This all adds to a stylesheet that is much easier to work in.</p>
<h3>Give your CSS some order</h3>
<p>Since I began working on CSS I had thought there was a better way to list my seemingly random styles. I toyed with positioning properties being first or color and font properties being first but I had no real idea of why or how to list my styles. In the land or organization there is fortunately always a fall back. Alphabetize.</p>
<pre>.header{</pre>
<pre>  background-color: rgb(225, 225, 225);</pre>
<pre>  border: 1px solid rgb(218, 16, 45);</pre>
<pre>  display: block;</pre>
<pre>  height: 20%;</pre>
<pre>  width: 20%;</pre>
<pre>}</pre>
<p>From what had been a seemingly random lists of styles and properties, with just a little bit of alphabetization I can always quickly identify which style properties belong where without having to guess. When an entire stylesheet is formatted in such a way it makes finding the right style properties very quick and easy. This also removes the potentially random results you might obtain otherwise.</p>
<p>There are many advanced style techniques you can apply to a document and stylesheets can get long and at times verbose. Keeping in mind a simple set of organizational rules is something that has helped keep me sane when working with complex CSS documents. Though this is what I have found to be very effective there are a lot of different way these results can be achieved. I&#8217;d like to hear what you think and what if any of these best practices you use, or what others you find to be more effective.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidsiegfried.com/2010/07/organize-your-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>A sneak peak</title>
		<link>http://www.davidsiegfried.com/2010/06/a-sneak-peak/</link>
		<comments>http://www.davidsiegfried.com/2010/06/a-sneak-peak/#comments</comments>
		<pubDate>Wed, 23 Jun 2010 13:11:30 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[sneak peak]]></category>

		<guid isPermaLink="false">http://www.davidsiegfried.com/?p=59</guid>
		<description><![CDATA[I sometimes get too caught up in code and wordpress and on and on with all the semicolons and brackets, functions, objects, variables and all the rest to remember that I enjoy and at times can be quite good at (if only in my mind) designing the web experience. Of course, I have been trying [...]]]></description>
			<content:encoded><![CDATA[<p>I sometimes get too caught up in code and wordpress and on and on with all the semicolons and brackets, functions, objects, variables and all the rest to remember that I enjoy and at times can be quite good at (if only in my mind) designing the web experience.</p>
<p>Of course, I have been trying to achieve a <a href="http://dribbble.com/">dribble</a> account (a site to show off your current working projects) for quite a few months without any luck. You need to be &#8220;drafted&#8221; by a &#8220;player&#8221; or in regular web lingo recruited by a existing dribble user. So far no luck there so I have decided to put up a little sneak peak of my current top secret, free time, design project.</p>
<p><img src="file:///C:/Documents%20and%20Settings/David/Desktop/sneak-peak.jpg" alt="" /><a href="http://www.davidsiegfried.com/wp-content/uploads/2010/06/sneak-peak.jpg"><img class="alignnone size-full wp-image-60" title="sneak-peak" src="http://www.davidsiegfried.com/wp-content/uploads/2010/06/sneak-peak.jpg" alt="" rel="postID59"  /></a></p>
<p>I have even left in the original badly cropped, poorly cut-out stock photo for your enjoyment. Hopefully we will all see this in code any maybe sneaking into wordpress by months end.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidsiegfried.com/2010/06/a-sneak-peak/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Forget about the fold</title>
		<link>http://www.davidsiegfried.com/2010/06/forget-about-the-fold/</link>
		<comments>http://www.davidsiegfried.com/2010/06/forget-about-the-fold/#comments</comments>
		<pubDate>Fri, 18 Jun 2010 14:27:39 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[User Interface Design]]></category>
		<category><![CDATA[content aggregation]]></category>
		<category><![CDATA[information architecture]]></category>
		<category><![CDATA[the fold]]></category>
		<category><![CDATA[user interface design]]></category>

		<guid isPermaLink="false">http://www.davidsiegfried.com/?p=43</guid>
		<description><![CDATA[A lot of talk in the web industry at various times has gone into a debate over the issue of &#8220;above the fold&#8221; and &#8220;below the fold&#8221; or more commonly just &#8220;the fold&#8221;. This debate seems to pop up now and then and the general discussion always circulates around the importance of what falls above [...]]]></description>
			<content:encoded><![CDATA[<p>A lot of talk in the web industry at various times has gone into a debate over the issue of &#8220;above the fold&#8221; and &#8220;below the fold&#8221; or more commonly just &#8220;the fold&#8221;. This debate seems to pop up now and then and the general discussion always circulates around the importance of what falls above the fold vs. what falls below the fold, will users know to scroll? etc. Many people these days are calling this the &#8220;fold myth&#8221; for good reason. It is very apparent that the fold has little importance in the modern web because users scroll as a habit at this point.</p>
<p>My thoughts on this issue are two-fold (no pun intended). On one hand it makes me not want to write about it because it is a a dead issue. Studies conducted way back in 2006 (in a study testing 120,000 site  visits) revealed that yes, people are very comfortable scrolling (<a href="http://blog.clicktale.com/2006/12/23/unfolding-the-fold/">clicktale.com</a>). The other side of this issue, for me, is the fact that web professionals in their &#8220;don&#8217;t worry about the fold&#8221; kick have forgotten the real issue. The issue was 1/8th about space and 7/8th good user interface design and content aggregation; something that has been left out in a &#8220;don&#8217;t think, just make the page taller&#8221; state of web design.</p>
<p>Before I get into that discussion a quick look at the history of the fold.</p>
<h3>What is the fold?</h3>
<p>Briefly, for those who don&#8217;t know, the fold is actually a newspaper terminology carry-over to the web. The fold in newspaper represents just that, the line where the first page is folded over. On the web it represents what you see when you first land on a page before you ever scroll.</p>
<p><a href="http://www.startribune.com"><img class="alignright size-medium wp-image-56" title="thefold" src="http://www.davidsiegfried.com/wp-content/uploads/2010/06/thefold-230x300.png" alt="" rel="postID43"  /></a>The line that creates the fold is different for every screen size. Depending on the resolution of any particular screen the fold could be in a number of places.</p>
<p>The the case of the <a href="http://startribune.com">star tribune</a> site I&#8217;ve posted on the right, the fold happened to be at the line I have drawn on while the page goes further, I can not see it without scrolling.</p>
<p>As I mentioned before, users of the internet for the most part are not thrown by the idea that you have to scroll to see the rest of the page. Yes, you can design to lead people to think there is more to the page but for the most part people will know if they should scroll based on their scroll bar or just out of habit.</p>
<h3>The real issue</h3>
<p>So this has been proved over and over again right? Why am I writing about this now? Design your site to expand over the fold and people will scroll down to potentially view your content.</p>
<p>But I think we forgot the real reason anyone ever cared about the fold in the first place. People who held the fold as the line in which all things had to be held above or they would not get seen spent their time cramming all their content and junk into this tiny space. The result was a page with no relief for the eye (white space). These sites left no path for the eye to travel and were confusing for users. Now we are seeing an equal and opposite backlash of websites that are crammed with 5 to 10 times the amount of non-related content (with plenty of whitespace usually) and users have gone from non-scrolling and confused to scrolling for minutes without knowing where to go.</p>
<p>The key has to remain, that as someone building a website one has to create a path for people through the site, hold your users hand and make sure the content you have smattered thousands of pixels high is relevant content.</p>
<h3>Forget about the fold</h3>
<p>Now we know, users scroll and we are taking advantage. Sites now can space things out and leave viewers and readers visual relief in the form of white space. But we sometimes forget, especially on home pages, that users need to be led by the hand through the website. In the same way films present stories with a flow, leading viewers from point A. to point B. and so on, we need to do this with our web sites. Websites are not about how much visual noise we can create above or below the fold but it is about clarity of message and content aggregation. Users of modern websites need structure and guidance in the same way as a story arc in a Hollywood movie (a sad topic for another day). Don&#8217;t overfill a page of any size with unrelated content. Your understanding of your viewer should prescribe one or two paths through the site and cleaning up all the extra visual noise and unrelated content can go a long way in engaging visitors rather than confusing them (you will notice when it comes to mobile design people are discovering how much unnecessary noise their sites really have).</p>
<p>The point is, considering the page fold and what falls above or below it seems to be attacking the problem from the middle when it comes to organizing a website. Start with what is important on the page (content first as always) and how it leads users down but more importantly through your site. Hitting a website and seeing a long page with no particular focus is a surefire way to confuse your users and move them off of your site rather than into it, and then who cares what&#8217;s above or below this mythical fold line?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidsiegfried.com/2010/06/forget-about-the-fold/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Typekit problems and solutions</title>
		<link>http://www.davidsiegfried.com/2010/06/typekit-problems-and-solutions/</link>
		<comments>http://www.davidsiegfried.com/2010/06/typekit-problems-and-solutions/#comments</comments>
		<pubDate>Thu, 10 Jun 2010 04:12:50 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[@font-face]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[typekit]]></category>
		<category><![CDATA[typography]]></category>
		<category><![CDATA[upcoming site work]]></category>

		<guid isPermaLink="false">http://www.davidsiegfried.com/?p=40</guid>
		<description><![CDATA[If anyone is keeping up with my progress on this site in the trial/soft-launch period of the new davidsiegfried.com here is what I have learned this evening. typekit.com I have been having some problems with typekit and the problems were two-fold. First, in case you are unaware of typekit, it is a web application that [...]]]></description>
			<content:encoded><![CDATA[<p>If anyone is keeping up with my progress on this site in the trial/soft-launch period of the new davidsiegfried.com here is what I have learned this evening.</p>
<h3>typekit.com</h3>
<p>I have been having some problems with <a href="http://typekit.com">typekit</a> and the problems were two-fold.</p>
<p>First, in case you are unaware of typekit, it is a web application that specializes in helping web designers bring great fonts to the modern web. Essentially I can choose from their screen approved, impressively sized gallery of great fonts and through a little javascript and more importantly some great CSS3 techniques you see renderings of text you have never seen in your browser unless it was a painful and tedious image (or flash). The main reason for using typekit is I don&#8217;t have to worry about the legality of which fonts are approved for this process and which aren&#8217;t. Typekit has handled that for me. Thank goodness.</p>
<p>The technology, namely CSS3, as I understand it does something along the lines of caching a font file on the users computer and then that font file does the work just as a normal font file installed on your computer. This means any browser that supports the CSS3 @font-face rule gets essentially native fonts the likes of which were not possible before. So for you Safari, Chrome and Firefox users, you are enjoying &#8216;Brevia medium-italic&#8217; right now and I hope it pleases you as it does for me.</p>
<p>The problems occurred when I set up typekit with &#8216;Brevia light-italic&#8217; aimed at my site without really understanding how it worked. In Firefox, where I do my development the fonts rendered perfectly and at this point I am largely unsure why, but, Firefox will occasionally do a little intuition work and make things that are broken look a-okay. Well, Chrome and Safari were having none of it and they refused to give me any &#8216;light&#8217; or &#8216;italic&#8217; and were presenting boring old &#8216;Brevia normal&#8217;. Lame indeed.</p>
<p>With a little help from some speedy tech support I was directed to <a href="http://typekit.zendesk.com/entries/121725-using-multiple-weights-and-styles">this page</a> where I learned that I can&#8217;t just expect typekit to do all my work for me, I had to specify the lightness and italics in my stylesheet just like a normal font. So I added some really basic CSS properties like this:</p>
<pre>p{</pre>
<pre>  font-weight: 200; /* for lightness */</pre>
<pre>  font-style: italic; /* for italics */</pre>
<pre>}</pre>
<p>All of a sudden things started working across all browsers and WHAMMY! (like the sports guy in anchorman) everything came together for me.</p>
<h3>A typekit problem that wasn&#8217;t my fault</h3>
<p>So, feeling fairly happy with the new results I went to try to solve my other typekit problem. I was using a script font for my headers called &#8216;Bistro Script Web&#8217;. Honestly it was the best script font I had ever seen. However, it seemed to render about 15 pixels lower than where I wanted it if I was viewing it on a mac. I wasn&#8217;t sure what the problem was so, I sent a support email to typekit support and got this response:</p>
<address style="padding-left: 30px;">&#8220;Bistro Script Web, the font, looks like it has some problems in that it  is spaced inconsistently across browsers. We&#8217;re going to address this  eventually, starting with a blog post in the near future that will  explain why fonts are sometimes spaced so. Meanwhile, I&#8217;m sorry for the  inconvenience.&#8221;</address>
<p>So, I went ahead an replaced that font with a similar font called &#8221;Adage Script&#8217;. It has some of the same scriptyness in some ways but it is a little less forceful in its stroke and makes me a little less happy. Still, considering there isn&#8217;t another good option I am pretty happy with the results. Also, a big thank you to A.J. Laventure for the assist with how things looked on the mac.</p>
<p>With typekit under control I did some other minor updating but, for now the site remains in many ways unfinished. On my short list for the week is:</p>
<ul>
<li>Correct links for the right sidebar on the about page.</li>
<li>Addition of social media icons on the contact page.</li>
<li>Small social media icons for the footer and some text like: <strong>friend, follow or stalk?</strong></li>
<li>I&#8217;m not totally sure I am done with the twitter flickr sections on the about page and they may separate themselves and appear on other pages in addition to the about page.</li>
<li>I have to dig up some blog posts I wrote a while back about facebook taking over the web (a little dated but fun) and a css project in easy cross-browser builds (even for ie6).</li>
<li>I still need to resolve the &#8220;share with friends&#8221; links on the blog page.</li>
<li>Improvements to the ie8 stylesheet.</li>
</ul>
<p>Plenty of work to do, but I am feeling better about people coming by and taking a look at my site now that some of the main problems have been taken care of.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidsiegfried.com/2010/06/typekit-problems-and-solutions/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>An Event Apart Minneapolis</title>
		<link>http://www.davidsiegfried.com/2010/06/an-event-apart-minneapolis/</link>
		<comments>http://www.davidsiegfried.com/2010/06/an-event-apart-minneapolis/#comments</comments>
		<pubDate>Mon, 07 Jun 2010 15:51:34 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Career]]></category>
		<category><![CDATA[an event apart]]></category>
		<category><![CDATA[learning]]></category>

		<guid isPermaLink="false">http://www.davidsiegfried.com/?p=32</guid>
		<description><![CDATA[I am super, phenomenally excited to announce that Creature Works Labs, my current employer, has decided to send me to An Event Apart Minneapolis. As someone who is more or less addicted to learning all there is to know about how to create great web experiences this is something that will really bring a year [...]]]></description>
			<content:encoded><![CDATA[<p>I am super, phenomenally excited to announce that Creature Works Labs, my current employer, has decided to send me to <a href="http://aneventapart.com/2010/minneapolis/" target="_blank">An Event Apart Minneapolis</a>.</p>
<p>As someone who is more or less addicted to learning all there is to know about how to create great web experiences this is something that will really bring a year of learning and perfecting my web talents and skills to a wonderful pinnacle.</p>
<p>I think this is because I am ambitious enough to want to be speaker / writing in the future. What subject will I try to tackle if I were to try to write or speak or shine some new light on a subject? I am not sure. I have a bit of the teaching bug in me that my Grandfather passed down to my mother. I certainly don&#8217;t feel the need to teach right now, I have so much to learn it would be silly to think I could teach anyone. But somewhere deep down, I know that one day I would like to be a present, teacher, writer myself.</p>
<p>The great thing about <a href="http://aneventapart.com/" target="_blank">An Event Apart</a> is that they have collected the absolute best teachers and writers from the field. Minneapolis will feature <a href="http://zeldman.com" target="_blank">Jeffery Zeldman</a>, <a href="http://www.meyerweb.com" target="_blank">Eric Meyer</a>, <a href="http://simplebits.com/about/#about-dan" target="_blank">Dan Cedarholm</a>, <a href="http://www.lukew.com/" target="_blank">Luke Wroblewski</a>, and <a href="http://adactio.com/" target="_blank">Jeremy Keith</a>, among many others. I have read one book from each of the amazing web minds named above and they have all impacted the way I work and enhanced my love for the web medium. Having a two day conference where I will hear the words right from the horses mouth(s) is just a stunning culmination to the last year of reading and learning.</p>
<p>I am stunned, elated, excited, and really ready to learn some more, grow some more and meet some great people. Hang on, looks like there is food too, looks like I&#8217;ve died and am in heaven. Please disregard this post as postmortem narratives filled with hope and ambition are usually fairly depressing pieces.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidsiegfried.com/2010/06/an-event-apart-minneapolis/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>365 Days of Web</title>
		<link>http://www.davidsiegfried.com/2010/06/365-days-of-web/</link>
		<comments>http://www.davidsiegfried.com/2010/06/365-days-of-web/#comments</comments>
		<pubDate>Sat, 05 Jun 2010 13:20:23 +0000</pubDate>
		<dc:creator>David</dc:creator>
				<category><![CDATA[Career]]></category>
		<category><![CDATA[education]]></category>
		<category><![CDATA[growth]]></category>

		<guid isPermaLink="false">http://www.davidsiegfried.com/?p=7</guid>
		<description><![CDATA[About a year ago I decided the internet was the way for me. Though I had spent four years of college dancing around the subjects not altogether unrelated to the web (which further blog posts will discuss) and my entire life from about the age of 12 enjoying working with computers, the web and other [...]]]></description>
			<content:encoded><![CDATA[<p>About a year ago I decided the internet was the way for me. Though I had spent four years of college dancing around the subjects not altogether unrelated to the web (which further blog posts will discuss) and my entire life from about the age of 12 enjoying working with computers, the web and other media (and there will be some rants about the problems higher education can  incur), I had never quite said to myself that I should do &#8220;web design.&#8221;</p>
<h4>You know where I am, but how did I get here?</h4>
<p>The fact that you are reading this post and have come to this site give you the end of the story. At some point I clearly either accepted that web was where my skills fit or rather I embraced the career path and realized it was not only a career but a passion (which is actually the case). Also, as someone who fancies a good story about how we got where we are today, I&#8217;d like to take a moment and explain what has happened in the last 365 days of web also known as the last 365 days of my life.</p>
<p>Mind you 365 days is not an exact number, but I think I am close enough to round down (about 3 weeks) to make it a nice round year in my life.</p>
<h4>The beginning of the journey</h4>
<p>365 days ago I was kid with a Film/English/Art BA from <a href="http://www.augsburg.edu">Augsburg College</a> saying to myself: &#8220;Now what do I do?&#8221; I had worked doing graphics for a small company, I had worked at a health club doing customer service / cleaning duties and I had a terrible economy crashing down around me. I should have convinced myself about three years earlier that I didn&#8217;t have the nerve or the desire to pursue a job in Hollywood working my way to the position I would still probably love &#8211; editing video; further I planned to try to make a living so that great American novel was not forthcoming in the near future despite my love for writing.</p>
<p>Well, I had to get a job and I had my criteria set: &#8216;see if I could find something remotely creative in a business setting.&#8217; After searching the best jobs to apply for were in the web field and I decided to give it a shot as I had done some (bad) web work before. I also found out how little I knew. It was at about that time I funneled all of my waking hours into a medium that seemed to give me a fighting chance to survive in life, and my passion bloomed from there. 365 days ago I only knew HTML 4.0 and I was comfortable in the adobe software suite and that was it. I still thought tables were the way to go.</p>
<h4>My new web</h4>
<p>In three weeks I learned tables were dead, there was a thing called web standards and you could make stuff look awesome with CSS. This was both shocking and enlightening news and over those three weeks 2 things happened. I was prepared for my first job which happened to start at the end of that 3 week period and I discovered the new web as I started experiencing it was totally awesome. As an aside, I did have other skills the position required and I did not totally lie my way through the interview process. I simply was met by a team that liked my combination of skills and abilities. It was also an internship so some learning was part of the job.</p>
<p>From there I had a mentor at the internship (and I thing mentor-ship will make an appearance as a later post). Mike pointed me to so many useful resources I had not been aware of until this point. <a href="http://www.alistapart.com">A List Apart</a>, <a href="http://konigi.com/">Konigi</a>, <a href="http://www.uxbooth.com/">UXbooth</a>, <a href="http://www.boxesandarrows.com/">Boxes and Arrows</a>, so on and so forth a list of web resources I still keep and maintain. I stuffed my feed reader, aligned my twitter account with web designers and developers and kept reading more books and exploring new technologies.</p>
<p>I have continued learning and practicing my skills working as a Front-end Developer/Designer at <a href="http://www.creatureworks.com">Creature Works Labs</a> in Waconia, Minnesota and on my own personal side learning projects.</p>
<h4>Now what?</h4>
<p>I have spent countless hours refining my skills working on the web. There have been some distractions here and there, what with a Wedding and a College Graduation also taking place in the last year, not to mention my new apartment, countless visits to my wife in Sioux Falls, SD while she completed her internship and my four nephews, friends, other family so on and so forth I have had a busy year. Next year wont have fewer things going on, but I will continue to spend my free time learning new technologies and now with the blog live, I will begin passing along what I learn and my thoughts on web technologies, theory and emerging trends.</p>
<p>Here&#8217;s to more of the web in 2010. Thank you all for your support, I am looking forward to continuing to add to the web community in my second year on the web.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.davidsiegfried.com/2010/06/365-days-of-web/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
