The new blog design is finally up. It’s still not finalized, as there are some features and content missing, but even at this “beta” stage it’s already a big improvement over the old one. I already talked a bit about some of the changes made to the design, the layout and the content, but the new look is just a small part of the redesign, a lot of work has been done on the back-end as well and as you might have previously read a lot of it has to do with using semantic HTML5 elements to structure the website. On top of that I made several changes to how I manage and organize content, as well as, optimized the code. Read more »
How to do a header without a header — tiny solution to a big problem
I recently had a post in which I talked all about how the name of the site should really only use <h1> on the front page, and on the other pages it should take a backseat to whatever header the content has (post title for example). Well, I just ran into a problem related to that approach with the new design. Before I proceed though I must confess, the title of this post is sensationalist because the problem isn’t big. The issue is with the category pages — my design does not include a category title on a category page. Read more »
Site redesign update
So I already talked about the HTML5 rewrite of my blog’s code, but now I want to go over the design and the layout — what’s different and what’s new. Before that I’ll just quickly say that I’m making great progress — basically the main structure and the front page are done and working, on my local server; now I just need to do the individual pages, as well as the single-post page and it’ll be ready to go.
So in terms of the design itself, the new theme is still dark (i.e. white on black) but instead of the bright yellow as one of the main colours, I’m now using pale blue. Despite that the site actually seems to be more colourful. This is because in the current theme I feel that yellow is much too strong to use for titles or links, which means that all the text is white and looks very bland. With the more subtle blue I am able to use it for titles, links, as well as other elements on the page — giving the whole thing a livelier look. In addition to that I plan to use more post images, hopefully infusing the front page with a bit more colour, while still preserving the two-tone theme. You can check out the preview on the left for a closer look. Read more »
Re-writing my blog with HTML5
I have recently started working on a new design for my blog. Initially the idea was to just refresh the look and make the layout more flexible (the current über minimalistic layout doesn’t lend itself easily to adding more types of content, like blogroll for example), but as the design phase was wrapping up and I started thinking about the code I realized that this was a great opportunity to do something I wanted to do with it for a long time — convert it to HTML5. Below I go over the new redesign and some of the ideas and reasons behind the things that I do and the way I do them. Read more »
Cool CSS only buttons
I love CSS because it’s like having Photoshop inside a browser. Okay, maybe I’m exaggerating, but with modern browsers there are a lot of very cool things you can do with just CSS, without needing any of those pesky images with their overheads and extra kilobytes to download. In my work though I don’t often get a chance to try anything really interesting with buttons because they’re either simple, or if they’re not then I have to make them IE (worse yet, IE6) compatible so I end up reverting to mostly images anyway. So I decide to “go wild” and see what I can do without having to care about any of that compatibility nonsense.
Sidenote: Can you imagine if first cars had to be made horse-compatible? Yeah, think about that for a second.
So anyway, this is what I came up with.
Look ma, no images!
Here is a demo of the buttons, pretty much exactly what I used for the screenshot above. I go over the styles after the break.
Blog redesign is done
So the new look for the IliaDraznin.com is up. There were some teething pains (categories disappeared there for half a day or so), but it all seems to be working out now. Biggest addition, other than the new design, is the Syntax Highlighter script, to make all those code chunks look nice.
There are still a few features missing but I’ll be adding those in the upcoming weeks. Anyway, it’s back to our regular scheduled programming now.
Blog changes
Well, it’s been a while since my last post but I’m back and I’ll make sure to start posting more often.
Right now I’m finalizing an all new (and original) design for the blog; it’s gonna be minimalistic and dark. In the meantime I’m also redoing categories, cleaning up the tags and modifying small things here and there, as part of the preparations for the new design.
Using CSS3 @font-face to “fake” multiple font weights
CSS2 specifies additional font weights, beyond Normal and Bold. In particularly there are 9 font weights in total — 100, 200, 300, 400 (normal), 500, 600 (bold), 700, 800 and 900. Unfortunately browsers still somewhat lack support for this feature, but more importantly fonts lack support for this. Many fonts however, still come with only normal and bold weights. Moreover, based on a few tests, even professional fonts that come with multiple weights (such as thin, light, regular, bold, heavy, etc.) don’t actually support these weights in the same way as the CSS2 specification dictates, in other words they can’t be used out of the box like that.
For example, I have the Arno Pro font (a nice serif font from Adobe). It comes in 4 weights — regular, bold, light and semibold. Each is encapsulated in its own file with a distinct name, e.g. ArnoPro-Bold, ArnoPro-Smdb, ArnoPro-Light, etc. I don’t know much about how fonts work but based on a bit of reading I’ve done, for a font like that I should be able to declare a style that uses “ArnoPro” font-family and based on the weight I assign to a particular element it would use a different version. For example, ArnoPro-Light for 200, ArnoPro-Regular for 400 or normal, and so on. However, based on a few tests I’ve done that doesn’t seem to be the case. In fact “ArnoPro” font isn’t recognized at all, only if I specify explicitly “ArnoPro-Smbd” does it recognize the font. And of course when it’s done like that all but the regular version are stuck with one weight, i.e. font-family:ArnoPro-Smbd; font-weight:normal looks exactly the same as font-family:ArnoPro-Smbd; font-weight:bold.
In short, the situation is less than ideal. However, there may be a at least a partial fix. Read more »