Did you ever receive an email from the client with something like: I would like lots of Light Salmon color in the header? Bet you did. Guess you stared at the screen with – What the f…(?!) look. Well, here is the solution.
I’ve found a perfect place where all the weird color names live and are translated to the language we understand – hexadecimal.
Many visitors of Array Studio Workshop were more then interested in the Golden Ratio post. Even though I promised more material about it, I couldn’t find enough time to conduct a research. Until now. I don’t intend to bother you with more theory, but rather to show you how to use it in practice.
Since we’re using WordPress regularly, we thought that creating a WordPress theme based on Golden Ratio rule will have two pretty good points:
We’ll have a theme just the way we want in Golden Ratio
We’ll present the actual way how you can use Golden Ration in design.
We also wish all of you to participate with ideas and comments!
So, for start here are some written in stone rules we will keep in mind throughout the process.
Golden rules for creation of Golden Ratio WordPress Theme
Rule #1: Theme must be functional, practical & user friendly
This basically means that we’ll round some numbers, we’ll think about the most common ad spaces people use, we’ll make the font sizes readable, etc.
Rule #2: Website shouldn’t be wider then 960 pixels.
This one is pretty understandable – it is a safe width for most screens.
Rule #3: Simple is good
We’ll make the main theme as simple as possible, so it can be upgraded later.
Here is our initial, rough-rough composite.
I personally enjoy 3 column design for blogs, with the main column on the left hand side, and the 2 smaller ones on the right. In order to follow the Golden Ratio rule, two side columns should be in different width. However, nowadays you need at least 160 pixels for the far right column (since that is the place for adverts, and the 160 pixels is what we need). We also need some margin space on the left from that column. Let’s say 20 pixels will do.
Now let’s do some math
So, we have:
160+20 pixels =180 pixels (for the right hand sidebar plus spacing)
Now, let’s calculate the second sidebar:
180 x 1.618 = 291.24 pixels. We’ll round that up to 290 pixels.
We’ll take our 20 pixels back, so we’ll have 270 pixels for the second sidebar.
Now it’s time for the main content.
290 x 1.618 = 469.22. Again, we’ll round it up to 470 pixels for the main content.
This space is enough for the 468×60 regular banner ad, which you might use as well.
However, when you calculate the sum, you’ll get:
160 + 20 + 270 + 20 + 470 = 940px
That’s absolutely fine, since we have 960 pixels defined as a safe maximum width. So, we’ll decrease the original value for 20 pixels.
So, by applying the Golden Rule, we have a 3-column WordPress theme with the: 470px column, 270px column and 160px column, by looking from left to right.
What about the header & footer?
For the header at this stage, we used simple calculation. For the top part, where the logo and navigation bar should be, we took 100 pixels. Bottom part of the header is 160 pixels high.
For the footer divider, we’ll continue this array of numbers.
160 pixels x 1.618 = 258.88. We’ll use 260 pixels for the footer height.
Till now, we have defined the main sections. In my next post, I’ll deal with the font sizes. Your comments are more then welcome.
As you can see, we have finally redesigned our website. It took us about a year to do that. Well, to be honest, redesign was done some 300 days ago, but we just couldn’t find the time to integrate it. (Yeah, same story every time…)
Our site’s design is not the only thing changed in our company. If you check our team page, you’ll see some news – Array Studio is no longer in back-end programming business. We leave that part to our partner companies, yet we are 100% focused on the creative part of the Web Development, like usability, front-end programming and of course – design itself. Our former co-founder, Slobodan, now has his own company now, and we wish him the very best.
So, to keep us busy, we have opened a print design section. You can see some of our works on our portfolio page. You’ll find our updated web design portfolio there as well.
That’s all for now. Hope you didn’t give up on reading our blog in the past 2 years.
I’ve been catching up on my blog reading and I’ve stumbled upon an article describing a great new feature in Edge Rails that lets you add annotations to your code. You can use TODO, OPTIMIZE and FIXME to mark parts of your code. Then you can use rake notes to list annotations – which is great since you won’t miss any of the notes you made.
The only problem is that this is still in only in Edge Rails, i.e. it’s not yet in stable Rails release. But there’s a really simple way to add source code annotations rake task to non-Edge Rails app:
Today I stumbled upon a newish MySQL feature that can often be very useful. Since MySQL 4.1 there’s a non-standard feature (i.e. it’s an extension of SQL standard and won’t work on other databases) that lets you insert a new row, but if it happens that a row with same primary/unique key already exists it will just update that row.
Insert query syntax looks like this:
INSERT INTO table (primarykeycol,col1,col2) VALUES (1,2,3) ON DUPLICATE KEY UPDATE col1=0, col2=col2+1
If there is already a row with primarykeycol set to 1 this query is equal to:
UPDATE table SET col1=0, col2=col2+1 WHERE primarykeycol = 1
Ordinarily to achieve the same result you would have to issue an UPDATE query, then check if there were affected rows and if not issue an INSERT query. This way, you can do everything in one step – first try insert and then update if insert fails.
One situation for which this type of syntax is perfect is when you work with daily counters. For example, you might have a table with PostID, Date and Count columns. Each day you’d have to check if you already created an entry for that day and if so increase the count column – and this can be easily substituted with one INSERT … ON DUPLICATE KEY UPDATE query.
Unfortunately there are some caveats. One being that when you have multiple unique indexes it will act as if you had an OR condition in WHERE clause of UPDATE query. This means that multiple rows should be update, but INSERT … ON DUPLICATE KEY UPDATE will update only one row.
I simply enjoy this kind of stuff. Specially if client doesn’t have any specific color scheme request. This color cycle is easy to use and you can generate great color schemes, if you know where to click.
First, click on the buttons below the cycle and choose from (Mono, Contrast, Triad, Tetrad and Analogic). Then, play around with colors and see what you’ll get. Use variations to set the colors perfectly. There is also a simple preview where you’ll be able to see how colors fit. I prefer dark and light pastels myself.
Over a year ago I wrote about an excellent script called Niceforms and little fix I wrote (see NiceForms with even nicer select). Now a final version has been released – Niceforms 1.0 which solves a lot of problems from previous version.
I still haven’t had chance to look at the new improvements but it seems that Niceforms now supports keyboard only navigation, scalable buttons, increased browser support, etc.
Unfortunately it still has some of the problems I tried to fix more than a year ago. Granted they tried to fix it, but it still has problems. For example, when you click on a select element if you move over some options and then move out it will immediately close the drop down. On the other hand if you open select element and don’t move over to any options (i.e. click on down arrow), but you move the mouse away from it – the select will remain open, which can again lead to strange effect where you can have a lot of open drop downs.
Perhaps that can be fixed in future versions – or at least I will try to make a patch for it.