02/07/10 02:42 (about 66 days ago)
799 words
I like being creative. I like to express myself. Most of the time, this goes in to designing, writing software and my newly found hobby; taking photos.Today I unveil my newest creative expression hub: this website. I have not been writing for a long time. It never really sticks with me when I first get started. But I have missed it, and is convinced that this time will be different. Especially because of the blurbs-functionality build in to this blogging system, which makes it so easy to be a blogger. I don't need to be highly productive, writing articles on articles every single day. I can just find something interesting, write 1-3 lines about it and share it with a link to its origin. Blogging has never been easier!
A Process
I should maybe tell you a little bit about this new website I have created.
First of all, it took three days of planing, 3 days of creating and 1 day of making some content for it, so it didn't seem dead empty upon release. I have written it from the bottom up, taken advantage of the Mootools Javascript framework, and a handfull of PHP tools I have written myself that I literally use in all my projects - time savers, you may call them. I am using Eric Meyers CSS Reset.
The philosophy of this project was great code. I wanted a project that I could look back on and be proud, and I therefore set some goals. 'Clever hacks is the way' and 'simple UI is poweful UI', but the number one target was a layout that worked across as many screens as possible, but without creating anything targeted at a specific device or browser.
The Flexible Layout
The way I have constructed this site took a bit of tinkering, because if the whole layout should be able to change from one thing to another, the mark-up of the HTML should be created accordingly. Else, I would have to jump through burning hoops to get it to work, and end up with a not-so-flexible layout anyways. After that was done, I created the default look of the page, just as you normally would do, but now comes the funny part! CSS Media queries: they are like an if-sentence in CSS, although limited to specific properties like screen/device width and height.
I have made some pointers to scale the typography of the site. For example, when the width of the browser is wider than 1024px, the font will grow 5%, and when the width is narrower than 800px, the font will have a 5% decrease.
@media screen and (min-width: 1024px) {
body { font-size: 105%; }
}
@media screen and (max-width: 800px) {
body { font-size: 95%; }
}You can read more about what you can do with CSS Media queries at the Mozilla Developer Center.
The most noticeable flexibility act, is the layout of the site. This is the default look.
Now the browser is narrower, not enough for the font to decrease though, and because the left sidebar is at a fixed position, if we decrease the height of the browser any more, the text will start to disappear out of scroll-area.
So the text started to disappear. But you don't experience that, because instead of just being unavailable and dumb-looking, the text jumps down and joins the flow of articles and blurbs, as seen in this next screenshot. Nice and tight!
When the width of the browser hits lower than 600px, (mobiles, etc.), the layout changes completely to a single-column, mobile and small devices optimized layout.
Now I have a webdesign that works across a multitude of devices and screen sizes, and this was achieved with only 97 additional lines of CSS. Go do it yourself - it definetly pays off!