Sometimes I surprise myself
Yeah, a major upgrade to this website tonight. And somehow I managed to break composer for my blog posts at the same time. Oops.
Still, I am so happy with the way things turned out. There will be some adjustments over the next few weeks, but I think that overall the redesign is really awesome. I'd love to hear some feedback from people who work in the industry to hear what they thing, too.
And yeah, it might be one or two too many borders, curves or drop shadows. It's my website, not yours! I'll make it however I want! :)
Well, that's pretty simple. This site was running on an old version of an experimental package system that I was developing for bikelove to allow you to share markup between page types regardless of theme or what the actual page type was. It actually worked really well back then. But there have been a lot of upgrades, and it had gotten to the point that I couldn't even get the block that drove the whole thing to save properly. Any thought of fixing it was always met with despair. It seemed like such a huge, impossible task.
Even just modifying a mobile theme last year to make this site somewhat friendly to non-desktop browsers was pretty complicated. I had all sorts of non-standard areas and weird ways of doing things baked in. Which kind of makes sense. I'm not sure what version I started out with when I made the site, but the first time I accidentally did a 'hands off' system upgrade was 184.108.40.206 back in November of 2011. Not a whole lot of time ago, but I have grown quite a bit since then.
So has concrete5, and so has the stuff you can actually do on the web.
Handling The Upgrade
I posted a couple days ago about the fact that I'd upgraded the core on the site. That was the first thing. I didn't want to even think about changing around content until I had the theme working independently of the old system, and the core at the most recent (220.127.116.11) version.
I actually began with the last site that I'd done for a client when I started the redesign. Trust me, the only things that are even remotely close any more are the breakpoints and widths, but even those have changed some. I guess the carat for the mobile navigation is the same, but a different color. I'll change that eventually.
Pretending I'm a Designer
I may not have formal training as a designer or anything, but I do happen to have a copy of the Adobe CS6 suite. So actually creating the few pieces that I needed to complete things was quite easy.
One of the nice things about that is a subscription to typekit for fonts. That gave me a lot of options, and I wanted to use it because I'm paying for it. There were some nice fonts, but I'm actually not happy with the service at all. There's still a flash as the fonts load on the site, and no way to host the fonts locally.
Another issue with using typekit fonts with a concrete5 is they force you to only use the fonts on particular domains. The way that tinymce works, the iframe doesn't have a proper referrer. There were a couple tutorials about creating a custom plugin for tinymce, but it seemed pretty convoluted and I didn't want to mess with the core that much.
Right now, my fonts in the tinymce are just sans-serif for everything, but it's still better than it was. On the old site, it was something like a 10px font size for the editor base, really hard to actually read while working on the laptop. I've since come up with a much more robust, em based typography.css as my 'base' for new sites, and merging that in made a world of difference. It would be nice to actually see the real fonts I'm actually going to be using, though. That's possible with google or font squirrel, but apparently not with typkit. To me, that's kind of a deal breaker. One of my main goals with the upgrade was to get the fonts matching better in the editor.
Adjustments to Sidebar Content
On the old site, I just had everything fully exposed in the sidebar. That sounds a bit dirty... But on the blog list page, it was a huge list of check boxes for filters, then an archive section, some bullshit photo of me and text about who I am. Really, who cares about that? Oh, and there was also a section for 'featured posts' that used jquery cycle to show blog posts that I'd tagged.
Obviously, that wouldn't work for a responsive site. So I made things expand / collapse, with most collapsed by default. The archive shows the years but nothing more. The featured posts (plural) section has become a single post that is randomly displayed on each page load. Also, in the featured post area, the preview thumbnail is hidden under a certain sidebar width, and content is shortened considerably from the original version.
It makes for a much cleaner looking site, while also making the functionality better. I don't think you can get any better than that. Also, most of the content there now is being pulled in from embedded stacks, so it's the same site wide but I only have to update in one place. I prefer embedded stacks over global areas because it means that a lower-level content editor can be kept from modifying key parts of the site, and because it keeps your editing experience clean. You can also then combine your js and css into fewer files as a part of your theme, instead of each block adding a 15-50 line file to the header of footer. The fewer http requests, the better, right?
There's another program called Kuler from Adobe that can help you find color palettes.. I basically searched Kuler for the most popular color schemes and copied maybe the 10th in the list. I did end up modifying it a bit, but overall it's pretty close to what I started from. I ended up throwing away a couple colors and changing a few others. But it gave me a good base.
I actually got a lot of the way through the redesign without many graphics at all. The only ones I was using were list element and the header navigation carat. Seriously, that was all. I was kind of liking the totally minimalist no-images ideal of it, but when I was working on things today I decided that I needed to do more than just a gradient for the page background. I turned back to that 'google' tool, and found this pattern generator pretty quickly. The thing that was really cool about it was that it let me plug in the colors from my design into the pattern, so when I downloaded the PNG, it fit perfectly. I'm kind of broke until tomorrow, but I'll be sending the author some cash for making such a great tool. It does kind of suck that he asks for cash so loudly, though - every few actions on that site you are prompted to donate.
Once I had that background, it was like the whole site started coming together. I'm probably going to modify the content area to use another version of the file instead of transparency, possibly the same for the header. But like The Dude's Rug it just tied the whole site together. I changed the background area to be translucent, and put corners on it and a top/bottom margin as well. A fixed gradient background at the top of the page, and then shadows and a solid color for the page header / logo and it was like DAMN - what the hell happened? Suddenly this site just looks amazing!
Is it actually sexy to other designers?
I didn't pay too much attention to the trends (I'm totally a bad-boy rebel that way) but I saw a few different fonts I liked suggested as 'hot' for 2013
If I did pay attention to trends, there would probably be a lot less rounded corners and drop shadows. I've always liked those, it's kind of hard to stop using them. But they work with the background, and I was having fun with them, so I think they will stay. Maybe becoming a bit smaller diameter.
I'm hoping it's actually good. I paid a lot of attention to padding and margins, line spacing, etc. It's totally responsive, and I've tested on most screen sizes. I do need to check it on a bunch of different browsers, but to be honest, I'm 90% sure that it will work perfectly or almost perfectly on almost any site. At the risk of sounding cocky, I find almost everything I'm writing these days to be almost completely cross-platform with no modifications.
High Tech Retro
There are probably not a lot of people that remember it, but one of the previous incarnations of this site (or was that just a custom theme for blogspot?) was "Jeremy's Boring World"..For a lot of reasons, that's long since gone, but part of what I liked about the fonts and the colors that I found is that they reminded me a lot of the theme that I had back then. You can see it in what I had up here at the time, the 'blogroll' sidebar that showed on the other site, and on this one as the main page - this is from so long ago...
It's different, but the text font is quite similar, and the beige / red is similar. It gave me great memories of being back then working on stuff. Thinking how much I've improved. How pretty much every dream that I had back then for a way of making websites is now my main bread and butter. It really feels like coming full circle.
I know it's a really good start, and for 3 days it's a huge amount of work. Honestly, I was getting a bit, um crazy pants when I was working on it. I was working pretty much all day, doing nothing else. Trying to stop for food, making food, then finding myself unable to eat it completely, because it would get cold. I wanted to just eat dinner and enjoy it, but was 100% consumed by the project. I'd try and start watching movies or TV shows and have to pause them to work, too.
Still, when I think about it, it's what, 2 days for this theme? I know it's not perfect, but it makes me think that maybe just turning other people's designs into websites shouldn't be my main focus. A bit more work on the 'base package' and I should be able to actually come up with 2-4 of these a week if that was all I was doing. I mean fully marketplace ready, compatible with a bunch of different add-ons that people use regularly...
I've done so much on process automation, but it's been years and years. When I made the older version of the site theme, it may have been kind of outdated now, but the process was 100% sound. And with what I know now after 2-3 years of making themes for other people? And learning about best practices and how concrete5 works?
Ooh baby, I can do such amazing stuff.
Not sure if I'll have time to, but yeah, I think I'm going to have a couple themes in the marketplace soon.
Adjustments To This Site
Like I said, I don't 100% like the fonts. There will be some adjustments there. Probably a bit to the shadows and borders and stuff, too. I've already noticed a couple places where the margins are off. That's kind of what comes with just modifying a theme like this. I will probably change the way pagination and sharing are done a bit too.
I kind of ignored the whole footer area, too. So I need to put content back in there. Kind of wanted to figure out what to put there first.
There are actually a lot of areas of content that I want to adjust, I went back through a lot of old pages previewing things and realized that I really should have updated things quite awhile ago. The about pages are way out of date. Chai needs a major face lift for as much traffic as it's getting. The home page could probably use an update, too. The contact pages probably need help as well.
The portfolio section has been completely hidden temporarily. Honestly, it wasn't very representative of my current skill set, and was heavily locked into a really really early version of attributes slider. I want to update it to use a different format. Probably one that will work better on mobile. Well, for sure one that will work better on mobile. It's actually been hidden on the current 'mobile' site for as long as I've had it. So a lot more focus on the things that I'm actually doing now and not sites that I've done for other people.
I actually really wanted to do this first bit of upgrading so that I could get to the final upgrade that I've been dreaming about for a few months. Everything is made into a much more modular format, so I can start doing almost whatever I want with it. I've been wanting to move to a structure that allows me to make kind of 'quick posts' that are links to things that I like or split-second thoughts. With much shorter previews, in an ajax filterable list similar to the current one for the blog, but more options and not just a linear up/down list for the output.
Overall, I'm really, really happy with the new site. Actually kind of optimistic for the future with it. The last few months, I'd actually been thinking about completely just destroying it and starting over. I like doing that. Burn everything to the ground and start over. I'm going to be doing that a lot in coming months, a year from now and the world I live in is going to look almost nothing the same. I seriously doubt I'll be living in the same city. Ideally, I wouldn't even be living in the US. I don't know what I'm going to be doing or where, but I feel change coming soon.
I could be totally wrong. That's kind of how things go for me. But I feel like I'm going to start destroying the universe again, shifting galaxies instead of stars and planets. I'm not sure if earth is ready.