Web design by the trends

As Pass#2 is still progressing nicely (I think I’ve solved some recent problems rather well), a few other non-compiler related issues have risen – and why not, it’s refreshing to do something else for a change. These issues concern about the website of current coolbasic.com, and I also made some improvements to the blog. For reference, both rely on PHP technology of which I have moderate experience as a developer. But first, let’s prelude the article:

So what’s wrong with current coolbasic.com? If you remember the original website, you’d agreed with me that it was quite outdated from both design and technical points of view. General designing trends (these include the look and feel of the page, as well as way of navigation) tend to go together hand by hand with standards set by the current generation of Operating Systems. They show the road, they define the brands, and they set the rules what is “cool”. This phenomenom is best illustrated by studying the average color saturation and spectrum of hues of webpages, and then comparing them to color scheme of, say, the latest Windows. By no means, I’m not drawing too genral point here – of course websites vary a lot! But reasons for these often origin from how business works… It’s all about money, and therefore webpages (especially large, enterprise level ones) do not update as frequently as they’d like to. Of course Operating Systems want to make as positive a first impression as possible, and that’s by defining the new design so that the consumers would get a concrete evidence of change. Not many people are interested in a listing of improvements. But if the Internet gets filled with good looking images of what the new version would look like, it’ll hook people’s interest. Today’s market absolutely require competitive esthetics of a new product. The proof is there: remember the looks of Windows 3.1 compared to DOS? Remember how Windows 95 revolutionated the usage? Remember the graphical innovation of a Windows XP? And now we have the cutting-edge candy – Windows Vista. And that’s only the Windows’ part, Mac OS is quite good-looking too!

Enough stuttering
The original coolbasic.com website had the (now considered narrow-minded) trend of a Windows 2000 -style square layout, and medium saturated color scheme. Graphics didn’t play as outstanding a role as for what we’d have seen for the XP trend. In other words, text was the dominating element of the first glance. The page consisted of a “title bar” (featuring CoolBasic logo), a typical top-level side-by-side menu, the actual content of the page, and the footer (which essentially only had a copyright notice and a bottom margin). And since the “defining logo” of CoolBasic is the “Ice Cube”, the color scheme was “cool as lightish blue”. I also have to admit that the text contents of the website followed a poor design, too. Not in a complicated sense, but more like it lacked everything that makes navigation “good” and “nice to use”. Not really phenomenal web design… and it was a pain to maintain too, because of no dynamic content generation PHP would normally be perfectly capable of. All this happened a few years ago. Back then I also lacked the skill and perfection of CSS styling. I should have redesigned the website before I took the famous few years off from the CoolBasic project. And that crappy site page remained there for.. what.. is it like 3 or so years!

So when I did come back (and started designing the concepts of CoolBasic V3) in summer 2008, I wanted to get rid of that awful website that was by no means not by the trends of today at all. The original plan was to quickly construct a simple place holder webpage (the current one) which would give me enough time to compose a proper one. I had a cool vision on how the CoolBasic V3 brand would look like. But why ruin the element of surprise (the brand) by introducing the new website beforehand? Also, it’s good to keep the design somewhat close to the current product (Beta 10 of the old CoolBasic generation) until CoolBasic V3 is really knocking on the door. So I decided to refrain from releasing anything related to the new brand until I make it all official some nice day where the CoolBasic community will wake into the wonderful morning of new cool era.

Sooo… no new website brand until CoolBasic V3 alpha. Well, I’m not really happy with the current place holder either. Since the intention was to quickly construct a temporary webpage just to dump the old one, I must say that I could have done a better job at it. It doesn’t pass XHTML 1.1 validation, and all in all it has some elements that are now considered “obsolete” or “outdated”. I already heard some nagging about it, so during the next weekend I intend to build yet another place holder webpage, but in better quality this time. It will be designed to last until introduction of CoolBasic V3. Soon after it’ll be replaced with the the final website (of which I already have templates made).

Improving the blog
Since we’re on the business of software development tools, namely game making IDEs, and because CoolBasic is our only product as it stands, and because CoolBasic just happens to be a programming environment, I will be pasting a lot of code snippets to future-coming blog entries. WordPress sure has the “code box” feature, but text inside those elements will just render fixed width, and easy-to-read “coding” characters. There is no further styling, and it can’t handle text indentations properly. On top of that, long lines will wrap annoyingly, and long code makes it irritating to read other blog entries. Fortunately there are lots of syntax highlighting plug-ins available for WordPress. I found one rather popular and seemingly working highlighter called “Google Syntax Highlighter” by Alex Gorbatchev and Peter Ryan. This awesome plug-in enables me to paste CoolBasic V3 code snippets, and they get fully syntax highlighted and text indentated within the blog. I created a custom language brush specialized in CoolBasic V3 syntax, and according to my tests it’s currently working like a charm.

However, there are some limitations with the highlighter. When I wish to paste a code snippet, the code must be written like this:

<pre name="code" class="cb:nogutter:nocontrols">
// Insert code snippet here...
</pre>

Otherwise the component would render an annoying line numbered left margin (the “gutter”) to the code, and a stupid “tool box” that has quick links for printing and stuff like that. In order to remove those, I had to write some overriding code to the java script engine of the highlighter. The new presentation is now:

<pre name="code" class="cb">
// Insert code snippet here...
</pre>

Also, all code boxes now appear inside a scrollable box (with its max height limited). No more gigantic and hard-to-read blog pages ruined by long code snippets. After these modifications only one thing needed to be fixed: Most browsers break lines with a hyphen, into several lines. Other characters with similar behaviour include common coding separators such as opening parentheses and commas. Scrolled area also appeared ill-colored with the default styling. I solved both problems with customized CSS. You’ll see the code box control in action in future-coming blog entries.

Comments are closed.

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress