Journal
SonSpring Site Relaunch
24 August 2005 › 28 comments
Time to Party
Well, as it has no doubt become apparent, SonSpring has been re-launched, with the all new Textpattern 4.0 under the hood. I pushed it live a bit early, as Scrivs said my place-holder was creating some RSS problems for 9rules. I was holding off on making an official announcement until I was sure I worked out all the kinks in the new design and fresh TXP installation.
This site is now up and running on Dreamhost, rather than the cruddy 1and1.com Pro Preview hosting plan. It was good while it was free, but it’s not something I would really want to pay for. Dreamhost allows for unlimited MySQL databases, whereas 1and1 only allowed for a single database (talk about a bottle-neck).
To celebrate the hosting switch, as well as getting the great web design job at Albertsons, I will be giving some back to the community at large. So, if you’ve been thinking about getting your own site, but have been putting off a decision, I’m going to give you a $50.00 discount off any hosting plan. All you have to do is put in the promo code SonSpring when signing up at Dreamhost.com, and you will get an instant discount. This applies only to new customers, but the offer is good indefinitely. So, take your time to decide.
Code Tips
So, with that bit of business out of the way, I would like to thank Peter, Lea, and Craig for their help answering all my Textpattern upgrade questions. Also, let it be known Jonathan is the man with MySQL database tips. The new site also makes use of the following plugins: glx_gravatar, kgr_safe_excerpt, rss_suparchive, and zem_contact. The navigation bar involves some funky CSS I cooked up, with inspiration from Craig’s method on SolarDream.
Using Textpattern’s ability to generate the current section name dynamically, I put a class in the <body> tag that looks like this: <txp:s /> then, I added a class to each of the navigation links, n1 through n8. Then, by using CSS I was able to make a conditional that would check the section and us it to style the nav as selected. Here is an example…
body.journal #nav a.n1
{
background: url(/img/arrow.gif) no-repeat top center;
border-top: #996 4px solid;
}
For those of you who are more savvy, I expect that you’d want to dig around in my CSS a bit more, which is fine. Just remember, inspiration is inevitable, but stealing is wrong. The geeks out there may be wondering perhaps why I named my #nav classes n1, n2, n3 etc. Well, for two reasons actually.
First, I wanted to reuse them for more than one section. For instance, when on the archive section, you are technically still in the Journal area, so both will show journal as selected. Secondly, I wanted the numbering to correspond with the access keys for this site, and I put the N before each number since CSS classes cannot begin with a number.
For those of you scratching your head, wondering what an accesskey is, it’s simply a way to make navigation more simple and accessible. So, if you press Alt + 1, 2, 3 … 8 you will be able to navigate the site by the various sections represented on the navigation bar. Also, if you want to get back to the home page at any time, you can press Alt + 9. Hopefully this will make things a little easier for everyone.
While I have used a bit of import@ and single-quote trickery to hide styling from Netscape 4 and IE5 on Mac, I am proud to say that this site does not contain a single CSS hack, and is fully alphabetized, categorized, and in all ways tidy. In fact, the only thing I’ve noticed is that Safari doesn’t seem to like the Flickr photos, but I think this is a problem with how Safari handles JavaScript, and not a problem with my site. If anyone knows how to fix this, let me know.
Note: Safari problem has been fixed. I just switched to <div id="flickr"> instead of a <p> and this seems to work. Oddly, it was only a problem when it involved JavaScript. All the more reason to use Firefox, even on a Mac!
If you happen to notice any other bugs, or have any suggestions for how I can further improve the site, let me know by pressing Alt + 8 and send me an email, or just leave a comment. Have a pleasant time looking around, and enjoy your stay.
Discussion + Dissension
Comments closed after 2 weeks.
#1 Jonathan Snook
Looking good! I think things have come together nicely! One of these days I’ll have to get around to switching hosts and CMS’s. :)
#2 Yannick L.
Well you already know my thoughts on the re-design. Thanks for sharing a bit of what went on in the re-design process. You did a fantastic job.
#3 Ryan Heneise
Looks really good Nathan! I’ve enjoyed seeing the iterations of your site. You do good work.
– Ryan
#4 Shawn Grimes
Great job Nathan. As I already told you I dig how the you varied the number of columns from your home page to your sub pages. I’m glad you didn’t change the colors because I really liked the hues you’ve used here. Keep up the good work.
#5 LifeHut
Looking real good bud. I like it. I also like the top bar about Internet Explorer (as I am viewing this in FeedDemos internal browser).
Very nice :)
#6 Nathan Smith
I’m glad everyone likes the mini re-design. I was afraid people would be like, “That’s not a redesign, it’s all the same colors!” But hey, I like the colors I had before, just not the functionality and layout. So, chalk this up as a CSS reboot, as I’m not sure I’ll have much time to do another for the official November date. I’m glad you like the IE warning too – just a bit of humor to help people make the switch. Between hiding styles on IE Mac and the prospect of one’s eternal security being in jeopardy, it should be phased out.
@Jonathan: I really think you should: 1. Finish GainCMS, or 2. Convert your site to Textpattern, so you don’t have to put up with MT’s licensing and “rebuilding…” rubbish. :)
#7 Travis Schmeisser
Thanks for that body tag class tip! I’ve been tryin to do that, but using “section” in the tag instead. Finally!
#8 Mike
Looks great man! I especially like that you can resize text and it doesn’t botch the layout. Good stuff ;)
#9 Nathan Smith
Travis, you’re welcome. Knowledge belongs to the everyone, and I’m happy to share. Mike, that’s what I was shooting for, thanks. The text doesn’t resize in IE6 though, as I used pixels for sizing, but that’s just an incentive to switch OSX or at least get a better browser. :)
#10 Matt Burris
This is very slick. Good job! Great use of colors, typography, layout, everything just feels right. :)
#11 kartooner
Looks sweet Nathan, love all the little details. I can tell you spent a great deal of time on this.
Hot on the heels of your redesign, I’ll be releasing my own “re-envisioning” soon (give or take a couple months time).
Again, looks crystal clear from where I’m sitting. ;)
#12 Nathan Smith
@ Erik: I can’t wait to see what you’ve got cooking up for a redesign. Hit me up on IM and show me a mock-up (so I can swipe it, and act like you stole my design come November). Seriously though, I’m sure it will rock. :)
#13 James Mitchell
I love the new look. Very nice use of white space, color scheme, yada yada. I can’t wait until I finish my site redesign (no where near this cool, but an all CSS template for Mambo.
#14 Nathan Logan
Sweet, sweet stuff. The design is rockin’ – exceptionally well done. I don’t know what more to say than that, but I’m very impressed. This place is a visual treat.
#15 kartooner
Nathan, I just might do that. :) In the mean time my site has remained pretty stagnant (it’s on vacation), and for good reason. I need to work out the IA first, design second and as you know it takes a heaping load of time to redesign.
#16 Yannick L.
Nathan: Your site was featured on CSS Vault.
http://cssvault.com/gallery/sonspring.php
#17 Josh Dura
Nice one! Love the layout.
#18 Khaled Abou Alfa
Looking good Nathan, love the details here and there. Place has gotten a lot of tlc.
#19 Nathan Smith
Yannick, thanks for the heads-up! I love the comment that’s on CSS Vault: “My only complaint is that the color scheme is, well, hideous.” I agree, my site is absolute rubbish. :)
@ Josh & Khaled: I’m glad you guys like it, as it helps soften the other criticism! Seriously though, both your sites are amazing, and I’m humbled to hear you appreciate my work.
#20 Mike S.
I’m with the others on this one. I’m really digging this updated design. Definitely a job well done.
#21 Yannick L.
Nathan: At least he diggs the IE message.
Any website that contains the phrase “For your eternal security, Internet Explorer should be abandoned.” has my vote :)
#22 Ryan Heneise
Haha – I had to open up IE to see that funny IE message. Very cool! You should make it into a little bit of javascript that everybody can plug into their websites. (You know – like the “Make Poverty History” banner.)
#23 Ryan Heneise
By the way – you might want to change the tabindex order of the fields in the comment form. When you hit tab after typing your website address it takles you up to the top of the page instead of to the “message” textarea like you’d expect.
#24 J. J.
The Flickr badge is giving me a real headache, too, but I think mine is 1and1 related (see my signature link here). My style switcher problem is probably related to 1and1, too; even IOTBS creator, Brothercake, is stumped on why it won’t work for me!
Once I have the time get my beta page up and running, I will definitely take you up on that Dreamhost offer. That’s mighty thoughtful of you.
#25 Nathan Smith
J.J. – Not sure why the Flickr badge is giving you trouble on 1and1. It worked fine for me load-wise, but just had problems in Safari because it was contained within a
ptag instead of adiv. For the Dreamhost offer, I wanted to give the full $97 off, but some plans only allow for $50 off. So, rather than go through the trouble of explaining what amount applies to which, I just went with the common denominator.Ryan, I fixed the tabindex order by the way. If anyone else is looking to do the same, it’s in
/textpattern/publish/comments.phpand the code to look for is on lines 120-140. For some reason, thetextareais set totabindex="1"even though it appears by default below all the rest of them.#26 Jared Christensen
Nice work, Nathan! If you ever find a way to hack tabindex values into the Preview and Submit buttons, let us all know. It’s driving me nuts.
#27 Mike Montgomery
Excellent. Congratulations on CSSVault, too.
Hope the new job goes well.
#28 Nathan Smith
Thanks Mike! We're getting all our belongings packed up, and selling off our mis-matched furniture so we can travel light. So far, all the Albertsons crew has been really great to work with, so I'm excited to get there and meet the team.
Note: For those of you who were curious about tabindex order for comments, Jared has found a fix and posted the tutorial here…
Hacking Comment Form’s Tabindex