July 22, 2004
Nearly there
I've finished up the rest of the content pieces, now its just time to tidy up.
Still left to do:
- Link up the footer
- Create the Site Map
- Link the Logo to the homepage
- Clean up CSS
- Break up into separate files and include in main file.
- Add previous entries to bottom of homepage
- move .htaccess file to inspirednonsense.kingproduction.com so I can forward everyone to inspirednonsense.com
Future Expansion
For the sake of getting this redesign live, I've opted to include my portfolio information at a later time.
Launch?
If everything goes according to plan, the site should be live by this weekend!
July 08, 2004
Recommended Section
I've got the Recommended section up and running on the test server.
Development is slow going the past week (as is my blog writing!) but I did get the Recommended section ready. I'm hoping to get some fedback at the meetup tonight and probably some questions as to why I'm not using WordPress because Alex King is supposed to show up!
Anyway, the Recommended section breaks down exactly as I thought it would, with my only addition being "Recently Added" to the recommended page. Other than that, everything looks pretty good (other than the design of the "Latest" part that I'm going to continue working on) and I'm ready to try and finish up this dam thing!
About, Portfolio and Contact is all that's left.
July 01, 2004
Weblog in Place
I've spent the past few days adapting my new style to a test site on my server.
What a ride. I can safely say that I have never worked this much in MovableType, and I'm not even done yet. Here's the blow-by-blow:
Homepage
This one was the easiest to convert because I did most of the work on the prototype. Just replacing content with MT tags and that pretty much did it. I also turned the main navigation into a php include for easier maintenance.
Master Archive Index
This required a bit of styling work. First, the definition list I wanted to use for the Previously Inspired section was too ambitious and just wasn't going to work so I swapped into H5 and P tags. After a little styling I moved onto the Search elements and laid them out (found out that to get the submit button and search box to line up you need to set the vertical-align on both to middle). Another fairly quick swap-out of content for MT Tags and I was ready to rock.
Category Archives
This was super quick. Just changing out some of the MT Tags, remove the category listing at the bottom, and publish.
Individual Archives
Damn, this was much tougher than I thought it would be. Moving around some of the tags was the easy part. Figuring out how to get the Comments to alternate styles, not. I think I spent the better part of my total time on this figuring out how to do the simple arithmetic in PHP of testing the comment number is divisible by two (please note, I am not a great programmer. I can get it to work, even work well, but until now I had only come close to mastering Javascript). After some research I found the fantastic modulus operator! After that, it was a simple if/else statement and I was set. I had already reconstructed the comment form with labels on the current site, so I plugged it in, did a little more styling and voila, Individual Archive. I also used my first MTElse tag to show when I've disabled the comments.
Comment Preview and Error Pages
By far what should have been the easiest was the most time consuming because I was missing the clearing div on the Wrapper element and my background was MIA. Before I discovered the true problem here, I had researched every which way to get the preview out of the CGI, even going so far as to figuring out how to rebuild this function myself in PHP. Through a stroke of luck, I saw the error and wasted a days worth of research (though Dave Shea says he's got a way to actually do it, and I'm looking forward to his write-up when he's got it done).
Worth Your Time
As promised, I turned this into a separate weblog and am including the content on the homepage as a PHP include. I chose the PHP include over MTSQL because I didn't want to have to rebuild the homepage every time I added new links. The main archive page was an easy adaptation of the master archive index template, and I decided the best way to continuously archive was monthly listings, no individual archives.
Whats Left
Outside of some small formatting and graphic work for final touches, the big tasks left are all the static content (About, Contact, Portfolio, Truly Inspired) and another weblog for the Recommended section. Whew, this is definitely my most complex MT site yet.
June 27, 2004
Homepage Prototype
I couldn't wait any longer, so I started fleshing out the HTML prototype for the homepage last week, and all I can say is that it was not easy.
This took me much longer than I anticipated. Mostly due to many failed experiments with layout.
Layout fiasco
My first idea was to experiment with the Negative Margin layout ideas I had read about in ALA. This really appealed to me because I wanted to keep both content areas fixed to an em length, while having the whitespace around each fluid. I though could try letting both columns float around a bit according to the browser window's width. Alas, it was not to be. I tried to troubleshoot, but gave up after an hour because I just wasn't in the mood to find out why IE hates percentages in combination with em width or margins, or something. So it was time for plan B.
I was sticking to the plan of having em fixed width columns, but this time with a simple two-column float layout. I almost go this one to work, but again I ran into trouble with IE, mostly around getting the column background to flow to the bottom of the page. Time for plan C.
Third time is a charm. I punted, using Dan Cederholm's trick for getting the column backgrounds to flow to the bottom of the page, but to do this I had to settle on a fixed width layout. So I set the width to 700px (don't ask me why I picked that particular width, it just seemed to work out that way) and was off to the races. A little work here, a little trickery there and viola, I had pretty damned close to my homepage comp!
Still Found Room for EM's
Even though I had to ditch em's for my container widths (kind of sad about that, but hey maybe in rev.2), I was still able to maintain the text in em's for easier text-sizing in IE, and also use em's for setting white space whenever it was adjacent to or dictated relative to the size of the text (margin's between list elements, paragraphs, etc.). I only used pixels to define margins or padding related to the fixed width containers. In doing so, I managed to build a stylesheet without any hacks. Yay!
The Trip Has Only Begun
I can't say that I will be able to stay hack-less (though I will try to do so, if only for the challenge of it), because I have a whole lot more website to build. First I plan to finish out the weblog styling (all the archive levels) and translate them into MT Templates, then I need to finish up my comps for the rest of the site!. And at some point I need to write an entry so I'm not neglecting my blog.
Back to the grindstone
June 21, 2004
Archive Compositions
Using the homepage comp, I was able to create compositions for the archive levels of the main weblog.
Included in the PDF is the Main Archive Index, Category Index, and Individual Archive.
Nothing truly notable or different from the wireframes except the absence of the Monthly Archives, which I have decided not to provide because I'm not convinced of their use in this particular log.
I am going to try and find a different set of bullets for the category links on the right hand side for some visual distinction from the "Worth Your Time" section on the homepage. I also really enjoy how the alternating colors on the comments field provide easier visual separation on Stopdesign, so I've incorporated that idea into my Individual Archive page.
Off to the other pages...
June 20, 2004
Homepage Composition
I've been laboring over it for the past couple of days, so its time to post my homepage composition idea and move on to the next comps.
Lots and lots of work here. I'm not a graphic designer by trade so it takes me a while longer than some, but I'm pretty happy with the results.
I started with the wireframe. I added the graphic idea I've had for some time now (the scan of the refrigerator magnets) and flipped through my Color Index book for about an hour before I settled on a color idea (note: I will probably try out some different color schemes as due diligence, but I do like this one).
After that, the rest just started flowing, and slowly a website started to form.
Any feedback?
June 15, 2004
Homepage and Category Index Wireframes
I've completed some wireframes for the Homepage and Category Index pages.
With the homepage, I'm starting to get a clearer idea of how I want to lay out Header, Footer and navigation elements that will apply throughout the site.
What I am having trouble with is deciding if the H1 on these pages should be the Header or the Page title (there is a good discussion about this in
the SimpleQuiz section of SimpleBits), and I think I'll subscribe to the camp that H1's are for page titles not headers. I'll have to modify my document structures later.
I also don't see any real need for date based archives at all. I can't see how foraging for content by date would be relevant for any user, especially with the Search readily available at that point and Categories providing better framing of the content therein. So I'm going to take the monthly archives off of the Master Archive page and replace them with the category list so it is consistent with the Category Index pages.
Couple more to go (Portfolio and pages within) and I'm ready to start comping!
June 11, 2004
Wireframes
First pass at wireframes for most of the content pages (sans Homepage).
The PDF contains wireframes for:
- Truly Inspired Page
- Simple use of Headings and Paragraphs with Links to highlight the most popular entries (so far, only the MT Project Management series!)
- Master Archive Index
- I took inspiration from a few sources here. I liked the overall layout of Dan Cederholm's SimpleBits archive page and I really liked how the categories have descriptions in the archive on Yellowlane.
- About Page
- No real inspiration here, though it does pass resemblance to the about page for Mezzoblue. But I think About pages are really in the eye of the beholder.
- Wandering Archive
- Now this is straight out of Keith Robinson's Quicklinks, Greg Storey's Longboard, and Zeldman's Sock Drawer. I like the descriptions on Quick Links so I'll leave them in, but I won't be allowing comments because it seems unnecessary.
- Recommended Index and Category pages
- This is entirely my own. I will have four windows on the recommended index page, all showing the latest and greatest for each section, then a category index archiving all of each.
I've also done something new for me here. I started working out document structures and attaching them to the wireframes. In the past I've struggled when trying to find the best place to start working out document structures, but it felt natural today when I started putting them next to the wireframe. It just made sense.
Still outstanding are wireframes for the Main weblog archive pages (category, Month, Individual), Portfolio pages, and the Homepage.
June 10, 2004
Architecture Diagram, Version 2
With a more developed content map, I've further defined the architecture of Inspired Nonsense.
The biggest change in the second version is that I've chosen that a separate weblog will be the best way to maintain the Recommended section so I can easily keep track of categories and such.
I also think I'm going to make the "Wandering" (still not in love with the title) section as a category of the Inspired Nonsense log (ala, 7 Nights), to reduce the number of logs that make up the site. I'm still not sure though what might be easier for me to update now, and in the future when redesigning.
June 09, 2004
Content Map Updated
I've updated the content map for the site with a better idea of the pages I will need, breaking down content accordingly.
With the first architecture ideas in place, I'm able to better assign content to specific pages. Therefore, I added a new worksheet to my content map, breaking out the pages within each section and detailing status information next to it. I will use this when making wireframes.
June 07, 2004
Architecture Diagram
Using the labels from the content map, I've created the first draft of an architecture diagram for Inspired Nonsense.
I think I'm getting a lot closer to exactly what I want on this website, and how I want people to move through it.
I want to keep the navigation options as simple as possible, limiting it to 5 options (Archives, Truly Inspired, Recommended, Contact, and About). Without focusing too much on it, I also want to include my portfolio (which is mostly intranet work, hence the login to avoid ownership issues). After some investigation into other personal sites/weblogs I found Jason Kottke's solution of putting it under About and liked it, so I stole it.
I also wanted to isolate articles that are particualrily high traffic, or I think were pretty damn good (e.g. Manage your Projects with Movable Type) so they are easier to find.
I think the best way to manage the "Wandering" links will be with a seperate weblog and integrating it with the main site using MTSQL. I'm debating doing the same for the recommended links page, but I'm not sure if that is overkill for a links page or not. I think my decision will hinge on how the wireframes start coming out.
June 01, 2004
Category Map
I've created a content map listing all possible content for Inspired Nonsense, then organized and labeled it.
On the Excel File, the first worksheet lists all the possible content I want (at least for now) on my site into a single content bin.
In the second worksheet I began grouping the content according to like topics, using rough label ideas for titles.
On the final worksheet, I arranged my content further after reviewing other personal websites. I also gave a little more thought (though not much) to the labels of each category.
May 29, 2004
Demo of Project Management System
I implemented a demo of the project management system I detailed in the series on how to "Manage your Projects with Mobable Type".
I needed a demo for the final piece of the series, and I needed to organize my development log better. So here is a rough translation of what I use at work religiously for keeping track of my projects.
Now I can start up the development of Inspired Nonsense again (and try to keep it to some deadlines!).
May 16, 2004
Housekeeping
I did just some clean-up on the comment links (removing the pop-ups), and adding a simple navigation in to tie the site over until a full nav can be put in.
It's been over a week, and I needed to do something to keep my site moving forward. So I implemented a few little measures, and plan to revisit my "Fun with Design Tools" series so I can keep the development of this site moving.
May 06, 2004
Using MTSQL
To keep the Design Updates in a separate log, but also incorporate them into the main site, I learned how to use Brad Choate's MTSQL plugin.
I wanted to keep a running log of design updates separate from my actual weblog because I don't feel the little updates have a place in the big log. But I wanted to keep track of them somewhere and make that available for others to see.
I thought of using another category, and find a way to exclude it from showing up. As I researched this options, I came across Brad's SQL plug-in and I have to say that it is a stroke of genius. The sheer possibilities this opens up in organizing my website here, and others to follow is astounding by simply being able to bridge the gap.
So I set up a separate log, deeper in the Inspired Nonsense site specifically for logging my updates, and used MTSQL to pull in the EntryBody of the latest update, as well as the date from this MT log, into the homepage of the other as an update.
I'm almost certain I will end up using this plug-in again as I continue my design process.
May 05, 2004
Column Swap
I swaped the columns on the page so the links are on the right, placing the focus of the site on the content.
It seemed that most weblogs I've seen have their content on the right hand side. While the left hand side of the screen seems apt for navigations on most sites, it attracts too much attention on weblogs and takes away from the focus of the page, the log.
I like the page much better this way, and I think it will stick for the final design.
May 04, 2004
Legible URLs
It took me a little bit to implement, but I changed the default file-naming conventions for MT using a method from Elise.
While there are varying degrees of implementation of this method, most weblogs I frequent had one thing in common, legible URLs. And while the legible filenames are a good boon to usability and minor help with SEO, the real reason I did this was to automatically organize all my entries in folders by category. A nice structural cohesion will make it much easier to manage this content in the future if I decide to delete entire categories, or anything else I can't think of right now.
So, for the code copiers here's what I put in place:
For the Individual Archive I used:
<$MTEntryCategory dirify="1" $>/<$MTEntryTitle dirify="1"$>.html
For the Category Archive I used
<$MTArchiveCategory dirify="1" $>/index.html
May 03, 2004
Strategic Definition for Inspired Nonsense
Since this is a personal site, the strategic definition for this was really fairly easy. I plan on updating this further as I start getting a better concept of what the user needs might be for this site.
April 26, 2004
Font-sizes and Categories
I had to clean up the look of the site a little, I just couldn't stand waiting until I had my plan in place.
Font-sizing
Today I moved all of the fonts in the stylesheet to "em"s. There are many options for font-sizing on the web:Keyword Based, Pixel Based, Picas, Points, you get the idea.
My favorite technique as of late is prescribed by Owen Briggs, that calls for setting the body element to a percentage (76% is his recommendation after testing 276 configurations of platforms and browsers), and using em units in CSS to define all of the font-sizes on the page. I like how it changes uniformly with the text-size setting in the browser. I've also starting to use ems for my margin settings.
Categories
I've never actually used this function of MovableType before, so there is more work to be done, but I've created a list on the left hand for Categories, and have started using them for my entries.
Next Up
I still need to get a plan up here, even a very informal one, but I think the next step will be defining document structures for all parts of my site and adding some very important content to the homepage (namely Internet Radio).
Till next time...